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.

Responsive Web Design sample

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.

Contact Ann Paoli

This field is for validation purposes and should be left unchanged.

Contact Dave Lanzalone

This field is for validation purposes and should be left unchanged.

Contact Sean Purdy

This field is for validation purposes and should be left unchanged.

Contact Brian Shaud

This field is for validation purposes and should be left unchanged.

Contact Brittany Strizelka

This field is for validation purposes and should be left unchanged.

Contact JD Spivey

This field is for validation purposes and should be left unchanged.

Contact Lokesh Gopal

This field is for validation purposes and should be left unchanged.

Contact Joe Rodriguez

This field is for validation purposes and should be left unchanged.

Contact Henry Park

This field is for validation purposes and should be left unchanged.

Contact Leonardo Galindo

This field is for validation purposes and should be left unchanged.

Contact Shirley Gay

This field is for validation purposes and should be left unchanged.

Contact Ling Song

This field is for validation purposes and should be left unchanged.

Contact Ariel Lynn

This field is for validation purposes and should be left unchanged.

Contact Alyson Leonard

This field is for validation purposes and should be left unchanged.

Contact Luke O'Brien

This field is for validation purposes and should be left unchanged.

Contact Clement Baa-Adomako

This field is for validation purposes and should be left unchanged.

Contact Andrew Mikida

This field is for validation purposes and should be left unchanged.

Contact John Cervino

This field is for validation purposes and should be left unchanged.

Contact Calvin Woodruff

This field is for validation purposes and should be left unchanged.

Contact Adrienne Belt

This field is for validation purposes and should be left unchanged.

Contact Frank Speeder

This field is for validation purposes and should be left unchanged.

Contact Steve Carey

This field is for validation purposes and should be left unchanged.

Contact Ben Vuocolo

This field is for validation purposes and should be left unchanged.

Contact Micah Shaffer

This field is for validation purposes and should be left unchanged.

Contact John Kolleh

This field is for validation purposes and should be left unchanged.

Contact Dan Mendenhall

This field is for validation purposes and should be left unchanged.

Contact Bridget Clerkin

This field is for validation purposes and should be left unchanged.

Contact Tom MaCoy

This field is for validation purposes and should be left unchanged.

Contact Dan Fried

This field is for validation purposes and should be left unchanged.

Contact Vanessa Balzano

This field is for validation purposes and should be left unchanged.

Contact Gene Castellano

This field is for validation purposes and should be left unchanged.

Contact Tom Mikowski

This field is for validation purposes and should be left unchanged.

Contact Pete Bretz

This field is for validation purposes and should be left unchanged.

Contact Bill Haley

This field is for validation purposes and should be left unchanged.