Responsive and adaptive website layouts, commonly referred to as RWD and AWD, have been a growing necessity in web design for years now, but although the terms are arguably familiar there is still confusion around what the differences between these layouts are why they are important in modern web development. This article will explain the differences between these designs and why they are important for your website or your client's websites.
(Want to see reponsive web design in action? Simply adjust the width of your browser to see this website respond to different screen sizes. That is responsive web design in action!)
Responsive Web Design
As far back as 2010, RWD was coined by Ethan Marcotte in his A List Apart article. I recall reading it at the time since A List Apart has always been am inspiring source of cutting edge and innovative approaches to typography, layout and design. As web accessibility continued to grow it became more difficult to come up with a web design that would accommodate different screen sizes. A person with an 800 x 600 width screen gets an eyeful while another person with a 1440 x 900 sees a much smaller website - small width, likely small fonts, etc. Ethan wrote at the time [in 2010] that
Mobile browsing is expected to outpace desktop-based access within three to five years.
...which brings us to 2014 & 2015.
Responsive web design uses a combination of CSS 2.1's media types which can detect screen width with an attribute like max-device-width followed by a value like 480px.What this means is that particular styles can be applied to a device that has a screen width up to 480px. Now, using different values, you can call different stylesheets for various detected screen widths. This is the basis of RWD and what allows developers and designers to create different presentations of the same content by the use of em font units, flexible multimedia (image, video) markup techniques, and fluid content containers such as div's. While viewing a page on a RWD site, the format of its layout does not require a page refresh to change but instead it simply responds to the screen width even if it is changing (like going from a tall to landscape width by tilting your smartphone or tablet). RWD is truly device agnostic.
Adaptive Web Design
AWD is a slightly different approach. Named by Aaron Gustafson, AWD uses JavaScript or jQuery behaviors to detect a particular device that delivers content in a specifically formatted structure for that device. With this approach a web-page could be designed for three different sizes: 320 (pixel width) for mobile phones, 760px for tablets, and 960px for laptops, and 1280px for desktop computers. Content in the form of specific html and css is then delivered to the viewer based on the characteristics of the device that have been detected. The combination of technologies used for detection are what's known as progressive enhancement (PE), with the three layers of PE consisting of:
- Content layer = rich semantic HTML markup
- Presentation layer = CSS and styling
- Client-side scripting layer = JavaScript or jQuery behaviors
AWD sites will often 'snap' to different layouts whereas responsive ones will constantly adjust to the width, giving a more animated appearance.
Is it Better to use Adaptive or Responsive Design?
As is the case with many technological questions like this, it really comes down to what the intent is. In my own experience, RWD covers the widest audience while allowing me to maintain the structure, the HTML, of my websites consistent. I let the media queries do the detective work, and present different stylesheets (CSS) based on the width. By layering stylesheets in a manner which is based on 'mobile first' and then calling other stylesheets as the screen width increases, positioning and sizing of elements such as images and menus can easily be swapped or changed.
With AWD, if your content was meant to be delivered on specific devices, such as a smartphone, then it arguably makes better sense to have specific layouts made for those devices.
Pure Web Media creates all websites with the capacity to be responsive. Building responsive websites does take more work but if reaching the greatest amount of people on all kinds of devices is important to you, the client, you can be assured that the capacity is there whether you choose to take advantage of it now, or later.