Approaches to tackling the "mobile" web. Content strategy, responsive design, web and native apps.

1. The Mobile Web
We are Tincan / @tincanpippip
Ben Holliday
UX Designer / @hollidazed

2. Mobile
“Mobile is under hyped in the medium term”
Steve Wing - Guardian News & Media

3. Mobile

4. Mobile
It's becoming increasingly difficult to determine what
exactly is mobile and what isn't

5. Mobile
It's becoming increasingly difficult to determine what
exactly is mobile and what isn't
The challenge is to make it simpler, easier, and
better for users to connect whenever, wherever and
however they want

6. Assumptions

7. Assumptions
We know how people view our websites

8. Assumptions
We know how people view our websites
We know the context of use when people use our
websites on different devices

9. Context

10. Context
Context doesn’t necessarily determine intent

11. Context
Context doesn’t necessarily determine intent
Making decisions about what people want based
simply on the device they are using is a little
bit like telepathy

12. Context

13. Context
“Mobile” has become a synonym for “Less” and
“Desktop” has become a synonym for “More”

14. Context
“Mobile” has become a synonym for “Less” and
“Desktop” has become a synonym for “More”
Mobile = Smaller Screen

15. Content
Why should the “desktop” user be more willing
to put up with unnecessary content?

16. Challenge
User expectations are very high...
everywhere optimised for their context and
situation, now. All channels.

17. Opportunity

18. Opportunity
An opportunity to refocus, identify and re-affirm
business goals, consider key audiences and
establish design principles

20. Foundation
1. Business/User Goals
2. Audience/Personas
3. Strategy
4. Content

21. Foundation Solutions
1. Business/User Goals 1. Native Apps
2. Audience/Personas 2. Web Apps/Mobile Sites
3. Strategy 3. Responsive Design
4. Content 4. Adaptive Process

22. Twitter BBC iPlayer Telegraph Times
Eyewitness British Heart Foundation RSPCA Just Giving
Native Apps
Developed/targeted to a specific OS.
Should have a specific purpose, be beautiful,
accessible, and high quality.

24. Motorola Xoom (Android)
Beyond iOS
HTC Flyer (Android)

25. Web Apps/
Mobile Sites
Work using a web browser
using HTML5, CSS3,
and Javascript. Can be
targeted to specific devices

26. Responsive Design
Work using a web browser using HTML, CSS,
and Javascript. Devices are treated as a spectrum
(based on capabilities) rather than treated as
mobile vs desktop - provides basic reach
to all platforms/devices

27. about.com

28. ica.org.uk

29. ica.org.uk

30. Adaptive Process
Start with responsive content/designs...
...then consider a mobile site for specific platforms
if your users would benefit from different
content or presentation

32. App Vs Browser
e Native App Browser/Mobile Site
• Paid or free • Free
• Separate versions required for each • Accessible to all cross-platform/browsers.
operating system (OS) Can be optimised/targeted to specific OS
• Customisable/can integrate with device • Discoverable – search/linked through the
design, features and functions wider web and engaged on social media
• Run locally with quick loading and fluid • Internet reliance. Local caching/HTML5
interaction storage options
• More cost/time investment required • Less investment/native web technologies
• Updated through new versions for users to • Relatively simple to maintain with instant
download. updates to all users.

33. Adaptive Content
Safari Readability Instapaper
User tools now exist to free up content from
a single endpoint. The challenge is how can we
design for our content in such a way that
the reader won’t reach for them?

34. Adaptive Content

35. End
We are Tincan