Responsive Web Design in a Post-PC World

I think we all can agree that websites and the internet are here to stay.  The growth of smart-phones, tablets (let’s be honest, iPad), and netbooks are increasing every year. In fact, it’s estimated there will be 1 mobile device for every person on earth by 2016.  So let’s agree we’re in a “Post-PC” world and that presents a challenge for modern web designers.  There are now so many different combinations of operating systems, resolutions, display ratios and orientations – even the most savvy developer will admit things are getting a tad tricky.

The solution, right now, seems to be in “Responsive” Web Design.  Let’s take a look at this relatively new technique that is THE talk of the town (for nerds anyway).

What exactly is responsive web design?

First off, Responsive Web Design is nothing all that new.

Back in the day, designers either chose the fluid (a percentage of total width) or static route (a guess in number of pixels).  Today’s responsive websites use fluid widths in percentages and ems, but they don’t stop there. They combine newer technologies with the tried for a site that can automatically optimize itself for the screen size and viewing orientation in real time.  Together, there are 3 elements that make up a responsive web design.

• Flexible Layouts
• Flexible Images
• Media Queries

Flexible Layouts:

The first step is forgetting about setting hard-widths in pixels and focus on widths using percentages of total width (whatever that devices width is at the time it’s viewed).  As the phone or tablet changes orientations, your site can recalculate how wide each element is.  Try scanning the QR code in the footer to pull up this Shameless News post on your favorite tablet or smartphone.  Got it?  Good.  Let’s move on.

Flexible Images:

So the width of your page, it’s sidebar, footer, etc. are all pretty obvious, but what about the images.  They have to stay a particular width right?  Wrong.  Using techniques like hiding overflows, HTML resizing, image caching and PHP image resizing scripts like TimThumb, you can resize, or dynamically crop images on the fly.  Sprinkle in a little jQuery for transitions and you can make your site smoothly optimize itself as the tablet orientation or the browser window width changes.

Media Queries:

Last, but not least, are media queries.  In CSS3, we how have the ability to ask the user’s browser what sort of media/orientation they are using.  More specifically, how wide the widow is right now and load styles (widths, font sizes, etc.) dynamically as that value changes.  We can even load totally different style sheets if the site is being projected, printed, on mobile or on PC.

What now?

You many not have to blow up your current site and build a new one on a responsive framework.  It may only require a little retrofitting.  First off, check your Google Analyics to see what percent of visitors are viewing the site on a mobile device now.  If it’s 25% or greater, you may want to invest in a new responsive site to offer that full quarter of visitors a more enjoyable and flexible experience.

Need a little guidance?  Let’s grab a beer.