Hello Friends, Let’s talk Mobile First         2012.04.13Monday, 16 April, 2012
IF YOU THOUGHT                         MOBILE WAS BIG...           ©                                 2        MOBIENTOMond...
Y-Y-Y-Y-Y-Y-Y-Y-                          YOU AIN’TSEEN                           NOTHING YET!           ©                ...
NOW, IT’S                         MOBILE FIRST                           BABY           ©                            4    ...
Mobile platforms           ©                5        MOBIENTOMonday, 16 April, 2012
‘Made in USA’ Smartphone Operating Systems =         Mobile platforms                                         64% Share fr...
Mobile use                         Aftonbladet, GP,                         other news sites                         About...
Mobile use                         The Golden Hour           ©                               8        MOBIENTOMonday, 16 A...
Mobile search           ©             9        MOBIENTOMonday, 16 April, 2012
Mobile vs the other guys           ©                        10        MOBIENTOMonday, 16 April, 2012
Mobile surpasses desktop - it WILL happen                                                                                 ...
MOBILE INTERNET =         PERSONAL INTERNET =         PRIMARY INTERNET           ©                   12        MOBIENTOMon...
THE BIGGEST THING TO         HAPPEN TO THE         INTERNETSINCETHE         INTERNET           ©        MOBIENTO          ...
So we end up here           ©                 14        MOBIENTOMonday, 16 April, 2012
The question becomes                  DOES IT WORK HERE?           ©                           15        MOBIENTOMonday, 1...
The question becomes                                OR HERE?           ©                               16        MOBIENTOM...
Mobile users are different. They have different                                 CONTEXTS                                  ...
SO WHAT DO WE DO?           ©                          18        MOBIENTOMonday, 16 April, 2012
The father of ‘Mobile First’                                           Luke Wroblewski                                    ...
©             20        MOBIENTOMonday, 16 April, 2012
Last vs First           ©             21        MOBIENTOMonday, 16 April, 2012
Focus first           ©             22        MOBIENTOMonday, 16 April, 2012
Touch first           ©             23        MOBIENTOMonday, 16 April, 2012
Touch first           ©             23        MOBIENTOMonday, 16 April, 2012
Context first           ©             24        MOBIENTOMonday, 16 April, 2012
So, what is the solution?                                                    HTML5             CSS3                       ...
The father of ‘Responsive Web’                                               Ethan Marcotte                               ...
The father of ‘Responsive Web’                                           1. Flexible layout                               ...
Responsive Web example           ©                      28        MOBIENTOMonday, 16 April, 2012
Responsive Web example           ©                      29        MOBIENTOMonday, 16 April, 2012
PERFECT!         ALL OF OUR         PROBLEMS         ARE SOLVED....           ©        MOBIENTO                          3...
Not so fast!                    HOLD YOUR HORSES!           ©                            31        MOBIENTOMonday, 16 Apri...
Responsive Web         WHEN DO WE USE IT?      • Continuous             updates (news, blogs and similar)      • Less     ...
Responsive Web         CHALLENGES      • Technical          challenges      • Limited          handset support      • Mobi...
Another log on the fire...                                                        - Mobile users are                       ...
The best $15 you will spend           ©                           35        MOBIENTOMonday, 16 April, 2012
SOME        EXAMPLES           ©        MOBIENTOMonday, 16 April, 2012                         36
Responsive Web - but made mobile first           ©                                     37        MOBIENTOMonday, 16 April, ...
©             38        MOBIENTOMonday, 16 April, 2012
©             39        MOBIENTOMonday, 16 April, 2012
SF Bio should use their app as the starting point for their website           ©                                           ...
Tesco - a context study                                   http://www.youtube.com/watch?v=oPM4Ui6Sjfk           ©          ...
RECAP          1.Mobile Internet = the primary Internet          2.Mobile First is a sustainable strategy          3.Think...
Thank you & speak soon!         Emil Salonen         emil.salonen@mobiento.com         @emilsalonen           ©        MOB...
Upcoming SlideShare
Loading in...5
×

Mobile Thirst - Mobile First

5,974

Published on

Mobile has become the new industry darling. Many are now falling in love with it, but we all know it can be a little hard to know where to begin. So we have decided to start Mobile Thirst where we chat about mobile topics close to our hearts. The 45 minute morning sessions cover inspiration, practical how-to’s and trends. Always with a coffee and bun in hand, we hope to satisfy your thirst for mobile.

First session: “Mobile First”
Where do you start with a digital refresh or overhaul project? Well, Emil Salonen, Vice President, explains where to begin, goes over the hyped “Mobile First” approach and tells us what it is actually all about.

Published in: Technology, Business

