what the web community can learn from mobile

transcript

MADE WITH LOVE IN SEATTLE BY

what the web canlearn from mobile

mobile ux

“[Brian] states making a native application can be the best thing for a product, but confirms on the other hand that the mobile web is the only long term commercially viable content platform for mobile devices”

—Thibault Imbert

mobiledesign.org

pinch/zoom

pinchzoom.com

CENSORED

CENSOREDCENSORED

CENSORED

“Chuck”

Chuck is a real mobile expert.

He will never speak at a conference you will attend.

He will never write a book that you will read.

He doesn’t care about the topics we debate.

But he is building the infrastructure that you will use 5 years from now.

There are tens of thousands of people like this around the world solving the mobile problem.

These are my mentors.

I learned more about the

future of mobile in three

hours than I have in the

last three years.

I can tell you...

‣ how many smartphones are being shipped in the US

I can tell you...

‣ which platforms are moving and which aren't

I can tell you...

‣ which platforms the carrier is behind and which they aren’t

I can tell you...

‣ who is making money in mobile and who isn't

I can tell you...

‣ where the network will be in the next three years

I can tell you...

‣ how carriers feel about mobile web apps

I can tell you...

‣ who is consuming the most bandwidth and why it matters

I can tell you...

‣ who is consuming the most bandwidth and why it matters

‣ when the next product from Apple is shipping

I can tell you...

Mobile Lesson #1if you have inside

information, you keep it to yourself

“[Motorola Xoom & Atrix sales] have been disappointing

—Analyst Douchelord

Mobile Lesson #2be skeptical of anyone

claiming they have answers to mobile*

*see lesson #1

pinchzoom.com/thecontext

what’s next?

Mobile Lesson #3“the only prevailing wisdom in mobile is that there is no

prevailing wisdom”—Daniel Appelquist, W3C Mobile Web Initiative

MADE WITH LOVE IN SEATTLE BYMADE WITH LOVE IN SEATTLE BY

computing

network

internet

devices

20102000199019801970 2020

computing

network

internet

devices

20102000199019801970 2020

mainframe

computing

network

internet

devices

20102000199019801970 2020

pc’smainframe

computing

network

internet

devices

20102000199019801970 2020

mobilitypc’smainframe

computing

network

internet

devices

20102000199019801970 2020

ubiquitymobilitypc’smainframe

computing

network

internet

devices

20102000199019801970 2020

computing

network

internet

devices

20102000199019801970 2020

computing

network

internet

devices

20102000199019801970 2020

2.5G2G1G

computing

network

internet

devices

20102000199019801970

2.5G2G1G

computing

network

internet

devices

20102000199019801970

LTE2.5G2G1G

computing

network

internet

devices

20102000199019801970

LTE2.5G2G1G

computing

network

internet

devices

20102000199019801970

LTE2.5G2G1G

computing

network

internet

devices

20102000199019801970

LTE2.5G2G1G

computing

network

internet

devices

20102000199019801970

candybar

LTE2.5G2G1G

computing

network

internet

devices

20102000199019801970

featurebrick

candybar

LTE2.5G2G1G

computing

network

internet

devices

20102000199019801970

featurebrick

candybar

LTE2.5G2G1G

computing

network

internet

devices

20102000199019801970

featurebrick

candybar

LTE2.5G2G1G

academia

computing

network

internet

devices

web dot-com

20102000199019801970

featurebrick

candybar

LTE2.5G2G1G

academia

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

LTE2.5G2G1G

academia

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

LTE2.5G2G1G

nextacademia

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

LTE2.5G2G1G

nextacademia

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

LTE2.5G2G1G

nextacademia

ubiquity

everything has led to this moment

the future of mobile will

not be the web...

the future of mobile will

not be the web...

...or apps

Mobile Lesson #4when it comes to mobile

assume nothing

Mobile Lesson #5use the appropriate

interaction to the context

Mobile Lesson #6no gets fired for using a

lowest common denominator design

“Chuck”

content resultresultresultresultresultresult

Mobile Lesson #7mobile users have

sophisticated spacial orientation

p/z universalbuild a website that provided the best possible experience to the context.

magazine

magazineiPhone

web app

magazineiPhone

web appDesktop

website

Content in Context

1x HTML5 Markup

1x HTML5 Markup1x Hexadecimal CSS Framework

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks

1x HTML5 Markup1x Hexadecimal CSS Framework1x Typography Framework3x Javascript Frameworks8x Media-Query-based Layouts

a hexadecimal what?

the hex-gridTypically when using a grid web designers are typically only using vertical units.

the hex-gridbut in mobile design, we must use horizontal units as well. this means that any unit size must work vertically as well as horizontally.

magazineiPhone

web appDesktop

website

magazineiPhone

web appDesktop

website

‣ pagination was a nightmare.

magazineiPhone

web appDesktop

website

‣ had to create an entirely new css framework to deal with all the screen sizes.

