81
ENJEUX – SOLUTIONS - MÉTHODOLOGIE

Responsive Web Design - Enjeux, Solutions, Méthodologie

  • Upload
    ekino

  • View
    8.018

  • Download
    0

Embed Size (px)

DESCRIPTION

Un revue complète des enjeux techniques, UX et méthodologiques du Responsive Web Design; avec les solutions que nous pouvons y apporter.

Citation preview

Page 1: Responsive Web Design - Enjeux, Solutions, Méthodologie

ENJEUX – SOLUTIONS - MÉTHODOLOGIE

Page 2: Responsive Web Design - Enjeux, Solutions, Méthodologie

AGENDA

1 Constat : La grande fragmentation

2 Comment s’armer face à tous ses écrans

3 Les enjeux design et conception

4 La méthodologie

5 Les enjeux techniques du responsive

6 Le choix du responsive

7 Conclusion

Page 3: Responsive Web Design - Enjeux, Solutions, Méthodologie

LE PAYSAGE DU WEB A CHANGÉ

Page 4: Responsive Web Design - Enjeux, Solutions, Méthodologie

LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS

2011-10

2011-11

2011-12

2012-01

2012-02

2012-03

2012-04

2012-05

2012-06

2012-07

2012-08

2012-09

2012-10

2012-11

2012-12

2013-01

2013-02

2013-03

2013-04

2013-05

2013-06

2013-07

2013-08

2013-09

2013-10

0

5

10

15

20

25

30

35

40

45

50

IEChromeFirefoxSafariOperaOther

statcounter.com

Page 5: Responsive Web Design - Enjeux, Solutions, Méthodologie

LES RAPPORTS DE FORCE ONT CHANGÉ EN 2 ANS

2011-10

2011-11

2011-12

2012-01

2012-02

2012-03

2012-04

2012-05

2012-06

2012-07

2012-08

2012-09

2012-10

2012-11

2012-12

2013-01

2013-02

2013-03

2013-04

2013-05

2013-06

2013-07

2013-08

2013-09

2013-10

0

5

10

15

20

25

30

35

40

45

50

IEChromeFirefoxSafariOperaOther

Chrome

InternetExplorer

statcounter.com

Page 6: Responsive Web Design - Enjeux, Solutions, Méthodologie

LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN

2012-10

2012-11

2012-12

2013-01

2013-02

2013-03

2013-04

2013-05

2013-06

2013-07

2013-08

2013-09

2013-10

0%

2%

4%

6%

8%

10%

12%

14%

16%

18%

20%

Desktop

statcounter.com

Page 7: Responsive Web Design - Enjeux, Solutions, Méthodologie

LE TRAFIC SMARTPHONE PRESQUE DOUBLÉ EN 1 AN

2012-10

2012-11

2012-12

2013-01

2013-02

2013-03

2013-04

2013-05

2013-06

2013-07

2013-08

2013-09

2013-10

0%

2%

4%

6%

8%

10%

12%

14%

16%

18%

20%

Desktop

On peut anticiper que la part de marché du smartphone mondial va passer les 20% en fin d’année

statcounter.com

Page 8: Responsive Web Design - Enjeux, Solutions, Méthodologie

Hier encore,Le marché tournait autour de 3 résolutions principales :

• UN ORDINATEUR,• UN IPHONE,• UN IPAD …

Page 9: Responsive Web Design - Enjeux, Solutions, Méthodologie

APPLE ET SON ÉCRAN RETINA a lancé la course au dpi* et à la finesse des écrans

LE NOMBRE DE RÉSOLUTIONS SE VOIT DONC MULTIPLIÉ

*Dot Per Inch

Page 10: Responsive Web Design - Enjeux, Solutions, Méthodologie

APPLE LANCE LA COURSE AU DPI : LE RETINA

iPad iPad Retina

Page 11: Responsive Web Design - Enjeux, Solutions, Méthodologie

RÉSOLUTIONS ÉCOSYSTÈME IOS

opensignalmaps

5RÉSOLUTIONS

Page 12: Responsive Web Design - Enjeux, Solutions, Méthodologie

2012 – 2013

Le nombre de terminaux Android a progressé de façon incontestable

Page 13: Responsive Web Design - Enjeux, Solutions, Méthodologie

ANDROID DÉPASSE IOS AU NIVEAU MONDIAL

2011-07

2011-08

2011-09

2011-10

