Optimizing Web Content for the Kindle Browser

Amazon Kindle

Amazon’s Kindle store is convenient, easy-to-use and stocked with thousands of titles.
But what about publishers and content distributors who want to reach the
estimated 240,000 Kindle users without going through Amazon’s program? And what about content formats that the Kindle does not directly support?

One selling point of the device is its free, ubiquitous Internet service
and Web browser. Amazon has filed the browser under “Experimental” but it’s
quite usable as-is. With a few simple changes to a Web site’s HTML code, it’s
even possible to specially cater to Kindle users.

The screenshots used in this article are from the mobile version of
Bookworm, my Web application
for reading ebooks in the EPUB format.
Although what’s being displayed is ebook content, it’s being delivered by the Kindle’s browser, not the Kindle ebook technology, which does not yet support EPUB.

Because the mobile Web version is
already heavily optimized for small devices, the layout is simpler than
a traditional Web site. What works for an iPhone or other wireless device
will also be a good starting point for the Kindle, although we’ll see there
are some special considerations that don’t apply to any other device.

Default or Advanced Mode?

When the Kindle ships, its Web browser is in “default mode.” It will not load
images or CSS styles, but it does render basic HTML tags like the italic tag <i>.
Personally, I prefer “advanced mode,” which displays Web pages more like a
traditional browser, but some sites can be unreadable in this mode.

When optimizing for the Kindle it’s best to consider that most users will not
change from “default mode,” or even realize that the option exists.

How different are these modes? Here is a comparison shot of the same screen
from Bookworm in both modes:

kindle-4.jpg kindle-6.jpg
My list of books in Advanced mode, showing tabular layout and more advanced font styles My list of books in Default mode

In Default mode, all the information about the books runs together.
It would be better to present this as a simple
vertical list, the way the Amazon Kindle store does, rather than as a table.

Font Size Considerations

You can choose from six font sizes in the Kindle browser. As a content creator, you can provide a wider range of font sizes in your Kindle-formatted Web page, but take care that they aren’t too small. The device doesn’t clearly display fonts that are smaller than its default six sizes.

In this screenshot, the table of contents for a Bookworm book is not readable,
even though this page has already been tailored for the small display of mobile phones:

kindle-3.jpg

This problem is only likely to occur in Advanced mode where stylesheets are
activated.

Usability

The Kindle’s method of selecting and traversing hyperlinks is unique. The user activates links by selecting along the vertical, or Y-axis, using the scroll wheel. When multiple links fall on the same line, the Kindle will open a dialog box so the user can clarify which link is the target.

In Bookworm, users move to the next or previous chapter by selecting navigation
links lined up horizontally (see the top row of the first image). In the Kindle,
this presentation forces the user to click a second time to select the appropriate one:

kindle-2.jpg

For commonly-used navigational items like this, line up the links in a vertical row:

  1. Next
  2. Contents
  3. Previous

Now no second click (and accompanying page refresh) is necessary.

It’s also important to remember that the Kindle is a black-and-white
device. If your site uses text color to convey any useful information
(such as what is or is not a hyperlink), re-work the design to
accommodate a grayscale display.

Finally, keep pages short. The Kindle cannot scroll; long Web pages are paginated like books. Pagination with E Ink devices is slow relative to scrolling on a computer screen. If possible, keep all your content on the first Kindle “page” when viewed at the default font size.

Targeting the Kindle

Web browsers are identified using their “user-agent” string. The current
version of the Kindle is broadcasting this user-agent:
Mozilla/4.0 (compatible; Linux 2.6.10) NetFront/3.3 Kindle/1.0
(screen 600x800)
.
It’s beyond the scope of this article to describe how to set up your
Web site to deliver different kinds of content to different browsers,
a process that varies considerably with your site’s technology.

How do you test your layout if you don’t have a Kindle? There’s no
substitute for having the real device (tell your boss it’s for “research”), and currently Amazon does not offer any kind of browser emulator. Some possibilities:

  1. Disable stylesheets on your browser and look at the output. Does
    it still make sense? (Instructions for
    disabling stylesheets
    ; Firefox users should install the Web
    Developer
    add-on)
  2. Use a text-only browser like Lynx

Some Last Advice

Don’t spend too much time on this process. The next version
of the Kindle is expected soon, no doubt with an improved browser. Indeed, Amazon could offer a new version of the existing browser at any time. Most of the changes recommended above should take little time and money to implement, and can make a great difference in user experience.

In addition, optimizing your site for
small-screen browsers can have other benefits: they allow an
increasing number of mobile users to get quick access to your content,
and aid accessibility for screen-readers and other non-standard
browser types.

tags: , , , , , ,