Responsive Web Design by Ethan Marcotte
A Book Apart just released volume 4 in its ongoing series of books, Responsive Web Design by Ethan Marcotte. Words like “essential” get tossed around far too easily these days, but this book deserves that and every other accolade it’s racked up. So instead of trying to pile on with the superlatives I’ll put it this way: this is the book I’ve needed for the last few months, but not exactly for the reasons I expected.
I’d read the original Responsive Web Design article and heard Ethan speak at An Event Apart Boston, so I’d already cobbled together an ad-hoc workflow based on what I gleaned from those sources. Still, there were gaps. I felt like I had been given the pieces of a very powerful machine (or robot!), but with only a napkin sketch on how to assemble it.
So I was looking to this book to fill in those gaps, and it does that. It explains each of the components of responsive web design—fluid grids, flexible images, media queries—and shows how to combine them into a design and development workflow. More importantly, however, it places them in the context of a much larger discussion about how best to serve users. That is what truly impresses me about what Ethan has done with this book: he’s articulated part of the why in addition to the how. And frankly, that’s the more important question, because it’s the one we should be asking ourselves at the outset. He writes:
The long and short of it is that we’re designing for more devices, more input types, more resolutions than ever before. The web has moved beyond the desktop, and it’s not turning back.
Those are words that are simultaneously scary and exciting: we have a bigger challenge, but we also have a huge opportunity to affect the course of the open web. Before I read this book, I had thought of responsive web design as primarily being a solution for challenges specific to “mobile” users: “how do I get this big site to look good on little screens?”. The bulk of the book does just that, taking a website originally designed with a large (desktop) screen in mind, and applying responsive design techniques to present that same content in a smaller screen. In the final chapter, however, Ethan flips this order on its head:
Speaking broadly, responsive design is about starting from a reference resolution, and using media queries to adapt it to other contexts. A more responsible approach to responsive design would mean building our stylesheet with “mobile first” in mind, rather than defaulting to a desktop layout. So we’d begin by defining a layout appropriate to smaller screens, and then use media queries to progressively enhance our design as the resolution increases.
That single paragraph really made me stop and think, because when used as a mere solution to layout problems, responsive web design can still ultimately fail the user. Ethan goes on to describe the way his personal site ethanmarcotte.com builds from the simple to the complex, and then finally applies that thinking to the example site used throughout the book. This interpretation of progressive enhancement is nothing new, but to me it’s the crucial part of this book. Without this underlying philosophy of putting the user first and scaling their experience to match their device capabilities, responsive web design can be misused as a decorative parlor trick. It’s when it is employed as a way to solve problems for the user that it becomes absolutely revolutionary. That is what profoundly affected me after I put it down, and why I hope this book finds its way into the hands of as many web designers as possible.
Blogging on the iPad
I wrote the last post “Not If, But When” on the iPad, using the iOS WordPress app. That was my first attempt at writing more than tweets on the iPad. I noticed a few things: I found that typing a long-form piece was a slower experience, but completely workable. I was frustrated, however, by the lack of any clear way to create links. After some more experimentation I found that starting to type “http://” makes the app ask you if you want to create a link. It would be nice to have a dedicated button, or at the very least a quick introductory message showing how to create one.
I wrote this post by starting it as a draft in Mars Edit, and then continuing it in the WordPress iOS app. I can imagine that my usual process will most likely involve the reverse: starting a post in iOS and finishing it in Mars Edit.
I still don’t see how to create curled quote marks with the software keyboard; I imagine that hooking up a Bluetooth keyboard is the only way to get those. I just installed a Markdown plugin on this blog, and using that syntax on the iOS app surprisingly works. So that gives me support for things like emphasis and blockquotes. Not bad.
Not If, But When
Last week Jordan’s four-year-old white plastic MacBook started to freeze up. Fearing the worst, I immediately cloned her machine to an external drive. A few days later the dreaded folder with a ? appeared (has that replaced the sad Mac face?) and it refused to boot up. I ordered a 250GB, 7200rpm drive off Amazon as a replacement. I guess that 250GBs is the new entry-level for laptop drives.
When the drive arrived today I dropped it into my toaster dock, fired up Super Duper! and cloned the backup drive back to the new drive. It took about one hour. Once I found my Torx screwdriver it was just a matter of popping the battery off, taking off three screws, pulling out the drive bay, and swapping the dead drive for the new one. I put everything back into place, fired it up, and…the ? folder popped up again. But only for a second. The Apple logo showed up after that, and the machine booted up cleanly.
The whole experience reinforced what I always tell my friends: hard drives will fail. Not IF, but WHEN. I think I’ve had three hard drive failures over the last ten years, including this one. Cloning your drive regularly can get you back up and running much faster than trying to take your computer in to your local computer repair shop and hoping they can dredge some data out of your dead drive.
What could I have done better? I should have been backing up to a laptop drive, so that I could have just popped that in instead of waiting a week for Amazon’s super saver shipping to deliver the replacement drive. I also need to start cloning both of our laptops on a more regular basis. I’ve gotten lazy with mine, since I also have online backup via Backblaze. A local, physical backup is still preferable to online backup for quick restores, however.
Get the Puck to the Net
I enjoyed this post by Corey Vilhauer on the challenge of blogging. I can certainly relate to the feeling that every single post has to be perfect. He puts it this way:
Instead of getting hits when I can, I’ve been aiming for home runs. I’ve been waiting for the perfect pitch. I’ve been striking out looking.
I’m not a baseball fan, but as a hockey fan I think of a similar cliché: just get the puck to the net, and good things will happen.
Native vs Web-based Apps
Luke Wroblewski shared some notes from a presentation by Josh Clarke. Here’s a few that caught my eye:
- If you can do it with the Web – do it with the Web. It’s faster, cheaper, and easier. The user experience gap is going to close but not all the way. Native will always have a user experience edge.
- Think Flagship apps: create a mobile Web experience. Then create a flagship app on one or two platforms. Align with the mobile cultures & populations that match your demographics.
- Start with thinking about your interface as an API: a smart back-end that encompasses what you do. Different front-ends can then be plugged into your core APIs
Just minutes after I posted this, my boss forwarded me a good piece covering the same ground: The Future of Mobile (Is the Web) by Christopher Butler at Newfangled.