Responsive Web Design

@ Pervasive Media Studios

19:00, May 13 2013

Mobile and tablet technology binary com is now a significant enough medium that we cannot ignore those user's experiences. What are the best practices for designing and implementing sites that respond to the spectrum of viewing devices we use to consume the web?
Katja Durrani

Katja Durrani

@kdurrani |
Freelance Web Developer

Keir Moffatt

Keir Moffatt

@iamkeir |
Freelance web developer, mantis wrangler and breakdancer.

Bonny Colville-Hyde

Bonny Colville-Hyde

@almostexact |
UX Consultant who goes binary online review on adventures, skiis in Lapland, crafter & proud Girl Geek.

Slides And Videos



Keir has created a public Git repo with verbose, individual commits showing how he made a particular site responsive.


Bonny's Notes

Content, clients & responsive design

Everyone is talking about review responsive design - and rightly so, audiences expect websites to just work on any device they use.

Clients are also excited by seeing their website in a different way. Clients often mistake responsive re-designs as being a purely technical solution, and they are not.

Creating responsive websites isn't all about design and technology - the most significant problems relate to content.

Most websites have too much content that is crap: its outdated, too wordy, not written for the web, is difficult to navigate and doesn't meet user needs.

Smaller screen sizes make it more onerous for users to wade through all this stuff, and frankly, if its not relevant or useful on some devices, its not going to be relevant or useful on desktops either.

One of the hardest challenges of working on a responsive site is persuading clients to review and invest in removing superfluous content.

Once content has been placed on a site, it is very difficult for clients to remove it as they worry about what will happen. In general its a lot harder to take away than it is to add. This is what leads to whole sections of sites becoming out of date, and of little use to users. Over time, sites put on 'weight' as more and more is added, and not stripped out.

As web professionals its important that we educate clients to understand the importance of content, and that their audiences come to their sites to conduct tasks in a timely manner. Lets face it, nobody ever wants to feel like their time is being wasted, and we owe it to our audience to keep things simple, quick and easy.

'Content Bootcamp'

Websites that suffer from content obesity need to have a strict regime to get them back into shape, hence why I call this 'content bootcamp'.

Getting clients to see the problem they have with their content is tricky, as most will not want to hear about it (they're expecting a technical solution that can be built for them). There are some tips though that can help get through this difficult stage in the project:

  • Start talking about content early, don't leave it until you start the project.

  • Ask clients to complete a content audit where they record every page of their site and assess it's content and suitability. The client must do this so that they engage with any problems they have.

  • Run user research (usability testing, card sorting etc) and ensure clients attend the sessions to watch what their audience has to say about their site. Clients will find it much harder to resist making changes if they see their problems being experienced by their customers first hand.

  • Create engaging reports that break the mould - incorporate humour and keep things short. This will encourage the reports to actually get read and shared beyond the stakeholder team themselves. I find comics can be a good way to show and not tell the user's stories.

  • Run workshops with the client team to help them see their content more objectively. For instance: choose a troublesome page and get them to identify what parts of it help their core users, and what parts detract from the experience. Another useful technique is to remove the content from a page and give it to them as a word document, with no styling or visual treatment. In nearly all cases the content alone should make sense and be useful without the presence of the design. If not, re-work that example live with the clients to show how differently the information can be shared.

  • Educate client teams in how to write for the web and mobile devices. Structuring content, and knowing what natural language users will be using to engage with them will significantly help to improve findability and general user experience.

  • Get clients to prototype their content as early as possible. It doesn't need to be perfect, encourage them to start trying though. Services like Gather Content can be really useful as it allows clients to manage their content creation before their site is complete.

  • All content within a site needs to have a place in a hierarchy. Every item on the page needs to earn its right to be there, and the most important, core information must be displayed at the top of the page to ensure users can get to it as quickly as possible and with minimal distractions. If necessary, run a content prioritisation workshop in which you force stakeholders to agree upon a hierarchical list of the most important aspects of their site - this can be a difficult process but is really helpful in the long run. Expect arguments between stakeholders!

15942 Internets of kudos to Gary Bristow for designing this site