Putting Mobile First

@precedentcomms #PrecSem

Putting mobile first24th May, 2012

John CampbellHead of mobile

Mark BaillieCreative Director

app

1.A changing world 2.What are my options

3.The optimum approach

4.Making it happen

5.Considering the future

End

1.A changing world

2.What are my options? 3.The optimum approach

4.Making it happen

5.Considering the future

End

Mobi

Responsive

Framework

Native

1.A changing world

2.What are my options?

3.The optimum approach4.Making it happen

5.Considering the future

End

Mobi

UI flow flow

Mobi

What it’s good for:

- Providing focus and clear

structure

- Deploying without impact

on main website

- Delivering quickly

- Wide reach working via

browser

- Can be designed to

understand and respond to

screen size or orientation

Consideration:

- Careful consideration to content

impacting performance.

- Keep the design simply effective

- You need to design for tablet and

phone to maximise experience.

- Links to m. or mobi domain name

Responsive

What it’s good for:

- Reflows the same content

from the website

- Content is presented on all

devices and screen sizes.

- Architecture of the site

remaining the same

- Single update of content

Consideration:

- Cannot apply a different t tone

of voice for mobile usage.

- Experience not built around the

user or context

- Requires to think in % and not

fixed width

- Supported screen size has to

be chosen

Jakob Neilsen – 21st May 2012It's cheap but degrading to reuse content and design across diverging media forms like print vs. online or desktop vs. mobile. Superior UX requires tight platform integration.

Responsive

Frameworks

What it’s good for

- Lets you develop once and

deploy many

- Cross device support

widening reach

- A balance between rich

design and reach

- Simplifying the interface

whilst enabling functionality

- Deployment via app stores

Considerations:

- Will not be a rich interface

- Restricted in functions

- Balance between features and

reach

- Typically uses HTML5 and

JavaScript.

Framework

Yes No

Native apps

What it’s good for

- Provides a rich interface

- Uses the full phone feature

set

- Designed around the user

- Optimal performance

- Provides joy of use

- Can differentiate your brand

Considerations:

- Needs to be developed for

each device type

- Designs typically can be

shared

- Data is a key consideration for

unconnected use

Native

1.A changing world

2.What are my options

3.The optimum approach

4.Making it happen 5.Considering the future

End

Content

Mobile from the ground up

- Custom approaches

- Considered context

- Specific content

A mobile first content approach

Making mobile from pre-existing

- Desktop applied to mobile

- Stress / break points

- Reworked content

An adaptation approach

Typical assets

- Logos

- Iconography

- Image galleries

- Product shots

“What about

performance. Won’t

a lot of images slow

down the mobile

experience?”

Images

Data

The four point plan:

1. Ensure your existing web API

does not bundle unnecessary

data with requests for data

2. Expand your API to deal with

short, quick requests and hook

it into your CMS solution as

soon as possible

3. FEO is vital. Use mobile

optimisation and analytics tools

to see where your delivery

speeds can be improved

4. Track user interaction in your

app using an analytics tool

Sadly not true:

Users are sympathetic

to poor network

coverage and adjust

their expectations

when WIFI isn’t

available.

“The more channels I

run, the more resource

I’ll need, right?”

Avoid digital bloat by

monitoring the

effectiveness of your

channels and adjust your

resourcing accordingly

Resource & Process

Work sheet

1.A changing world

2.What are my options?

3.The optimum approach

4.Making it happen

5.Considering the futureEnd

UI flow flow

The future of shopping

1.A changing world

2.What are my options?

3.The optimum approach

4.Making it happen

5.Considering the future

End

Digital Finance Forum 2011

A communications consultancy specialising in delivering creative solutions for a digital world.

A UK Top 10 digital design agency

– 80 experts

– 5 sectors

– 5 locations

– 21 years

About us

We believe in…

Find our Precedent group on LinkedIn for a chance to find out more about our seminars, network, share ideas and quiz the Precedent team on seminar issues and more!

and follow us at @precedentcomms for Precedent news, seminar info and general observations#PrecSem

Content

A quick show of hands…

Q. Could you support a new IA, navigation and structure (Mobi)?

Q. Could you streamline your content and IA for multi device (Responsive)

Q. Could you create content that would support a broad user base (Framework app)

Q. Could you create content that would enhance advanced functionality (Native app)