Notes from the Responsive Day Out Brighton

 

Today I had the pleasure of attending the Responsive Day Out conference in Brighton, UK. Kudos to the team at Clearleft for putting on such a great event which produced a wealth of useful information and stirred up some good debate both on and off stage.

During the sessions I was furiously typing notes on my trusty iPhone and below is what I hope is a heavily edited and brief summary of the most pertinent points. I will be updating this throughout the day so keep checking back…

Session 1

Sarah Parmenter

  • Sarah has refined her process to meet the challenges of Responsive Web Design.
  • A good approach is to undertake a content audit – stripping back the clients’ original copy to and suggesting how it could be streamlined.
  • Sarah applies visual numbering to her Wireframe’s and encourages her clients to sign off on a visual hierarchy denoted by these numbers. The layout is implied but the hierarchy is the focus.
  • Asset organisating is become increasingly important – Sarah recommends Slicy App for improving workflow for slicing PSDs for Retain/non-retina.

 David Bushell

  • David provided several examples of mobile navigation anti-patterns – many of these very unintuative and had confusing interactions. For example one site had the same link shown a social media menu on large screens and the main menu on smaller screens.
  • David’s main advice was to keep it simple and don’t try and be to clever.
  • For extremely complex navigation systems a link to a “Table of Context” as an overlay or even a separate page was suggested.
  • A good reference was Brad Frosts pattern collection at This Is Responsive
  • David also stressed the need not to overload the main global menu. Keeping it simple was clearly demonstrated to be the most user friendly approach.
  • Too many items in the main menu leads to a high breakpoint for reflowing the navigation and can be confusing.

Tom Maslen

  • Tom works for the BBC web team but his views aren’t necessarily those of the BBC!
  • Before the talk Jeremy recommended BBC Responsive News Blog which has lots of info on how the BBC are implementing Responsive Web Design on their network.
  • BBC publishes a browser support table – it’s a bit out of date but the principles are still valid.
  • Ultimately BBC’s goal is to produce an experience which is accessible to everyone regardless of browser / device.
  • To achieve this they used to focus on Graceful Degradation. This has since shifted to a clear emphasis on Progressive Enhancement.
  • BBC start with a true “base experience” which is lowest common denominator. Utilizes HTML4 and CSS2 features only and with no javascirpt. This is served to all devices and is universal.
  • They employ a simple JavaScript test (called “Cutting the Mustard”) to determine which browsers are “modern” and then progressively load in an enhanced experience via JS. This approach has been extremely sucessful although some memebers of audience had concerns over IE7-8 support.

Group Chat

  • The group chat recapped many of the points above…
  • Suggestion of a “Feature Budget” – say to clients “if you want feature X to be available to older browsers” then this is the impact on your project budget. Allow them to make informed decisions.

Session 2

Richard Rutter

  • Richard spoke about the options for loading web fonts.
  • Spend time and effort matching your fallback font to the web font. Use line height and font size (plus other CSS) to make small adjustments. This will make the FOUT less obvious.
  • Richard recommended the Google Web Font loader – allows you to target the load status of various fonts you declare. More fine grain control.
  • Richard seemed to imply that if you declare a web font as a primary font then nothing will be displayed until the font is loaded. This needs testing as I”ve never observed this…

learn more about

What We Do