Homepage
Login
Profile
BookClubs
dmBox
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?
Free books android app tbrJar TBR JAR Read Free books online gutenberg
(1)More posts by @Bryan
1 Comments
Sorted by latest first Latest Oldest Best
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!
Free books android app tbrJar TBR JAR Read Free books online gutenberg