Responsive Web Design (RWD)

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.

 

Content Out

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.

 

Mobile First

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.

Web 2.0

Web 2.0 is a term that was coined in 2004 at an O’Reilly Media conference, and referred to how the World Wide Web has evolved into a provider of interactive online software services.

Examples of site types that could be referred to as being under the web 2.0 bracket:
• free web-based email
• online banking
• project management tools
• word processing
• spreadsheeting
• consignment and flea market trading (e.g. eBay)
• price shopping for consumer goods
• digital photo processing
• news feeds
• online radio
• video hosting
Usage of the web in the early days (from 1989) consisted of mainly being a huge collection of static electronic ‘brochures’. This period in the development of the web, now referred to as web 1.0, saw the number of users grow exponentially – Millions of people jumped on Web 1.0 as the modern way to receive information about the world. The growth pattern continued until 2001, when, suddenly, the “Dot Com bubble burst”. It burst because many internet startup companies could not live up to the multimillion-dollar expectations of profit. Thousands of people lost their jobs as investors discovered that web users were reluctant to move their consumer spending onto the internet. People just didn’t trust the web enough to do big spending online, and many dot com companies had to close down accordingly. The frantic web growth suddenly slowed.
However, since around 2003 the web has evolved into a provider of remote access software and growth returned to the web. As Web 2.0, the world wide web has also become a medium for online software services.. Spreadsheeting, word processing, private investigator services, wedding planning, web-based email, project management, headhunting, movie and file sharing, graphic design services, car tracking and gps.