Ricardo Queiroz, our Art Director, recently led a Lunch and Learn session on Responsive Design for the members of our Delvinia and AskingCanadians teams. Here’s a look at what he had to say on the topic.
What is it?
Responsive design is a design approach that adapts the medium to the users’ needs. On the web, it’s about adapting the interface, and how the content is displayed, to different screens. Basically, it involves scaling down a web page to a tablet and/or smartphone or scaling up from a mobile device to a web page.
Why use it?
The way users access the web is changing and with new devices coming out every day, the need for a more flexible structure is necessary, meaning: It’s all about user experience. We want to translate the experience we’re creating for the desktop to other screens like tablets, mobile and TV. Responsive layouts are a more future proof approach to what’s to come.
But, responsive design is not a final answer. It’s still important to consider the project goals. Responsive design may not be suitable for every site. Considering the strategy and user experience are key.
How does it work?
Responsive design is made possible by a new module of the CSS3 specification called media queries. Media queries have been around for a long time but it’s now possible to specify different styles to different targets (think screen resolution, window size, and number of colours).
Working only with CSS doesn’t allow us to change any content, so by adding other technologies like HTML5 and Javascript it is possible to load specific content to certain devices, like smaller images to mobile for example.
Workflow
Unfortunately, creating a responsive site is not an automated process and the very first step should be developing a strategy and deciding whether responsive design is the best approach for the project.
If it is, you will need to choose which devices and resolution breakpoints to target as there’s still the need to architect, design and develop the different layouts for different resolutions.
From a content point of view, there are a couple of approaches that can be used: mobile first or desktop first.
For the first option the idea is to create the project by using mobile as the starting point and scaling up. By doing so, you’ll make sure that the most critical and important content is displayed, adding extra content and functionality as the site scales up.
Designing for desktop typically begins with defining all of the content and functionality your site or application needs and then scaling down to mobile by optimizing and reducing content to what the user needs on the go.
The idea of a responsive interface basically gets us thinking of creating for different platforms at the same time, which makes the process a bit more complicated but the outcome and the experience for the user is worth it.
See for yourself.
Examples
• The Boston Globe – This is one of the biggest projects to date to be created as a responsive layout. The grid changes as you increase or decrease the size of the screen adapting the content nicely to different resolutions.
• MacDonald Hotels & Resorts – Navigation and buttons adapt to a mobile browser changing measurements and keeping in mind the user experience when navigating on mobile.
• Smashing Magazine – A good example of a site adapting not only to a small screen but also to a large display. The navigation and ads shift to the side when the site is viewed in a large resolution, making good usage of the whole space.