2011-11

2011-12

2012-01

2012-02

2012-03

2012-04

2012-05

2012-06

2012-07

2012-08

2012-09

2012-10

2012-11

2012-12

2013-01

2013-02

2013-03

2013-04

2013-05

2013-06

0

5

10

15

20

25

30

35

40

45

Android

iOS

Nokia/ Symbian

Samsung

BlackBerry OS

Autre

Sony Ericsson

statcounter.com

JUILLET2012

Page 14: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN NOMBRE DE TERMINAUX CONSIDÉRABLE EST SOUS ANDROID

opensignalmaps

Page 15: Responsive Web Design - Enjeux, Solutions, Méthodologie

ET UN NOMBRE DE RÉSOLUTIONS AD-HOC

opensignalmaps

231RÉSOLUTIONS

Page 16: Responsive Web Design - Enjeux, Solutions, Méthodologie

DE NOUVEAUX FORMATS SONT APPARUS

Ils redéfinissent les catégories existantes de terminaux.

Page 17: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA « PHABLET » : EST-CE UNE TABLETTE? UN SMARTPHONE?

Page 18: Responsive Web Design - Enjeux, Solutions, Méthodologie

PEU IMPORTE !

Désormais,On ne doit plus catégoriser ni parler de résolution,on doit penser en TAILLES D’ÉCRANS

Page 19: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA PERFORMANCE DES SMARTPHONES AU CŒUR DU SUJET

Firefox OS• Bon support HTML5• Petit écran• Petit processeur

Samsung Galaxy Y• Android 2.3 – 2011• Petit écran

Page 20: Responsive Web Design - Enjeux, Solutions, Méthodologie

La durée de vie et la qualité des terminauxsont très aléatoires !

Rien ne nous informe sur les mises à jours de certains terminaux,Android 2.3 datant de 2010 équipe encore 30% des smartphonesAndroid du marché

Page 21: Responsive Web Design - Enjeux, Solutions, Méthodologie

Le paysage du WEB en 2015 …?

Page 22: Responsive Web Design - Enjeux, Solutions, Méthodologie

DES ÉCRANS PLUS GRANDS

Page 23: Responsive Web Design - Enjeux, Solutions, Méthodologie

DES PLUS PETITS

Page 24: Responsive Web Design - Enjeux, Solutions, Méthodologie

DES … DIFFÉRENTS

Page 25: Responsive Web Design - Enjeux, Solutions, Méthodologie

DES ÉCRANS PARTOUT, TOUT LE TEMPS

Page 26: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA SEULE CHOSE DONT ON PEUT ÊTRE SÛR.

Et on devra traiter la plupart des supports de la même façon.

IL Y A LE WEB

SMARTPHONESTABLETTEDESKTOPTÉLÉETC …

Page 27: Responsive Web Design - Enjeux, Solutions, Méthodologie

QUELLES SONT NOS ARMES ?

Page 28: Responsive Web Design - Enjeux, Solutions, Méthodologie

CHANGER NOTRE MODE DE SUPPORT

DUSUPPORTNAVIGATEUR

AUSUPPORT FORMAT

Le support navigateur, c’est faire en sorte que le code s’adapte au browser

Le support format, c’est faire en sorte que le browser sélectionne la partie du code qui lui est adressée

Page 29: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN NOUVEAU PATTERN DE CONCEPTION

Un consensus sur un pattern de conception a été trouvé :

LE RESPONSIVE WEB DESIGN

Un fonctionnement par paliers de tailles d’écrans

Design Fluide

Taille de texte adaptée

Réorganisation du layout

RWD

Page 30: Responsive Web Design - Enjeux, Solutions, Méthodologie

« ANCIENS SUPPORTS »

LE POINT COMMUN ENTRE :• Internet Explorer 7-8• Android 2.3• iOS < 5

Des navigateurs archaïques, mais qu’on doit supporter car ils représentent encore une grosse part du marché.

Mais COMMENT ?

Page 31: Responsive Web Design - Enjeux, Solutions, Méthodologie

AMÉLIORATION PROGRESSIVE

Développer en respectant les standards W3C

1 Certaines fonctionnalités des nouveaux navigateurs seront simulées sur les plus anciens (ex : Flash pour balise Vidéo, Javascript pour les animations,…)

2 Certaines subtilités graphiques ou motion 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

Page 32: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN SUPPORT PAR PALIERS

