SlideShare une entreprise Scribd logo
1  sur  73
RWD
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 
Ethan Marcotte 
lance le terme de 
Responsive Web Design 
en mai 2010 dans un article de 
A List Appart
4 
1. Constat : La grande 
fragmentation
5 
Le Web est mort 
Le Digital est partout
Le “phablet”, même Apple y a succombé!
Des écrans encore plus grands!
Et d’autres plus petits….
Des …. différents
Des écrans partout, tout le temps
Des écrans partout, tout le temps
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 
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 
Une chose est sûr. 
Ceci est un parcours frustrant, l’utilisateur ne l’a pas choisit
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 
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 
2. Quelles sont nos 
armes?
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 
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 
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 
A chaque écran, ses 
spécifications
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 
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
Définir des paliers peut servir le parcours 
24
25 
3. Un projet responsive
26 
Des paliers responsives 
SMALL MEDIUM LARGE X-LARGE
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 
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 
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 
De nouveaux outils 
créatifs … 
… en opposition avec le pixel perfect. 
Adobe Edge Reflow
31 
Un nouveau Processus de validation 
Processus 
itératif 
BRIEF 
PSD fluide 
Proto 
HTML 
Croquis
32 
Un nouveau Processus de validation 
Processus 
itératif 
Concept 
Créa 
PSD fluide 
Proto 
HTML 
Croquis
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 
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 
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 
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 
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 
Les enjeux 
TECHNIQUES
39 
Un grand SITE sur un tout petit mobile
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 
Les 3 piliers de la WebPerf 
Réseau Affichage Exécution
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 
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 
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 
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 
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 
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 
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 
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 
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 
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 
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 
Eviter les REFLOW
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
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 
RESS : FONCTIONNEMENT 
Une galerie média en layer La galerie sur mobile est dans une 
nouvelle page
57 
RESS : FONCTIONNEMENT 
SERVEUR 
DÉTECTION UA 
page.html 
composant_support2.html
58 
Un petit mot sur le seo 
Que pense Google 
du responsive web design ? 
https://developers.google.com/webmasters/smartphone-sites/
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 
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
Banc de test Ghostlab
62 
CONCLUSION
63 
Le RWD n’est pas une finalité
64 
Nouvelle 
méthodologie de 
production 
Expérience utilisateur Future Proof
65 
Questions ?
66 
Et c’est quoi l’Adaptive Web Design? 
Adapter le site aux capacités du navigateur.
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 
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 
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 
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 
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 
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 
Ekino 
157, rue Anatole France 
92300 Levallois-Perret 
@3k1n0 
@NewsDuFront 
www.ekino.com

Contenu connexe

Tendances

Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
La Gestion de Projet Mobile
La Gestion de Projet MobileLa Gestion de Projet Mobile
La Gestion de Projet MobileSebastien Brison
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenVanksen
 
Information google apps
Information google appsInformation google apps
Information google appsinovallee
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobileEutech SSII
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015Vincent Pereira
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVUSERADGENTS
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
 
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...Peak Ace
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesMehdi Kabab
 
Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)Olivier Robé
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesigntakaclike
 
Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Anaïs Vivion
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform MobileGabriel DUPONT
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirBrioude Internet
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?Philippe Dumont
 
Applications mobiles - quels choix ?
Applications mobiles  - quels choix ?Applications mobiles  - quels choix ?
Applications mobiles - quels choix ?odemarez
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...maclic
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaMicrosoft
 

Tendances (20)

Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
La Gestion de Projet Mobile
La Gestion de Projet MobileLa Gestion de Projet Mobile
La Gestion de Projet Mobile
 
Les 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by VanksenLes 10 Tendances Webdesign de 2014 by Vanksen
Les 10 Tendances Webdesign de 2014 by Vanksen
 
Information google apps
Information google appsInformation google apps
Information google apps
 
Les secrets du développement d'une application mobile
Les secrets du développement d'une application mobileLes secrets du développement d'une application mobile
Les secrets du développement d'une application mobile
 
Les tendances des site web en 2015
Les tendances des site web en 2015Les tendances des site web en 2015
Les tendances des site web en 2015
 
MobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TVMobiliteaTime #4 : Guide Pratique Apple TV
MobiliteaTime #4 : Guide Pratique Apple TV
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
SMX 2016 | Parcours d'achats : Quelle place accorder au mobile pour booster v...
 
Responsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégiesResponsive web design, enjeux et stratégies
Responsive web design, enjeux et stratégies
 
Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)Réussir son projet mobile (Livre blanc)
Réussir son projet mobile (Livre blanc)
 
Présentation Métier / Responsable Webdesign
Présentation Métier / Responsable WebdesignPrésentation Métier / Responsable Webdesign
Présentation Métier / Responsable Webdesign
 
Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?
 
Framework XPlatform Mobile
Framework XPlatform MobileFramework XPlatform Mobile
Framework XPlatform Mobile
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
 
HTML 5, applications natives ou hybrides : comment choisir ?
HTML 5, applications natives ou hybrides :  comment choisir ?HTML 5, applications natives ou hybrides :  comment choisir ?
HTML 5, applications natives ou hybrides : comment choisir ?
 
Applications mobiles - quels choix ?
Applications mobiles  - quels choix ?Applications mobiles  - quels choix ?
Applications mobiles - quels choix ?
 
SQLI - Club des DSI - Mobilité
SQLI - Club des DSI - MobilitéSQLI - Club des DSI - Mobilité
SQLI - Club des DSI - Mobilité
 
Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...Veille : L'impact de l'évolution des technologies web sur le référencement et...
Veille : L'impact de l'évolution des technologies web sur le référencement et...
 
Developpement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache CordovaDeveloppement mobile hybride avec Visual Studio, Apache Cordova
Developpement mobile hybride avec Visual Studio, Apache Cordova
 

Similaire à Responsive web design new14

Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5davrous
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionL_Demontiers
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3Talan
 
Brainsonic sur Windows Azure
Brainsonic sur Windows AzureBrainsonic sur Windows Azure
Brainsonic sur Windows AzureMicrosoft Ideas
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesTristan Nitot
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketmichael_bailly
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8Microsoft
 
Guide_de_survie_en_milieu_responsive
Guide_de_survie_en_milieu_responsiveGuide_de_survie_en_milieu_responsive
Guide_de_survie_en_milieu_responsiveNicolas Massouh
 
Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guillaume Abel
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoL’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoTP1
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)SCALA
 

Similaire à Responsive web design new14 (20)

Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Plasticité2015 technovf
Plasticité2015 technovfPlasticité2015 technovf
Plasticité2015 technovf
 
Responsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de productionResponsive Design : impact sur les processus de production
Responsive Design : impact sur les processus de production
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
2012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo32012 cyril-wolfangel-responsive design-typo3
2012 cyril-wolfangel-responsive design-typo3
 
Brainsonic sur Windows Azure
Brainsonic sur Windows AzureBrainsonic sur Windows Azure
Brainsonic sur Windows Azure
 
Brainsonic sur Windows Azure
Brainsonic sur Windows AzureBrainsonic sur Windows Azure
Brainsonic sur Windows Azure
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Guide_de_survie_en_milieu_responsive
Guide_de_survie_en_milieu_responsiveGuide_de_survie_en_milieu_responsive
Guide_de_survie_en_milieu_responsive
 
Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013Guide de survie en milieu responsive - Paris Web 2013
Guide de survie en milieu responsive - Paris Web 2013
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.infoL’expérience utilisateur, 
plus importante que jamais: le cas STM.info
L’expérience utilisateur, 
plus importante que jamais: le cas STM.info
 
Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)Les solutions mobiles (potentiel et enjeux)
Les solutions mobiles (potentiel et enjeux)
 

Plus de FullSIX Group

Observatoire du ROPO² – VAGUE 4 2015 - Fullsix Data
Observatoire du ROPO² – VAGUE 4 2015 - Fullsix DataObservatoire du ROPO² – VAGUE 4 2015 - Fullsix Data
Observatoire du ROPO² – VAGUE 4 2015 - Fullsix DataFullSIX Group
 
Infographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA Research
Infographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA ResearchInfographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA Research
Infographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA ResearchFullSIX Group
 
Observatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA Research
Observatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA ResearchObservatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA Research
Observatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA ResearchFullSIX Group
 
