So it’s been a while since my last post. Sorry about that, but we’ll be picking up the pace again. Given current trends, much of the focus will be on responsive design and some tips, tricks and tutorials to help with that.

Rule 1# If your site isn’t Mobile-Friendly, you’re going to have a bad time.

The days of having a separate mobile website are pretty much behind us. At this point, users expect a seamless experience regardless of the device they’re on. Responsive Web Design is the best way to tackle this problem.

If you’re not already designing your sites to be used on a desktop, laptop, tablet or other mobile device, we’ll go over some suggestions for making the jump.

Responisve Web Design (RWD) Fundamentals

A Responsive Site adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images,and CSS3 media queries, an extension of the @media rule.

There are two primary schools of thought on the best way to approach responisve design: Progressive Enhancement and Mobile First.

Progressive Enhancement (Also referred to as Adaptive Design) is the counter to traditional “Graceful Degradation”. In PE, the baic model is: a basic markup document is created, geared towards the lowest common denominator of browser software functionality, and functionality or enhancements are added to the presentation and behavior of the page, using CSS, JS or other applets. All such enhancements are externally linked, preventing data unusable by certain browsers from being unnecessarily downloaded.

Mobile First is just what it sounds like. Here, you’ll build and layout your application to fit on a small mobile screen. Once that layout is locked down, it’s time to start adding functionallity to benefit users with larger screens.

Responsive Web Design Reading
A full overview of RWD is far beyond the scope of this post. Here are some great books that have really helped me get a grasp on thing.

Responsive Web Design with HTML5 and CSS3 by Ben Frain

Implementing Responsive Design: Building sites for an anywhere, everywhere web (Voices That Matter) by Tim Kadlec and Aaron Gustafson

Responsive Web Design (Brief Books for People Who Make Websites, No. 4) by Ethan Marcotte (2011)

Up Next
In the coming weeks, I’ll be talking a lot about Layout, Navigation Patterns, Natural vs Device Break Points, and Media Queries.

If you have any specific questions about Responsive Web Design, leave them in the comments and I’ll be sure to address them!