Responsive Design

What happens to your site’s cool layout when it’s viewed on a small screen like a phone or tablet?  In the old days (a few years ago) we used to code two different versions of a site – you’d do a bit of detection and then send mobile users to something like instead of the main view.  The downside is obvious:  every time you redesign your site’s look, you have to do twice the work.  And now that mobile accounts for 10% of all web traffic, this problem is not going away, it’s getting worse.

Enter Responsive design.  The idea is to build a site from the ground up with different screen sizes in mind.  This usually goes hand in hand with a Mobile-first approach, where the basic common elements of the site – headers, colors, fonts, etc., are coded first in the smallest view.  Then if the screen size is larger, elements can expand, take up multiple columns, and generally unfold into a spacious layout.  When we build a site this way, it takes much less time and effort than doing a separate mobile view and also takes into account newer sizes in between, like tablets.  I’m glad to know my site looks good on a laptop, phone, and the recently revealed screen size of the new iPad!