Responsive Web Design
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.
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.’