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 iphone and it doesn’t auto-shift to a mobile-optimized version, I get annoyed.
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? Macrosource has you covered, with a clever interactive demo called “Responsive Design, Responsively Illustrated.”
Responsive designs morphs into a laptop screen, 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, we are here to 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 you’d better redo your website…