Be Responsible, Be Responsive

Responsive Web Design seems to be on every developers lips at the moment. The idea of creating 3-4 different versions of a site just to satisfy a handful of smart phone and tablet users seemed like a complete waste of time to me a few months ago…

Fastforward to the present day. iPhone, iPad and other various tablets and smart phones are now responsible for a serious amount of traffic to my site and our clients sites. Time to act.

I think the number-one most important thing to remember when creating your responsive design is to not differ too much from the “main” desktop version of the website. It’ll confuse people and annoy them. Rearrange elements, think outside the box and think how you’d like the page to react if you were viewing on a hand-held device.

Make it easy to navigate. Scroll up, scroll down, tap. That’s all people want to do on their devices, it’s about time & efficiency. Make your site faster.

How to start adding Media Queries to your stylesheet:

For example, if you want to set specific styles for a browser width of 1200px or less, in your main stylesheet, add the following to the bottom…

/* --------------------------------------------

< 1200px viewport
-------------------------------------------- */

@media (max-width: 1200px) {

#container { width: 960px; }
#content { width: 700px; }
#sidebar { width: 240px; }

header hgroup h1 { font-size: 32px; }
header hgroup h2 { font-size: 18px; }

header nav { margin-top: 18px; }
header nav ul li { font-size: 16px; }

#banner { margin-bottom: 20px; }

#content article { margin-bottom: 12px; }
#content article h3 { font-size: 18px; }
#content article p { font-size: 14px; }

#sidebar aside { margin-bottom: 12px; }
}

For specific widths on devices such as an iPad in landscape, add the following…

/* --------------------------------------------
iPad in landscape
-------------------------------------------- */
/*
TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
@media (max-width: 1024px) {  }
*/
@media (max-device-width: 1024px) and (orientation: landscape) {

#container { width: 768px; }
#content { width: 540px; }
#sidebar { width: 208px; }

header { margin-bottom: 12px; }
header hgroup { margin-bottom: 12px; }
header nav { float: none; clear: both; }
header nav ul { width: 100%; }
header nav ul li { font-size: 14px; width: 191px; text-align: center; }
header nav ul li:last-child { width: 192px; }

#banner { margin-bottom: 18px; }
#content article img { float: none; margin: 0 0 10px 0; width: 100%; }
}

A list apart has a great article on responsive web design and a new book too.

Also, be sure to check out this video tutorial from net tuts…