Breakpoints for Responsive Design

Ethan Marcotte’s excellent Responsive Web Design (published in 2011 and that will matter as time goes by) has a handy table of device-width breakpoints for building a Website that responds to the visitor’s context. I find it so handy that I’m putting it here, without apology, for easy reference. Really, though, you should buy the book.

Width Description
320 pixels For small screen devices, like phones, held in portrait mode.
480 pixels For small screen devices, like phones, held in landscape mode.
600 pixels Smaller tablets, like the Amazon Kindle (600×800) and Barnes and Noble Nook (600×1024, held in portrait mode.
768 pixels Ten-inch tablets like the iPad (768×1024) held in portrait mode.
1024 pixels Tablets like the iPad (1024×768) held in landscape mode, as well as certain laptop, netbook, and desktop displays.
1200 pixels For widescreen displays, primarily laptop and desktop computers.

Personally, I rarely find much reason to make a site wider than 1000 pixels and often restrict the width using max-width. But that could just be me.

The “Minimum Viable Product”

I’ve been reading and reflecting on how Web design should change given the increasing popularity of mobile devices (notable among the reading has been “Mobile First“). This article popped up on my feed reader this morning: “Sub-compact media: Rethinking the way we publish online“.  The article specifically addresses on-line publishing but introduced me to the idea of the “minimum viable product”, a useful concept when trying to strip down a web experience to its essentials.

My granddaughter is watching a truly awful Disney Channel program and I’m trying to keep my feet up to rehab an injured foot. Television, Disney in particular, truly kills your brain — I can’t write a decent sentence.

Mozilla Wants to Replace Native OS Apps. With HTML5

The Mozilla foundation recently announced a WebAPI with the stated intention of replacing native OS applications on mobile devices with HTLM5-based applications, to ensure portability across devices.

Manufacturers, though, want separate systems without cross-functionality because they all expect to win this version of the “browser wars” and thus to own something like a monopoly on sales to their users.

The consumer’s option is going to be jailbreaking and piracy, I’m afraid.