Our Blog

where we write about the things we love

12

Mar

Responsive design: the lowdown and round up workshop with Brad Frost, Webstock 2014

I attended the Everything you want to know about responsive design… and less! workshop run by Brad Frost at Webstock this year. One of the key quotes that stuck with me was: “If your site isn’t responsive people (users) think it’s broken.”

A scary yet appropriate comment and a reality we are quickly approaching. Today users expect the best experience regardless of the device and if it isn’t similar or better than the desktop (which they may or may not ever visit – 31% of Americans only ever use their cell phone to get online) then the expectation is that it should certainly be no worse.

What is responsive web design (RWD)?

RWD takes an approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.

In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

It’s not an app and it’s not a mobile site – although it is optimised for mobile. It is essentially one fluid site that allows the content to be ‘poured’ into various devices and will render successfully in all of them.

So, the lens through which we view ‘the web’ and the way we design for it has changed since the days when our chief concern was the humble desktop. The emphasis is now back on content, as it rightly should be, removing extraneous ‘noise’ and delivering this content to the user in a way provides the optimal viewing experience.

Ah, the familiar desktop…the comfort zone….We became so used to only having to design for a particular set of dimensions and requirements, and now we are confronted with a swag of devices all with individual needs and resolutions and screen sizes. But I, as well as Brad, say “Embrace the squishiness!!” This is an opportunity we can use to reinvent the way we play and work on the web.

Brad Frost, Everything you want to know about responsive design… and less! Webstock 2014 

So how do you design for responsive design?

The key takeaway is that content is still king: that is at the core of what responsive design is all about. In essence, while throwing more devices at us and what could be taken as adding more confusion, we have been forced to sit back, open a nice bottle of New Zealand Sauvignon Blanc and re-look at the web and decide what is important. And there it is staring us in the face, just where is has always been, but so often overlooked. Content.

So the key process Brad pushes is: Design for mobile first.  

Design for mobile first

Brad believes in designing for mobile first primarily from a content perspective. This approach is popular as it forces clients to make decisions about what content is; in particular:

  1. Which content is most important and
  2. Whether the content makes the cut at all.

The reason for these rationalisations being that when screen real estate is small, decisions have to be made as to what makes the cut as opposed to just ‘filling up the space’. The idea is that this structure can then be folded out into the desktop design.

Within the mobile design employ some of these techniques:

Set a performance budget

Performance is key on mobile devices. As a team, set your performance budget per page, which needs to be held by a ‘performance guardian’. You should also get someone in the team, the project manager perhaps to ask the following question every time: “Is that page design hitting the performance budget?”

For example:

  • Max page weight: 400k
  • Max load time on 3G: 4 seconds per page

Progressive enhancement

This is all about the content and promotes content, still in its rightful place, on its throne as the ruler of the Internet. As it should be. It is a change for the better to the mindset of the ‘graceful degradation’. You can read a great article about it here from alistapart.com.

Conditional loading

72%: the number of responsive websites whose small screen view weighs as much as the large screen view. This is baaaaaad. Load items on your page conditionally; for example have comments in an accordion. If the user choses to see them they can load upon expansion. 

Future friendly

There is no such thing as future proof, but building a site where the content is ‘fluid’ and shared and delivered between and across platforms from one source helps a site to be as future friendly as it can be.  Once content is changed in the CMS it is pushed to all devices 

Decide in the browser

This is where it will be viewed and so this is where the designs should get to as quickly as possible. See if you can work with your team to get your designs into the browser as quickly as possible even if it’s just the bare bones.

What’s the process? Agile? Waterfall?

Nope, somewhere in between; hence the importance of having your team cracking on with things together in a layered and ramped up approach as opposed to a waterfall or agile approach.

Why not agile? You can work in an agile-ish manner (going back and revisiting as you go) but it’s not truly agile. Importantly, responsive requires a degree of planning upfront that requires all team members to be involved and to agree on the approach that will be taken. The IA when proposing a site structure needs to communicate with the front end developer (FED) to ensure it is viable. It’s not essential that the FED is ramped up and fully resourced on the project but they need to be across it, hence not agile but not waterfall.

So, to the bottom line. Let me hit you with some stats that might get you thinking a little more about the importance of implementing responsive design into your next project.

One of the key stats is this: 31% of mobile web capable Americans access the web solely through a mobile device.

Sure that’s an American stat but we aren’t poles apart in our adoption and use of technology. The interesting thing about this is that, as Karen McCrane says:

“If your stuff, if your content, if your information, if your products, if your services are not available on mobile, they simply don’t exist for these people.”

An interesting and humbling fact! Here are a few more:

  • More people have access to mobile than to running water and toothbrushes (citation);
  • More iPhones are sold than babies born every day (citation);
  • Americans aged 24-34 years with and without smartphones: 66% with a smartphone, 34% with a ‘non-smart’ phone (citation);
  • 34% of Americans own a tablet or E-reader, up from 3% in 2010 (citation);
  • In the States Mobile now makes up 20% of all web traffic (citation);
  • And even more here...

Useful responsive design resources

Posted by: Laura Stephens, Senior Web Strategist | 12 March 2014

Tags:


Top Rated Posts

Blog archive

Stay up to date with all insights from the Intergen blog