What are the ideal page dimensions to use when designing your fixed layout ebook?
It depends upon what your goals are:
- Are you trying to fill the full viewport and minimize the screen space devoted to the reader "chrome" (e.g., the gray latticework background in iBooks)?
- Are you going to be displaying one page at a time or a two-page spread?
- Are you targeting a specific platform for the end product and will you be designing two different versions or the ebook? Or trying to create a single cross-platform design?
- Are you just trying to get a rough sense of page dimensions to use so that you can make sure that the text is legible?
- Are you trying to take full advantage of the latest devices or do you want to support customers with lower-end devices as well?
The core challenge you'll run into when designing a fixed layout ebook for multiple devices is that different devices have different screen sizes. The dimensions of the screen — as measured in pixels per side — are not as much of an issue as the aspect ratio which they create.
To calculate the aspect ratio for a display, divide the width by the height. For example, the iPad 3's screen is 2048 pixels by 1536 pixels. This works out to a 4:3 aspect ratio: 2048 / 1536 = 1.3 = 4/3. 4:3 is a very common aspect ratio: it's used for most television screens and computer monitors as well as for standard definition video.
The most common targets for a fixed layout ebook are the Apple iPad and the Kindle Fire devices. These two device lines, though, have screens with different aspect ratios and so it's impossible for a single design to work perfectly on both devices. The iPad screen is comparably fatter than the Kindle Fire screens; more precisely, the iPad screen has a 4:3 aspect ratio where as the Kindle Fires have a longer and narrower 16:10 aspect ratio. If you design a fixed layout ebook for one device, then the pages will be pillared or letterboxed when you port to the other platform.
It's also difficult to nail down a precise page dimensions to design for because different devices in the same line may have screens with different pixel counts depending upon their display resolutions. For instance, the iPad 3 is a retina device and the screen has twice as many pixels per side as the original iPad 1 and iPad 2. There is a similar relationships between the first generation Kindle Fire and the later-generation Kindle Fire HD devices.
Note that display resolution is independent of the aspect ratio. For the reader, the display resolution mainly affects how crisp and clear the image is. For the designer, the resolution is a consideration, albeit a minor one. Optimizing for a higher resolution device may cause text which is very small to become illegible if the ebook is read on a lower resolution device. On the other hand, optimizing for a lower resolution device may lead to a lot of empty, wasted space if the ebook is read on a higher resolution device. Usually the ebook can be developed in such a way as to minimize these discrepancies, so it's almost always better to design for a particular aspect ratio rather than precise page dimensions as measured in pixels.
If you do need to nail down precise page dimensions to design for, then you could use the below dimensions depending upon where your priorities or goals lie.
- If you want to target the iPad, then design for page dimensions which have a 4:3 or 1.3 aspect ratio (for instance, of 1024 px by 768 px or 2048 px by 1536 px or similar).
- If you want to absolutely minimize the reader app chrome on an iPad, use dimensions of 1900 px by 1470 px. Liz Castro has done some excellent work to figure out that these are the optimum dimensions to use the full available viewport on an iPad (the viewport would be the screen, minus the reader app chrome such as the menu bar at the top of the iPad and book/page UI).
- If you want to target Kindle Fire devices, then design for page dimensions which have a 16:10 or 1.6 aspect ratio (for instance, 1280 px by 800 px or 1920 px by 1200 px or similar).
- If you want a "cross-platform" design, then design for page dimensions which have a 16:9 or 1.7 aspect ratio, which is the standard HD aspect ratio internationally. Example page dimensions would be 1920 px by 1080 px or 2560 px by 1600 px or similar.
I generally recommend the larger of the two options for each goal because high resolution devices are becoming much, much more common and will likely become the norm soon (for instance, Apple opted not to support the iPad 1 and iPad 2 when it released the latest iOS updates). As mentioned, too, it's almost always better to design for a particular aspect ratio rather than precise page dimensions because further device optimizations can be handled by the developer.