what the web community can learn from mobile

MADE WITH LOVE IN SEATTLE BY

what the web canlearn from mobile




mobile ux

web


mobile ux

web


“[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

CENSORED

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.





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

web

20102000199019801970 2020


computing

network

internet

devices

web

20102000199019801970 2020

mainframe


computing

network

internet

devices

web

20102000199019801970 2020

pc’smainframe


computing

network

internet

devices

web

20102000199019801970 2020

mobilitypc’smainframe


computing

network

internet

devices

web

20102000199019801970 2020

ubiquitymobilitypc’smainframe


computing

network

internet

devices

web

20102000199019801970 2020

1G



computing

network

internet

devices

web

20102000199019801970 2020

2G1G



computing

network

internet

devices

web

20102000199019801970 2020

2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

3G

2020

2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

3G

2020

LTE2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

IPv4

3G

2020

LTE2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

IPv4

3G

IPv6

2020

LTE2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

brick

IPv4

3G

IPv6

2020

LTE2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

brick

IPv4

3G

IPv6

2020

candybar

LTE2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

featurebrick

IPv4

3G

IPv6

2020

candybar

LTE2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G



computing

network

internet

devices

web

20102000199019801970

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G


academia


computing

network

internet

devices

web dot-com

20102000199019801970

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G


academia


computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G


academia


computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G


nextacademia


computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G


nextacademia


computing

network

internet

devices

web dot-com

20102000199019801970

web 2.0

featurebrick

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G


nextacademia


touch

IPv6

LTE

ubiquity

next


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.



iPad

magazine



iPad

magazineiPhone

web app



iPad

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.


iPad

magazineiPhone

web appDesktop

website


iPad

magazineiPhone

web appDesktop

website

‣ pagination was a nightmare.


iPad

magazineiPhone

web appDesktop

website


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


iPad

magazineiPhone

web appDesktop

website



‣ every page had to be designed individually.


iPad

magazineiPhone

web appDesktop

website




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


iPad

magazineiPhone

web appDesktop

website





‣ had to disable pinch to zoom.


iPad

magazineiPhone

web appDesktop

website






‣ large image needs for iPad were brutal.


iPad

magazineiPhone

web appDesktop

website







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


iPad

magazineiPhone

web appDesktop

website








‣ typical navigation had to be scrapped.


iPad

magazineiPhone

web appDesktop

website









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


iPad

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

work


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



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



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

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

IPv4

touch

3G

IPv6

2020

candybar

LTE2.5G2G1G


nextacademia


touch

IPv6

LTE

ubiquity

next


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

[email protected]+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

mailto:[email protected]




Date post:	20-Aug-2015
Category:	Technology
Upload:	brian-fling
View:	5,517 times
Download:	4 times

what the web community can learn from mobile

Technology