View
889
Download
0
Embed Size (px)
DESCRIPTION
Citation preview
Mobile FirstFrédéric Harper
Senior Technical Evangelist @ Mozilla
@fharper | outofcomfortzone.net
201
3-0
9-1
7
Questions
http://wpc13.cnf.io/sessions/61
The
problem
Before
Today’s web
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
the anti experience
The
solution
One
solution
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 Woblewski, Mobile First, A Book Apart
The experience
why
the growth
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-infographichttp://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/
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://www.lukew.com/
Don’t we all use native app?
112% of augmentation on
mobile browser usage
(251 million) in January 2010
Source: http://www.lukew.com/
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 screens
• NFC (Near Field Communications)
• …
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/container
• Give us the opportunity to create better [mobile] Web experience
• Give us the opportunity to create innovative experiences
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 Interaction Guide v2.0
…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
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 CSS3 or canvas element instead of images when possible
4. …
= optimize, optimize, optimize…
Optimize the speed
Smartphones features
1. Use geolocation
1. Location, and direction
2. Use smartphone camera or
microphone
3. Use the RFID/NFC chip
resources
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/
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)
It’s also…
• Mobile First <3 Responsive Web Design
• Responsive Web Design != Mobile First
• Content First is the key
• It’s only the beginning…
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/61