Mobile Unleashed: Creating a plan to build and optimize your mobile experiences
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 836 views

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 ...

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.

Statistics

Views

Total Views
836
Views on SlideShare
637
Embed Views
199

Actions

Likes
0
Downloads
7
Comments
0

5 Embeds 199

http://www.marlinmobile.com 108
http://adrianmendoza.com 52
http://mobileuxbook.com 19
http://marlinmobile.com 19
http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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  
  • Remember the good old days Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • Remember the good old days here’s a hint PC Marlin Mobile Mac Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • Remember the good old days wasn’t it so simple then PC Marlin Mobile Mac Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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   @marlinUX  
  • the mobile equation this is your mobile experience now… …its complicated Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • 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  
  • 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  
  • everyone has misconceptions Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • 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  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • lulu here is the mobile waterfall 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 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 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  
  • misconception #2 the mobile browser is EASY Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  Op6mize  your  Mobile  UX   @marlinUX  
  • Let’s test something else Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • WebP Oops.. Safari on my iPhone 5S Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • WebP where's the gain? Source: Speedier Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • misconception #3 there is NOTHING I can do about it Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • retailer Time to call Akamai Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • 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  
  • use real data know your users Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • do these users matter to you? Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • do these users matter to you? or do these? Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • use real data test everything on real devices Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • page design small page vs. big page Source: Marlin Mobile Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • 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  
  • use real data do little wins Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • 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  
  • 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  
  • use real data get yourself some tools to help test Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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  
  • webpagetest most page elements are missing… Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • …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  
  • 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  
  • 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  
  • in closing the mobile web does NOT go on vacation Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • in closing NO app for you! Marlin Mobile Mobile  Unleashed:  Plan  and  Op6mize  your  Mobile  UX   @marlinUX  
  • 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, 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