magazineiPhone

web appDesktop

website

‣ every page had to be designed individually.

magazineiPhone

web appDesktop

website

‣ content had to be type fitted, similar to print layout workflow.

magazineiPhone

web appDesktop

website

‣ had to disable pinch to zoom.

magazineiPhone

web appDesktop

website

‣ large image needs for iPad were brutal.

magazineiPhone

web appDesktop

website

‣ had to add device detection to reduce JS page load per context.

magazineiPhone

web appDesktop

website

‣ typical navigation had to be scrapped.

magazineiPhone

web appDesktop

website

‣ design sacrifices had to be made to make it work.

magazineiPhone

web appDesktop

website

‣ design sacrifices had to be made to make it work.

‣ page flow was less than ideal.

Mobile Lesson #8mobile is really hard

Mobile Lesson #9mobile web is often harder than native

mobiledesign.org

“ adding manpower to a late software project makes it later.

—Fred Brooks

Mobile Lesson #10adding more devices increases the cost of mobile development

exponentially

“ They are expensive to create—a simple app could cost you $32,639 and take two months to create.

$32,639 for a simple app

$32,639 for a simple app2 months to create

2 weeks per feature

4 features

2 weeks per feature

4 features

$8,160 per feature

“ A complex app could have a price tag of more than $163,200 and take six months to develop.

$163,200 for a complex app

$163,200 for a complex app6 months to create

2 weeks per feature

12 features

2 weeks per feature

12 features

$13,600 per feature

“ This price multiplies if you decide you want to make it available on more than one operating system.

Native Mobile Web Hybrid

iPhone 100% 75% 113%

iPad 150% 125% 141%

Android 175% 150% 225%

Honeycomb 200% 150% 225%

Blackberry 300% 225% 338%

iPhone 100% 75% 113%

iPad 150% 125% 141%

Android 175% 150% 225%

Honeycomb 200% 150% 225%

iPhone 100% 75% 113%

iPad 150% 125% 141%

Android 175% 150% 225%

Honeycomb 200% 150% 225%

task x time(complexity x effort) x rate =!price

x time( x ) x rate =!priceplatform experiencefeatures

Simple AppNative Mobile Web Hybrid

iPhone $32,639 $24,479 $36,719

iPad $48,959 $30,599 $45,899

Android $57,118 $48,959 $73,438

Honeycomb $65,278 $48,959 $73,438

Blackberry $97,917 $73,438 $110,157

Total $301,911 $226,433 $339,650

iPhone $32,639 $24,479 $36,719

iPad $48,959 $30,599 $45,899

Android $57,118 $48,959 $73,438

Honeycomb $65,278 $48,959 $73,438

Blackberry $97,917 $73,438 $110,157

Total $301,911 $226,433 $339,650

iPhone $32,639 $24,479 $36,719

iPad $48,959 $30,599 $45,899

Android $57,118 $48,959 $73,438

Honeycomb $65,278 $48,959 $73,438

Blackberry $97,917 $73,438 $110,157

Total $301,911 $226,433 $339,650

Complex AppNative Mobile Web Hybrid

iPhone $163,200 $122,400 $183,600

iPad $244,800 $153,000 $229,500

Android $285,600 $244,800 $367,200

Honeycomb $326,400 $244,800 $367,200

Blackberry $489,600 $367,200 $550,800

Total $1,509,600 $1,132,200 $1,698,300

iPhone $163,200 $122,400 $183,600

iPad $244,800 $153,000 $229,500

Android $285,600 $244,800 $367,200

Honeycomb $326,400 $244,800 $367,200

Blackberry $489,600 $367,200 $550,800

Total $1,509,600 $1,132,200 $1,698,300

iPhone $163,200 $122,400 $183,600

iPad $244,800 $153,000 $229,500

Android $285,600 $244,800 $367,200

Honeycomb $326,400 $244,800 $367,200

Blackberry $489,600 $367,200 $550,800

Total $1,509,600 $1,132,200 $1,698,300

Mobile Lesson #11regardless of technology,

mobile isn’t cheap

an exercise

November 22, 1963

today, we are going prove who shot JFK using the principles of the mobile web.

what do you believe?

“HTML5 has so much momentum it could defeat the native app in as little as two years.

“Chuck”

computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

candybar

LTE2.5G2G1G

nextacademia

ubiquity

Mobile Lesson #12the client is not your

problem. it’s your data.

Mobile Lesson #13a great mobile strategy creates more questions than it provide answers

Mobile Lesson #14there is no such thing as

a magic bullets**see lessons #1 & 2

Get in TouchFind Out How We Can Help You.

Brian FlingFounder & Creative Director

brian@pinchzoom.com+1 206 351-6060

My name is Brian Fling and I’m a Mobile Designer

twitter.com/fling

book mobiledesign.org

company pinchzoom.com

blog pinchzoom.com/fling

THANK YOU

what the web community can learn from mobile

Technology