Answers.Body: <p>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 <code>amzn-mobi</code> and <code>amzn-kf8</code> selectors. A few reading systems will support some CSS 3 elements like <code>border-radius</code>, 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.</p>
  
  <p>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 <code>&lt;b&gt;</code> 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.</p>
  
  <p>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.</p>
  
  <p>If you have specific questions about any of the areas that you mentioned in your post, feel free to ask more questions!</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-29T13:52:59.593Z
Answers.Text: 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.
Answers.UserDisplayName: Jakob
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-29T15:39:33.017Z
Answers.Text: 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.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-30T18:38:28.957Z
Answers.Text: 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...)!
Answers.UserDisplayName: Jakob
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-30T22:13:55.643Z
Answers.Text: 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.
Answers.UserDisplayName: Tom
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-03-29T09:29:17.197Z
Answers.LastActivityDate: 2014-03-29T15:44:14.293Z
Answers.LastEditDate: 2014-03-29T15:44:14.293Z
Answers.UserDisplayName: Tom
Body: <p>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. <a href="https://ebooks.stackexchange.com/questions/986/browser-tools-to-test-custom-viewport-sizes/988#988">This question</a> asked about how to simulate different device sizes for preview.</p>
  
  <p>So far I have found people talking about <a href="http://toc.oreilly.com/2012/08/responsive-ebook-content.html" rel="nofollow noreferrer">the possibility of responsive design for ebooks</a> 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?</p>
  
Tags: <html><display>
Title: What design patterns exist for responsive web design of ebooks?
UserDisplayName: Jakob
ThreadText: # What design patterns exist for responsive web design of ebooks?
  
  (Asked by: username_0 on 2014-03-29)
  
  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](https://ebooks.stackexchange.com/questions/986/browser-tools-to-test-custom-viewport-sizes/988#988) 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](http://toc.oreilly.com/2012/08/responsive-ebook-content.html) 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?
  
  **Tags:** html, display
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2014-03-29. Score: 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!
  
  > **Comments:**
  > **username_0**: 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.  
  > **username_1**: 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.  
  > **username_0**: 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...)!  
  > **username_1**: 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.  
  
  ---
  
  