Digital design and other shiny toys

Testing OS X 10.10 Yosemite for real work

Posted on by Paul

I’ll install OS X 10.10 (Yosemite) when it’s released, but it would be handy to know what works and doesn’t beforehand. To test it out safely I downloaded the OS X 10.10 beta and installed it on an external drive. I allowed the installation process to migrate applications, settings and documents from the main drive, so I have the same set-up as before, but an upgraded OS. I don’t have time to test everything, but here’s what I found so far. (Please note this is an idiosyncratic list, as it reflects my illustration, web development and 3D work.)

Applications tested with OS X 10.10 Yosemite beta

Adobe CC 2014 applications such as Photoshop, Illustrator and Dreamweaver

Work fine, but you’d expect this as they are brand new and constantly updated.

BBEdit

Works fine. This was a relief because I’d be stuffed if it didn’t work. I do a lot of coding in BBEdit.

Coda 2

Seems okay so far.

CodeKit

No problems.

Fuse

Seems okay.

Keyshot 4

Works okay.

Sigil

Still works, but development has ceased so it will die at some point. This is a right bugger. Probably time to move the rest of my ebook work over to InDesign.

MarvelousDesigner 3

Works okay, but should do as I’m paying for a subscription.

Microsoft Word 2011

Some minor UI issues but seems to work okay.

Modo

No problems so far.

Parallels Desktop

Re-installed itself on first start, but seems okay now. (Version 10 has now been released.)

Poser Pro 2014

Quirky as ever, but no different from before.

Scrivener

Okay.

Substance Designer

No problems.

Toast Titanium 11

Seems okay. I know there’s a new version, but it doesn’t offer me anything new.

VirtualHost X

The application works fine but, as ever, my server settings have been stomped. That will be another couple of hours getting it all working again.

Wacom Tablet

Tested in Photoshop and all seems okay.

ZBrush

Hangs on launch, unresponsive. I hope there’s an update soon.

Unity 4.5

Seems to work, but there’s a big upgrade to version 5 coming soon anyway. (Version 4.6 is now in public beta.)

Posted in Mac | Tagged , , , | Comments Off on Testing OS X 10.10 Yosemite for real work

Science Fiction Writers Sampler 2014

Posted on by Paul

The Science Fiction Writers Sampler 2014 is now available as a free ebook. You’ll find short stories, excerpts, interviews, biographies, and a cover illustration by some bloke called Paul Drummond.

Links

SF Sampler 2014

Further information

The Science Fiction Writers Sampler 2014 is edited by David Conyers (www.david-conyers.com) and David Kernot (www.davidkernot.com).

Improving table display in ebooks with responsive design

Posted on by Paul

Displaying tables in ebooks is like designing for mobile devices in that we don’t always know the display size. Data tables that work well on an iPad or Kindle Fire will become unreadable on a smaller device such as an iPhone.

I recently completed three ebooks containing multi-column data tables. The client was keen to make these readable on small displays so I borrowed some responsive design techniques from my web development work.

HTML

First I created the tables using standard HTML:

<table>
<thead>
<tr>
<th>Product Name</th>
<th>Product Type</th>
<th>Product Code</th>
<th>Width</th>
<th>Height</th>
<th>Weight</th>
<th>Colour</th>
<th>Price</th>
<th>Shipping Options</th>
<th>In Stock</th>
</tr>
</thead>

<tbody>
<tr>
<td data-title="Product Name">SP56</td>
<td data-title="Product Type">Sprocket</td>
<td data-title="Product Code">GJ903</td>
<td data-title="Width">45mm</td>
<td data-title="Height">50mm</td>
<td data-title="Weight">600g</td>
<td data-title="Colour">n/a</td>
<td data-title="Price">£5.00</td>
<td data-title="Shipping Options">Standard</td>
<td data-title="In Stock">y</td>
</tr>

</tbody>
</table>

Note the data-title attributes on the td elements. We’ll come back to them in a moment.

CSS

Then I styled the table as normal using CSS:

table {
margin: 1em 0 2em 0;
border-collapse: collapse;
border: solid 2px #000;
page-break-inside: avoid;
}
table tr {
border-bottom: solid 1px #000;
}
table th, table td {
text-align: left;
margin: 0;
padding: 0.2em 0.5em;
vertical-align: top;
}
table th {
background-color: #000;
color: #fff;
font-weight: bold;
}

Nothing out of the ordinary here. We end up with this:

HTML table

This works on wide displays but on a small device we get this:

HTMl table in iPhone 1

Turning the device on its side helps, but it’s still hard to read and content is clipped:

HTML table on iPhone 2

Media Queries

Using media queries we can detect smaller displays and give them custom CSS to restyle the table:

<link href="../Styles/small_display.css" media="only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)" rel="stylesheet" type="text/css" />

Smaller devices get the following extra CSS:

table, table thead, table tbody, table tr, table th, table td {
display: block;
}
table {
border: none 0;
font-size: 90%;
}
table thead, table tr.sub_header {
display: none;
}
table tr {
border-bottom: solid 1px #000;
}
table tr:nth-child(even) {
background: #eee;
}
table td {
border-bottom: solid 1px #000;
position: relative;
padding-left: 50%;
white-space: normal;
text-align: left;
}
table td:before {
position: absolute;
top: 0.5em;
left: 0;
width: 48%;
white-space: nowrap;
text-align:left;
font-size: 80%;
font-weight: bold;
content: attr(data-title) ": ";
}

This turns the table rows, headers and cells into block level elements so they are shown on separate lines, restyled to suit. However, the clever part is the table td:before selector which takes the value of each td element’s data-title attribute and adds it to the page. Now each table cell has a label:

HTML table on iPhone 3

HTML table on iPhone 4

It’s now easier to read the table data on a small display. However, it’s not perfect because the information is spread across multiple pages, making it harder to compare table rows. Also, the table cell labels do not wrap, so very long ones will overlap the content that follows.

Of course, we’re also waiting to see if the ebooks are accepted. Using data- attributes might invalidate them. Also, it doesn’t work in iBooks on the Mac.

It’s possible to implement this on the Kindle too. In the media query replace only screen with amzn-kf8 to limit the CSS rules to newer devices such as the Kindle Fire. (Older Kindle devices will simply hide the table if you allow them to apply the CSS.)

<link href="../Styles/small_display.css" media="amzn-kf8 and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)" rel="stylesheet" type="text/css" />

You could also apply this technique to tables with a specific CSS class for extra control.

There’s lots of information about this topic online. I found these articles particularly helpful:

UPDATE: The ebook was approved by Apple, so looks like it’s okay to use media queries in this way. I also heard from another developer who tried this technique that her ebook was accepted by Amazon.

One foot in front of the other

Posted on by Paul

I don’t do a lot of fantasy illustrations, but here’s a work in progress. You can see it’s changed slightly from the early sketches, but the basic concept is still the same.

City gate work in progress image

City gate early sketch

Posted in Illustration | Comments Off on One foot in front of the other