Random header image... Refresh for more!

Make your interwebs responsive

The bane of every IA and web designer’s existence has always been creating an experience for the lowest common denominator – which usually means creating a locked or fixed web template that will render at all screen resolutions.  The problem with this is that at the lowest screen resolutions the user always gets a compromised experience and at the highest screen resolution the user always feels like the awesomeness of their screen is not being taken advantage of.  What’s the point of having a massive 24 inch monitor in 16 x 9 ratio if the website you are loading only uses a small portion of it?

To make matters even more complicated, creating experiences for the mobile web and tablet web have only increased the resolution possibilities – especially when you consider that mobile devices can be viewed in portrait or landscape.

Stating that what is “below” or “above” the fold is no longer as relevant may give you an excuse to virtually ignore vertical boundaries in your digital experience, but it does little to address the horizontal boundaries we have to consider or else live with the dreaded horizonal navigation scroll bar. Ack!

In mobile there have been two main camps on how to address this traditionally – either create a unique experience for each screen which can be time consuming and costly to both create and maintain, or completely sacrifice the intent of the original experience by “transcoding”  your desktop experience using an automated tool that will guarantee your content is at least readable – although this experience generally sucks for any site that isn’t primarily content / news driven.

With the smartphone and tablet space adding new sizes and resolutions all the time, marketers should take note of “responsive” designs that are taking off on the interwebs.  “Responsive” designs are sites that detect medium (desktop, mobile, tablet etc..) and then render the browser in such a way to provide the best experience possible in terms of navigability, readability and overall user experience.   Looking for a WordPress template recently I noticed that many of the premium templates are advertised as being responsive. Amazing!

Although I’m still an advocate for creating a web experience that is specific to the context of the medium, creating a responsive design allows you to still create context while making changes to page structure to best suit the resolution of whatever screen you are working with – including desktop sites!

One great example of responsive design on the desktop web is the starbucks site. Open to full screen then resize your browser smaller and smaller and watch how the experience changes  & responds accordingly.

if you want to geek out and see how this is done with code, check out this article with code and live examples from smashing magazine. I also found this great resource from webdesignshock.com.

A successful responsive design requires close collaboration between your experience designers and developers – but the payoff is a site that will serve the best experience possible no matter what screen your audience is on.   A better experience will always lead to better engagement and helping you reach your digital ROI goals.

 

  • http://www.facebook.com/mrjasonjang Jason Jang

    Heed these words. Spend a little money, and you can get a profoundly integrated experience. Implemented right, and you’ll streamline a lot of the maintenance work.

  • liu w

    AliExpress . com  – Find Quality Wholesalers, Suppliers, Manufacturers, Buyers and Products from china.
    Buy from  – AliExpress . com

  • http://www.consulting-business.com Michael Zipursky

    Phil – great post and important to keep in mind. The Smashing Mag article is helpful as well.