Morning Session du Groupe FullSIX - Responsive Web Design by Loïc Calvy (CTO Ekino)

1. RWD

2. 2
1. Constat : La grande fragmentation
2. Comment s’armer face à tous ses écrans
3. Un projet responsive
4. Les enjeux techniques du responsive
5. Conclusion

3. 3
Ethan Marcotte
lance le terme de
Responsive Web Design
en mai 2010 dans un article de
A List Appart

4. 4
1. Constat : La grande
fragmentation

5. 5
Le Web est mort
Le Digital est partout

6. Le “phablet”, même Apple y a succombé!

7. Des écrans encore plus grands!

8. Et d’autres plus petits….

9. Des …. différents

10. Des écrans partout, tout le temps

11. Des écrans partout, tout le temps

12. 12
Un trafic mondial du smartphone
qui Triple
Q1 2012
8,67%
Q1 2013
14,3%
Q1 2014
24,16%
31,5%
30%
25%
20%
15%
10%
5%
0%
2011-1 2012-1 2013-1 2014-1 2011 2012 2013 2014

13. 13
La majorité des navigateurs
supportent HTML5
90
80
70
60
50
40
30
20
10
0
Très bon support Bon support Pas ou peu de support Autre / Non déterminé
2011-1 2011-2 2011-3 2011-4 2012-1 2012-2 2012-3 2012-4 2013-1 2013-2 2013-3 2013-4 2014-1

14. 14
Une chose est sûr.
Ceci est un parcours frustrant, l’utilisateur ne l’a pas choisit

15. 15
Les contextes de navigation
évoluent au fil de la journée.
Les constructeurs offrent la récupération de la navigation
Un type de parcours qui augmente chaque jour.

16. 16
PENSER à l’usage, à l’utilisateur
La première chose que vous devez faire
est d’oublier les buzzwords et autre jargon
et vous concentrer sur les besoins réels
de votre entreprise.
Christina Warren
“
http://mashable.com/2013/08/06/responsive-vs-native-app/

17. 17
2. Quelles sont nos
armes?

18. 18
Une diversification des supports :
Un nombre de support à traiter très important
(tablettes / desktop / smartphones, phablets,…)
De plus en plus de résolutions à traiter.
Une fragmentation des devices Android non
maitrisée.
≠
Monde
opensignalmap
• La fragmentation peut aussi être
liée au contexte d’utilisation :
• Ex : Un mobile en WiFi n’offre pas le même
contexte qu’un ordinateur en 3G avec faible
réception.

19. 19
Changer notre mode de
support
On ne doit plus concevoir en fonction des
navigateurs … mais en fonction des formats
d’écran.
DU
SUPPORT
NAVIGATEUR
AU
SUPPORT
FORMAT

