adrian mendoza

Mobile Unleashed
Creating a plan to build and optimize
your mobile experiences

Marlin Mobile

Mobile	
  U...
Remember the good old days

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@ma...
Remember the good old days

here’s a hint

PC

Marlin Mobile

Mac

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	...
Remember the good old days

wasn’t it so simple then

PC

Marlin Mobile

Mac

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mi...
introducing mobile…

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	...
it’s just the tip of the iceberg

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
 ...
the mobile equation

this is your mobile
experience now…
…its complicated
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  a...
from our network

42 different screen sizes
143 different carriers
694 different device models
Nov 2013
Marlin Mobile

Source...
from our network

39 different OS versions
38% iOS / 61%Android
1074 different user agent profiles
across 53 different countri...
from our network

average load time - 11.2 sec
average page weight - 263.4 KB
average http requests - 57
Nov 2013
Marlin M...
everyone has
misconceptions
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@ma...
misconception #1

mobile is just
ANOTHER channel
“…if it’s fine on the desktop, it’s good on
mobile…”

Marlin Mobile

Mobil...
I call

foul

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
  
real examples

Only the names have been changed to protect the innocent.

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  a...
real example

lulu
•  2.69s on the desktop
•  2 cdns in use
•  ese guys optimize
everything on the desktop!

so what does...
lulu

here is the mobile waterfall

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	...
lulu

going…

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
  
lulu

going…

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
  
lulu

still going…

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
...
lulu

done

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
  
lulu
so,what went wrong?
•  too many http requests
for slow network
connections
•  too many concurrent
connections for a
m...
misconception #2

the mobile browser is
EASY
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobi...
foul

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
  
compatibility

there is a lot still missing for the mobile browser

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  ...
Let’s test something else

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@mar...
WebP

Oops..

Safari on my iPhone 5S
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX...
WebP

where's the gain?

Source: Speedier
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	...
misconception #3

there is NOTHING
I can do about it
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your...
foul

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
  
benchmark

costco – 14.8s

target -5.1s

walmart – 2.5s
Source: Marlin Mobile
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	...
benchmark

costco – 14.8s

target -5.1s

walmart – 2.5s

Someone is doing something right
Source: Marlin Mobile

Marlin Mo...
retailer

Time to call Akamai
Source: Marlin Mobile
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	...
Now its your turn
How do you plan to build and
optimize your own mobile experiences?
Marlin Mobile

Mobile	
  Unleashed:	
...
use real data

your users do not live
in the cloud or a closet
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mi...
use real data

know your users

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  
...
do these users matter to you?

Source: Marlin Mobile
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your...
do these users matter to you?

or do these?

Source: Marlin Mobile
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  O...
use real data

test everything on real
devices
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mo...
use real data

warning:
these results come from real
devices in the wild from real users

Marlin Mobile

Mobile	
  Unleash...
page design

small page

vs.

big page

Source: Marlin Mobile
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6miz...
page design

big page – 4.7s

small page-1.5s

increased
performance by
68%

Source: Marlin Mobile
Marlin Mobile

Mobile	
...
page design

big page – 4.7s

why?
look familiar?

to many
concurrent
HTTP requests
for mobile
browser
Source: Marlin Mobi...
use real data

do little wins

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

...
css sprites
non sprites-1.22s

css sprites– 1.0s

Marlin Mobile

increased
performance by
18%

Mobile	
  Unleashed:	
  Pla...
minimized css
non sprites/min-1.1s

css sprites/min–.91s

Marlin Mobile

increased
performance by
17%

Mobile	
  Unleashed...
css sprites

minimized css
increased
performance by
25%

non sprites-1.22s

css sprites/min–.91s

Marlin Mobile

even this...
use real data

get yourself some
tools to help test
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	...
use real data

webUIview is not the
real browser
webUI view: browser window from inside of an app

Marlin Mobile

Mobile	
...
webpagetest

most page elements are missing…

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mob...
…a real mobile browser returns more
elements that match the desktop browser

Source: Speedier
Marlin Mobile

Mobile	
  Unl...
free tools

the chrome app allows you to
connect to a phone using your
computer to get a waterfall
Marlin Mobile

Mobile	
...
free tools

Speedier
download for free on iTunes. Use it
to test your pages on a real browser
Marlin Mobile

Mobile	
  Unl...
in closing

the mobile web does
NOT go on vacation
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
...
in closing

NO app for you!
Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@ma...
Questions?

Marlin Mobile

Mobile	
  Unleashed:	
  Plan	
  and	
  Op6mize	
  your	
  Mobile	
  UX	
  

@marlinUX	
  
adrian mendoza
Adrian’s career is highlighted by over 12 years of design
and user experience in the handheld, pharmaceutic...
Upcoming SlideShare
Loading in …5
×

Mobile Unleashed: Creating a plan to build and optimize your mobile experiences

1,283 views

Published on

Mobile can seem like a big hurdle with no beginning or end. It has introduced new challenges to creating and optimizing web experiences, especially when it comes to the smartphone and tablet. How do you plan for building your mobile experience? How do you start it? And how do you optimize the performance for this changing landscape? At Marlin Mobile we began by focusing on how mobile devices affect your user experience. Our data helps developers, business, and designers to better plan and give insight into how to start, optimize, and prepare for going mobile.

