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

Frédéric Harper

fharper@mozilla.com@fharper

http://hacks.mozilla.comhttp://outofcomfortzone.net