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.

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. Remember the good old days
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

3. Remember the good old days
here’s a hint
PC
Marlin Mobile
Mac
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. introducing mobile…
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

6. it’s just the tip of the iceberg
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

7. the mobile equation
this is your mobile
experience now…
…its complicated
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. 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. 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. everyone has
misconceptions
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. I call
foul
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. 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. lulu
here is the mobile waterfall
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

17. lulu
going…
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

18. lulu
going…
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

19. lulu
still going…
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

20. lulu
done
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. misconception #2
the mobile browser is
EASY
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

23. foul
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

24. compatibility
there is a lot still missing for the mobile browser
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

25. Let’s test something else
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

26. WebP
Oops..
Safari on my iPhone 5S
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

27. WebP
where's the gain?
Source: Speedier
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

28. misconception #3
there is NOTHING
I can do about it
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

29. foul
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. 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. retailer
Time to call Akamai
Source: Marlin Mobile
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. 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. use real data
know your users
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

36. do these users matter to you?
Source: Marlin Mobile
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. use real data
test everything on real
devices
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. page design
small page
vs.
big page
Source: Marlin Mobile
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. 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. use real data
do little wins
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. 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. 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. use real data
get yourself some
tools to help test
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. webpagetest
most page elements are missing…
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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. 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. 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. in closing
the mobile web does
NOT go on vacation
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

54. in closing
NO app for you!
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

55. Questions?
Marlin Mobile
Mobile
Unleashed:
Plan
and
Op6mize
your
Mobile
UX
@marlinUX

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