Responsive Design: The answer to our mobile design problems

Posted by on Mar 26, 2012 in blog | No Comments

Out with mobile sites, in with Responsive Design

Look, we all know that all the cool kids are accessing websites on their phones and tablets. We all know that the number of cool people doing this is always rising and that eventually everyone will be doing it. So right about the time the iPhone was introduced we started creating mobile versions of our sites. We know that mobile screens are different than computers so we tried to make the designs fit those screens better. Unfortunately, we created a whole new set of problems.

The problem with mobile sites

The spectrum of devices

It’s not a simple as desktop computers on one side and phones on the other. What do we do with tablets? The new iPads have more pixels on the screen than many computer screens. Some netbooks have pretty small screens to start with. What about the 50+ sizes and screen ratios of Android tablets? How do we handle different screen sizes rather than just deciding based on what type of device the user has?

Incoming links

When we create a completely different mobile version of a site that intercepts ‘mobile’ traffic and redirects it, incoming links are broken. Something like the following dialog happens:

iPhone: Show me the staff listing page. http://example.com/staff.html

Server: Ok… wait, are you a phone? You don’t get to see the staff listing page, here’s this mobile landing page instead. http://mobile.example.com

iPhone: Uh, no, show me the staff listing page. http://example.com/staff.html

Server: I can’t. You’re a phone so I’m going to keep redirecting you to the mobile landing page even if you keep asking for a URL that exists.

iPhone: Uh… ok.

You can see a good example of this problem on the Alvin Ailey American Dance Theater site. If you’re on a mobile device, search “Alvin Ailey staff”. You’ll get the following results, with the staff page as the top result.

Alvin Ailey Google Search Results

Alvin Ailey Google Search Results

Try selecting that. You’ll get redirected back to a mobile landing page. Try linking into any deep link in the site and you’ll get redirected back to the mobile landing page.

Alvin Ailey Mobile Site

Alvin Ailey Mobile Site

The answer: Responsive Design

Responsive design is creating one design that scales gracefully across a range of screen sizes and device capabilities. Rather than creating a completely separate version of the site’s content, Responsive Design creates multiple layouts of the same pages and then modifies the display based on the capabilities of the device. A lot of times this means creating multiple stylesheets for the site and then serving the correct one based on whatever will look best to the user.

For example, try dragging this browser window to make it smaller or bigger. Go ahead, we’ll wait. Did you see that? As the window gets smaller, the site responds by shrinking the content area a bit. Then it moves the sidebar underneath. The text scales proportionally to match what would look best at different widths. Check out the main portfolio page and single projects to see more responsive design in action.

Want some more examples? akanyc.net is a great example of scaling with video. Greygoose.com might be the best example of combining Responsive Design with beautiful parallax scrolling. Foodsense.is shows a nice range of sizes and layouts.

Benefits of Responsive design

Future-proofing

Since we’re not limiting our targets to specific devices but rather ranges of screen sizes, all current and future devices are accounted for. If we ever needed to target another range of devices, adding a new style sheet would be simple.

Single place to update

Rather than creating another version of the site with a separate CMS and content, keeping only one CMS is key for keeping updates simple and uniform across all versions.

Making all site pages accessible

This would make all pages of the site accessible for a range of devices, not just a limited selection like the issue that we saw above.

Tools for creating Responsive Design

Although designing a site responsively requires a lot of skill and imagination, when it comes to building it, you don’t have to start from scratch. Here are some frameworks that can make your build easier.

Bootstrap

twitter.github.com/bootstrap/

Bootstrap is a comprehensive framework for building a responsive site. It comes with plugins for a lot of useful interactions and interface elements like forms, photo galleries, menus and a lot more. Take a look at their examples of sites built on the framework.

Modernizr

modernizr.com

Modernizer helps you create layouts based on what a device is capable of rather than just what kind of device it is. So it checks to see if a device supports a particular feature, and if it does, it displays that content. If not, it can display backup content. So for instance, it can check to see if the device can display an HTML5 video and if not it could display a backup image or other content.

Skeleton CSS

getskeleton.com

Skeleton CSS is the most basic tool for creating responsive layouts. It’s not as fancy as the other tools but gives you a basic grid that responds to sizes and other variables.

Go for it

So what are you waiting for? Get out there and start creating responsive layouts for your site. Don’t get stuck with a mobile of your version that doesn’t meet your user’s needs. Responsive Design is the answer.

Leave a Reply