My other iPad is a Kindle

Zeldman.com as seen on Kindle

The new Kindle has a lot going for it. It’s inexpensive compared to a full-featured tablet computer like the iPad; you can slip it in your back pocket, where it’s more comfortable than an old-style paperback; and it includes a Webkit browser. This last point is where folks like us start to give a hoot, whether we’re fans of epub reading or not.

The flavor of Kindle’s browser concerns us because it affords us the ability to optimize the mobile viewing experience with a single line of markup. You can see this in action in the photo at the head of this article (published and discussed on Flickr).

I made no tweaks for Kindle per se; the Kindle is simply responding to a line of markup I’ve been putting into my web pages since 2007—namely, the viewport meta element, which controls the width of the viewport, thus enabling mobile devices with a limited number of pixels to focus all available pixels on your site’s core content (instead of, for instance, wasting part of the small screen on a background color, image, or gradient). The technique is as simple as web design gets:

meta name="viewport" content="width=770"

(Obviously, the value of “width” should be adjusted to match your site’s layout.)

I learned this little trick from Craig Hockenberry’s Put Your Content in My Pocket (A List Apart, August 28, 2007), which I naturally recommend to any designer who hasn’t seen it.

20 thoughts on “My other iPad is a Kindle”

  1. I completely misunderstood the Kindle, I somehow thought this new Kindle still had 3G access on a subscription basis (you used to have to pay for each RSS feed you wanted to access on older models, right?).

    This makes it much more interesting than an iPad (especially for Europeans since Amazon is selling them in US Dollar).

  2. What are we supposed to set the viewport width to if the web page width is, say, “6oem” (and the font-size is 100%)? How do we translate that into pixels? Seems impossible…

  3. Bertil, you’d simply multiply 60 by the browser’s base font size. Assuming that baseline is 16px (I don’t have a Kindle to verify), you’d set your viewport tag to 960.

    For flexible or responsive layouts, I highly recommend setting the viewport to something more width-agnostic. For example, you could use something like

    redacted

    The benefit to the width=device-width setting is that your media queries can use max-width, rather than max-device-width. But of course, the minimum-scale=1.0, maximum-scale=1.0 declaration would disable zooming.

    Recently, I’ve started playing around with this instead:

    redacted

    A bit iffy on browsers that support multiple orientations, I admit, but it leaves zooming intact. Yay for tradeoffs!

  4. Ooh – what’s that lime green and pink book you have under your kindle? :)

    Jeffrey – if you have a chance, try out the HTML5 Now eBook PDF (on the DVD) on your new Kindle (assuming you can load PDFs onto Kindles) – I’m curious to see how the PDF looks on the new Kindle.

    Thanks!

  5. Bertil, you’d simply multiply 60 by the browser’s base font size. Assuming that baseline is 16px (I don’t have a Kindle to verify), you’d set your viewport tag to 960.

    16px? Are you sure? Always? Can’t the user change that? Is that the same for all devices that pay attention to such “meta” settings?

    I have this nagging feeling that the whole idea of that “meta” thing is based on someone forgetting that not all web pages use fixed font settings in pixels. I hope I’m wrong.

  6. 16px? Are you sure? Always? Can’t the user change that?

    Of course, but they almost never do.

    Oh dear… I have a strong feeling of deja vu. Didn’t we have this exact discussion back in the 90s?

    Anyway, will that default setting remain the same for all future Kindles (and other devices that pay attention to this particular “meta” setting)?

  7. for a naive user like me, how to and where to make this change – I am wondering if the new samsung rival for iPad displays better – thoughts ?

  8. mhm, already thought about buying an kindle to test my sites with it – perhaps I don’t need to buy it, with your great tips. we will see.

    thanks!

  9. Kindle is nice if you want to READ and not play games and surf the web. Don’t get me wrong, the iPad is incredible, but it can be a little distracting.

  10. I wouldn’t recommend slipping it into your back pocket. I did that with mine, and when I bent over, the screen broke. They’re pretty sensitive to pressure.

Comments are closed.