• Print

Responsive eBook Content

Responsive design isn't just for margins and font size; here's one way to rethink content display for multiple reading devices

Joe’s post about graceful ebook degradation inspired me to share an example of responsive content that I thought of while brainstorming with my ebook dev colleagues here at O’Reilly.

Much of the way authors present content is based on what they know is possible with the printed page. But the page has changed—it’s no longer the rigid, rectangular object it once was. It’s important to think about how best to present your content given these new boundaries—one of the key aspects being that these boundaries change. The same reader might look at your content on a large monitor at work, and then switch to her mobile phone on the train home.

Tables are a specific example of content presentation that needs rethinking. Data is often presented tabularly simply because it’s an efficient use of space (and printing pages can be expensive), or because the information is easier to absorb at a glance when presented side-by-side. Unfortunately, large tables are hard to replicate on the digital page. Cutting down the pagecount is irrelevant, and even if the device allows horizontally-scrolling tables or other hacks to fit the content on the screen, the original benefit of having content that is easily absorbed at a glance is lost. (I’m not saying all tables are evil; of course there is true tabular data.)

But what if you included both a tabular and non-tabular display of the same information in your file, and then used media screens to dictate which version to display on which device (or, in an html5 world, on which screen size)? In our table example, imagine that you had a tabular display, like this:

<div class="tabular">
<p>Table 1. Pros and Cons of eBook Formats</p>
<table>
<thead>
<tr>
<td>Mobile format</td>
<td>Pros</td>
<td>Cons</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mobi</td>
<td>Access to Amazon store; mostly cross-platform (with Kindle App)</td>
<td>Limited tag support; disparity among devices/apps</td>
</tr>
<tr>
<td>ePub</td>
<td>Open format; broad formatting support; cross-platform</td>
<td>Different platforms have limited support</td>
</tr>
<tr>
<td>PDF</td>
<td>Print-fidelity; always single-source</td>
<td>Not reflowable</td>
</tr>
</tbody>
</table>

Immediately followed by a non-tabular interpretation:

<div class="nontabular">
<p>Pros and Cons of eBook Formats</p>
<ul>
<li>Mobile format: Mobi</li>
<li>Pros: Access to Amazon store; mostly cross-platform (with Kindle App)</li>
<li>Cons: Limited tag support; disparity among devices/apps</li>
</ul>
<ul>
<li>Mobile format: ePub</li>
<li>Pros: Open format; broad formatting support; cross-platform</li>
<li>Cons: Different platforms have limited support</li>
</ul>
<ul>
<li>Mobile format: PDF</li>
<li>Pros: Print-fidelity; always single-source</li>
<li>Cons: Not reflowable</li>
</ul>
</div>

Both of these presentations exist side-by-side in your text. For the displays where you want the tabular version, you use media queries to set div.nontabular to “display: none;”, and vice verse. The content itself will then adapt to the reading device, presenting the reader with a table where space permits (as dictated by you via media screens), and a linear flow of text when the screen gets too small.

For example, your CSS file might look like this:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* Styles for the iPad */
div.tabular {
display: block;
}

div.nontabular {
display: none;
}
}

@media only screen and (max-device-width: 480px) { /* Styles for the iPhone */
div.tabular {
display: none;
}

div.nontabular {
display: block;
}
}

Here are a couple screenshots of the above code in action:

iPad:

iPhone:

Of course, there are technical limitations to this kind of approach right now. For example, these kinds of detailed, screen-size-specific media queries are new to CSS3 and thus are only valid in ePub3, and ePub3 support is still fairly limited across all the different reading devices (there are fewer issues if you’re thinking of streaming html5 books, as browser support for CSS3 is currently somewhat more consistent than in eReader devices). But the point stands that responsive design isn’t limited to just margins and font sizes, but can apply to the content itself. Hopefully this inspires you to think about new ways to present your content, and to make it work across multiple displays.

tags: , , , , ,
  • http://ebooknoir.wordpress.com eBookNoir

    This could be hugely beneficial to say nook and other eReaders that aren’t true tablets with screens smaller. Wonder if you could even swap in an image instead of list for table… Might be instances where that could be helpful.

    • Nellie McKesson

      I think you could definitely do images instead of lists–the key is the custom div wrapper. The only trick with images is that you run the risk of bloating the file size (and of course the debate about the efficacy of tables-as-images), but otherwise, seems totally reasonable.

  • http://twitter.com/skybondsor Jordyn Bonds

    Why not go all the way with the idea and have the same HTML for both views, thus reducing redundancy? One could, for example, use unordered lists, as you’ve done, but nest in definition lists for the contents. Float the list items left with a width of 33% each, set display to block for the li:first-child DTs, and display none for all other DTs. Then you’ve got a table-like view of the exact same data.

    • Nellie McKesson

      That’s a great suggestion, Jordyn, and I can’t think of any reason off the top of my head why it wouldn’t work. The CSS would be a bit more complex, and would require some more careful testing across the different eReader devices, but the benefit of reducing the data in HTML might be worth it.