Responsive Day Out 2

I was in sunny Brighton last week for Responsive Day Out 2: The Squishening. It was a packed day of 10 speakers covering valuable practical discussions on how to achieve responsive web design.

The day started with talks on process and planning. Stephen Hay talked about starting the responsive web design process by sculpting text. He advocated starting with the text you want to communicate to the user and styling typography directly in the browser. This is, after all, the core experience you need to communicate on mobile.

His message of "focus on content and purpose, not containers when designing" hammered home the importance of mobile first and starting with content.

Sally Jenkinson, More than Media Queries

Sally Jenkinson's talk looked at why there's a whole load more behind responsive web design than just CSS media queries. Her message was one of responsibility, making a site responsive is about responding to user needs. Things like accessibility, data privacy and performance can all make a big difference to this. These are "invisible requirements" that need to be considered but may not be explicitly highlighted at the start of a project.

Ida Aalen, The Core Model

Ida Aalen's talk on how Netlife Research approached the responsive redesign of the Norwegian Cancer Society's website was fascinating and probably my favourite of the day. She started by talking about user research, which helped prove what tasks are really important to users (it was all about treatment and symptoms of cancer, not fundraising).

Users don't come to a site for the homepage, they come to do tasks.

She then went on to explain the Core Model, a process Netlife use to work out the important content to focus on for the website. Content is made up of things that represent business goals and user tasks, it's finding the overlap between the two that gives you the "core pages". The job is then to build good paths to this content, not a deep hierarchy that users can get lost in.

The sort of questions she asked clients is "How would you place these elements if you only had a mobile screen?". This content prioritisation was then developed with a cross-discipline team all contributing via paper sketching, prototypes and Photoshop designs.

This is how Netlife managed to get a fantastic result for the Norwegian Cancer Society with very impressive mobile conversion rates for donations. It's certainly true you can't assume visitors on mobile are only here for a quick visit - users work in the same way they do on desktop, as long as the website enables them to do so.

The Core Model sounds like an excellent way to work and one I'm going to explore at Studio 24. Ida also provided links to the templates they use at Netlife on her blog.

Rachel Andrew, CSS Grid Layout

After a break the day switched gear into more technical talks. Rachel Andrew talked about the new grid layout module in CSS. This will enable us to mark up an HTML document into sections and display these in a grid any which way we want. No more do we need to apply strict source order to HTML just to get content to lay out the way we wish.

This feels like an incredibly useful way to layout web pages, however it will be some time before we can use it reliably. Google Chrome Canary has support so this can be tested in the wild, but because there isn't any good fallback it's difficult to use in practise. It's certainly something worth experimenting with though.

Dan Donald, Designing evolution :elements

Dan Donald talked passionately about how a modular component-based design is a better approach to web design, something we heartily agree with here at Studio 24. He talked about how this could be technically aided by element-level media queries rather than the browser window size media queries that currently exist. This is something that is apparently being considered in the CSS spec, so watch this space!

Inayaili de Leon, Realistic Responsive Design

Inayaili de Leon talked about how Ubuntu approached a responsive redesign of their website. They couldn't start from scratch so were forced to take a step-by-step approach. They started by tidying up their HTML/CSS and converted fixed width grids into % based ones. This was all done without changing the look or feel of the desktop site and laid the foundations for the next steps.

Her team then reviewed all site components and wrote a comprensive style guide on how the site should look and work. This guide helps the front-end developers decide how components should look and work at different breakpoints. The team then focussed on small components, putting the style guide into practise, to update the website to a responsive design. This process is ongoing, but it seems a well strucutred and pragmatic approach to responsive retrofitting.

Oliver Reichenstein, It's over with the columns!

After lunch came strategy and a very amusing talk from Oliver Reichenstein who told us all to stop forcing content into strict hierarchies, to "chop that tree" of Information Architecture and to stick content into single columns that give the user complete focus on the content at hand.

His talk was rather tongue-in-cheek, but it had a serious point. For too long has column-based design forced together completely unrelated content, for example the main article in the left column and a list of "latest news" items on the right. This sort of thing distracts users and makes scanning content far slower.

Oliver advocates starting with single columns and ensuring that any content placed in adjacent columns are thematically related, not simply bolted on. He's been working with people such as the Guardian to try to bring this focus on content to their beta responsive website.

He also managed all this with no slides, which was pretty refreshing.

Kirsty Burgoine, Question of deliverables and other such stuff

