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