It was around a decade ago that the number of new web-based platforms, operating systems, and devices began to really snowball. This process seems only to have accelerated. Now in 2015, digital designers of all stripes are faced with a common challenge: the need to keep up with an infinity of new frameworks, systems, and most importantly, resolutions.

If there’s one thing that has characterised the user experience in the last ten years, it’s the desire for integration. These days, the average user is engaging with content – the same sites, social networks and email accounts – across at least two devices, if not more. Estimates suggest that 80% of all adults with online access now own a smartphone. The potential to connect with others has never been greater.

However, this poses a problem for the Web 2.0 way of doing things. The old approach would be to design different, separate pages for different devices and browsers. Remember those ‘Best viewed on… [browser]’ banners that designers used to have to put on sites? Or those early ‘mobile’ sites designed for the first iPhone, redundant on all other devices? Such a ‘solution’ cannot possibly keep up with the lightning-fast changes in user needs and demands.

An answer? Responsive web design.

iphones

Responsive architecture

Responsive design is already coming to dominate the web that we interact with. It derives from “responsive architecture”; an architectural school that aims to develop environments which actively respond to the needs of people within them. It is “a class of architecture that demonstrates an ability to alter its form, to continually reflect the environmental conditions that surround it.” This includes both aesthetic and functional responses.

Traditional, modernist architecture aimed to constitute a live environment and shape a user’s response to it. Using the best technology available, responsive architecture instead seeks to create a continuous and mutual discourse between environment and inhabitant. Take the example of the ORAMBRA ‘Prairie House’ in Illinois; emitting less than half of the carbon of a typical house in the region, it uses photo and thermo-chromatic inks to alter the colour of the interior membrane depending on the weather, thereby breaking down the barriers between the inhabitant and their surroundings.

It’s this principle of blurring technology, environment, user and structure which underlies responsive web design. As Ethan Marcotte argues in his article, Responsive Web Design:

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

Laptop user

Working it into the web

Many commentators have talked about the importance of screen resolution in responsive web design; that is, the importance of making designs scalable, regardless of the resolution of its viewport:

Screen sizes will always be changing, so it’s important that your site can adapt to any screen size, today or in the future.

However, screen resolution isn’t the only thing responsive designers need to account for – looking at the ‘material design’ philosophy behind the latest iteration of Google’s Android, it’s clear that whole systems are now being developed around these principles. In our next post on this topic, we’ll be discussing how exactly designers can weave these principles into their work. A good example to leave with is that of scaling icons. Android thankfully provides a comprehensive icon size rule-set to enable the work of developers to function in any number of different scenarios, allowing us to account for all possibilities.

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.