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 mobile.mysite.com 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!