In the last years, with the advent of new web enabled devices — smartphones, tablets, connected TVs and more — our digital landscape has been rapidly expanding beyond the borders of traditional desktop/laptop screens. As mobile devices are increasingly becoming the primary way we access online content, responsive design has emerged as a popular design strategy.
Designing for all devices: apps and mobile websites
Smartphones and tablets have complicated the task of digital strategy and design by adding new resolutions and technical constraints. With plenty of different mobile devices around, dealing with this complexity—in particular, reconsidering the traditional 960px fixed width viewport—has been approached in two ways:
- Create complimentary (native) mobile apps (a trend fostered by manufacturers with their ad hoc SDKs and app stores);
- Create multiple mobile versions of websites and try to cover as many variations as possible.
Both of these options aim to create experiences that are perfectly adapted to the context of the device they appear on. Although they might look ideal from a coverage and support perspective, the problems with both these options are that:
- They require an additional financial, design and maintenance effort that may be overwhelming for clients.
- They may well prove to be a Pandora’s box in the long run as an endless number of new devices will appear with their own specificities.
Designing for any device: responsive web design
In parallel, another strategy emerged last year in the shape of a seminal article written by Ethan Marcotte, entitled Responsive Web Design. To avoid these drawbacks and based on the assumption that a web experience should (and could) be the same no matter the device (“one web”), Marcotte defended the idea of a single fluid website rendering different layouts per device.
His point was that a website designed following responsive principles would be more “future proof” as its layout would adapt to any device, content being smoothly rearranged and transformed to fit the device in question:
“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.”
To achieve this new ideal of “responsive design”, Marcotte defined three integrated features:
Many websites (including this one) launched in the last few months embraced this new approach and jumped on the responsive bandwagon with more or less success. Responsive web design is certainly a step forward towards a better and more flexible web, but it should not be accepted as the only way to go.
Our experiments with responsive web design
Recently, we experimented with responsive design for the new T+L website and thought it could offer an appropriate solution to supporting multiple devices.
We decided to prolong the experimentation with an internal challenge: T+L designers and developers were asked to come up with a series of layouts that would respond to changes in screen size. Ultimately we analyzed the outcome of this challenge and spent time breaking down responsive frameworks to figure out what were the pros and cons of using the responsive approach.
We identified two methods to initiate the design process:
- Either as a “progressive enhancement”, with mobile layout first and desktop layout at last.
- Or as a “graceful degradation”, with the full desktop website as a basis to design the other layouts.
So, what’s good in this?
Responsive web design is a valid approach as it requires a single effort to support a multitude of devices. Content leads the way and can be increased, reduced, shrunk or removed on demand and depending on context.
Then where’s the issue?
Actually there are a few…
Responsive design is based on the assumption that the substantive features of online content should not vary across devices. When we consider how much the user’s context can depend on where and how they are accessing online content, we see that this assumption may not be true all the time. If we use the case of a contact page as an example, it makes sense to display only a map or driving directions for the mobile context (since users are likely to be on the road), while displaying office photography and detailed contact information for the desktop context (since users are stationary and can afford to browse longer). A responsive design approach is too undifferentiated for these situations.
Creating a responsive layout is not easy and requires a lot of preparation – it must accommodate a series of grids on both portrait and landscape modes, as opposed to a fixed width layout with a single vertical view that adheres to a single grid system. This effort could be substantial, and might be a waste if the intended targets are explicitly defined (like in our contact page example). Ultimately, it’s important to ask: should my design be responsive or adaptive?
Another consideration we identified with responsive designs was their difficulty to treat type contextually. We observed that they were often too deterministic in trying to replicate typographic elements on small screens that were of minor importance for mobile usage. Conversely, we noticed some responsive designs were so fluid that they became too loose (excessively wide text columns, margins, etc.).
There are many solutions you can consider when trying to tackle varying screen sizes, but picking the right one depends on your projects’ goals and device context. Trying to find a golden solution might not be the right approach. Responsive design is just one of many solutions that can help with that problem, but it’s not the miracle solution that many are hoping for.