7

What design patterns, best practice etc. exist for responsive web design of ebooks? I am creating an ebook with HTML5/CSS3/JavaScript that should be readable well at different devices (browser, tabled, smartphone...) with different sizes and capabilities. As far as I understand responsive webdesign, one can show, hide, resize, and relocate content in different forms depending on the device that an HTML page is viewed on. This question asked about how to simulate different device sizes for preview.

So far I have found people talking about the possibility of responsive design for ebooks but no good examples or guidelines. I think that table of contents, headers, images, captions, and footnotes are good candidates for responsive design, but how to show them at which devices for best readability and usability?

Improve this question

1 Answer 1

Reset to default
3

The problem with trying any really interesting design elements (like responsiveness) in ebooks is that the main reading systems out there are amazingly primitive by web standards. JavaScript support is more or less confined to iBooks at present, and the only system that uses media queries that I know of is Kindle, and they only support the amzn-mobi and amzn-kf8 selectors. A few reading systems will support some CSS 3 elements like border-radius, but mostly you're stuck with the older stuff. On top of that, many reading systems (like the nook) will by default ignore the publisher's CSS file completely and use their own stylesheet instead.

If what you're looking for from responsive design is the text conforming to the screen size, though, you can certainly achieve that through good markup and simple CSS. Make your markup as semantic as possible, and use semantic elements rather than styles, since many systems will ignore, for example, a style that bolds some text, but will happily bold anything in a <b> tag. If you're going for a wide array of devices, keep things as simple as possible. In general, think of the web circa 2000.

If you're targeting a specific device, you can do some more interesting stuff. The first lesson here is: know what specific devices and reading systems you're targeting.

If you have specific questions about any of the areas that you mentioned in your post, feel free to ask more questions!

Improve this answer
4
  • Thanks for the detailed description for the case of specific ebook reading devices. However, I was mainly interested in ebook design for standard HTML browsers in tablets, desktop screens, and mobile phones.
    – Jakob
    Mar 29, 2014 at 13:52
  • All of these same considerations apply regardless of the device you're dealing with; in order to read an epub or mobi/KF8 file, the phone, tablet, or whatever needs to have a reading system--you can't just use a web browser. There are epub reading plugins available for Chrome and Firefox, but as fast as i know those are desktop only.
    – Tom
    Mar 29, 2014 at 15:39
  • Of course you can just use a web browser - if the ebook is published in HTML (in contrast or in addition to other forms such as epub, mobi, PDF...)!
    – Jakob
    Mar 30, 2014 at 18:38
  • Ah, then you mean something different by "ebook" than I do. To me, what you're describing is a web page rather than an ebook, but that's neither here nor there. I'm not aware of any specific design conventions for the sort of thing you're talking about; my only input would be that you should make sure to use good semantic markup for screen readers and other assistive technologies.
    – Tom
    Mar 30, 2014 at 22:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.