Responsive Web Design Explained
1) What is Responsive Web Design (RWD)?
In simple terms, a responsive web design uses a technology called CSS Media Queries to determine the resolution of the device it's being served on. Using flexible images and fluid grids layouts, the content can then be adjusted appropriately to fit the screen - providing the optimal viewing experience for the user.
RWD also commonly involves optimising the site for the device’s user interface - for example, providing more user friendly buttons for touch screens or considering swiping on an iPhone vs. point-and-click on desktop.
2) Why do we need RWD?
Because the way we are viewing the web is fundamentally changing. As an example of the different devices now in circulation, worldwide tablet sales doubled in 2012 with sales reaching over 100 million. And in the UK, a YouGov study estimates there are 5.87 million tablets in UK households and that this figure is likely to increase to over 10 million tablets by August 2013. (Sales numbers will top notebooks / laptops for the first time.)
Smartphones are also obviously on a meteoric rise. The majority of mobile phone users now own smartphones, not feature phones. And the shift to mobile appears to be happening at an extraordinary speed with many popular website's reporting 30% of their traffic is now through mobile browsers. Trends suggest this could easily rise to 50% next year.
3) What are the benefits of RWD?
The solution to the changes in viewing behaviour described above is to build a website that works equally well on every device. And the benefits are obvious - you design and build a website once and it works seamlessly across thousands of different screens.
There are other additional benefits:
- SEO - Google has specifically said that responsive design is “Google’s recommended configuration.”
- Easier to Maintain - you only write content once and it is published across every platform, not to mention it’s future friendly
- Content Consumption - makes it easier for the customer to get to the content that they’re looking for.
4) How do we design a responsive website?
A responsive website does require a lot more detailed planning early on, before even reaching the design stage. That extra effort in planning is best done at the wireframing stage.
Wireframing for RWD:
There are a number of various tools, grid systems, methodologies and templates designed to assist with the thinking during the wireframing stage. Some are simply templates to print out to sketch on; some are methodologies to follow, whilst others involve adapting existing wireframing software.
Larger version can be found here: https://acme.mybalsamiq.com/projects/responsivewireframes-jnolte/01-home-NG).
Ideally you would want to end up with something that looks like the above diagram at the end of the exercise (and for each template – home page, subpage etc.). A detailed wireframe containing all the information necessary to communicate the design to the client, the designer and developers (notice the grid system behind the elements – this is essential for developers. This could be achieved using a wireframing tool like Axure or Balsamiq, or alternatively, if more detail is required (such as colours, font suggestions, button styles etc.), a methodology suggested by www.styletil.es could be more appropriate.
Content Considerations during wireframing:
The most important and vital part of the wireframing process when designing a responsive website is to consider how best to deliver your content to the various device resolutions.
For example, some considerations would be:
- What items should take priority on each resolution
- What items should be hidden, prominent or resized
- How should the main navigation be displayed on small resolution
- How do I best deliver the content my users are looking for
As an example, you will find that it’s become best practice for responsive websites to often hide the main navigation, revealing it with a small ‘show menu’ button at the top of the screen.
It’s really worthy doing some research on how others are achieving the best, most intuitive results. At the end of this document there are some links to very good responsive websites.
Designing for RWD:
The proposed wireframes can be passed to a designer who can then start to build mock ups of the various screens. These mock ups, based on the dimensions set in the wireframe and associated grid system, will then provide the client with the necessary details - images, colours, font styles, patterns etc., which can be refined in iterations in the usual manner.
Coding for RWD:
If the dimensions and grid system are agreed at the wireframe stage then the developer can use the wireframes to begin building the layout of the various templates required in code. The developer does not require the complete designs to begin doing this but they must be made aware of any dimension or grid system changes if they occur during the design process.
Once designs are agreed the developer can then add further code and styling to implement the design fully using the various technologies required: HTML, CSS, JQuery etc.
Testing your responsive website:
It’s unlikely that you’ll have all the necessary devices required to test the layout when coding has commenced. Thankfully there are numerous tools to assist in swapping from one dimension to another very simply on your PC. Tools such as http://quirktools.com/screenfly/