Mobile Thirst - Mobile First

  1. 1. Hello Friends, Let’s talk Mobile First 2012.04.13Monday, 16 April, 2012
  2. 2. IF YOU THOUGHT MOBILE WAS BIG... © 2 MOBIENTOMonday, 16 April, 2012
  3. 3. Y-Y-Y-Y-Y-Y-Y-Y- YOU AIN’TSEEN NOTHING YET! © 3 MOBIENTOMonday, 16 April, 2012
  4. 4. NOW, IT’S MOBILE FIRST BABY © 4 MOBIENTOMonday, 16 April, 2012
  5. 5. Mobile platforms © 5 MOBIENTOMonday, 16 April, 2012
  6. 6. ‘Made in USA’ Smartphone Operating Systems = Mobile platforms 64% Share from 5% Five Years Ago Smartphone Operating System Market Share, 2005 vs. 2011E Market Share of Smartphone OS 100% 80% Other OS 60% iOS Android Windows Mobile 40% BlackBerry OS Linux Nokia Symbian 20% 0% 2005 2011E Source: Morgan Stanley Research, Gartner. Copyright 2011. All rights reserved. 45 © 6 MOBIENTOMonday, 16 April, 2012
  7. 7. Mobile use Aftonbladet, GP, other news sites About 1/3 mobile traffic © 7 MOBIENTOMonday, 16 April, 2012
  8. 8. Mobile use The Golden Hour © 8 MOBIENTOMonday, 16 April, 2012
  9. 9. Mobile search © 9 MOBIENTOMonday, 16 April, 2012
  10. 10. Mobile vs the other guys © 10 MOBIENTOMonday, 16 April, 2012
  11. 11. Mobile surpasses desktop - it WILL happen Mobil! 2015?! 2014?! Desktop! 2013?! Source: Morgan Stanley, Forrester, Strategy Analytics © 11 MOBIENTOMonday, 16 April, 2012
  12. 12. MOBILE INTERNET = PERSONAL INTERNET = PRIMARY INTERNET © 12 MOBIENTOMonday, 16 April, 2012
  13. 13. THE BIGGEST THING TO HAPPEN TO THE INTERNETSINCETHE INTERNET © MOBIENTO 13Monday, 16 April, 2012
  14. 14. So we end up here © 14 MOBIENTOMonday, 16 April, 2012
  15. 15. The question becomes DOES IT WORK HERE? © 15 MOBIENTOMonday, 16 April, 2012
  16. 16. The question becomes OR HERE? © 16 MOBIENTOMonday, 16 April, 2012
  17. 17. Mobile users are different. They have different CONTEXTS NEEDS PERSPECTIVES © 17 MOBIENTOMonday, 16 April, 2012
  18. 18. SO WHAT DO WE DO? © 18 MOBIENTOMonday, 16 April, 2012
  19. 19. The father of ‘Mobile First’ Luke Wroblewski author of ‘Mobile First’ © 19 MOBIENTOMonday, 16 April, 2012
  20. 20. © 20 MOBIENTOMonday, 16 April, 2012
  21. 21. Last vs First © 21 MOBIENTOMonday, 16 April, 2012
  22. 22. Focus first © 22 MOBIENTOMonday, 16 April, 2012
  23. 23. Touch first © 23 MOBIENTOMonday, 16 April, 2012
  24. 24. Touch first © 23 MOBIENTOMonday, 16 April, 2012
  25. 25. Context first © 24 MOBIENTOMonday, 16 April, 2012
  26. 26. So, what is the solution? HTML5 CSS3 PROGRESSIVE BUZZ RESPONSIVE ENHANCEMENT WORDS WEB ONE WEB © 25 MOBIENTOMonday, 16 April, 2012
  27. 27. The father of ‘Responsive Web’ Ethan Marcotte designer of Boston Globe © 26 MOBIENTOMonday, 16 April, 2012
  28. 28. The father of ‘Responsive Web’ 1. Flexible layout 2. Flexible content 3. Media queries © 27 MOBIENTOMonday, 16 April, 2012
  29. 29. Responsive Web example © 28 MOBIENTOMonday, 16 April, 2012
  30. 30. Responsive Web example © 29 MOBIENTOMonday, 16 April, 2012
  31. 31. PERFECT! ALL OF OUR PROBLEMS ARE SOLVED.... © MOBIENTO 30Monday, 16 April, 2012
  32. 32. Not so fast! HOLD YOUR HORSES! © 31 MOBIENTOMonday, 16 April, 2012
  33. 33. Responsive Web WHEN DO WE USE IT? • Continuous updates (news, blogs and similar) • Less complex sites • When users expect same or similar content © 32 MOBIENTOMonday, 16 April, 2012
  34. 34. Responsive Web CHALLENGES • Technical challenges • Limited handset support • Mobile needs can sometimes be different http://www.webdesignshock.com/responsive-design-problems/! © 33 MOBIENTOMonday, 16 April, 2012
  35. 35. Another log on the fire... - Mobile users are different - Make a separate mobile site - Optimize for mobile needs Jakob Nielsen Usability Expert © 34 MOBIENTOMonday, 16 April, 2012
  36. 36. The best $15 you will spend © 35 MOBIENTOMonday, 16 April, 2012
  37. 37. SOME EXAMPLES © MOBIENTOMonday, 16 April, 2012 36
  38. 38. Responsive Web - but made mobile first © 37 MOBIENTOMonday, 16 April, 2012
  39. 39. © 38 MOBIENTOMonday, 16 April, 2012
  40. 40. © 39 MOBIENTOMonday, 16 April, 2012
  41. 41. SF Bio should use their app as the starting point for their website © 40 MOBIENTOMonday, 16 April, 2012
  42. 42. Tesco - a context study http://www.youtube.com/watch?v=oPM4Ui6Sjfk © 41 MOBIENTOMonday, 16 April, 2012
  43. 43. RECAP 1.Mobile Internet = the primary Internet 2.Mobile First is a sustainable strategy 3.Think: Focus, Context & Touch © MOBIENTOMonday, 16 April, 2012
  44. 44. Thank you & speak soon! Emil Salonen emil.salonen@mobiento.com @emilsalonen © MOBIENTOMonday, 16 April, 2012

×