Our core belief is that mobile is just not something you can ignore, but rather you can have the data and insight to prepare and build from.

In my talk I am going to present some of our mobile insights, trends, and problems we see in the mobile web. I will present some methods to plan, optimize, and give tools to help your mobile experiences.

Speaker Bio:

Adrian Mendoza has been designing and coding web pages since 1995. He teaches CSS, writes books and articles on mobile user experience, and owns way too many mobile devices in his house. He is the cofounder of Marlin. In his spare time he is teaching his son how to use the iPad. Read his new mobileUX book http://www.mobileuxbook.com and is @marlinux on twitter.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,283
On SlideShare
0
From Embeds
0
Number of Embeds
317
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Unleashed: Creating a plan to build and optimize your mobile experiences

  1. 1. adrian mendoza Mobile Unleashed Creating a plan to build and optimize your mobile experiences Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  2. 2. Remember the good old days Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  3. 3. Remember the good old days here’s a hint PC Marlin Mobile Mac Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  4. 4. Remember the good old days wasn’t it so simple then PC Marlin Mobile Mac Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  5. 5. introducing mobile… Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  6. 6. it’s just the tip of the iceberg Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  7. 7. the mobile equation this is your mobile experience now… …its complicated Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  8. 8. from our network 42 different screen sizes 143 different carriers 694 different device models Nov 2013 Marlin Mobile Source: Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  9. 9. from our network 39 different OS versions 38% iOS / 61%Android 1074 different user agent profiles across 53 different countries Nov 2013 Marlin Mobile Source: Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  10. 10. from our network average load time - 11.2 sec average page weight - 263.4 KB average http requests - 57 Nov 2013 Marlin Mobile Source: Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  11. 11. everyone has misconceptions Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  12. 12. misconception #1 mobile is just ANOTHER channel “…if it’s fine on the desktop, it’s good on mobile…” Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  13. 13. I call foul Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  14. 14. real examples Only the names have been changed to protect the innocent. Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  15. 15. real example lulu •  2.69s on the desktop •  2 cdns in use •  ese guys optimize everything on the desktop! so what does it look like on mobile? Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  16. 16. lulu here is the mobile waterfall Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  17. 17. lulu going… Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  18. 18. lulu going… Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  19. 19. lulu still going… Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  20. 20. lulu done Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  21. 21. lulu so,what went wrong? •  too many http requests for slow network connections •  too many concurrent connections for a mobile browser even with the cdn •  trying to cache too much on a small cache Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  22. 22. misconception #2 the mobile browser is EASY Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  23. 23. foul Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  24. 24. compatibility there is a lot still missing for the mobile browser Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  25. 25. Let’s test something else Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  26. 26. WebP Oops.. Safari on my iPhone 5S Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  27. 27. WebP where's the gain? Source: Speedier Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  28. 28. misconception #3 there is NOTHING I can do about it Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  29. 29. foul Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  30. 30. benchmark costco – 14.8s target -5.1s walmart – 2.5s Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  31. 31. benchmark costco – 14.8s target -5.1s walmart – 2.5s Someone is doing something right Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  32. 32. retailer Time to call Akamai Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  33. 33. Now its your turn How do you plan to build and optimize your own mobile experiences? Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  34. 34. use real data your users do not live in the cloud or a closet Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  35. 35. use real data know your users Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  36. 36. do these users matter to you? Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  37. 37. do these users matter to you? or do these? Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  38. 38. use real data test everything on real devices Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  39. 39. use real data warning: these results come from real devices in the wild from real users Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  40. 40. page design small page vs. big page Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  41. 41. page design big page – 4.7s small page-1.5s increased performance by 68% Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  42. 42. page design big page – 4.7s why? look familiar? to many concurrent HTTP requests for mobile browser Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  43. 43. use real data do little wins Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  44. 44. css sprites non sprites-1.22s css sprites– 1.0s Marlin Mobile increased performance by 18% Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  45. 45. minimized css non sprites/min-1.1s css sprites/min–.91s Marlin Mobile increased performance by 17% Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  46. 46. css sprites minimized css increased performance by 25% non sprites-1.22s css sprites/min–.91s Marlin Mobile even this guy would have been happy! Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  47. 47. use real data get yourself some tools to help test Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  48. 48. use real data webUIview is not the real browser webUI view: browser window from inside of an app Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  49. 49. webpagetest most page elements are missing… Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  50. 50. …a real mobile browser returns more elements that match the desktop browser Source: Speedier Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  51. 51. free tools the chrome app allows you to connect to a phone using your computer to get a waterfall Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  52. 52. free tools Speedier download for free on iTunes. Use it to test your pages on a real browser Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  53. 53. in closing the mobile web does NOT go on vacation Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  54. 54. in closing NO app for you! Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  55. 55. Questions? Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  56. 56. adrian mendoza Adrian’s career is highlighted by over 12 years of design and user experience in the handheld, pharmaceutical, financial, and educational sectors.  His first studio, Synthesis3, worked with several Palm OS software companies in creating their brand for both a web and retail presence.  In the financial and education sector, customers included Sovereign Bank, Houghton Mifflin, MIT and Harvard.  Adrian consulted in UX and Information Architect lead roles for Fidelity’s E-business design group, omson Financial, and T.Rowe Price.  Adrian earned his BA from the University of Southern California and his Masters from the Harvard Graduate School of Design. Read my new Mobile UX book: Mobile User Experience: Patterns to Make Sense of it All Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  

×