Mobile. Tablet. Monitor. How does your site respond?

September 17, 2012  

More and more people begin using smartphones each day. No surprise there. Here’s the interesting part—those devices are fundamentally changing our behaviors. In fact, 25 percent of smartphone owners use them as their primary device for accessing the Internet. Add tablets to the mix, and there’s never been less of a “standard” when it comes to web design. Screen size varies from pocket-sized to wall-mounted. “Point and click” has given way to swipe, pinch, tap, and drag.

 

What’s responsive web design, anyway?

Coined by Ethan Marcotte, the term responsive design refers to the use of fluid grids, flexible images and media, and CSS3 media queries to adapt the layout of your website to be optimized for the user’s device and screen size. Said in English: it’s possible to develop a site that rearranges the same content optimally whether on a phone, tablet, or monitor.

But responsive design is also more than that. It’s a philosophy that guides decisions, ultimately creating a consistent experience, no matter how someone gets to your site. Here are some tips worth considering.

SIZE

Compare your fingertip to the mouse pointer on a monitor. Big difference, right? Few things are as frustrating as making the wrong selection from a stack of tiny text links on a phone. So make sure the design (and how it changes based on screen width) accounts for this.

CONTENT

It’s easy to make assumptions about what your users need (and where and when they need it). But when you relegate certain content to a separate mobile experience, you’re sure to leave out something important. Responsive design avoids this pitfall, ensuring that all your content is presented purposefully, no matter the device.

EXPERIENCE

Sometimes, responsive isn’t the answer. We’ve come a long way, but data rates still limit what can be achieved on the mobile web. Creating a responsive experience sometimes disqualifies dynamic content like video or large graphics. And some experiences dictate a single type of device. The We Choose the Moon site, Arcade Fire’s interactive “Wilderness Downtown” video, and Old Spice’s Muscle Music all put experience above versatility—and it pays off.