design

switching responsively

The web design approach at many of the agencies I've worked with has been as follows:

• a. Pitch a desktop website and a mobile website
• b. Present comps, sitemaps, content strategies and sitemaps for web and mobile (by treating them as distinctively independent components)
• c. Double the work: Code a desktop website and code a mobile website. Ensure both digital properties degrade elegantly to support older browsers.

What’s wrong with this picture? The approach is not wrong, but the process should be tossed out. Responsive Design is a more elegant means of accomplishing the same objectives, with less work. With the increasing use of mobile devices to access the web, it’s ever more important to focus on effective and accessible means of displaying content. Websites should function well on multiple devices; not just a desktop / laptop computer with the addition of one or two targeted smartphones (e.g., iPhone and Blackberry). With a progressively enhanced website it is possible to create one website with stylesheets to create a digital property:

• With content and functions accessible to all web browsers
• That utilizes semantic markup that contains all site content
• That utilizes layouts enhanced by externally linked CSS along with enhanced behavior provided by unobtrusive, externally linked JavaScript
• That respects user preferences for device and web-browser.

Responsive sites require more planning and costs at the beginning, but the end result creates a digital property that is easier to manage and update. It is also not as difficult to implement as one might imagine. I recently updated the layout of gomiki.com to a responsive grid. Resize your browser window to see the outcome of my work. You will note that the content flows to fit the size of the display area.