Offre PARIS SHOPPER - Fullsix Retail / Havas Paris
Offre PARIS SHOPPER - Fullsix Retail / Havas ParisOffre PARIS SHOPPER - Fullsix Retail / Havas Paris
Offre PARIS SHOPPER - Fullsix Retail / Havas ParisFullSIX Group
 
Fullsix Data - Performance digitale et Analytics - Book 2016
Fullsix Data  - Performance digitale et Analytics - Book 2016Fullsix Data  - Performance digitale et Analytics - Book 2016
Fullsix Data - Performance digitale et Analytics - Book 2016FullSIX Group
 
Fullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly score
Fullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly scoreFullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly score
Fullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly scoreFullSIX Group
 
Fullsix Mobile Day 30/06/15 – Air Pulse
Fullsix Mobile Day 30/06/15 – Air PulseFullsix Mobile Day 30/06/15 – Air Pulse
Fullsix Mobile Day 30/06/15 – Air PulseFullSIX Group
 
Trendwatch Luxe #3 "le Mythe et l'énergie" By Fullsix
Trendwatch Luxe #3 "le Mythe et l'énergie" By FullsixTrendwatch Luxe #3 "le Mythe et l'énergie" By Fullsix
Trendwatch Luxe #3 "le Mythe et l'énergie" By FullsixFullSIX Group
 
Air France 80 Ans - Site événementiel
Air France 80 Ans - Site événementielAir France 80 Ans - Site événementiel
Air France 80 Ans - Site événementielFullSIX Group
 
Cas FullSIX - SFR Business Team_ Livre blanc Social
Cas FullSIX - SFR Business Team_ Livre blanc SocialCas FullSIX - SFR Business Team_ Livre blanc Social
Cas FullSIX - SFR Business Team_ Livre blanc SocialFullSIX Group
 
Cas Métro - by 6:AM
Cas Métro - by 6:AMCas Métro - by 6:AM
Cas Métro - by 6:AMFullSIX Group
 
The TrendWatch Luxe #2 / FR par FullSIX France
The TrendWatch Luxe #2  / FR  par FullSIX FranceThe TrendWatch Luxe #2  / FR  par FullSIX France
The TrendWatch Luxe #2 / FR par FullSIX FranceFullSIX Group
 
FullSIX Group : Who We are ? 04/13
FullSIX Group : Who We are ? 04/13FullSIX Group : Who We are ? 04/13
FullSIX Group : Who We are ? 04/13FullSIX Group
 
Groupe FullSIX : Qui sommes nous ? 04/13
Groupe FullSIX : Qui sommes nous ? 04/13Groupe FullSIX : Qui sommes nous ? 04/13
Groupe FullSIX : Qui sommes nous ? 04/13FullSIX Group
 
Isa et e isa extrait site fullsix retail
Isa et e isa extrait site fullsix retailIsa et e isa extrait site fullsix retail
Isa et e isa extrait site fullsix retailFullSIX Group
 
Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...
Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...
Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...FullSIX Group
 
Face to Facebook #1 FullSIX GROUPE Janv 2010
Face to Facebook #1 FullSIX GROUPE Janv 2010Face to Facebook #1 FullSIX GROUPE Janv 2010
Face to Facebook #1 FullSIX GROUPE Janv 2010FullSIX Group
 
Do you speak facebook FullSIX Groupe oct 2010
Do you speak facebook FullSIX Groupe oct 2010Do you speak facebook FullSIX Groupe oct 2010
Do you speak facebook FullSIX Groupe oct 2010FullSIX Group
 

Plus de FullSIX Group (20)

Observatoire du ROPO² – VAGUE 4 2015 - Fullsix Data
Observatoire du ROPO² – VAGUE 4 2015 - Fullsix DataObservatoire du ROPO² – VAGUE 4 2015 - Fullsix Data
Observatoire du ROPO² – VAGUE 4 2015 - Fullsix Data
 
Infographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA Research
Infographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA ResearchInfographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA Research
Infographie 5ème vague de l'Observatoire du Ropo² - Fullsix Data / CSA Research
 
Observatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA Research
Observatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA ResearchObservatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA Research
Observatoire du ROPO² - VAGUE 5 2016 - Fullsix Data / CSA Research
 