Kirsty Burgoine talked about how to approach responsive from a client communication point of view. A while back she took the decision to go responsive by default. Initially she didn't tell clients and just delivered a responsive site, but this ended up taking too long and costing too much. She went through stages by telling clients and not promising too much, but it was very difficult to manage client expectations.

Now she's ended up communicating more with clients, but iterating a lot once the site is being built. This sort of feels like the waterfall/agile approach many digital agencies are starting to adopt. Define the goalposts at the start, build the site and as you hit each stage, demo and discuss with the client to ensure the end product is successful.

She admitted she hasn't found the perfect approach to responsive web design and it has to change for each client. Her key message was communicate and show clients ideas at all stages, this helps foster expectations and trust - crucial to the success of a web design project.

Stephanie Rieger, The future of media queries

Stephanie Rieger moved back a little to technical topics when she told us all about the proposed level 4 media queries, and what they're good for. These include things like whether JavaScript is enabled, measuring light level, the existence of a mouse pointer, hover, and refresh rate of the display screen.

Though these sound on the surface useful, the reality appeared to be these are all very embedded in specific technicalities that exist today and may not be suitable in the future. Also, even if we detect things like light level is it really appropriate to change layout (such as background colour) on light change? Earlier in the day Sally showed us a demo of flickering background colours due to inconsistent detection on light levels that would make a site considerably worse to use.

Stephanie's closing message was that some elements of websites need completely rethinking, is it time to "reset the web?" Her example was navigation, should browsers have a default component which is styled identically across all sites that can be read in via HTML and displayed as a consistent and useful menu component to users? An interesting thought and one that would completely solve the whole navigation issue across devices.

Ethan Marcotte, Laziness in the time of responsive design

Ethan Marcotte, poster boy for responsive web design, closed the day in style. His talk focussed on components, an emerging theme throughout the day. He encouraged laziness in building responsive sites, by which he really meant keep things simple, don't build overly complex systems.

Mobile is about more than just smartphones. He said "tablet and mobile is so broad it can't really describe what we're trying to design for." 60% of the world's mobile internet usage is on sub-3G connections. So simple = fast = a better user experience.

As new devices come out there are new interaction models, we can't predict what will happen in the future. He had a good quote:

Our anxiety doesn't come from thinking about the future but from wanting to control it.

Khalil Gibran

A few practical tips he had included responsive video. Embedded objects don't have intrisic sizes like images so the height won't change when you alter the width. At present using JavaScript to resize proportionally is the best way to achieve this.

He also went through an example of a fluid grid using :nth-child in CSS. His point was this sort of thing can be easily achieved with simple markup, this can be far simpler and easier to maintain than the complexity of a big CSS framework. Frameworks, said Ethan, are a useful introduction to the web and great for prototyping but feel far too heavy and prescriptive for production code on websites.

He also questioned long-held assumptions in responsive design, such as the popular hamburger icon for navigation. Do users really understand this? On a recent redesign of lots of explanation was added to the site to explain to users what the hamburger icon represented. Shouldn't this just be simple and obvious to users?

Ethan also took us on a quick tour of The Illusion of Life, a book on the animation principles of Disney by Ollie Johnson and Frank Thomas. There is a great video of these principles on Vimeo. For example squashing and stretching an object gives the illusion of movement as it moves. It's basically a philosophy about the quality of work. Something Ethan believes is really important in web design.

He moved on to talk about how subtle animation can helps users on the web. You can design the transaction with the user, not just the user interface. He explained how you need to start simple and use tools such as Modernizr to enhance the experience on better devices.

Progressive enhancement is at the heart of all successful responsive design. The BBC are a great example of this with their beta responsive site which has a core baseline experience (for example skip links on navigation to the foot of the page) and uses the "Cutting the mustard" technique to detect more advanced capabilities and loads the JavaScript application to give an enhanced user experience.

He finished off by talking about Zen's "Beginners mind." Sometimes it's important to forget preconceptions and tackle problems with a fresh mind. Just because somethings been done one way in the past, it doesn't mean it's always right.

In summary it was a great day out by the sea with lots of useful things to take home. It was also incredibly refreshing to see so many female speakers at a tech event (60% of the speakers were women), proving there's no need to stick with blokes at web and technical conferences. Well done to the Clearleft team for organising a really interesting, inspiring day!

You can also listen to the entire audio from the day.

Leave a comment