The document discusses different approaches to developing mobile experiences: 1. Mobi - focuses on providing clear structure and navigation for mobile, without impacting the main website. Content is designed specifically for phones. 2. Responsive - uses the same content across devices by reflowing content based on screen size. Requires designing for all screen sizes. 3. Framework - balances rich design and wide reach by simplifying interfaces while enabling key functionality. Develop once and deploy across devices. 4. Native - provides optimal performance and rich interfaces through platform-specific development, but requires separate development for each device/platform. It analyzes the pros and cons of each approach and when each is most suitable.

1. Putting mobile first
24th May, 2012
John Campbell Mark Baillie
Head of mobile Creative Director
@precedentcomms #PrecSem

2. app

3. 1.A changing world
2.What are my options
3.The optimum approach
4.Making it happen
5.Considering the future
End

6. 1.A changing world
2.What are my options?
3.The optimum approach
4.Making it happen
5.Considering the future
End

7. Mobi
Responsive
Framework
Native

9. 1.A changing world
2.What are my options?
3.The optimum approach
4.Making it happen
5.Considering the future
End

10. Mobi

11. UI flow flow

13. Mobi
What it’s good for: Consideration:
- Providing focus and clear - Careful consideration to content
structure impacting performance.
- Deploying without impact on - Keep the design simply effective
main website - You need to design for tablet and
- Delivering quickly phone to maximise experience.
- Wide reach working via browser - Links to m. or mobi domain name
- Can be designed to understand
and respond to screen size or
orientation

15. Responsive

19. Responsive
What it’s good for: Consideration:
- Reflows the same content from - Cannot apply a different t tone of
the website voice for mobile usage.
- Content is presented on all - Experience not built around the
user or context
devices and screen sizes.
- Requires to think in % and not
- Architecture of the site
fixed width
remaining the same
- Supported screen size has to be
- Single update of content
chosen
Jakob Neilsen – 21st May 2012
It'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.

21. Frameworks

23. Framework
What it’s good for Considerations:
- Lets you develop once and deploy - Will not be a rich interface
many - Restricted in functions
- Cross device support widening
- Balance between features and
reach
reach
- A balance between rich design
- Typically uses HTML5 and
and reach
JavaScript.
- Simplifying the interface whilst
enabling functionality
- Deployment via app stores

24. Yes No

25. Native apps

28. Native
What it’s good for Considerations:
- Provides a rich interface - Needs to be developed for each
- Uses the full phone feature set device type
- Designed around the user - Designs typically can be shared
- Optimal performance - Data is a key consideration for
- Provides joy of use unconnected use
- Can differentiate your brand

31. 1.A changing world
2.What are my options
3.The optimum approach
4.Making it happen
5.Considering the future
End

32. Content
Mobile from the ground up Making mobile from pre-existing
- Custom approaches - Desktop applied to mobile
- Considered context - Stress / break points
- Specific content - Reworked content
A mobile first content approach An adaptation approach

34. Images
Typical assets
- Logos “What about
- Iconography performance. Won’t a
- Image galleries lot of images slow
- Product shots down the mobile
experience?”

36. Data
The four point plan:
1. Ensure your existing web API Sadly not true:
does not bundle unnecessary
data with requests for data Users are sympathetic to
2. Expand your API to deal with
poor network coverage
short, quick requests and hook it
into your CMS solution as soon and adjust their
as possible
3. FEO is vital. Use mobile
expectations when WIFI
optimisation and analytics tools isn’t available.
to see where your delivery
speeds can be improved
4. Track user interaction in your
app using an analytics tool

37. Resource & Process
Avoid digital bloat by
monitoring the effectiveness of
your channels and adjust your
resourcing accordingly
“The more channels I run,
the more resource I’ll
need, right?”

39. Work sheet

40. 1.A changing world
2.What are my options?
3.The optimum approach
4.Making it happen
5.Considering the future
End

41. UI flow flow

42. The future of
shopping

43. 1.A changing world
2.What are my options?
3.The optimum approach
4.Making it happen
5.Considering the future
End

44. About us
A communications consultancy
specialising in delivering
creative solutions for a digital
world.
– 80 experts
– 5 sectors
– 5 locations
– 21 years
A UK Top 10 digital design agency
Digital Finance Forum 2011

45. We believe in…

46. Find our Precedent group and follow us at
on LinkedIn for a chance @precedentcomms for
to find out more about Precedent news, seminar info
our seminars, network, and general observations
share ideas and quiz the #PrecSem
Precedent team on
seminar issues and more!

47. 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)