Mobile First
Frédéric Harper
Senior Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
2013-09-17
Questions
http://wpc13.cnf.io/sessions/6
1
Theproblem
Before
Today’s web
So, too often…
 the mobile devices are taken as a separate element
 the mobile devices are' simply not taken into consid...
the anti experience
Thesolution
Onesolution
Mobile first
Luke Wroblewski blogued about it on November 3rd 2009
Fundamentally, there’s just one World Wide Web,
but it can be experienced in different ways on
different devices.
- Luke W...
The experience
why
the growth
the growth of mobility
• ~--2014 = mobile > desktop
• In US, 25% = mobile only!
• Example (soon):
50% mobile of YouTube’s ...
In perspective
Source: http://lukew.com/
Don’t we all use native app?
347% of augmentation on the
mobile browser usage
(4.7 million) in January 2010
Source: http:/...
Don’t we all use native app?
112% of augmentation on
mobile browser usage
(251 million) in January 2010
Source: http://www...
the constraints
the context
the mobility isn’t just about mobile
Too often taken as inconvenient, take advantage of those!
the smartphones features
the smartphones features
• Detection of location (geolocation) - GPS
• Smartphone orientation – Accelerometer
• Touch scre...
the opportunities
HTML5 frameworks
HTML5 apps
the advantages
Mobile First
• Prepare your site to new mobile opportunities
• Force us to prioritize, and concentrate on the content/cont...
the reality
Source: http://xkcd.com/773/
the disadvantages
the disadvantages
• Changing your way of building your website or app
• You really need to know the needs of your customers
Howto
Redefining the experience
UI
 NUI – Natural User Interface
 Touch
 Region easier or hard to reach
 Limit to the essential
Touch
 Recommended = 9mm/34px
 Minimum = 7mm/26px
 Minimum spacing= 2mm/8px
Source: Windows Phone UI Design and Interac...
…every desktop UI should be designed for touch
now. When any desktop machine could have a
touch interface, we have to proc...
Every UI should be designed for touch!
- Frédéric Harper, Web & PHP Conference, 2013-09-17
The engine behind
1. Eliminate redirections, and limit the number of HTTP requests
2. Use Offline Storage/App Cache
3. Use...
Optimize the speed
Smartphones features
1. Use geolocation
1. Location, and direction
2. Use smartphone camera or
microphone
3. Use the RFID/...
resources
http
 Luke W post: http://www.lukew.com/ff/entry.asp?933
 Mobile First book: http://www.abookapart.com/products/mobile-f...
At the end, Mobile First is
• thinking of the growth of mobile devices
• minimizing the constraint
• maximizing the capaci...
It’s also…
• Mobile First <3 Responsive Web Design
• Responsive Web Design != Mobile First
• Content First is the key
• It...
Shameless plug
Responsive Web Design
tomorrow at 4:25 PM - room A
Keep in mind
Mobile Experience = capacities – constraints + prioritization
contexts
Evaluation & questions
http://wpc13.cnf.io/sessions/6
1
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Mobile First - Web & PHP Conference - 2013-09-17 Keynote
Upcoming SlideShare
Loading in …5
×

Mobile First - Web & PHP Conference - 2013-09-17 Keynote

1,030 views