IL S’AGIT DE DÉFINIR DES PALIERS :• de tailles d’écrans• de fonctionnalités

Les paliers sont liés à la technicité du sujet.

Voici un exemple sur un site présentant beaucoup de motion

Page 33: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN EXEMPLE DE SUPPORT PAR PALIERS

Page 34: Responsive Web Design - Enjeux, Solutions, Méthodologie

TECHNIQUEMENT ?

Comment détecter les paliers techniquement :

Paliers fonctionnels :• Modernizr (Librairie JS permettant de détecter les

nouvelles fonctionnalités JS)• Détection du User-Agent (dernier recours)

Si on souhaite baisser intentionnellement le fonctionnel (ex: les animations sur Android 2.3 qui les supporte mais mal )

Gestion des évènements spécifiques à certains support

Paliers de résolutions :• CSS Media-queries (nouveauté CSS3 implémentée par

les derniers browsers)Les anciens browsers (desktop) n’ont pas besoin de supporter ces résolutions et bénéficieront d’une CSS par défaut

Page 35: Responsive Web Design - Enjeux, Solutions, Méthodologie

LES ENJEUX DESIGN

Page 36: Responsive Web Design - Enjeux, Solutions, Méthodologie

DÉFINIR

UN LANGAGECOMMUN

LA

MAQUETTEPSD

LANAVIGATION

Page 37: Responsive Web Design - Enjeux, Solutions, Méthodologie

On définie donc des paliers sur lesquels on va appliquer des layouts* de présentation

LE LANGAGE DU RESPONSIVE

*gabarits

Small Medium Large X-large

Page 38: Responsive Web Design - Enjeux, Solutions, Méthodologie

DIFFÉRENTS LAYOUT

source lukew

OFF CANVAS

COLUMN DROPMOSTLY FLUID

LAYOUT SHIFTER

Page 39: Responsive Web Design - Enjeux, Solutions, Méthodologie

L’ABSENCE DE DESIGN STATIQUE

Le RWD est en opposition avec le principe de pixel perfect

Les techniques de Design ont évolué :

• On peut définir le palier minimum et le palier maximum

• On crée des éléments plus

que des mises en pages• On passe d’un design

statique à une maquette HTML vivante

Page 40: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA NAVIGATION

La stratégie de navigation reste un choix important.

Plusieurs pattern existent avec leurs avantages et inconvénients.

1/ Volet

Pour• Espace• Design• Pattern

Facebook

Contre• Confusant• Compatibilité

Page 41: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA NAVIGATION

La stratégie de navigation reste un choix important.

Plusieurs pattern existent avec leurs avantages et inconvénients.

2/ Bascule

Pour• Contexte• Design• Compatibilité

Contre• Javascript• Performance

Page 42: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA NAVIGATION

La stratégie de navigation reste un choix important.

Plusieurs pattern existent avec leurs avantages et inconvénients.

3/ Liste de sélection

Pour• Espace• Identifiable• Compatibilité

Contre• Design• Confusant• Javascript

Page 43: Responsive Web Design - Enjeux, Solutions, Méthodologie

RESPONSIVE VS. PROJET

Page 44: Responsive Web Design - Enjeux, Solutions, Méthodologie

LE RESPONSIVE IMPLIQUEUNE MÉTHODOLOGIE ADAPTÉE

Les différents enjeux du Responsive Web Design impliquent une phase de conception importante.Ceci afin de pérenniser la réflexion et d’anticiper au mieux les prochaines innovations, sans sacrifier le fonctionnel et l’utilisateur final.

Elle permettra d’analyser le besoin exact, de prioriser les éléments à afficher ou non sur les différents périphériques ou encore de déterminer quel « layout » RWD adopter.

Cette conception peut se répartir de la manière suivante :

DÉFINITION DE L’ARCHITECTURE RESPONSIVE ET L’ADAPTABILITÉ

IDENTIFICATION DES IMPACTS TECHNIQUES

PROTOTYPAGETESTS UTILISATEURS

Page 45: Responsive Web Design - Enjeux, Solutions, Méthodologie

MÉTHODOLOGIE PROJET

DÉFINITION DE L’ARCHITECTURE RESPONSIVE ET L’ADAPTABILITÉ

IDENTIFICATION DES IMPACTS TECHNIQUES

PROTOTYPAGETESTS UTILISATEURS

Etude des usages sur les différents

devicesL

