Nerding out on responsive design – part 1
For the past two months I’ve been relearning my craft. Building an experience that uses multiple canvases and watching in awe as our strategy & development team turned the corner from complicated to simple. Seeing content unlock itself from its previous constraints was as fulfilling as it was challenging. Two months of gut checking and over-collaborating. It reminded me that done is better than perfect.
Responsive design is a web design technique for developing digital experiences that respond by detecting screen width and delivering an optimized design for the user’s device, whether it’s a Droid, iPad or a 40″ TV. While it’s not a silver bullet, it does provide a strategic platform for creating the best possible experience for the end user. As consumers engage with the web via multiple devices and platforms the need for brands to make their communications empathetic to whatever device the consumer is using becomes more important than ever.
Below is a pullquote from one of the founders of this technique, Ethan Marcotte:
Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our work within different viewing contexts. That’s not to say there isn’t a business case for separate sites geared toward specific devices; for example, if the user goals for your mobile site are more limited in scope than its desktop equivalent, then serving different content to each might be the best approach.
But that kind of design thinking doesn’t need to be our default. Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”
From this technique C+F has built a new functionality that solves for one of the biggest issues surrounding responsive design, which is the content capability for each device. Responsive design as it is usually practiced today uses flexible images to scale to mobile and tablet viewing, while this is better than pinching and zooming your way around a desktop-focused site, it doesn’t take into account that bandwidth speed varies widely depending on context. 3G and 4G download speeds apply constraints to the user experience. Waiting for content to download that was initially prepared to be viewed at a larger resolution and higher bandwidth isn’t optimal. A more empathetic solution is to create and deliver content and images that are optimized for the capability of the device. C+F does this by using a responsive content management system which essentially stores one large base image and creates smaller optimized images on the fly for multiple devices. This has two huge benefits—it creates easy and efficient site management for the brand, and creates an empathetic experience for the end consumer.
C+F sees this technique as a great new tool in our belt for creating optimal user experiences in a world that’s increasingly mobile, social, and on demand. Learn more about our experience design approach and drop us a line if you’d like to nerd out on an upcoming project.