d'ailleurs, ce n'est pas un flim mais un coachnig
RWD&MF
Responsive Web Design & Mobile First
Introduction
Pourquoi autant d'intérêt pour le mobile ?
Introduction
Succès croissant du smartphone depuis 2008
- En France : près de 18 millions de smartphones vendus en 2014
- Dans le monde : 1,2 milliards d'utilisateurs de smartphones surfent sur le web
Introduction
Nombre de téléchargement des applications
Consultation des sites web via les appareils mobiles
Rechercher des informations / un service
n'importe où, n'importe quand
Tout en regardant une émission de télé
Introduction
Introduction
Ce n'est pas "une mode"
ce sont de nouveaux usages
Introduction
Accepter les contraintes liées à ces usages
et les intégrer à notre façon de concevoir
Parce que oui.
Le RWD (Responsive Web Design)
Une première réponse aux nouveaux usages
RWD
Définition
Responsive = adaptatif
Pages web s'adaptent à tous les écrans
Smartphones, " Phablettes", Tablettes, Ordinateurs, TV
S'adapter aux dimensions réduites et
Offrir une expérience utilisateur adéquate
berk.
RWD
Exemple
RWD
Et nous ?
WIP !
et ça va envoyer du pâté
(peut-être)
RWD
Comment ça marche ?
- Une grille
- Des contenus flexibles
- Des règles CSS
RWD
La grille et les média fluides
Design respectant des proportions (blocs, marges, etc.)
RWD
Les media-queries
Règles CSS
quels styles s'appliquent (ou non) en fonction de critères
largeur de l'écran, le pixel-ratio (écran rétina), etc.
RWD
Les media-queries
Exemple :
@media screen and (max-width: 800px) {
.bloc {
background-color: blue;
}
}Pour tous les écrans de largeur inférieure ou égale à 800px
les éléments ayant la classe bloc
auront un fond bleu
(Au delà de 800px, ce fond n'est pas défini. Par défaut il sera transparent.)
RWD
Les media-queries
Largeurs à partir desquelles la mise en page se modifie = breakpoints
- 320px (smartphone portrait)
- 480px (smartphone paysage)
- 768px (tablette portait)
- 1024px (tablette paysage)
et + (desktop)
RWD
Et chez nous ?
1. Styles desktop de la page
Pour chaque page du site
2. Styles pour téléphones et tablettes ( 0 ≤ "medium" ≤ 768px )
3. Styles spécifiques aux smartphones
(0 ≤ "small" ≤ 480px)
RWD
Et chez nous ?
RWD
C'est bien
Oui, MAIS
"Desktop First"
Beaucoup de styles "à usage unique"
Code plus difficile à maintenir sur le long terme
Besoin d'efficacité et de performance + important
Inconvénients côté Front-End :
RWD
C'est bien
Oui, MAIS
Inconvénients dans les autres domaines :
Ergonomie moyennement adaptée
Stratégie globale inadéquate
La cible utilisant le mobile ≠ celle qui utilise le produit sur ordinateur
Et si on mettait le mobile au premier plan ?
MF (Mobile First)
"Quoi que vous fassiez, occupez-vous d'abord des mobiles"
Eric Schmidt
MF
L'approche
Elle s'applique dans le développement
Mais aussi : phase de design, de conception
Mais aussi : stratégie marketing, communication, etc.
bref, tout le monde est concerné
MF
L'approche
"un oeil un pouce" (Mobile First, Luke Wroblewsky)
61%
Pourquoi ?
"Le deuxième écran"
MF
En parlant de pouce
Le savions-tu ?
MF
Le premier écran ?
Le seul écran ?
Sondage Nielsen aux US:
1consommateur sur 2 pense que
la consultation sur mobile est la plus importante dans leur decision d'achat
1/3 des acheteurs via mobile est Mobile-Only
MF
Accepter les contraintes et penser Mobile First c'est :
- réfléchir son projet pour les petits écrans
- garder une cohérence dans les fonctionnalités et contenus qu'on propose
- s'ouvrir à de nouvelles perspectives en termes d'ergo, de marketing, de com...
- connaître les objectifs de l'utilisateur qui se connecte depuis son mobile
- design qualitatif, aller à l'essentiel
320px = 30% de l'espace du desktop
MF
Aujourd'hui
La mobilité c'est accéder à une info ou un service n'importe où, n'importe quand
double ses ventes tous les 6 mois
a développé une app de porte-monnaie électronique : 15% des achats US
concurrencer Visa
concurrencer Paypal
MF
Demain
Le marché des objets connectés est en plein essor
centralise les données
contrôle les objets connectés
La technologie n'est plus seulement un outil mais un business
MF
Demain
Peut-être que là où nous allons, nous n'avons pas besoin du desktop
MF
Et Etsy l'a très bien compris
RWD&MF
Conclusion
RWD : accepter les contraintes et adapter nos pages
MF : connaître ses utilisateurs, aller à l'essentiel répondre à leurs objectifs
Le mobile est en train de remodeler toute l'expérience utilisateur
RWD ≠ MF mais RWD + MF =
L'approche MF concerne tout le monde
Vers un internet Mobile-Only ?
RWD&MF
We can do it
RWD&MF
Merci !
RWD&MF
Sources
Chiffres clés : les ventes de mobiles et de smartphones (zdnet)
Responsive Webdesign (wikipedia)
http://responsivewebdesign.com/robot/
Mobile First VS. Responsive Webdesign (iergo)
Mobile first, what does it mean? (ux-matters)
Pensez "Mobile First" ! (Les Echos)
30% users are Mobile Only (Marketing Land)
RWD&MF
Sources
Why Is The Starbucks Mobile Payments App So Successful? (Forbes)
Take a mobile first approach (teamtreehouse)
Chez BlablaCar tout est pensé Mobile First (larevuedudigital)
It's time for a Mobile-Only digital strategy (Advertising Age)
Responsive Webdesign (Ethan Marcotte) - à dispo
Mobile First (Luke Wroblewsky) - à dispo
RWD&MF
Pictures credit
La classe américaine - http://cyclim.se/projet/finition.html
Lara Hogan - https://twitter.com/lara_hogan/status/516660720378052608
Kiwiktag - http://fr.slideshare.net/kwiktag/must-have-vs-nice-to-have-v2
Stéphanie Walter - http://www.inpixelitrust.fr/blog/illustration-content-is-like-water-et-traduction-responsive-webdesign-present-et-futur-de-ladaptation-mobile/
Troll face - http://knowyourmeme.com/memes/trollface-coolface-problem
960 grid system - http://960.gs/demo.html
Grille responsive, MMcreation - http://blog.mmcreation.com/2013/04/17/responsive-web-design/
Point Break Poster (photoshopped), Pixgood - http://pixgood.com/point-break-movie-poster.html
Point Break scene, Print the Legend - https://printthelegend.wordpress.com/2011/07/27/one-of-the-boys-the-cinema-of-kathryn-bigelow/
RWD&MF
Pictures credit
Luke Wroblewsky - https://twitter.com/lukew/status/577902251932393472
Uber - https://s3.amazonaws.com/uber-static/web-fresh/about/uberpresskit.zip
Twitter Emojis - https://github.com/twitter/twemoji
Starbucks - http://en.wikipedia.org/wiki/File:Starbucks_Corporation_Logo_2011.svg
BTTF scene - http://www.reddit.com/r/RWBY/comments/2k5bky/mystery_woman_discussion_thread/
Etsy screenshot - https://www.etsy.com/fr/reader?ref=ftr
Nokia 3310 - http://www.gigactu.fr/telephonie-lekki-recommercialise-le-nokia-3310-a107269700