mobile unleashed: creating a plan to build and optimize your mobile experiences
DESCRIPTION
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.TRANSCRIPT
![Page 1: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/1.jpg)
Marlin Mobile @marlinUX
Mobile Unleashed Creating a plan to build and optimize
your mobile experiences
Mobile Unleashed: Plan and Op6mize your Mobile UX
adrian mendoza
![Page 2: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/2.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Remember the good old days
![Page 3: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/3.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Remember the good old days
PC Mac
here’s a hint
![Page 4: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/4.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Remember the good old days
PC Mac
wasn’t it so simple then
![Page 5: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/5.jpg)
Marlin Mobile @marlinUX
introducing mobile…
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 6: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/6.jpg)
Marlin Mobile @marlinUX
it’s just the tip of the iceberg
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 7: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/7.jpg)
Marlin Mobile @marlinUX
this is your mobile experience now…
the mobile equation
Mobile Unleashed: Plan and Op6mize your Mobile UX
…its complicated
![Page 8: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/8.jpg)
Marlin Mobile @marlinUX
42 different screen sizes
from our network
694 different device models
143 different carriers
Source: Marlin Mobile
Mobile Unleashed: Plan and Op6mize your Mobile UX
Nov 2013
![Page 9: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/9.jpg)
Marlin Mobile @marlinUX
39 different OS versions
from our network
across 53 different countries
38% iOS / 61%Android
Source: Marlin Mobile
Mobile Unleashed: Plan and Op6mize your Mobile UX
Nov 2013
1074 different user agent profiles
![Page 10: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/10.jpg)
Marlin Mobile @marlinUX
average load time - 11.2 sec
from our network
average page weight - 263.4 KB
Source: Marlin Mobile
Mobile Unleashed: Plan and Op6mize your Mobile UX
average http requests - 57 Nov 2013
![Page 11: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/11.jpg)
Marlin Mobile @marlinUX
everyone has misconceptions
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 12: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/12.jpg)
Marlin Mobile @marlinUX
mobile is just ANOTHER channel
misconception #1
Mobile Unleashed: Plan and Op6mize your Mobile UX
“…if it’s fine on the desktop, it’s good on mobile…”
![Page 13: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/13.jpg)
Marlin Mobile @marlinUX
foul I call
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 14: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/14.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
real examples
Only the names have been changed to protect the innocent.
![Page 15: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/15.jpg)
Marlin Mobile @marlinUX
lulu
Mobile Unleashed: Plan and Op6mize your Mobile UX
• 2.69s on the desktop • 2 cdns in use • ese guys optimize
everything on the desktop!
so what does it look like on mobile?
real example
![Page 16: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/16.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
lulu
here is the mobile waterfall
![Page 17: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/17.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
lulu
going…
![Page 18: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/18.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
lulu
going…
![Page 19: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/19.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
lulu
still going…
![Page 20: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/20.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
lulu
done
![Page 21: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/21.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
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
![Page 22: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/22.jpg)
Marlin Mobile @marlinUX
the mobile browser is EASY
misconception #2
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 23: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/23.jpg)
Marlin Mobile @marlinUX
foul
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 24: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/24.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
there is a lot still missing for the mobile browser
compatibility
![Page 25: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/25.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Let’s test something else
![Page 26: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/26.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
WebP
Safari on my iPhone 5S
Oops..
![Page 27: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/27.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Source: Speedier
WebP
where's the gain?
![Page 28: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/28.jpg)
Marlin Mobile @marlinUX
there is NOTHING I can do about it
misconception #3
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 29: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/29.jpg)
Marlin Mobile @marlinUX
foul
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 30: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/30.jpg)
Marlin Mobile @marlinUX
Source: Marlin Mobile
benchmark
walmart – 2.5s
target -5.1s
costco – 14.8s
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 31: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/31.jpg)
Marlin Mobile @marlinUX
Source: Marlin Mobile
benchmark
Someone is doing something right walmart – 2.5s
target -5.1s
costco – 14.8s
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 32: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/32.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Source: Marlin Mobile
retailer
Time to call Akamai
![Page 33: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/33.jpg)
Marlin Mobile @marlinUX
Now its your turn
Mobile Unleashed: Plan and Op6mize your Mobile UX
How do you plan to build and optimize your own mobile experiences?
![Page 34: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/34.jpg)
Marlin Mobile @marlinUX
your users do not live in the cloud or a closet
Mobile Unleashed: Plan and Op6mize your Mobile UX
use real data
![Page 35: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/35.jpg)
Marlin Mobile @marlinUX
know your users
Mobile Unleashed: Plan and Op6mize your Mobile UX
use real data
![Page 36: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/36.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
do these users matter to you?
Source: Marlin Mobile
![Page 37: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/37.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
do these users matter to you?
Source: Marlin Mobile
or do these?
![Page 38: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/38.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
use real data
test everything on real devices
![Page 39: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/39.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
use real data
warning: these results come from real devices in the wild from real users
![Page 40: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/40.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
page design
small page big page
Source: Marlin Mobile
vs.
![Page 41: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/41.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Source: Marlin Mobile
page design
small page-1.5s
big page – 4.7s
increased performance by
68%
![Page 42: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/42.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
Source: Marlin Mobile
page design
to many concurrent
HTTP requests for mobile
browser
look familiar?
why? big page – 4.7s
![Page 43: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/43.jpg)
Marlin Mobile @marlinUX
do little wins
Mobile Unleashed: Plan and Op6mize your Mobile UX
use real data
![Page 44: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/44.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
css sprites
non sprites-1.22s
css sprites– 1.0s increased performance by
18%
![Page 45: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/45.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
minimized css
increased performance by
17%
non sprites/min-1.1s
css sprites/min–.91s
![Page 46: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/46.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
css sprites minimized css
non sprites-1.22s
css sprites/min–.91s
increased performance by
25%
even this guy would have been happy!
![Page 47: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/47.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
use real data
get yourself some tools to help test
![Page 48: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/48.jpg)
Marlin Mobile @marlinUX
webUIview is not the real browser
Mobile Unleashed: Plan and Op6mize your Mobile UX
use real data
webUI view: browser window from inside of an app
![Page 49: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/49.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
webpagetest
most page elements are missing…
![Page 50: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/50.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
…a real mobile browser returns more elements that match the desktop browser
Source: Speedier
![Page 51: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/51.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
free tools
the chrome app allows you to connect to a phone using your computer to get a waterfall
![Page 52: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/52.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
download for free on iTunes. Use it to test your pages on a real browser
free tools
Speedier
![Page 53: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/53.jpg)
Marlin Mobile @marlinUX
the mobile web does NOT go on vacation
Mobile Unleashed: Plan and Op6mize your Mobile UX
in closing
![Page 54: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/54.jpg)
Marlin Mobile @marlinUX
NO app for you! Mobile Unleashed: Plan and Op6mize your Mobile UX
in closing
![Page 55: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/55.jpg)
Marlin Mobile @marlinUX
Questions?
Mobile Unleashed: Plan and Op6mize your Mobile UX
![Page 56: Mobile Unleashed: Creating a plan to build and optimize your mobile experiences](https://reader034.vdocument.in/reader034/viewer/2022051819/54c844cc4a795965098b45b2/html5/thumbnails/56.jpg)
Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX
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