On a device-agnostic approach

17 Mar 2014

2010

Only a few years ago, most people went online using a desktop or a laptop.

Desktop computer

CC Image courtesy of Rakesh Ashok on Flickr

Today and beyond

Now people use a myriad of devices over a varying connections summed up as “hostile browsers, tiny screens, slow connection speeds, touch inputs

Device lab

CC Image courtesy of Jeremy Keith on Flickr

2017

Tablets and smartphones will make up most of the sales of connected devices

Worldwide connected device forecast

Image from IDC

A mobile world

Mobile is often the only point of internet access in some parts of the world

Mobile's share of webviews around the world

Image from We Are Social

Are we building a digital product for yesterday or tomorrow?

Monthly active users for mobile and non-mobile

See this post for lots more stats

Traditional approach

Design and build desktop site first – consider this the “complete version”. Then consider a mobile site – slimmed down version of desktop version – either as separate site or using media queries – “responsive design”

What if we turn it around?

Make the product:

Mobile first is a bit misleading

It’s really about starting to design from the content outwards.

Device agnostic

Content, presentation, interface – Reduce to the minimum amount necessary

Different devices and poor connections are not after-thoughts: they are at the heart of the product.

Progressively enhance for particular devices only when evidence of demand exists.

Data structures and editorial / content decisions are the biggest issues. Technical and design issues are secondary.

If we think about the content first, working on any device, all other considerations slot into place.

Hierarchy of content needs

Some ways of prioritising and thinking about content in a device-agnostic project:

  1. Access
  2. Legibility
  3. Ease of comprehension
  4. Relevance – to the need, moment, interests, behaviour, and personal history
  5. Everything else: Later access, ease of reference, etc</ul>

See this post on responsive web publishing for more details.