IDEA No 98
RESPONSIVE WEB DESIGN
We work, shop, play, socialize and relax in front of screens. We have a screen in our pocket, a screen on our desk, a screen on our lap and a screen in our front room. We use multiple screens at the same time. We move between screens to carry out tasks.
Ethan Marcotte, Responsive Web Design pioneer.
Whether we are consuming media on a PC, a tablet device, a smartphone or the TV, we like content optimized for that particular device. This is not easy when they all have different screen sizes and interfaces and are used at different points of the day for different tasks.
Websites are traditionally optimized for desktop browsers, but increasingly the most important screen is the one on our phone. It is the last screen we look at at night. It’s the one screen that cuts across our work and leisure time. Content optimized for larger screens often results in a disappointing experience on smaller screens. Cropped images, wrapped navigation, rollovers no longer working and illegible text are all common degradations. Designing for a smaller screen is equally unsatisfactory at larger resolutions. Traditionally, this has meant different layouts for each device, but with ever more screen sizes to optimize for, this is a huge task.
In a May 2010 article for A List Apart, Ethan Marcotte suggested a solution. Inspired by responsive architecture, where buildings react and adapt as people pass through them, he coined the term ‘responsive web design’ (RWD). In the article he states: ‘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.’ Responsive web design makes no assumptions about a browser window’s width. It responds elegantly to the device using ‘media queries’, a World Wide Web Consortium standard. Navigation can be adjusted, images can be repositioned, content can be re-aligned and font sizes adjusted. It is a better experience for both the user and the developer.
Despite the hype, responsive design is just good design. Since the birth of the Web, designers have had to create webpages that worked at multiple resolutions. Screen resolutions have always varied. Just like users, they come in all shapes and sizes. It is the designer’s job to accommodate them.■
‘Increasingly, the most important screen is our phone, the last screen we look at at night.’
Responsive web design makes no assumptions about a browser window’s width; it responds elegantly to the device.