Highlights of Responsive Day Out 2, The Squishening

Last week I headed down to Brighton for Responsive Day Out 2. It was an absolutely brilliant day packed full of great talks and I picked up some valuable insights and advice all about responsive design.

Hosted by Jeremy Keith, there were three sessions consisting of three different speakers, each speaking for around 20 minutes on their chosen subject. This was followed by insightful Q and As with the audience, involving all three speakers once again on stage. Here’s my roundup of my favourite talks from the day.

Responsive Day Out 2, The Squishening

Stephen Hay

Stephen Hay had the honour of starting the proceedings, which turned out to be one of the best talks of the day for me. He talked about sculpting text and explained how we as designers need to know the shape of the content before we begin designing and how we should design the content first and then build upon it.

Stephen’s process involves focusing on the content and structuring it with unstyled HTML in the browser thinking about mobile first. He then begins to think about type size, colour and images etc and adding CSS where needed. He believed all designers should know basic CSS, which I strongly agree with as it’s easy to learn. Keep checking your page on real devices and also expand the browser window until your layout breaks or no longer works well – that will be your next breakpoint. A simple enough idea but I am certainly going to try this approach from now on as I think it will improve my design process and actually make me quicker at building sites. Sketching is still the most important part of the design process however.

Ida Aalen

Ida Aalen’s talk on how she approached the responsive redesign of the Norwegian Cancer Society’s website was superb. 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). Matching business goals with user needs are what she described as core pages (where the user solves their task and reaches their objectives).

Ida Aalen’s talk

Ida also made an interesting point about designing home pages in that why do we focus so much time on this when many users may never see it as they may have just Googled a question and navigated to a particular page on your site. She then went on to explain inward paths (how will the user get here and how will they find the content) and outward paths (after the user has solved their primary task, where should we send them). They arranged workshops with an array of different people ranging from designers, developers, admin workers, users etc to investigate which pages and areas were used and for ideas and improvements to the site.

When designing the mobile layout, she described how the core content had to be the same across all devices and how they prioritised certain elements on the smaller screen. They also didn’t use any Lorem ipsum text on the mockups – they only used actual content (something that drew parallels with Hay’s talk quite well).

Progressive enhancement was a key theme of the day and was mentioned several times about how to create pages that work regardless of browser capability.

Inayaili de León Persson

Inayaili’s talk was a case study of the Ubuntu site and how they made it responsive just over a year ago. She explained how her team made a concise project plan. They listed all the constraints and divided each aspect into chunks and decided on their key goals for the first iteration.

Inayaili provided a number of tips including:

  • create a style guide (maybe use Bootstrap docs as a template/guide)
  • clean up your CSS
  • convert your grid to percentages
  • create a responsive grid prototype
  • page by page estimates
  • prototype responsive navigation
  • standardise across all sites
  • have clear goals
  • test on multiple devices

You can read more at http://design.canonical.com

Oliver Reichenstein

Oliver’s talk was on information architecture and was very funny but at the same time had a serious message. While we’re becoming more flexible in other fields, information architecture seems to still be quite rigid, says Oliver.

Oliver Reichenstein

People create an information architecture, and then somebody has to fill it with content. And way too often, the more money, the deeper the information architecture. In other words, on for example a corporate website, we always have the homepage, about us, news, contact us etc – why do we always have to have the same structure? It’s becoming quite boring and unnecessary and he made a great point! We might not get completely rid of navigation but we can definitely get by with less navigation and chopping down the site tree.

Ethan Marcotte

Ethan was worth the entrance fee alone. The theme of his talk was how it is ok to be a little bit lazy when designing responsive sites if we are lazy in an intelligent way. We should be looking to conserve our efforts and not over-complicate our solutions. Maybe there are bigger and more important problems to face.

Ethan Marcotte

I recommend you listening to his talk as I cannot do it justice on here but he talked about embeddable elements, using the nth-child selector in CSS to create a simple grid without using a pre-existing grid framework and how we should only use frameworks for prototyping/learning and not in real life productions as they can be too bloated.

The hamburger issue was mentioned and how we, as designers, have the tendency to just hide all the stuff we don’t want to deal with behind the hamburger icon. It certainly made me think about how best to approach this issue as he gave some really great examples of sites to check out to see their solutions.

Overall, an awesome day – my first conference of 2014 – and I felt incredibly inspired and took away so many ideas and tips from all the speakers. You can download the podcasts of all the talks.