How do you consume the web these days?
If you’re like most people, you do it from a mobile device. That’s right: The majority of web viewing today is done from mobile devices, not desktops. And that is making a profound impact on how we design and build websites. If you’ve ever tried to view a traditional website on a smartphone, you know that pinching, zooming and scrolling is not an optimal experience.
An early solution was to create a separate “mobile version” of the site. You’ve probably seen them — they’re the sites with an “m” in the URL, like m.mywebsite.com. There are a bunch of problems with that approach. First, it requires you to build and maintain two entirely separate sites. The mobile version was typically designed for a very specific display resolution, so it often didn’t look right on devices it wasn’t designed for. And there were technical issues, like device sniffing not always working reliably.
Then along came Ethan Marcotte with a much more elegant solution: Create a single site that is smart enough to know the resolution of the device you’re viewing it on, and dynamically adjust the layout and content to accommodate that screen size. So depending on the page content, individual items might get rearranged or even taken away as you view them on various devices. If you resize your desktop browser, you’ll see this happening in real time as you scrunch the size down to simulate a very small screen. It’s called “gracefully degrading” and it’s pretty neat to watch. The Allied Pixel website does this, and most of the client sites we build now do it as well.
RWD (that’s Responsive Web Design, not Rear Wheel Drive) takes a different approach to design than what we’ve traditionally done. Rather than starting with the full-blown desktop design, we start with the smallest configuration, and keep adding to it until we get to the largest configuration. And rather than design for specific resolutions, we look for content-driven “break points” that compel a new layout.
Retrofitting an existing website with RWD can be tricky. We’ve done it, but it’s sort of like riding a bicycle backwards. It’s a lot easier to start from scratch, with RWD baked in from the start. If you’re contemplating a website redesign, that would be an ideal time to implement RWD.
The nice thing about RWD is that it future-proofs your website. Whether someone is viewing it on an iPhone, or a larger Android, or a tablet, laptop, desktop or flat screen tv, they’ll have an optimal experience. We don’t know what new devices are coming down the road. But whatever they are, RWD will handle them.