Segmentation marketing cibles AX

benchmark, CRM

Analyse du parcours utilisateurL

Matérialisation des parcours client et

personaeL

Priorisation fonctionnelleWS

Périmètre fonctionnelet éditorial

L

L

Impacts techniques avec le back & le

CMS clientWS

Impact tracking

Impact SEOL

Impact AnalyticsL

L

Analyse de la pertinence du

contenus selon le contexte

WS

Développement d’un prototype HTML

Wireframes des fonctionnalités

adaptéesL

Modélisation des différents patterns,

mobile firstL

L

Test sur prototype cliquableWS

Analyse des résultats et

adaptationsWS

WS

L

livrables

workshops

Page 46: Responsive Web Design - Enjeux, Solutions, Méthodologie

MÉTHODOLOGIE PROJET

UNE ÉQUIPE MODULAIRE DÉDIÉE AUX EXPÉRIENCES MULTIPLES, TRAVAILLANT DE FAÇON COLLABORATIVE

Consultant UX

Développeurs back

Développeurs frontChef de projet

Expert Analytics

Directeur Artistique

Expert Mobile

Creative Technologist

Product Owner

Page 47: Responsive Web Design - Enjeux, Solutions, Méthodologie

CROQUIS RESPONSIVE

Desktop Tablette Smartphone

Page 48: Responsive Web Design - Enjeux, Solutions, Méthodologie

PROCESSUS DE VALIDATION GRAPHIQUE

CROQUIS

PROTO HTML

La validation des croquis puis du prototype aboutit à des PSD

MAQUETTES PSD

Pour correspondre au cycle actuel

Page 49: Responsive Web Design - Enjeux, Solutions, Méthodologie

PROCESSUS DE VALIDATION GRAPHIQUE

CROQUISPROTO HTML

On peut imaginer un processus itératif.

C’est ce vers quoi l’industrie tend.

PSD

Binôme :CréatifDéveloppeur

Page 50: Responsive Web Design - Enjeux, Solutions, Méthodologie

CONCEPTION : ONE MORE THING ?

Il faut bien choisir sa cible• Smartphone ≠ Smartphone, un iPhone 4 ne doit pas

être traité comme un Galaxy S4.• Un projet responsive est un projet web, les

smartphones anciens ne peuvent pas suivre malgré toutes les optimisations

Les formats évoluent, il vaut mieux ne pas trop figer ses paliers de rendu.

• L’apparition des phablets ou du 5S et son écran allongé démontrent qu’il faut rester ouvert à la variation des points de ruptures au cours du projet.

•Ex: iPhone 5 en mode paysage

Page 51: Responsive Web Design - Enjeux, Solutions, Méthodologie

LES ENJEUX TECHNIQUES

Page 52: Responsive Web Design - Enjeux, Solutions, Méthodologie

LES MÉDIAS

GESTION DU CONTENU

DES PARCOURS FONCTIONNELS DIFFÉRENTS

WEBPERFORMANCE

LARECETTE

Page 53: Responsive Web Design - Enjeux, Solutions, Méthodologie

LE PRINCIPAL ENJEU DES MEDIAS :

ADRESSER LES BONNES IMAGES

1ÈRE SOLUTION /

UTILISER LE USER-AGENT (BROWSER SNIFFING)

La liste de user-agents ou la base de donnéesera-t-elle toujours à jour ?

Pouvons-nous penser que un device = une taille d’écran ?Fonctionnalité Galaxy & bientôt Android : split view

Les tablettes chinoises qui masquent leur user agent

Les tablettes Windows 8, les laptops win7/ win8

Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..

LES MÉDIAS

Page 54: Responsive Web Design - Enjeux, Solutions, Méthodologie

LE PRINCIPAL ENJEU DES MEDIAS :

ADRESSER LES BONNES IMAGES

1ÈRE SOLUTION /

UTILISER LE USER-AGENT (BROWSER SNIFFING)

La liste de user-agents ou la base de donnéesera-t-elle toujours à jour ?

Pouvons-nous penser que un device = une taille d’écran ?Fonctionnalité Galaxy & bientôt Android : split view

Les tablettes chinoises qui masquent leur user agent

Les tablettes Windows 8, les laptops win7/ win8

Les technologies de déportation d’écran : Airplay, Allshare, Smartglass, ..

Seul le client connaît sa résolution au moment de son usage!

LES MÉDIAS

