Responsive Web Design, or RWD, is the term used for the principle of designing websites that seamlessly respond to the user’s environment based on the device, size, resolution, technical capabilities etc. Although the application of RWD adds a significant level of complexity to the creation of websites, the original definition is actually very straightforward. In what has become a seminal article published on A List Apart, web developer Ethan Marcotte first introduced the concept to the web community in May 2010. This article turned out to be a real game changer to the world of web design, and RWD is now being seen as a necessary discipline for all websites rather than an additional feature to be offered to a client.
Several years ago, the most common screen size was 800 x 600, and therefore the standard dimension to design for. This was later replaced by 1200 x 800, and designers had to then consider designing sites that looked good on both screen formats. Today though, considering the most popular desktop or laptop screen-size is only half the battle. With such a rapid increase in the number of users viewing the internet on a plethora of mobile devices, it is no longer worthwhile designing primarily for one sized dimension and adapting to render well on other fixed dimensions. We now need to build sites that ‘respond’ to the size of the device that they are being viewed on and perform well regardless of the dimensions or device capabilities.
Key elements of RWD:
- A fluid grid = container widths set to % rather than fixed pixels
- Fluid images = images set to % widths to adapt to screen size
- Media queries set to certain breakpoints in screen width to change CSS coding accordingly (i.e reposition, or display/hide particular divs/classes
- JQuery plugins to make navigation bars collapse to single menu button on mobile devices.
It has been a long held mantra within the web design community that ‘content is king’ – this is also fundamentally important when designing a Responsive site. With RWD though a new term has been coined to adhere to: designing with Content Out. By putting so much focus on content, web sites can be created that are easy to read and use no matter what type and size of device they are viewed on. Ordinarily we may use grid systems, common layouts, and preset guidelines to create websites, and then later plug in the content – with this Design Out Content In approach, priority is not being given to the content. With the Content Out Design In approach, the proper structure is created first, knowing that this will work fluidly across all devices, and then fit the design around the content structure.
With RWD, the best way to design a site is starting with the smallest dimensions first, then design upwards. This way, you are first of all considering what the most important elements of the site are that must be available to view (and in what order) on all formats. Then, as you design outwards for bigger and bigger devices, secondary content, tertiary content etc can be added, and content placement adjusted to suit the screen it is being viewed on.