Try This on for Size: An Introduction to Responsive Web Design

The world of art has always been constrained.  From the moment you select your canvas, it is limited by size and location.  When and if you finally finish that painting, even the audience is limited to the lucky few who find themselves in the presence of greatness. So if the internet really is the world at our fingertips, then where are those magical jeans from that silly movie about the traveling pants?  Unlike a painting, websites are an art medium that can be viewed from anywhere, from a multitude of devices, and on a wide variation of screen sizes. While you can’t control what device is used to view your masterpiece, you can control how your creation is viewed on the device.

According to Gartner, mobile browsing is expected to outpace desktop browsing as early as 2014. For some this means maintaining multiple sites, doubling and in some cases, tripling the amount of work required. How many websites can one person or team possibly maintain?

Since Google’s endorsement in June 2012, responsive web design has been rapidly gaining attention, so what is it? Responsive web design is a clever solution that allows your website visitor’s experience to be optimized and consistent across multiple screen sizes. The basic idea is to create a malleable foundation with multiple options depending on the range that the output screen fits into.  In other words, a series of “if… then” statements that determine which wireframe to use based on the size of the output screen. For optimized viewing you would ideally have wireframes for standard desktop, widescreen, mobile, and tablet sized screens. Are you ready for a test drive? Take a look at and adjust the width of your window; drag and release, continuously making the viewing window narrower. Can you see the difference?

While tripling or quadrupling the number of wireframes necessary for a responsive design website may seem like a lot of work, the initial effort pays off in comparison to programming websites separately. Additionally, it will cut your maintenance work in half.  At the end of the day, mobile browsing is not only popular, but expected from your viewers. If your website isn’t as easy to read on a mobile device as it is on a desktop computer, your customers might start looking elsewhere.  With all the time and effort that goes into designing a new website, don’t you want the viewing experience to be optimized?

Unfortunately, responsive web design is not a one stop solution and comes with its fair share of challenges. First of all, the content you would ideally display on smaller mobile devices is not necessarily what you would like to be available to those viewing from a desktop or tablet device. Secondly, while your maintenance time will significantly be reduced, your initial workload has dramatically increased. Imagine the amount of time it takes to design, critique, and agree on a wireframe for an inside page and now multiply that by two or three. Now what happens if you are a mid-size to large enterprise with multiple inside page layouts, not to mention microsites. Finally, there are the technical aspects to consider: increased load time, cross browser capabilities, image resizing, etc.

As our browsing shifts from desktops and laptops to mobile devices, responsive web design becomes a critical game player for website design and development; however, it is a front heavy work process that requires careful planning and strategic execution.

Leave a Reply

Your email address will not be published. Required fields are marked *