Page 55: Responsive Web Design - Enjeux, Solutions, Méthodologie

RÉSOLUTIONECRAN

BANDE PASSANTE

QUALITÉ DEL’IMAGE

Netbooken wifi

Galaxy Note 2en 4g

Iphone 5en edge

Windows surfaceen 3g

Télévision 4ken bas débit

Laptopen fibre

LES IMAGES, LE VRAI CHALLENGE DU FLUIDE

Page 56: Responsive Web Design - Enjeux, Solutions, Méthodologie

RÉSOLUTIONECRAN

BANDE PASSANTE

QUALITÉ DEL’IMAGE

Netbooken wifi

Galaxy Note 2en 4g

Iphone 5en edge

Windows surfaceen 3g

Télévision 4ken bas débit

Laptopen fibre

LES IMAGES, LE VRAI CHALLENGE DU FLUIDE

Résolutions d’écrans & capacité réseau ne sont désormais plus liés!

Page 57: Responsive Web Design - Enjeux, Solutions, Méthodologie

LES POINTS D’ACTION

Deux problématiques à travailler :

LECHARGEMENT

LA BONNE IMAGE PAR DEVICE

1 Mise en place d’un polyfill de détection de bande passante

2 Utilisation native de l’api w3c network information asap

1 Participation à la réflexion w3c autour de l’implémentation de la balise picture et d’autres solutions

2 Support du RETINA par le pattern 2x

3 Pas de double hit de téléchargement

Page 58: Responsive Web Design - Enjeux, Solutions, Méthodologie

SÉLECTION DE LA BONNE IMAGE

Le w3c et ses participants évoquent trois pistes encore à l’état de brouillon

PICTUREELEMENT

SRC SET SRC NCLIENTSHINT

Page 59: Responsive Web Design - Enjeux, Solutions, Méthodologie

NOS ORIENTATIONS À DATE

Aucune solution n’est implémentée par les navigateurs pour le moment.

Il s’agit de trouver celle qui paraît la plus pertinente et d’utiliser/réaliser un polyfill.

Les contraintes habituelles doivent être respectées

SEO

ACCESSIBILITÉ

PERFORMANCE

Pour le moment nous avons testé et éprouvé sur nos projets la solution « picture element » qui nous a donné satisfaction.

Mais la communauté s’engage de plus en plus sur la solution src N

PICTUREELEMENT

SRC SET SRC NCLIENTSHINT

Page 60: Responsive Web Design - Enjeux, Solutions, Méthodologie

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

Page 61: Responsive Web Design - Enjeux, Solutions, Méthodologie

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

Page 62: Responsive Web Design - Enjeux, Solutions, Méthodologie

PERFORMANCE

L’ENJEU MAJEUR EST D’ARRIVER À :• Un site en responsive web design mais qui prend en compte les

exigences du public mobile• Une vitesse de chargement des pages exemplaire• Un ressenti utilisateur idéal

LA PERFORMANCE WEB EST AU CŒUR D’UNE BONNE EXPÉRIENCE UTILISATEUR

Page 63: Responsive Web Design - Enjeux, Solutions, Méthodologie

PERFORMANCE

Optimiser ce que l’utilisateur voit :

• LazyLoad des images au scroll• Chargement des blocs à la

volée

Un kit HTML, JS, CSS léger et adapté au mobile

Ne pas hésiter à abaisser le rendu des devices lents

Compresser les scripts

COMPRESSER LES IMAGES

Les blocs sont non visibles, donc inactifs et les images ne sont pas

chargées

Viewport

Page 64: Responsive Web Design - Enjeux, Solutions, Méthodologie

PERFORMANCE, KPI

DES INDICATEURS TECHNIQUES CLÉS DE PERFORMANCE

Start Render (time to glass)Le moment précis où la page commence à s’afficher et le contenu texte est disponible.

Page LoadMoment où la page et ses contenus sont entièrement chargés (tous les scripts et toutes les images)

Il vaut mieux privilégier l’optimisation du start-render qui permet d’offrir une performance ressentie optimale à l’utilisateur.

Au cours de la navigation les autres éléments se chargent.

Page 65: Responsive Web Design - Enjeux, Solutions, Méthodologie

DES PARCOURS ADAPTÉS

Les medias-queries adaptent la forme, pas le fonctionnel

Un tunnel d’achat sur smartphonene doit pas avoir les mêmes champs et les mêmes étapes que sur ordinateur

