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

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

Marlin Mobile @marlinUX Mobile Unleashed: Plan and Op6mize your Mobile UX

Remember the good old days



PC Mac

here’s a hint



PC Mac

wasn’t it so simple then


introducing mobile…



it’s just the tip of the iceberg



this is your mobile experience now…

the mobile equation


…its complicated


42 different screen sizes

from our network

694 different device models

143 different carriers

Source: Marlin Mobile


Nov 2013


39 different OS versions

from our network

across 53 different countries

38% iOS / 61%Android



Nov 2013

1074 different user agent profiles


average load time - 11.2 sec

from our network

average page weight - 263.4 KB



average http requests - 57 Nov 2013


everyone has misconceptions



mobile is just ANOTHER channel

misconception #1


“…if it’s fine on the desktop, it’s good on mobile…”


foul I call



real examples

Only the names have been changed to protect the innocent.


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?

real example


lulu

here is the mobile waterfall


lulu

going…


lulu

going…


lulu

still going…


lulu

done


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


the mobile browser is EASY

misconception #2



foul



there is a lot still missing for the mobile browser

compatibility


Let’s test something else


WebP

Safari on my iPhone 5S

Oops..


Source: Speedier

WebP

where's the gain?


there is NOTHING I can do about it

misconception #3



foul




benchmark

walmart – 2.5s

target -5.1s

costco – 14.8s




benchmark

Someone is doing something right walmart – 2.5s

target -5.1s

costco – 14.8s




retailer

Time to call Akamai


Now its your turn


How do you plan to build and optimize your own mobile experiences?


your users do not live in the cloud or a closet


use real data


know your users


use real data


do these users matter to you?



do these users matter to you?


or do these?


use real data

test everything on real devices


use real data

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


page design

small page big page


vs.



page design

small page-1.5s

big page – 4.7s

increased performance by

68%



page design

to many concurrent

HTTP requests for mobile

browser

look familiar?

why? big page – 4.7s


do little wins


use real data


css sprites

non sprites-1.22s

css sprites– 1.0s increased performance by

18%


minimized css


17%

non sprites/min-1.1s

css sprites/min–.91s


css sprites minimized css

non sprites-1.22s

css sprites/min–.91s


25%

even this guy would have been happy!


use real data

get yourself some tools to help test


webUIview is not the real browser


use real data

webUI view: browser window from inside of an app


webpagetest

most page elements are missing…


…a real mobile browser returns more elements that match the desktop browser

Source: Speedier


free tools

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


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

free tools

Speedier


the mobile web does NOT go on vacation


in closing


NO app for you! Mobile Unleashed: Plan and Op6mize your Mobile UX

in closing


Questions?



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

Technology

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