IDÉES REÇUES7

DU RESPONSIVE WEB DESIGN

Les

RIEN NE SE PERD, RIEN NE SE CRÉE, TOUT SE TRANSFORME.

En quelques années, le « responsive » est passé du statut de tendance expérimentale au statut de réalité éprouvée. Pour se convaincre de cette réalité, les statistiques du site d’un des clients de Shiva Communication parlent d’elles-mêmes :

D’après Ethan, répondre à cette profusion de supports est assez simple : grilles fluides, images flexibles et media queries. En somme, 3 ingrédients et des milliers de combinaisons pour concevoir un site unique qui s’adapte aux besoins de tous ses utilisateurs. Mais sous cette approche en apparence simple, évoquée de manière souvent injustifiée ou abusive, se cachent de nombreux pièges, dans lesquels nous sommes forcément tous tombés pour pouvoir les déceler, puis les éviter.

Antoine Lavoisier a résumé la notion de Responsive Web Design dès le XVIIIème siècle.

Si M. Lavoisier avait vécu à notre époque, il est probable que nous aurions pu découvrir sa célèbre maxime sur son blog « responsive » avec le même confort de lecture sur notre ordinateur, tablette, smartphone, voire même télévision…Il aurait été tour à tour enjoué par les articles de Ethan Marcotte sur A List Apart (alistapart.com); Fluid grids en 2009, Responsive Web Design en 2010, puis par son livre référence de 2011 – Responsive Web Design – qui offre à ce jour la définition la plus concise et la plus claire.

Le nombre de navigateurs a doublé et le nombre de résolutions a quadruplé.

navigateurs

AVRIL 2009

9 résolutions95navigateurs

AVRIL 2013

21 résolutions395

Le device Les résolutions Les dimensions de l’écran

1024 PX

2

IDÉE REÇUE #1UN SITE QUI SE

REDIMENSIONNE SUR TOUS LES ÉCRANS

EST FORCÉMENT RESPONSIVE

FAUX3

FAUX4

5

Faut-il offrir une expérience globale selon le terminal ou au contraire adapter l’expérience au terminal ? La navigation sur mobile est un exemple concret qui démontre une démarche de recherche d’information précise en survolant le site alors que l’utilisation sur desktop nous incite davantage à vivre une expérience interactive.

Responsive est une réponse; fluide ou adaptive en sont deux autres. Elles sont généralement combinées entre elles pour obtenir le produit le plus performant, le plus adapté.

La flexibilité de la réalisation doit être pensée en amont du projet en prenant en compte la mise en page, les contenus multimédias (images et vidéos), les typographies, et les considérations techniques (script, poids global de la page, etc.).

IDÉE REÇUE #1Un site qui se redimensionne sur tous les écrans est forcément responsive

LA FINALITÉ D’UN PRODUIT WEB EST DE RÉPONDRE À UN BESOIN UTILISATEUR ET CETTE RÉPONSE SE FORMULE DE DIFFÉRENTES MANIÈRES SELON L’OBJECTIF À ATTEINDRE.

IDÉE REÇUE #2

ON PEUT FAIRE TOUT TYPE DE SITE

EN RWD

FAUX6

FAUX7

Sur mobile, le contenu se veut linéaire et optimisé pour une meilleur consultation.

IL N’EN EST PAS ENCORE DE MÊME POUR LES SITES À FORT TRAFIC OU À INTERFACES PLUS COMPLEXES

L’ENJEU DU RWD EST LA COMPATIBILITÉ MULTI-ÉCRANS.

l’enjeu

L’enjeu n’est plus dans le « wouah effect » d’une mise en page extraordinaire ou d’une interactivité hors des sentiers battus.

On peut faire tout type de site en RWD

Si aujourd’hui le RWD semble être une technique éprouvée pour gérer des interfaces simples de sites de contenu,

comme par exemple les (souvent) longs formulaires des tunnels de conversion du e-commerce.

IDÉE REÇUE #2

OUI?

NON?

8

L’EMAIL RESPONSIVE WEB DESIGN (RWD)