Published on

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,030
On SlideShare
0
From Embeds
0
Number of Embeds
125
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • This presentation is about 45 minutes longHi, my name is Frédéric HarperI’m a Senior Technical Evangelist at Mozilla focussing on the Open Web with Firefox OSFeel free to tweet about the presentation by adding my Twitter handle @fharper.Good or bad things, I won’t be upset!You can also go, after the presentation, to my personal blog at outofcomfortzone.net or for the lazy one, occz.netYou don’t have to take notes from what you see on the slides, as the slides will be made available on my site soon after the event
  • As you know by now, the conference is using conferences.io as a questions platformYou can ask your question on the site, and I’ll check the questions if I have time at the endIf you have no problem, leave your Twitter handle in the questions, and I’ll answer them after my talkOr just come see me during the break
  • Please take the time to evaluate the sessionLeave any valuables comments, as it well us improve our talksIf you didn’t like something, please be specificYou can also talk to me during the break or ping me on twitter/email for any comments or remaining questions
  • As you remember, my name is Frédéric HarperI’m Technical Evangelist focussing on Firefox OS, so please contact me if you have any questionsFeel free to follow me on Twitter or add me to LinkedInIf you want to read some amazing technical posts on Firefox, Firefox OS, Developer Tool, and the Open Web, please check our hacks blogLast, but not least, you can check my personal blog: it’s all about gnomes, and unicorns
  • Mobile First - Web & PHP Conference - 2013-09-17 Keynote

    1. 1. Mobile First Frédéric Harper Senior Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net 2013-09-17
    2. 2. Questions http://wpc13.cnf.io/sessions/6 1
    3. 3. Theproblem
    4. 4. Before
    5. 5. Today’s web
    6. 6. So, too often…  the mobile devices are taken as a separate element  the mobile devices are' simply not taken into consideration  the web experience isn’t good on mobile devices
    7. 7. the anti experience
    8. 8. Thesolution
    9. 9. Onesolution
    10. 10. Mobile first Luke Wroblewski blogued about it on November 3rd 2009
    11. 11. Fundamentally, there’s just one World Wide Web, but it can be experienced in different ways on different devices. - Luke Woblewski, Mobile First, A Book Apart
    12. 12. The experience
    13. 13. why
    14. 14. the growth
    15. 15. the growth of mobility • ~--2014 = mobile > desktop • In US, 25% = mobile only! • Example (soon): 50% mobile of YouTube’s videos Sources: http://www.trinitydigitalmarketing.com/the-rise-of-mobile-infographic http://crave.cnet.co.uk/software/google-is-now-a-mobile-first-company-execs-say-50009727/ http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
    16. 16. In perspective Source: http://lukew.com/
    17. 17. Don’t we all use native app? 347% of augmentation on the mobile browser usage (4.7 million) in January 2010 Source: http://www.lukew.com/
    18. 18. Don’t we all use native app? 112% of augmentation on mobile browser usage (251 million) in January 2010 Source: http://www.lukew.com/
    19. 19. the constraints
    20. 20. the context
    21. 21. the mobility isn’t just about mobile Too often taken as inconvenient, take advantage of those!
    22. 22. the smartphones features
    23. 23. the smartphones features • Detection of location (geolocation) - GPS • Smartphone orientation – Accelerometer • Touch screens • NFC (Near Field Communications) • …
    24. 24. the opportunities
    25. 25. HTML5 frameworks
    26. 26. HTML5 apps
    27. 27. the advantages
    28. 28. Mobile First • Prepare your site to new mobile opportunities • Force us to prioritize, and concentrate on the content/container • Give us the opportunity to create better [mobile] Web experience • Give us the opportunity to create innovative experiences
    29. 29. the reality Source: http://xkcd.com/773/
    30. 30. the disadvantages
    31. 31. the disadvantages • Changing your way of building your website or app • You really need to know the needs of your customers
    32. 32. Howto
    33. 33. Redefining the experience
    34. 34. UI  NUI – Natural User Interface  Touch  Region easier or hard to reach  Limit to the essential
    35. 35. Touch  Recommended = 9mm/34px  Minimum = 7mm/26px  Minimum spacing= 2mm/8px Source: Windows Phone UI Design and Interaction Guide v2.0
    36. 36. …every desktop UI should be designed for touch now. When any desktop machine could have a touch interface, we have to proceed as if they all do. - Josh Clark, http://globalmoxie.com/blog/desktop-touch-design.shtml
    37. 37. Every UI should be designed for touch! - Frédéric Harper, Web & PHP Conference, 2013-09-17
    38. 38. The engine behind 1. Eliminate redirections, and limit the number of HTTP requests 2. Use Offline Storage/App Cache 3. Use CSS3 or canvas element instead of images when possible 4. …
    39. 39. Optimize the speed
    40. 40. Smartphones features 1. Use geolocation 1. Location, and direction 2. Use smartphone camera or microphone 3. Use the RFID/NFC chip
    41. 41. resources
    42. 42. http  Luke W post: http://www.lukew.com/ff/entry.asp?933  Mobile First book: http://www.abookapart.com/products/mobile-first  Luke W presentation: http://vimeo.com/38187066  A list Apart: http://www.alistapart.com/  Tapworthy: http://shop.oreilly.com/product/0636920001133.do  Google PageSpeegd Insights: http://developers.google.com/speed/pagespeed/insights/
    43. 43. At the end, Mobile First is • thinking of the growth of mobile devices • minimizing the constraint • maximizing the capacities, and context of usage • Usually a better experience to the user • Not necessary an easy approach (at the beginning)
    44. 44. It’s also… • Mobile First <3 Responsive Web Design • Responsive Web Design != Mobile First • Content First is the key • It’s only the beginning…
    45. 45. Shameless plug Responsive Web Design tomorrow at 4:25 PM - room A
    46. 46. Keep in mind Mobile Experience = capacities – constraints + prioritization contexts
    47. 47. Evaluation & questions http://wpc13.cnf.io/sessions/6 1
    48. 48. Frédéric Harper fharper@mozilla.com @fharper http://hacks.mozilla.com http://outofcomfortzone.net

    ×