Mobile First is an approach where the mobile experience is prioritized during website development. It involves designing for touch interfaces, limiting content to the essential, and optimizing sites for mobile constraints like connection speeds. Adopting a Mobile First approach forces developers to focus on usability and ensures the content is accessible regardless of device. As mobile usage surpasses desktop, it is important to think of growth in mobility and design interfaces for all devices with touch in mind.

1. Mobile First
Frédéric Harper
Senior Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
2013-09-17

2. Questions
http://wpc13.cnf.io/sessions/6
1

3. Theproblem

4. Before

5. Today’s web

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. the anti experience

10. Thesolution

11. Onesolution

12. Mobile first
Luke Wroblewski blogued about it on November 3rd 2009

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

14. The experience

19. why

20. the growth

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

22. In perspective
Source: http://lukew.com/

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

24. Don’t we all use native app?
112% of augmentation on
mobile browser usage
(251 million) in January 2010
Source: http://www.lukew.com/

25. the constraints

33. the context

34. the mobility isn’t just about mobile
Too often taken as inconvenient, take advantage of those!

36. the smartphones features

37. the smartphones features
• Detection of location (geolocation) - GPS
• Smartphone orientation – Accelerometer
• Touch screens
• NFC (Near Field Communications)
• …

38. the opportunities

39. HTML5 frameworks

40. HTML5 apps

41. the advantages

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

43. the reality
Source: http://xkcd.com/773/

44. the disadvantages

45. the disadvantages
• Changing your way of building your website or app
• You really need to know the needs of your customers

46. Howto

47. Redefining the experience

48. UI
 NUI – Natural User Interface
 Touch
 Region easier or hard to reach
 Limit to the essential

49. Touch
 Recommended = 9mm/34px
 Minimum = 7mm/26px
 Minimum spacing= 2mm/8px
Source: Windows Phone UI Design and Interaction Guide v2.0

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

51. Every UI should be designed for touch!
- Frédéric Harper, Web & PHP Conference, 2013-09-17

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

53. Optimize the speed

54. Smartphones features
1. Use geolocation
1. Location, and direction
2. Use smartphone camera or
microphone
3. Use the RFID/NFC chip

55. resources

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

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

64. It’s also…
• Mobile First <3 Responsive Web Design
• Responsive Web Design != Mobile First
• Content First is the key
• It’s only the beginning…

65. Shameless plug
Responsive Web Design
tomorrow at 4:25 PM - room A

66. Keep in mind
Mobile Experience = capacities – constraints + prioritization
contexts

67. Evaluation & questions
http://wpc13.cnf.io/sessions/6
1

68. Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net