[t]he control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”
John Allsopp
Responsive web design is about making websites that function well on all devices. A responsive web site will alter its presentation depending on the screen it is rendered on.
Responsive web design has come about with the prominence of the smart phone. Previously, internet audiences viewed content on desktop computers, so designers created websites to suit that particular format.
At this beginning of the web, designers worked to a given format – the desktop computer monitor. Having a single canvas size to design for was reassuring. It was similar to print page layout. Variables remained constant. The position, size and other presentation options were decided on by the designer and remained fixed.
As the web developed and computer monitors improved, designers began to realise that the presentation of websites need to become more flexible. Different desktop monitor sizes meant that the page width varied.
When people started using mobile phones to view content from the web, things changed dramatically and quickly. Early strategies to deal with mobile phone browsing included completely seperate mini sites. This created content double handling and a lot of extra work.
When Apple released the iPhone is 2008, mobile internet browsing skyrocketed. Mobile browsing was set to be a major shift in the way people accessed the internet.
In an article written for A List Apart magazine in 2011, Ethan Marcotte coined the term ‘responsive web design’ and articulated a new strategy for website presentation. The core of the new design trend was flexibility. Marcotte proposed a design strategy that set out to produce single websites that support all devices screen sizes. A responsive website would dynamically change appearance to suit the audience.
A responsive website serves the same HTML to a browser but checks the device before injecting the appropriate CSS. Depending on the screen size page elements might reorganise, typographic hierarchy might be modified and graphic elements could resize.
Marcote described three core parts to the creation of a responsive website:
- A flexible, grid-based layout
- Flexible images and media
- Media queries
A flexible, grid-based layout
Browser width can change to any size, whether it is resized by a user or conforming to a different device viewport. In contrast to print based layouts, a grid system for a responsive website needs to be fluid and flexible. Column widths need to stretch and flex to accomodate change in the browser viewport.
#myPage {
width: 90%;
}
Flexible images and media
A flexible grid is a great start but a fixed width image will break the layout. In responsive designs images also need to be flexible. A responsive image needs to automatically adjust to fit the size of the container. At it’s simplest a flexible image can be achieved with a simple style rule:
img {
max-width: 100%;
}
Media queries
Media queries are the CSS mechanism that we use to check screen size. With media queries we can decide on particular increments where we would like to make changes to the page layout, these are called break points. When your page loads the media query inspects the viewport and then deliver presentation instructions to the browser. For example a media query could check for a browser width that is greater than 700px. If the width is less that 700px the background colour remains the same, but if it is greater the background colour would change to red. Here is how you would write that in CSS:
@media(min-width: 700px) {
body {
background-color: red;
}
}
Mobile first
The idea of ‘mobile first’ design is an extension of the responsive web design approach. The idea is that designers start working on the smallest screens, which have the most restrictions, and then build outward to screens that can incorporate more features.
The mobile first design idea has built a lot of momentum and has been incorporated into the practice of some big players. From 2010, Google’s design focus turned to the experience of mobile users. The then-CEO Eric Schmidt said, “What’s really important right now is to get the mobile architecture right. Mobile will ultimately be the way you provision most of your services. The way I like to put it is, the answer should always be mobile-first.”
At around the same time Google made changes to search algorithms that favours mobile websites. Mobile-friendliness became a ranking signal in mobile searches. This means that a good mobile experience for your users can convert into discoverability in google search results.
The audience numbers also make mobile first an obvious design strategy. Mobile device sales have out-striped desktop devices immeasurably for years, and the time that users spent on the internet on mobile phones over took desktop usage in 2016. According to statcounter.com mobile market share worldwide is currently 54.5%.
It’s important to ensure a seamless user experience across all platforms. Users need to be able to access website content on whatever device they have at hand. Mobile first design strips away the expendable and focuses the design on absolute necessities.
Conclusion
Responsive Web design is a design practice that focuses on the user first. RWD responds to the users device platform and screen orientation and presents website content in a flexible way.
References
- Ethan Marcotte. Responsive Web Design, A Book Apart, 2011.
