seminar: putting mobile first
DESCRIPTION
John Campbell and Mark baTRANSCRIPT
@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)