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.