The new website display landscape is a moving target for architects, designers and developers of today’s websites. Users are more connected than ever before and they have a wide variety of devices, with various screen sizes, and now with Retina displays – various resolutions. The old standard for designing for 1 or 2 screen sizes has all but been tossed out the window — not to mention touch versus click interactions. Usage of various devices, screen resolutions and sizes is outpacing website design. The Web, and its architects, must adapt. One potential solution – Responsive Design.

TECHNOLOGY SAVES THE DAY

The problem of maintaining a user’s focus area within various screen resolutions and device interactions is a complex one. Responsive design makes website content and interactions adaptive and thus, flexible. Smashing magazine gives a good summary of Responsive Design:

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market. (source)

BOSTON GLOBE – AN UNEXPECTED TREND SETTER

To my knowledge, the Boston Globe was one of the first sites with high traffic, to launch a fully responsive website. Filament Group, a Boston-based design and development shop that focuses on accessibility, and their partners, worked for more than 5 months on the interface design alone. Almost as a Christmas gift to their client and web designers everywhere, BostonGlobe.com launched their responsive design in late December 2011.

Prior to launch, one of the major technical challenges was… wait for it… Internet Explorer (insert shock-face). IE is just too slow, and doesn’t fully support media queries. Filament group wrote RespondJS to work around the limitations and inadequacies of the plagued IE browser.

BostonGlobe.com

At the time this project was in development, touch capability was still evolving and there were no clear standards. JQuery mobile looked like the best option, but at the time was it was still too limited. Filament Group picked up some of the existing code for touch interactions and images, and wrapped their own, custom code around it. The solution they developed dynamically (and elegantly) loads jQuery for those older browsers that don’t support it – like older Blackberries.

Another technical challenge was the inclusion of advertising content and all the Javascript associated with tagging and tracking of the advertisement. Filament group sandboxed all the ads and wiped out interstitials as a solution. So, whether by technical limitations or intentionally crafted by an architect, their solution benefits the user. Responsive design was enough of a challenge to create an optimal user experience. In my opinion, advertising techniques that use lightboxes and interstitials to interrupt user’s experience are not effective — they’re frustrating. So when crafting an optimal user experience on a mobile touch-capable device, I was glad to learn they had eliminated those from their ad model.

MOBILE AD UNIT? OR A DESKTOP AD UNIT?

Mobile vs. Desktop ad unit is often in question when deciding how to incorporate ad units into responsive design solutions. Multiple ad unit versions add time and money to design, develop, track, report on multiple versions of an ad. The Boston Globe did something different – they sold one ad unit, and resized based on device dynamically. Therein lies the beauty of Responsive Design! As with images on the site, they resize and reposition a single ad unit, simplifying the entire process.

SO, WHERE IS RESPONSIVE DESIGN GOING?

Responsive Design isn’t going anywhere — it’s here to stay for the foreseeable future. It’s a bit like the elephant in the room, however in that it’s still very new and is still being defined so there are many unknowns and a dearth of rules and standards. Nevertheless, I will go ahead and claim that it’s going to the de facto web standard eventually.

For the moment, there are still challenges with sites, however. For instance, sites with a lot of functionality, add-ons, third party plug-ins, etc. will have problems converting to a responsive site. Robbie Day points out in his blog article that even on President Obama’s website (www.barackobama.com) “some content still bleeds off the page” on due to plug-ins.

With a wide variety of plug-ins, functionality and devices out there, and more looming, it’s imperative, in my opinion, to invest in the future. At THINK we’re poised to help our clients move toward multi-screen user experiences. We recommend our clients move with us into the future using Responsive Design techniques to pave the way.

For more information on how we can create a responsive website for your company contact Carolyn Donegan, cdonegan@thinkinc.com