Offre PARIS SHOPPER - Fullsix Retail / Havas Paris
Offre PARIS SHOPPER - Fullsix Retail / Havas ParisOffre PARIS SHOPPER - Fullsix Retail / Havas Paris
Offre PARIS SHOPPER - Fullsix Retail / Havas Paris
 
Fullsix Data - Performance digitale et Analytics - Book 2016
Fullsix Data  - Performance digitale et Analytics - Book 2016Fullsix Data  - Performance digitale et Analytics - Book 2016
Fullsix Data - Performance digitale et Analytics - Book 2016
 
Fullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly score
Fullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly scoreFullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly score
Fullsix Mobile Day 30/06/15 – Site responsive et Google mobile friendly score
 
Fullsix Mobile Day 30/06/15 – Air Pulse
Fullsix Mobile Day 30/06/15 – Air PulseFullsix Mobile Day 30/06/15 – Air Pulse
Fullsix Mobile Day 30/06/15 – Air Pulse
 
Trendwatch Luxe #3 "le Mythe et l'énergie" By Fullsix
Trendwatch Luxe #3 "le Mythe et l'énergie" By FullsixTrendwatch Luxe #3 "le Mythe et l'énergie" By Fullsix
Trendwatch Luxe #3 "le Mythe et l'énergie" By Fullsix
 
Air France 80 Ans - Site événementiel
Air France 80 Ans - Site événementielAir France 80 Ans - Site événementiel
Air France 80 Ans - Site événementiel
 
Cas 6:AM - TATI @TV
Cas 6:AM - TATI @TVCas 6:AM - TATI @TV
Cas 6:AM - TATI @TV
 
Cas FullSIX - SFR Business Team_ Livre blanc Social
Cas FullSIX - SFR Business Team_ Livre blanc SocialCas FullSIX - SFR Business Team_ Livre blanc Social
Cas FullSIX - SFR Business Team_ Livre blanc Social
 
Cas Métro - by 6:AM
Cas Métro - by 6:AMCas Métro - by 6:AM
Cas Métro - by 6:AM
 
The TrendWatch Luxe #2 / FR par FullSIX France
The TrendWatch Luxe #2  / FR  par FullSIX FranceThe TrendWatch Luxe #2  / FR  par FullSIX France
The TrendWatch Luxe #2 / FR par FullSIX France
 
FullSIX Group : Who We are ? 04/13
FullSIX Group : Who We are ? 04/13FullSIX Group : Who We are ? 04/13
FullSIX Group : Who We are ? 04/13
 
Groupe FullSIX : Qui sommes nous ? 04/13
Groupe FullSIX : Qui sommes nous ? 04/13Groupe FullSIX : Qui sommes nous ? 04/13
Groupe FullSIX : Qui sommes nous ? 04/13
 
Isa et e isa extrait site fullsix retail
Isa et e isa extrait site fullsix retailIsa et e isa extrait site fullsix retail
Isa et e isa extrait site fullsix retail
 
Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...
Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...
Extraits du 1er baromètre de l’Internet BtoB en France par Infopro Communicat...
 
Consumer pulse #1
Consumer pulse #1Consumer pulse #1
Consumer pulse #1
 
Face to Facebook #1 FullSIX GROUPE Janv 2010
Face to Facebook #1 FullSIX GROUPE Janv 2010Face to Facebook #1 FullSIX GROUPE Janv 2010
Face to Facebook #1 FullSIX GROUPE Janv 2010
 
Do you speak facebook FullSIX Groupe oct 2010
Do you speak facebook FullSIX Groupe oct 2010Do you speak facebook FullSIX Groupe oct 2010
Do you speak facebook FullSIX Groupe oct 2010
 

Dernier

Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfsnapierala
 
Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationTony Aubé
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAUGAIA
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...Faga1939
 
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalNicolas Georgeault
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...OCTO Technology
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudOCTO Technology
 

Dernier (7)

Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
 
Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imagination
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
 
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
 

Responsive web design new14

  • 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….
  • 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
  • 63. 63 Le RWD n’est pas une finalité
  • 64. 64 Nouvelle méthodologie de production Expérience utilisateur Future Proof
  • 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