Getting Responsive With My Web Design

Over the next few months, TechyDad.com, TheAngelForever.com, and FollowerHQ.com will be getting facelifts.  You see, I’ve recently caught the Responsive Web Design bug and can’t wait to rewrite these sites with these principles in mind.

Responsive Web Design primarily refers to the use of certain CSS3 media queries to evaluate the browser’s size and adjusting the design appropriately.  (There’s more, but I’m trying to keep the Geek Level to a minimum.)  This means that the same website will serve as a mobile site, a tablet site, and as a desktop web site while (at times) looking drastically different in each.

For an example of Responsive Web Design, go to the Boston Globe’s website.  Make sure your browser is resized to the biggest your screen will allow (but don’t maximize it).  Now, slowly resize your browser to make it smaller and smaller.  You’ll see elements shrink until the three column layout becomes a two column layout and the long top menu gets hidden behind a “Sections” heading.  As your browser gets even smaller, the layout will shift again to a one column design.  Finally, the design will shift one more time to orient elements so as to best display on a smartphone.

Responsive Web Design isn’t hard, but it isn’t quick either.  You must consider the entire design across multiple browser sizes and how to best re-arrange the content in each case.  This can be time consuming, but it is well worth it.  After all, more and more people are browsing sites on non-desktop/laptop computers.  Smartphone and tablet use is rising and if your site is unable to accommodate these users, you stand to lose traffic.

What have you done to make your site available to smartphone and tablet users?

NOTE: The "webpage" image above is by mantasmagorical and is available via morgueFile.