By Elliot Chong April 3, 2014

Maximize for Mobile: Building a Responsive Site

28% of website traffic comes from mobile. Are you prepared?

It happens to the best of us.

You’re standing in a store, product in front of you, and you wonder what users are saying about it. You pull out your smartphone and do a quick search for the brand.

The site has great functionality and engaging features — for a desktop. You try to check tiny boxes and navigate little menus on your 3-inch screen, cursing your thumbs for not being more nimble and promising yourself that any site you build will be responsive for smartphones.

There is a linear relationship between the number of smartphone users and the need for responsive websites. But creating a website or application that looks good and works well on a desktop, tablet, and smartphone is tricky. Think the solution is to simply create two separate sites with optimized CSS for mobile and desktop users? Think again.


3 problems with using different code bases for different devices


Problem #1: User-Agent Redirects

User-agent redirects detect the user's device and redirects from a desktop URL to one that displays and functions correctly on a mobile device, usually a subdomain at m.example.com.

**Problem #2: Two Code Bases**

Two. Code. Bases. Assuming that isn't enough reason right there to abandon this duplicate-site notion, consider the additional work and coordination to update both codes.

**Problem #3: URL Sharing Between Devices**

A user is so impressed with your site or product that they share it on their social network from their phone. Sweet!

But half of their connections click the link and view it on a desktop, and the URL leads them to the mobile version of the site, which ends up looking narrow and broken on their 17-inch MacBook Pro. They're left unimpressed (and even a little put-off) and you're left with potential customers thinking your site isn't user-friendly.

Damn.

**What about tablets?**

Tablets (and the awkward middle-ground phablets — pick a side, already!) bring yet another size and user experience to consider. Some tablets come with cases that have built-in keyboards, which means they can function like a laptop. But users still want the option to use the touch screen and don't bother with keyboard add-ons.

What’s a developer to do?


Responsive Web Design


Responsive Web Design (RWD) conditionally modifies the layout of a webpage depending on the width of the device it's being viewed on.

Simple.

Mozilla’s resource for web developers puts it oh so nicely:

Media queries, added in deprecated CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

In other words, you modify the CSS based on the browser’s:

  • Width / Height

  • Orientation

  • Media Type (Screen, TV, Braille, etc.)

  • Color

  • Resolution

  • Aspect-Ratio

Our website is responsive — resizing the browser changes the layout of the text and images.


Using RWD on your website


Applying a grid layout to your website allows it to easily transition from phone to tablet to desktop displays, depending on the user's device.

Responsive Web Design Grid


Mobile-tuned JavaScript enhances the user’s experience. Touch-optimized menus, for example, are beautifully simple and easy to use on a smartphone when implemented correctly.

Smart responsive web design is like the stage crew at a theater production — everything is going right when you don’t notice it at all.


So you want to build a responsive website


Where do you go from here? There are some options for transitioning your website to a responsive layout, if you’re ambitious and want to get started with RWD:

  1. Foundation
    This open source product by Zurb is a responsive front-end framework that offers several different HTML templates to choose from.
  2. Skeleton
    This boilerplate for developing mobile-friendly websites gives you a foundation for your website. The bonus for Skeleton is its simple syntax and basic provision of basic styles, which means the look of your site is entirely up to you.
  3. HTML and CSS: design and build websites by Jon Duckett
    If you want to skip the templates and create your own responsive website from scratch, Ch. 15: Layouts offers great instruction on grid layouts. This is also a great place to go if you’re just getting started in web development.

Try it out—Your mobile visitors will sing your praises (or just appreciate how easy your website is to use on a smartphone. Win-win!).