20. 20
Un pattern de conception
éprouvé
Design fluide
Le RESPONSIVE WEB DESIGN
Un fonctionnement par paliers de tailles d’écrans RWD RWD
Taille de texte adaptée
Réorganisation du layout
{

21. 21
A chaque écran, ses
spécifications

22. 22
Pour anticiper l’avenir, il faut respecter les
standards
• Les fonctionnalités des nouveaux navigateurs
seront simulées sur les plus anciens:
• Flash pour balise Vidéo,
• Javascript pour les animations,
• Des subtilités graphiques ou animations ne
seront pas présentes:
• coins arrondis,
• motion,
• text-shadows,
Une expérience optimale pour les derniers
navigateurs et les mobiles performants
Une expérience fonctionnelle pour les autres
Un fonctionnement par paliers de fonctionnalités
Standards

23. 23
Il s’agit donc de définir deux niveaux de paliers :
Les paliers sont liés à la technicité du sujet:
• Beaucoup de métier – applicatif
• Beaucoup d’animations
• Institutionnel
• Etc…
Un support par paliers
TAILLES D’ÉCRANS FONCTIONNALITÉS

24. Définir des paliers peut servir le parcours
24

25. 25
3. Un projet responsive

26. 26
Des paliers responsives
SMALL MEDIUM LARGE X-LARGE

27. 27
Le responsive
implique d’oublier le
cycle en V
De nouvelles “best
practices” projet
Le prototype est
indispensable
L’utilisateur est au
centre de la
conception

28. 28
Le prototype
C’est le seul moyen d’adapter les
comportements sur chacun des
terminaux en observant
l’expérience qui leur est propre

29. 29
Définir le palier minimum et le palier
Les techniques de design maximum
évoluent
Créer des éléments plus que des mises
en pages
D’un design statique à une maquette
HTML vivante

30. 30
De nouveaux outils
créatifs …
… en opposition avec le pixel perfect.
Adobe Edge Reflow

31. 31
Un nouveau Processus de validation
Processus
itératif
BRIEF
PSD fluide
Proto
HTML
Croquis

32. 32
Un nouveau Processus de validation
Processus
itératif
Concept
Créa
PSD fluide
Proto
HTML
Croquis

33. 33
http://loic/prototype_fspp
Le prototype, pierre angulaire
http://renault-fspp.dev.ekino.com/
planProduit.html
http://www.renault.fr/gamme-renault/vehicules-particuliers/
clio/clio-berline/

34. 34
Une phase de conception décisive
Des workshops au
plus près du client pour :
Comprendre le besoin
Comprendre les enjeux métier
Pérenniser la réflexion
Anticiper au mieux les innovations
Définir les contextes d’utilisation
Prioriser les éléments à afficher
Déterminer quel « layout » adopter
Client

35. 35
Une méthodologie agile
Les enjeux du RWD
impliquent un
fonctionnement agile
Tout au long de la phase de conception et de
développement, il faut faire des itérations pour
assurer :
Une bonne expérience utilisateur
Un support optimal des terminaux à la
sortie du site

36. 36
Une équipe d’experts
Une équipe modulaire,
dédiée, aux
expériences multiples
et travaillant de façon
collaborative
Le consultant UX, au
centre, est garant de la
cohésion de l’équipe et
du fonctionnel
Développeurs :
Front / Back
Chef de projet
Experts :
Front / Back /Mobile -
AX
PRODUCT
OWNER
Créatif
Consultant UX

37. 37
La contribution
Les outils de contribution, CMS, doivent s’adapter au
responsive web design :
Ces outils doivent permettre
D’adresser des visuels adaptés à chacun des écrans
De les redimensionner
De gérer les vidéos provenant de plateformes externes
De gérer les différences fonctionnelles
D’adapter le contenu
De visualiser sur les différents formats

38. 38
Les enjeux
TECHNIQUES

39. 39
Un grand SITE sur un tout petit mobile

40. 40
La PERFORMANCE au coeur de
l’expérience
Les utilisateurs s’attendent un temps de chargement de 2
secondes.
Au-delà de 3s, 40% vont abandonner votre site.
Gomez.com
“

41. 41
Les 3 piliers de la WebPerf
Réseau Affichage Exécution

42. 42
Optimiser Le Réseau
Diminuer les temps de réponse :
Le bon média pour chaque device
Concaténation et minification des ressources locales
Bonne gestion du cache navigateur
Utiliser les nouveautés HTML5 si possible
Cache manifest
Service Worker

43. 43
LES médias, un enjeu majeur
Il faut adresser la bonne image pour chaque écran.
Solution historique : utiliser le user-agent ?
La liste de user-agents ou la base de donnée sera-t-elle toujours à jour ?
Pouvons-nous être sûrs que un device = une taille d’écran ?
• Seul le navigateur connaît sa résolution au moment de
son usage

44. 44
LES IMAGES, LE VRAI CHALLENGE
DU FLUIDE
RÉSOLUTION ECRAN
QUALITÉ DE
L’IMAGE
BANDE
PASSANTE
Netbook
en wifi
Galaxy Note 2
en 4g
Iphone 5
en edge
Windows surface
en 3g
Télévision 4k
en bas débit
Laptop
en fibre

45. 45
Les images, le vrai challenge du fluide
RÉSOLUTION ECRAN
BANDE
PASSANTE
QUALITÉ DE
L’IMAGE
Galaxy Note 2
en 4g
Netbook
en wifi
Iphone 5
en edge
Windows surface
en 3g
Télévision 4k
en bas débit
Laptop
en fibre
• Résolutions d’écrans &
capacité réseau
ne sont désormais plus liés

46. 46
Les points d’action
LE
CHARGEMENT
LA
BONNE IMAGE
PAR DEVICE
Mise en place d’un polyfill
de détection de bande passante
Utilisation native de l’api
W3C network information dès que possible
Participation à la réflexion W3C sur l’implémentation de la balise picture et
d’autres solutions
Support du RETINA par le pattern 2x

47. 47
Sélection de la bonne image
Le w3c et ses participants sont enfin d’accord sur un format HTML
PICTURE
ELEMENT SRC SET SIZES

48. 48
Les vidéos
L’utilisation de la balise HTML5 vidéo induit un nombre conséquent de types de sources.
Navigateur / Device Formats Vidéo Encodage Audio
Chrome MP4*, WebM AAC, MP3, Vorbis
Firefox MP4, WebM AAC, MP3, Vorbis
Internet Explorer 9+ MP4 AAC, MP3
Safari MP4 AAC, MP3
iOS MP4 AAC, MP3
Android MP4 AAC, MP3
Opéra WebM Vorbis
* Chrome a annoncé qu’ils allait arrêter
le support du MP4 mais ne l’ont jamais fait

49. 49
Les vidéos
DES PLATEFORMES
existent et adressent déjà les différents écrans.
C’est à ces plateformes d’adresser les problématiques de mobilité liées aux différences
de formats et à la bande passante

50. 50
Optimiser l’affichage
Il faut charger ce que l’utilisateur voit
Un chargement des médias « on demand »
La prise en compte des spécificités de chaque support
accélération 3D
animations en CSS3 / Javascript ou SVG selon le cas

51. 51
Viewport
On affiche uniquement les images qui
apparaissent à l’écran
Un chargement sur
mesure
Sous le Viewport
Les images et les fonctionnalités ne sont pas
chargées
Le lazyloading
Va chercher les élements quand on en a besoin

52. 52
Maîtriser les zones à accélérer
Zone accélérée GPU
Il ne faut accélérer
que les zones qui
ont besoin d’être
animées.

53. 53
Eviter les REFLOW

54. 54
Prendre en compte les contraintes
d’éxecution
Il faut adapter les fonctionnalités au contexte d’utilisation
Il faut récupérer les bonnes pratiques des langages back au JS

55. Un tunnel d’achat sur smartphone ne doit pas avoir les mêmes champs et les
mêmes étapes que sur ordinateur à part si l’utilisateur l’a choisit
55
Il s’agit donc d’adapter le parcours au support
RESS / RESPONSIVE &
SERVER-SIDE COMPONENTS
DES PARCOURS
Adaptés
Les medias-queries et
matchmedia
permettent de
distinguer les tailles
d’écrans, pas les
supports.

56. 56
RESS : FONCTIONNEMENT
Une galerie média en layer La galerie sur mobile est dans une
nouvelle page

57. 57
RESS : FONCTIONNEMENT
SERVEUR
DÉTECTION UA
page.html
composant_support2.html

58. 58
Un petit mot sur le seo
Que pense Google
du responsive web design ?
https://developers.google.com/webmasters/smartphone-sites/

59. 59
Le seo reste un enjeux majeur pour
les webapp
Dans le cadre d’une application web, le contenu peut être généré en
AJAX.
Le SEO redevient donc un problème.

60. 60
Mettre en place une couverture de tests
unitaires côté JS/CSS La RECETTE côté DEV
Automatiser pour éviter
les régressions
Mettre des tests de navigation
Automatiser les tests de rendu multi-device

61. Banc de test Ghostlab

62. 62
CONCLUSION

63. 63
Le RWD n’est pas une finalité

64. 64
Nouvelle
méthodologie de
production
Expérience utilisateur Future Proof

65. 65
Questions ?

66. 66
Et c’est quoi l’Adaptive Web Design?
Adapter le site aux capacités du navigateur.

67. 67
Ca coûte combien ?
Si vous ne changez pas grand chose à vos habitudes, ca va vous coûter très cher
L’agence créa va refaire ses maquettes 10 fois
L’intégrateur prendra du retard en attendant les maquettes
« faire et défaire, c’est toujours travailler », « tout travail mérite salaire »
Si vous changez vos habitudes, que vous utilisez une méthodologie adaptée
Une phase de conception différente (ateliers, proto)
Entre + 20 et +30% vs un site desktop d’il y a 2 ans
…finalement pas tant que ca puisque à la fin on a un site mobile, tablette, desktop et « future-proof
»
Si votre besoin « rentre » dans une solution du marché, beaucoup moins cher
site éditorial avec un thème bootstrap / wordpress

68. 68
Un site responsive ou Dédié?
RESPONSIVE
WEB DESIGN
Le contenu est fluide et réagit
pour s’adapter à n’importe quelle
taille d’écran et type de format.

69. 69
Un site responsive ou Dédié?
SITE
DÉDIÉ
Le contenu va être modifié selon
des formats et types d’écrans
prédéfinis.

70. 70
Cost–Benefit Analysis :
The benefits of platform-optimized user interfaces are clear :
• Usability is increased.
• Users are more likely to accomplish their goals.
• Conversion rates increase.
• You make more money.
But, of course, optimization is more costly than repurposing. So, the real question is
whether this cost is bigger or smaller than the additional money you make from
increased usability.
Nielsen
Un site responsive ou Dédié?

71. 71
Un site responsive ou Dédié?
Un site lourd présentant un fonctionnel très riche ne devrait pas se retrouver tel quel sur mobile :
Facebook
Gmail
Flickr
Youtube
Un site dont le contenu doit être adapté au support ne se prête pas au RWD
Ligne éditoriale spécifique au mobile

72. 72
Du Fluide pour le SMARTPHONE
Ne pas faire de responsive
ne signifie pas pour autant
un layout fixe.
Un site mobile doit être adapté à tous les
mobiles et orientations et utilisera donc certains
aspects du package « responsive » ≠

73. 73
Ekino
157, rue Anatole France
92300 Levallois-Perret
@3k1n0
@NewsDuFront
www.ekino.com