RWD&MF

Responsive Web Design & Mobile First

Introduction

Why all this fuss about mobile?

Introduction

Growth of the smartphones market since 2008

- In France: about 18 millions of smartphones sold in 2014

-Worldwide: 1,2 billions of smartphones users browse the internet

Introduction

The number of app downloads

Websites browsing with mobiles

Informations / services

anywhere, anytime

While watching TV

Introduction

Introduction

This is not "a trend"

those are new usages

Introduction

Accept constraints coming from these new behaviors

and adopt them in our conception processes

Because why not?

RWD
(Responsive Web Design)

A first answer to those usages

RWD

Meaning

Responsive = adaptative

Make webpages adapt to any screen size

Smartphones, Tablets, Computers, TVs

Espacially adapt to small dimensions and

Give a suitable user experience

RWD

Example

RWD

What about us?

RWD

How does it work?

- a grid

- flexible contents

- CSS rules (yeah, it does)

RWD

A grid & fluid media

The design respects proportions (blocks, margins, gutters,  etc.)

RWD

Media-queries

CSS rules

which styles are applied (or aren't) regarding criteria you have to define

screen width, pixel-ratio (retina screens), etc.

RWD

Media-queries

Example :

@media screen and (max-width: 800px) {

  .bloc {

    background-color: blue;

  }

}

For every screens smaller than or equal to 800px

every element with the class bloc

will have a blue background

(Beyond 800px, no background was defined. By default it'll be transparent.)

RWD

Media-queries

Width values based on which the layout is modified = breakpoints

- 320px (smartphone  - portrait)

- 480px (smartphone - landscape)

- 768px (tablet - portait)

- 1024px (tablet - landscape)

and + (desktop, TV...)

RWD

What about AlittleMarket? 

1. Desktop styles

For every webpage

2. Styles for smartphones & tablets ( 0 ≤ "medium" ≤ 768px )

3. Styles specific to smartphones

(0 ≤ "small" ≤ 480px)

RWD

What about AlittleMarket? 

RWD

Cool

Yes, BUT

"Desktop First"

All lot of "single use" styles

Code harder to maintain in the long run

The need for efficiency and performance is more important

Drawbacks Front-End wise :

 

RWD

Cool

Yes, BUT

Drawbacks in other domains :

 

The UX is kind of adapted

The global strategy is inadequate

The target using mobile  the target using a desktop

What if we decided to go mobile first?

MF (Mobile First)

"Whatever you're doing, do mobile first."

Eric Schmidt

MF

The approach

Engineering wise

But also: during the design & the conception processes

But also: marketing stragegy, communication, etc. 

 

In short, everybody is involved

MF

The approach

"one thumb, one eyeball" (Mobile First, Luke Wroblewsky)

61% are surfing the web

while watching TV

Why?

"The second screen"

MF

Speakinf of thumb

Did you know?

MF

The first screen?

The only screen?

Nielsen survey in the US:

 

1 buyer over 2 think that

browsing on a mobile is the most important phase in their buying process

1 over 3 users who make purchases on mobile are Mobile-Only buyers

MF

Accepting constraints & thinking Mobile First:

- conceive your project for small screens

- make sure to be consistent with the features and contents you offer

- open to new perspectives in terms of UX,  marketing, PR...

- know your mobile users goals

 - efficient design, get to the point

320px = 30% of the desktop space 

MF

Today

Mobility is giving access to information or to a service anywhere, anytime

 double their sales every 6 months

developed a mobile payment app: 15% of the US purchases

compete with Visa

compete with Paypal

MF

Tomorrow

The connected objects market is growing

and mobile are there to

consolidate data

control connected objects

Technology is not just a tool anymore, it's a business

MF

Tomorrow

Maybe where we're going, we won't need desktops

MF

and Etsy understood it correctly

RWD&MF

Conclusion

RWD: accept les constraints & adapt our pages

MF: kown our users, know their goals, get to the point

Mobile is reshaping the whole User Experience

RWD ≠ MF       but      RWD + MF = 

The MF approach involves everybody

To a Mobile-Only internet browsing?

RWD&MF

We can do it

RWD&MF

Thank you!

RWD&MF

Sources

RWD&MF

Sources

RWD&MF

Pictures credit

RWD&MF

Pictures credit