IL S’AGIT DONC D’ADAPTER LE PARCOURS AU DEVICE

RESS / RESPONSIVE & SERVER-SIDE COMPONENTS

EX

Page 66: Responsive Web Design - Enjeux, Solutions, Méthodologie

RESS : FONCTIONNEMENT

SERVEUR

DÉTECTION UA

page.html

page.html

composant_web.html

composant_mobile.html

Page 67: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA CONTRIBUTION

Les outils de contribution, CMS, doivent s’adapter au responsive web design :

LE CMS DOIT 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

Page 68: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN PETIT MOT SUR LE SEO

Que pense Google du responsive web design ?

https://developers.google.com/webmasters/smartphone-sites/

Page 69: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA RECETTE

Page 70: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA RECETTE

C’EST ÇA CHEZ EKINO…

Page 71: Responsive Web Design - Enjeux, Solutions, Méthodologie

LA RECETTE CÔTÉ DEV

AUTOMATISER pour éviter les régressions

Mettre en place une couverture de tests unitaires côté JS/CSS• Karma & Jasmine

Mettre des tests de navigation• PhantomJS + Casper• Sélénium

Automatiser les tests de rendu multi device :• testSwarm

Page 72: Responsive Web Design - Enjeux, Solutions, Méthodologie

LES OUTILS DU CHEF DE PROJET

Des « bookmarklets » responsive• Resizer

• Etc…

Un outil permettant de forcer le User-Agent• Chrome tools

• Plugins firefox

Les simulateurs• Android (installer le SDK)

• iOS (être sous Mac OSX et installer Xcode)

Des machines virtuelles• VirtualBox + Modern.ie (une bonne solution gratuite et cross OS)

DES SMARTPHONES, pour les tests finaux• Rien ne remplace le test sur mobile, notamment pour juger de la

performance et des problématiques spécifique à l’accélération 3D ou aux évènements

Page 73: Responsive Web Design - Enjeux, Solutions, Méthodologie

LE CHOIX DU RESPONSIVE

Page 74: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN SITE RESPONSIVE OU ADAPTIVE ?

Le contenu est fluide et réagit pour s’adapter à n’importe quelle taille d’écran et type de format.

RESPONSIVEWEB DESIGN

Page 75: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN SITE RESPONSIVE OU ADAPTIVE ?

Le contenu va être modifié selon des formats et types d’écrans prédéfinis.

ADAPTIVEWEB DESIGN

Page 76: Responsive Web Design - Enjeux, Solutions, Méthodologie

IL FAUT PENSER À L’USAGE

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/

Page 77: Responsive Web Design - Enjeux, Solutions, Méthodologie

UN SITE RESPONSIVE OU ADAPTIVE ?

Le responsive, ce n’est pas qu’adapter du contenu à un écran mobile

Un site mobile nécessitant un fonctionnel particulièrement différent de celui présent sur le site desktop ne devrait pas être en RWD

• Géolocalisation

Un site très lourd de type RIA ne devrait pas se retrouver tel quel sur mobile

• Facebook• Gmail

Un site dont le contenu doit être adapté au support ne se prête pas au RWD

• Ligne éditoriale spécifique au mobile

Page 78: Responsive Web Design - Enjeux, Solutions, Méthodologie

DU FLUIDE POUR LE SMARTPHONE

Ne pas faire de responsivene 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 »

• Medias-queries pour adapter polices et organisation du layout

• Layout fluide pour gérer les différences de formats entre mobile (Galaxy S4 vs. Note 3 vs. iPhone 5s etc…

• Adaptives images pour offrir l’image optimale par support

Page 79: Responsive Web Design - Enjeux, Solutions, Méthodologie

CONCLUSION

Page 80: Responsive Web Design - Enjeux, Solutions, Méthodologie

POUR RÉSUMER

1 Le responsive n’est pas un raccourci

2 Ce n’est pas une technologie, c’est une méthodologie et des avancées techniques

3 Il implique une grosse phase de conception

4 Il a des enjeux techniques, qui sont parfois insolubles

5 Il doit être implémenté sur un projet en toutes connaissances de cause

6 RESS semble être un bon compromis pour permettre des parcours fonctionnels idéaux partout

Page 81: Responsive Web Design - Enjeux, Solutions, Méthodologie

MERCI !

Ekino157, rue Anatole France92300 Levallois-Perret

@[email protected]