DES MISES EN PAGE SIMPLES.

1 2 3

Les largeurs fixesdeviennent variables

GRILLES FLUIDESLa taille des images

s’adapte à chaque écran

IMAGES FLEXIBLES MÉDIAS QUERIESInterrogation des devices pour déterminer lequel est

utilisé et sa résolution

En ce sens il faut partir sur les bases solides et éprouvées

Cela permet de se concentrer sur l’adaptation du contenu selon les différentes résolutions dans une structure modulable.

S’il n’est pas possible de tout faire en Responsive Web Design, il est possible de répondre à tous les besoins d’un client. Dans cet état d’esprit, l’enjeu se situe plus dans la phase de conception ergonomique que dans la réalisation technique.

Enfin, l’un des enjeux est désormais l’email responsive. À l'heure où la consultation sur smartphones et tablettes se démocratise de plus en plus, il est important de savoir adapter les supports digitaux à cette nouvelle pratique.

Ainsi, l'utilisation de media queries, propriété css permettant de définir des règles d'affichage en fonction de la résolution de l'utilisateur est la garantie d'un affichage optimisé des supports en responsive.

9

IDÉE REÇUE #3

UN SEUL ORDINATEUR SUFFIT À TESTER

UN SITE RWDFAUX

10

FAUX11

LES RÉACTIONS D’UN SITE SONT TOTALEMENT DIFFÉRENTES D’UN NAVIGATEUR À L’AUTRE,

La détection active du device (le terminal à partir duquel vous visitez le site), de l’os ou du navigateur peut parfois être nécessaire pour enrichir l’expérience ou corriger des bugs spécifiques. Dans ce cas,

De plus, une fenêtre à la taille d’un smartphone dans un écran desktop ne permettra jamais d’apprécier la véritable expérience du device dans la main. La perception est faussée et les résultats concrets sont souvent des tailles de polices inadaptées ou encore des marges trop importantes.

IDÉE REÇUE #3ON PARLE DE SITE

POUR LEQUEL LE SIMPLE REDIMENSIONNEMEMENT DE FENÊTRE

NE FONCTIONNE PLUS.d’une version de ce même navigateur à l’autre, d’un mobile à l’autre, d’une génération de tablette à une autre. Il faut considérer que chaque écran propose des différences d’affichages qui lui sont propres.

Un seul ordinateur suffit à tester un site RWD

12

Ce constat a poussé les équipes de Shiva Communication à conceptualiser de manière pragmatique leur banc d’essai auquel ils soumettent toutes leurs créations : le Shiva Device Lab.

Ce présentoir ergonomique regroupe plusieurs terminaux mobiles où sont intégrés plusieurs OS ainsi que la plupart des navigateurs du marché. Il facilite le développement de sites sous de nombreuses plates-formes et de manière simultanée.

LE SHIVA OPEN DEVICE LABLaboratoire de tests multi-devices

Plus d’informations sur www.devicelab.shivacom.fr

13

IDÉE REÇUE #4

LE RWD NE MODIFIE PAS LES HABITUDES

DE TRAVAILFAUX

14

FAUX15

Le contenu influence la façon de concevoir le site et les contraintes du RWD influencent également le contenu, sans qu’aucun ne domine l’autre.

Il s’agit de faire des concessions entre fonctionnalités, images et contenu éditorial. D’un point de vue « équipe » et « organisation », une méthodologie Agile permet justement d’imposer ce niveau d’exigences dans les échanges, l’implication et la capacité à se remettre en question. Chaque étape de conception sollicite à la fois webdesigner, intégrateur, concepteur et client !

IDÉE REÇUE #4Le RWD ne modifie pas les habitudes de travail

conseilgestion de projet&

créationsTechniques maintenance

contenu

16

IDÉE REÇUE #5LA MAINTENANCE

NÉCESSITE MOINS DE TEMPS ET PRÉSENTE

MOINS DE CONTRAINTES

FAUX17

FAUX18

