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

Tincan - Mobile Elephant

Embed Size (px)

Citation preview

Page 1: Tincan - Mobile Elephant

The Mobile WebWe are Tincan / @tincanpippip

Ben HollidayUX Designer / @hollidazed

Page 2: Tincan - Mobile Elephant

Mobile“Mobile is under hyped in the medium term”

Steve Wing - Guardian News & Media

Page 3: Tincan - Mobile Elephant

Mobile

Page 4: Tincan - Mobile Elephant

MobileIt's becoming increasingly difficult to determine what

exactly is mobile and what isn't

Page 5: Tincan - Mobile Elephant

MobileIt'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

Page 6: Tincan - Mobile Elephant

Assumptions

Page 7: Tincan - Mobile Elephant

AssumptionsWe know how people view our websites

Page 8: Tincan - Mobile Elephant

AssumptionsWe know how people view our websites

We know the context of use when people use our websites on different devices

Page 9: Tincan - Mobile Elephant

Context

Page 10: Tincan - Mobile Elephant

ContextContext doesn’t necessarily determine intent

Page 11: Tincan - Mobile Elephant

ContextContext 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

Page 12: Tincan - Mobile Elephant

Context

Page 13: Tincan - Mobile Elephant

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

Page 14: Tincan - Mobile Elephant

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

Mobile = Smaller Screen

Page 15: Tincan - Mobile Elephant

ContentWhy should the “desktop” user be more willing

to put up with unnecessary content?

Page 16: Tincan - Mobile Elephant

ChallengeUser expectations are very high...

everywhere optimised for their context and situation, now. All channels.

Page 17: Tincan - Mobile Elephant

Opportunity

Page 18: Tincan - Mobile Elephant

OpportunityAn opportunity to refocus, identify and re-affirm

business goals, consider key audiences and establish design principles

Page 19: Tincan - Mobile Elephant
Page 20: Tincan - Mobile Elephant

Foundation1. Business/User Goals2. Audience/Personas3. Strategy4. Content

Page 21: Tincan - Mobile Elephant

Foundation1. Business/User Goals2. Audience/Personas3. Strategy4. Content

1. Native Apps2. Web Apps/Mobile Sites3. Responsive Design4. Adaptive Process

Solutions

Page 22: Tincan - Mobile Elephant

Native AppsEyewitness

Developed/targeted to a specific OS. Should have a specific purpose, be beautiful,

accessible, and high quality.

British Heart Foundation RSPCA Just Giving

Twitter Telegraph TimesBBC iPlayer

Page 23: Tincan - Mobile Elephant
Page 24: Tincan - Mobile Elephant

Beyond iOS

Motorola Xoom (Android)

HTC Flyer (Android)

Page 25: Tincan - Mobile Elephant

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

Page 26: Tincan - Mobile Elephant

Responsive DesignWork 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

Page 27: Tincan - Mobile Elephant

about.com

Page 28: Tincan - Mobile Elephant

ica.org.uk

Page 29: Tincan - Mobile Elephant

ica.org.uk

Page 30: Tincan - Mobile Elephant

Adaptive ProcessStart with responsive content/designs...

...then consider a mobile site for specific platforms if your users would benefit from different

content or presentation

Page 31: Tincan - Mobile Elephant
Page 32: Tincan - Mobile Elephant

Native App•Paid or free

•Separate versions required for each operating system (OS)

•Customisable/can integrate with device design, features and functions

•Run locally with quick loading and fluid interaction

•More cost/time investment required•Updated through new versions for users to

download.

App Vs BrowserBrowser/Mobile Site•Free •Accessible to all cross-platform/browsers.

Can be optimised/targeted to specific OS•Discoverable – search/linked through the

wider web and engaged on social media• Internet reliance. Local caching/HTML5

storage options•Less investment/native web technologies•Relatively simple to maintain with instant

updates to all users.

free

Page 33: Tincan - Mobile Elephant

Adaptive Content

InstapaperReadabilitySafari

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?

Page 34: Tincan - Mobile Elephant

Adaptive Content

Page 35: Tincan - Mobile Elephant

We are Tincan

End