My other iPad is a 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”
Comments off.
Just too bad it doesn’t support the CSS “monochrome” media query…that would have been nice.
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).
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…
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 yourviewporttag 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
redactedThe benefit to the
width=device-widthsetting is that your media queries can usemax-width, rather thanmax-device-width. But of course, theminimum-scale=1.0, maximum-scale=1.0declaration would disable zooming.Recently, I’ve started playing around with this instead:
redactedA bit iffy on browsers that support multiple orientations, I admit, but it leaves zooming intact. Yay for tradeoffs!
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!
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.
Of course, but they almost never do.
Ethan, WordPress redacted the code in your first comment.
Tantek, that lime-green thingie is HTML5 Now, your lovely new step-by-step “getting started with HTML5″ book-and-video-tutorial. Congratulations!
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)?
Meh, I say. MEH.
Sorry about that. Here’s take two:
Well, FML. Just view source on my portfolio page for the proper snippet, and sorry again.
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 ?
Info is very useful and straightforward. I have already applied this to my website, thanks!
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!
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.
this devices are still do expensive only to read book is i dont pay it
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.
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
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?