En revanche, il n’y a qu’un seul site à maintenir. Il y a une véritable distinction entre la maintenance technique et la mise à jour du site. Pour la maintenance technique, la rigueur est de mise pour ne pas réparer d’un côté et casser de l’autre. Dans la majorité des cas, le code n’est écrit qu’une seule fois pour tous les terminaux.

Quant à la mise à jour, celle-ci se voit être facilitée mais requiert néanmoins davantage de compétences en webmastering afin d’anticiper, et au besoin corriger le contenu, pouvant aller même jusqu’au html. En l’état, c’est surtout nécessaire pour la gestion d’éléments pouvant alourdir le site comme les images, casser la mise en page (des tableaux ou images à taille fixe) ou amoindrir l’expérience (une vidéo non visible sur un terminal donné) par exemple.

IDÉE REÇUE #5

LA MAINTENANCE D’UN SITE REPONSIVE REQUIERT DAVANTAGE DE COMPÉTENCES QUE POUR UN AUTRE SITE.

HTML

La maintenance nécessite moins de temps et présente moins de contraintes

maintenance

19

IDÉE REÇUE #6

PLUS BESOIN D'APPLI AVEC LE RWD

20

INEXACT

21

LE CHOIX DÉPEND AUSSI ET SURTOUT DE LA TYPOLOGIE DU CONTENU.

En revanche, une appli confère des avantages non négligeables selon les besoins ; on citera notamment sa performance en terme de rapidité et la couche matérielle qui permettent d’utiliser toute la capacité du mobile. Eventuellement, son utilisation « offline » sera sans doute plus aisée qu’un site. L’appli permet d’approfondir l’expérience en exploitant les capacités du device : géolocalisation, accéléromètre, push, accès aux données du device (photos, vidéos, etc.), et plus.

Un site de contenu n’a que peu de valeur ajoutée à obtenir du développement d’une appli (hormis peut-être le push pour les informations urgentes) alors qu’un site de services y trouvera souvent beaucoup plus d’apports (réseau social, réservation de billets, streaming audio – vidéo, client email etc.).

Le Responsive Web Design n’est pas une solution à tout ! Il est nécessaire de bien évaluer ses besoins sans céder à l’effet de buzz engendré par la multiplication des terminaux mobiles.

IDÉE REÇUE #6L’APPLI EST UNE ALTERNATIVE À UN SITE EN RESPONSIVE DESIGN SI LES FONTIONNALITÉS NE SONT PAS OU DIFFICILES À OBTENIR SUR DESKTOP.

Plus besoin d'appli avec le RWD !appli.

22

IDÉE REÇUE #7

LE RESPONSIVE C’EST FACILE

FAUX23

FAUX24

LE RWD ASSURE À L’UTILISATEUR UNE EXPÉRIENCE EN MATIÈRE DE NAVIGATION MAIS RESTE UN SUJET RELATIVEMENT NOUVEAU ET PAS SI ÉVIDENT À MAÎTRISER.

La conception graphique et ergonomique puis le développement d’un site web responsive demandent indéniablement plus de temps, d’anticipation, de rigueur et d’éducation – compréhension du client. Les erreurs et les reworks sont inévitables… Le RWD n’est pas une solution miracle et les contraintes de cette technique doivent être évaluées dès le départ du projet.

IDÉE REÇUE #7Le responsive c’est facile

R

W

D25

Pour Shiva, la logique de conception en RWD devrait entrer dans les compétences basiques requises et surtout dans le circuit de conception de tout site. Cette contrainte multi-devices est bien présente et ne cessera de grandir. Aussi, ces contraintes seront petit à petit prises en compte naturellement dans la méthodologie de création de sites web. La première étape à toute réalisation est l’anticipation des contraintes. Le choix de la formule s’imposera alors d’elle-même. Les possibilités sont nombreuses : un site full responsive ? Un site responsive et un site mobile ? Un site responsive et une appli mobile ? Une version desktop et une version tablette ? Le choix se fait en s’adaptant aux besoins, au contenu et à l’audience du client.

26

WEARE100% IndépendantDIGITAL PLAYERS