Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,448 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
  • Be the first to comment

  • Be the first to like this

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  

×