Error getting theme layout

Time to Adapt: a Designer’s Perspective on Responsive Design

Posted @ 4:07 pm by Ben Hewett | Category: Creative Design, Strategy | 0 Comments

Building on an article written on responsive design back in September of 2012 by our front-end director Grady, I’d like to elaborate more on the topic of responsive design and provide some additional examples. As Grady already pointed out, the current proliferation of available devices illustrates the increasing complexity that an online brand needs to thrive in. There has already been much written on this topic, so I will addresses it here from a very high level only, providing the basic vocabulary needed to assess if this is the right approach or not for your brand.

At its essence, the web has always been in a sense responsive. It used to be that you would build a shiny new website that would “gracefully degrade” based on the version of browser, bandwidth, or available plugins to a user. This approach ensured that only a small population got to see the best of what your brand had to offer and made the development process for all the varieties of an online experience convoluted at best.

Some fifteen or so years later things couldn’t be more different and a new approach termed Progressive Enhancement is now becoming the norm. Working off the notion that designers should start with the base user experience and work forward (e.g., design for mobile first), the goal is to ensure that everyone can get the best experience irrespective of how they wish to interact with the brand. This approach is critical to understand now due to the variety of browsers and devices a customer may be using. Each use case brings with it different expectations from the customer based on the device they’re using. Stemming from this philosophy is where the terms “responsive” or “adaptive” design come into play.

Those familiar with the tenants of Zen will know about the concepts of letting go of control. Control is of course a large part of the marketing design and management process, but like anything it can get in the way. This has never been truer for experience design on the web and is why responsive (or adaptive design) is so powerful. Responsive design allows for functionality to adapt organically to the device in addition to adjusting the layout, typography, and imagery to “fit” the screen resolution. I’ll spare you the visual design and technical details of how this all works in this piece, but needless to say it greatly simplifies how an online experience is managed while ensuring that your customers get what they want when they want it.

SolutionSet has already delved deeply into this area, focusing on the development of fully responsive marketing websites and more complex SAAS web-based applications. One such example is the Murphy-Goode Winery website. The site was developed to be highly visual yet still gracefully adapt to the form factor of the device it is being viewed on. Especially challenging was how to translate the more complex product screens into an equally elegant presentation at smaller sizes.

Typography and imagery have also been paid attention to so that the presentation retains its visual impact at all device break points. This is achieved by locking up the typography to what is called a ‘baseline grid’ that ensures that the line height and other typographic settings are appropriately scaled for the target device. Similarly, imagery is controlled by proportionally scaling the image dimensions while serving up the smallest file size for slower mobile connections. All told, this approach provides Murphy-Goode with a very flexible platform and visual language to leverage as their site continues to grow without having to worry about what to do when the next version of the iPhone or Nexus comes out.

Murphy Goode Site

Murphy-Goode site shown in laptop, tablet, and mobile.

 

In its essence, responsive design is a much more organic way to approach experience design and technical implementation. It can require more time upfront to develop, but in the end ensures that your online experience can grow and shift more fluidly as the modalities of interacting with the web continue to grow and shift. This topic clearly impacts many more aspects of online brand development than I have touched upon, so expect additional insights in the coming months as SolutionSet continues to refine our approach to what looks to be a very responsive year for the industry.

 

Author: Ben Hewett is an associate creative director in SolutionSet’s San Francisco office. He leads digital creative programs for a wide range of B2B and consumer focused clients.

Leave a reply

Error getting theme layout