advertisement
advertisement
  • 01.04.12

Hey Dummy: This Is What “Responsive Design” Means

James Mellers’ clever tutorial will be a boon to designers and clients alike.

Hey Dummy: This Is What “Responsive Design” Means

The Internet isn’t just on your computer screen anymore. It’s also on your phone, your tablet, your laptop, and god knows what else in the next few years. So when you visit a modern webpage, its design should take our multiplatform world into account, and morph to ideally match the size and shape of the screen you’re viewing it on. This is called “responsive design,” and it’s becoming more and more common–so much that, at least personally, when I view a blog on my phone and it doesn’t auto-shift to a mobile-optimized version, I get annoyed.

advertisement

Designers can geek out for pages and pages on the philosophy and technical nitty-gritty of responsive web design, but what if you (or your clients) just want to get a fast, layman-friendly snapshot of what it looks like and why it’s important? James Mellers has you covered, with a clever interactive demo called “Responsive Design, Responsively Illustrated.”

It doesn’t do a whole lot: It shows a blank mockup of a desktop screen with a bold cue in the bottom left corner inviting you to “Resize.” If you do, the graphics on the page change in simple but elegant animation: The desktop screen morphs into a laptop screen, then a tablet, and finally a smartphone as the browser window gets smaller. If you make it taller than it is wide, the tablet or smartphone graphic rotates from landscape to portrait view. This is responsive design. Get it? The website responds to you, rather than making you deal with it (by scrolling or magnifying or whatever-else-ing in order to view it comfortably).

This isn’t an earth-shattering insight. This is the way the modern web should work. If your site design doesn’t work that way, show Mellers’ demo to whatever decision-maker is in charge of making sure it does. Sure, you can’t design for every platform and every browser under the sun; some users will always have to get the short end of the stick. (I’m looking at you, Internet Explorer 7.) But in 2012, if your site can’t tell the difference between a smartphone and a desktop computer, you’re just asking for trouble. I guess that means I’d better redo my website, too…

About the author

John Pavlus is a writer and filmmaker focusing on science, tech, and design topics. His writing has appeared in Wired, New York, Scientific American, Technology Review, BBC Future, and other outlets.

More

Video