Oneupweb : The Whys and Hows of Responsive Design

Smart phones are ever on the rise. You might have one. If you don’t, then it is likely you can think of a couple people who do. It’s no secret by now that smart phone use is becoming more and more popular. The phone is no longer a tool for just calling or texting; people use their phones to surf the net and that means people are using their phones for all manner of tasks (shopping, finding directions, news, etc.). People are talking, texting, searching, shopping and browsing on a device that fits in their pocket.

It’s necessary for web developers to stay up to date with evolving trends and mobile is no exception. The buzzword floating around these days is “responsive design.” This is huge for the mobile audience because it is a tool used to account for varying view-port sizes. Responsive design uses standard web technologies to make a more accessible web. Responsive design can and should be used now and the path to mobile success is not as arduous as one may think.

What is responsive design?

The short answer:

Responsive design allows for stretching and shrinking of a web document to fit the viewport being used. Whether that viewport is on a desktop computer, a tablet or a smart phone. The end result is a presentation best suited to the device being used.

It’s about reaction and response to the device being used to view the web document.

Is there any motivation to start making your mobile audience happy? You bet there is. There are a lot of solid stats floating around out there. One of the more notable initiatives is Google’s GOMO initiative.

A glimpse at some of these stats shows some pretty interesting figures:

• By 2013 more people will use phones than PCs to access the internet.
• 57% of people won’t recommend a business with a bad mobile site.
• 40% have turned to a competitor after a bad mobile experience.
• 63% prefer mobile sites to mobile apps.
• 50% of mobile searches lead to purchase.

You should be thoroughly convinced by now.

How can responsive design be achieved?

Use CSS3

Now that we know what it is and why you should use it, let’s get down to the nitty gritty of how responsive design is accomplished. CSS (Cascading Stylesheets ) does most of the heavy lifting. The 3rd specification of CSS, referred to as CSS3, offers a lot of tools to make the mobile experience more enjoyable. The biggest player in the CSS3 mobile mix is the media query. Media queries allow web developers, like myself, to target specific viewport sizes and change things like width and position accordingly. Here is a glimpse of some popular media queries targeting various viewport sizes:

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {}

Media queries make it possible to change the look and feel for a given viewport size:

@media only screen and (max-width:479px) {
    .box{width:50px;}
}

Now that we see how to serve up a different look and feel for our varying mobile devices with CSS3, it is worth noting that speed is a factor on mobile devices. 3G and 4G are fast, but they aren’t as fast as many desktop connections. The point being, it would be wise to use CSS3 for things that used to be done with images. CSS3 can be used to accomplish gradients, text shadows and drop shadows to name a few. Drop the load time your mobile users will experience by taking those hefty image loads out of the equation. If you can’t avoid including media, such as images and video, make sure you are leveraging those media queries to scale them appropriately to the given device.

Use HTML5

HTML also plays a part in responsive design. We can use certain features to ensure that mobile devices can make the most of what you have to offer. Things like video should not be served up exclusively in flash anymore. If you have any flash content that could be created with the HTML5/JavaScript equivalent like the <video> element, then do it. This is growing in importance as iOS devices do not support flash in the browser and Adobe has announced they will no longer be supporting flash for mobile browsers.

Let’s not forget that phones are still used to make calls. A good mobile site will make sure phone numbers are clickable and callable. HTML can be used to make these happen and you can wait with breathless anticipation by the phones for those calls to come in from your website.

A lot of people have had the unpleasant mobile experience of being greeted by a page that is completely zoomed out and impossible to read. HTML offers a neat way to keep a mobile device from zooming and becoming illegible. It’s as easy as including this gem in the head of your page:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Conclusion

To wrap things up, it is important that we understand responsive design is about reaction. Responsive design leverages standard technologies like HTML and CSS to make sure a phone, tablet and desktop browsers are being used to their fullest potential. Make sure mobile users can utilize mobile functionality and can view the important content without zooming. Make sure traditional desktop users aren’t given an inferior experience. Be reactive, be responsive and be relentless in your pursuit of a top notch user experience.