Skip to content

Multi-device web design Workshop notes

The day before the main conference of CS Forum 2012, I attended Luke W's half day Workshop: Multi-device web design. Below are my notes from his excellent talk and Q&A.

  • We need to consider the why and how of mobile and behaviours
    • Lookup / Find: when you need an answer now, possibly related to your location.
    • Explore / Play: when you have time to kill. Doesn't necessarily mean games.
    • Check In / Status: something important to you, that has frequent changes.
    • Edit / Create: Things that must be now, or that you have time to do now.
  • There's a common feeling that desktop sites are "a giant pile of navigation." Good (mobile) sites have minimal navigation, maximum content.
    • The personalisation is in the filtering of the content.
  • Speed and performance is more important than ever: mobile is often for while you wait, so you don't want to wait for the content.
  • Important things remain important (and vice versa), regardless of screen size.
  • Patterns to consider: nested doll; hub and spoke; bento box; filtered view.
  • Navigation considerations for smaller screens
    • Look at the balance of navigation / chrome and content on a page.
    • Rethink UI elements rather than redesign?
      • e.g. search should show results content, not lots of nav or chrome.
    • Think about how you hold devices
      • Where on the screen is easy to reach, where is hard? Bottom side corners of a touchscreen tend to be comfortable zones.
      • Posture of user
  • The lines between device screen sizes and classifications are blurring. It's becoming a continuum of devices rather than discrete categories. We should treat this as one wide problem rather than lots of small ones.
  • People tend to prefer a touch interface, when it's available.
  • For faster sites, avoid images as much as possible.
    • Use icon fonts.
    • Use SVG (but they can be tricky to implement).
  • Multi-device design is not just about computing devices: consoles and ereaders have browsers too.
  • "The mobile stack" of one huge column, content linearised from desktop version, is sub-optimal for mobile: it makes for very long pages.
    • Consider content hierarchy, choreography, emphasis.
    • A good alternative is the off-canvas layout: to all sides; to either side.
  • Lack of content parity is often the biggest customer complaint.
  • For shopping and news: the web wins over apps.
  • One strategy is reduction: do less, but do it better.
    • simple things are easier to push to many places.
    • but, it can be difficult to sell culturally: e.g. removing the boss's favourite feature.
  • Think about what comes after mobile.
    • Consumer expectation is to be able to use whatever screen they want to do whatever they want. Multiscreen by default.
    • Sensors are appearing all over.
  • Ads on the web are terrible and we should ditch them.  There's not big bucks in them anyway.
    • People will pay for experiences, packaging, and related goods or services.