2 Sep 2010 10 am eastern

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.

Filed under: A List Apart, Accessibility, Amazon, Apple, art direction, Authoring, Best practices, books, Browsers, Code, Compatibility, Design, E-Books, Formats, HTML, industry, Layout, Site Optimization, The Essentials, Touchscreen, Web Design, Web Design History, Web Standards, webkit, zeldman.com

20 Responses to “My other iPad is a Kindle”

  1. Alexis Deveria said on

    Just too bad it doesn’t support the CSS “monochrome” media query…that would have been nice.

  2. Gregory Karekinian said on

    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).

  3. Bertil Wennergren said on

    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…

  4. Ethan said on

    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!

  5. Tantek said on

    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!

  6. Bertil Wennergren said on

    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.

  7. Jeffrey Zeldman said on

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

    Of course, but they almost never do.

  8. Jeffrey Zeldman said on

    Ethan, WordPress redacted the code in your first comment.

  9. Jeffrey Zeldman said on

    Tantek, that lime-green thingie is HTML5 Now, your lovely new step-by-step “getting started with HTML5″ book-and-video-tutorial. Congratulations!

  10. Bertil Wennergren said on

    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)?

  11. Ethan said on

    Ethan, WordPress redacted the code in your first comment.

    Meh, I say. MEH.

    Sorry about that. Here’s take two:

  12. Ethan said on

    Well, FML. Just view source on my portfolio page for the proper snippet, and sorry again.

  13. RK said on

    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 ?

  14. solarna energija said on

    Info is very useful and straightforward. I have already applied this to my website, thanks!

  15. CodersX said on

    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!

  16. Paul D said on

    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.

  17. iç giyim said on

    this devices are still do expensive only to read book is i dont pay it

  18. Hereld said on

    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.

  19. Hochzeitsfotos said on

    As I read it the face came in my mind, that I never saw a kindle in the subways or elsewhere here in germany. Strange

  20. Kindle Canada said on

    A brief trick for all you Kindle users, are you aware that turning off and on your Kindle requires a whole lot more power as compared to allowing it to sleep?

Comments off.