Responsive Web Design: Which Big Brands Have Made the Switch?

Responsive Web Design, often abbreviated to RWD, is a design technique used to ensure that the viewing experience of visitors to a website is of a consistently high quality no matter what types of device are used to access it. In this post we ask: which famous brands are using this technique, and how are they using it?

The Basics of Responsive Web Design

Responsive web design describes a set of design techniques and principles that aim to produce websites that work just as well on one device as they do on any other. Viewing experience is everything. By using fluid design layouts, proportional grids and advanced media queries (CSS), designers are able to ensure a website looks, feels and operates at the optimal standard. In this case, optimal means whatever layout or technology results in the best or most fitting viewing experience for all users, regardless of whether they access the site on a desktop PC, laptop, tablet or smartphone. RWD reduces the need to scroll, pan or resize a page, making reading text and viewing images a simple, enjoyable and intuitive task.

So, Which Brands are Doing it?

A number of leading brands have embraced responsive web design, including Microsoft, Currys and Starbucks.

Microsoft

Microsoft published its new corporate website to coincide with the launch of Windows 8. The cleaner, less cluttered site uses several CSS files, with a sprinkle of Javascript and ASP, to resize all design elements, including text and images, when the viewing dimensions are modified. That can occur when the browser is resized manually by the user or when the site is accessed on different types of device. The fluid nature of the site ensures that its appearance scales consistently from, say, a 27-inch widescreen monitor to a 4-inch smartphone (held vertically or horizontally). One notable feature of this is that the website's search box changes size and appearance when the viewing area becomes smaller.

Currys

Currys also uses a fluid layout, but its developers have gone a step further than Microsoft by making sure some of the design elements change several times in accordance with the screen size or viewing area. At full size (PC or laptop), the site displays the Currys logo on the left, a search field in the centre and account and basket links on the right. When viewed on a smaller screen, or by resizing the browser, the entire header switches to a new design and layout. A smaller logo replaces the full-size version and moves to the top centre. Menu and search links appear on the left and the background colour changes to demarcate the area effectively. When the screen size is reduced even further, all text is hidden and the navigational elements are replaced by symbols (e.g., a magnifying glass for the search function).

Starbucks

Starbucks has paid quite a bit of attention to the benefits of RWD. Unlike Microsoft and Currys, however, the site does not currently replace navigational elements with symbols when the viewing area is reduced to mobile proportions. Instead, the horizontal navigation bar simply disappears, leaving users free to click on links beneath the main corporate message.

The Verdict

As tablets and smartphones have become ever more popular, responsive web design is close to becoming a necessity. However, brands like Microsoft, Starbucks and Currys are currently leading the charge – many big firms still rely on separate mobile domains, or have no support for portable devices at all.

This isn’t necessarily all that surprising. Designing, developing and testing a new site is a significant investment; it’s not something brands are going to commit to lightly.

Microsoft, Starbucks and Currys all use responsive web design in slightly different ways, but essentially they’re all following an established format.

Their use of responsive web design certainly makes for easier user experiences. But the techniques are still young – these brands are the first(ish) wave.

It’s going to be fascinating to see how web developers dream up new, exciting, creative ways to utilise responsive design in future.