Résumé

Adapter l’affichage d’un site web à toutes les tailles d’écrans pour répondre aux besoins des internautes dans tous les contextes d’utilisation : un défi à l’heure où le Web mobile a envahi notre quotidien !

Permettant de créer des sites qui réagissent intelligemment à l’écran sur lequel ils sont consultés (ordinateur, smartphone, tablette…), le responsive web design convainc de plus en plus de concepteurs web. Mais alors que la pratique se répand, comment adapter les processus d’industrialisation d’un projet web à ces nouvelles méthodes ?

Au-delà de la mise en œuvre technique, ce livre accompagne le chef de projet, mais aussi tous les intervenants (designers, développeurs…), tout au long du déroulement d’un projet, prévenant contre les embûches et proposant des réponses aux défis techniques et humains que cette adaptabilité ne manque pas de poser.

Un guide indispensable pour appréhender de manière détendue la gestion de projet web aujourd’hui !

AU SOMMAIRE

Responsive ou adaptatif ? Quelques notions clés pour bien commencer

Recueil des besoins et cahier des charges

Monter l’équipe projet

Conception, design graphique et intégration

Développement back-end

Rôle et formation des contributeurs éditoriaux

Recette applicative et TMA

Biographie auteur

Graphiste de formation, Jérémie Patonnier est aujourd’hui expert en développement web chez Clever Age. Cofondateur des sites Typographisme et Le train de 13h37, il est aussi contributeur au projet Mozilla. Passionné du Web sous toutes ses approches et membre du think-tank d’innovation Zenexity, Rudy Rigot fut l’un des premiers à signaler les conséquences du responsive web design sur la gestion de projet. Tous deux interviennent dans des conférences de renom en France (Paris Web, Sud Web…) comme à l’étranger.

www.editions-eyrolles.com

Jérémie Patonnier
Rudy Rigot

Projet
Reponsive
Web Design

DU RECUEIL DES BESOINS
À LA MISE EN LIGNE

Préface de Kaelig Deloumeau-Prigent

ÉDITIONS EYROLLES

61, bld Saint-Germain

75240 Paris Cedex 05

www.editions-eyrolles.com

Remerciements à Anne Bougnoux et à tous les relecteurs de cet ouvrage.

En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des Grands Augustins, 75006 Paris.

© Groupe Eyrolles, 2013

ISBN : 978-2-212-13713-2

Dans la collection « Design Web »

Intégration web : les bonnes pratiques.

Le guide de survie de l’intégrateur !

Corinne Schillinger.

N°13370, 2012, 412 pages.

CSS maintenables avec Sass & Compass.

Outils et bonnes pratiques pour l’intégrateur web.

Kaelig Deloumeau-Prigent.

N°13417, 2012, 272 pages.

Design d’expérience utilisateur. Principes et méthodes. Sylvie Daumal.

N°13456, 2012, 192 pages.

Référencement mobile. Web Analytics et stratégie de contenu. Isabelle Canivet Bourgaux.

N°13667, à paraître 2013, 400 pages.

Card Sorting. Ne perdez plus vos internautes !

Gautier Barrère et Éric Mazzone.

N°13448, 2012, 108 pages.

La stratégie de contenu en pratique.

30 outils passés au crible. Isabelle Canivet et Jean-Marc Hardy.

N°13510, 2012, 170 pages.

Dans la collection « A Book Apart »

Stratégie de contenu mobile. Karen McGrane.

N°13675, 2013, 172 pages.

Métier web designer. Mike Monteiro.

N°13527, 2012, 156 pages.

Mobile first. Luke Wroblewski.

N°13406, 2012, 144 pages.

Design émotionnel. Aarron Walter.

N°13398, 2011, 110 pages.

Responsive Web Design. Ethan Marcotte.

N°13331, 2011, 160 pages.

Stratégie de contenu web. Erin Kissane.

N°13279, 2011, 96 pages.

CSS3 pour les Web designers. Dan Cederholm.

N°12987, 2011, 132 pages.

HTML5 pour les Web designers. Jeremy Keith.

N°12861, 2010, 98 pages.

Chez le même éditeur

Mémento Performances web.

Armel Fauveau et Lionel Pointet.

N° 13658, 2013, 18 pages.

Mémento Sites web : les bonnes pratiques.

Élie Sloïm.

N°12802, 3e édition, 2010, 18 pages.

Accessibilité web. Normes et bonnes pratiques pour des sites plus accessibles. Armony Altinier.

N°12889, 2012, 320 pages.

Ergonomie web. Pour des sites web efficaces.

Amélie Boucher.

N°13215, 3e édition, 2011, 356 pages.

Ergonomie web illustrée. 60 sites à la loupe.

Amélie Boucher.

N°12695, 2010, 336 pages.

Bien rédiger pour le Web. Stratégie de contenu pour améliorer son référencement naturel.

Isabelle Canivet.

N°13750, 3e édition, 500 pages.

Réussir son référencement web.

Olivier Andrieu.

N°13664, 2013, 552 pages.

CSS avancées. Vers HTML5 et CSS3.

Raphaël Goetter.

N°13405, 2e édition, 2012, 385 pages.

HTML5. Une référence pour le développeur web.

Rodolphe Rimelé.

N°12982, 2011, 604 pages.

Relever le défi du Web mobile. Bonnes pratiques de conception et de développement. François Daoust et Dominique Hazaël-Massieux.

N°12828, 2011, 300 pages.

Gestion de projet agile. Avec Scrum, Lean, eXtreme Programming… Véronique Messager.

N°13666, 2013, 294 pages.

Coacher une équipe agile. Guide à l’usage des ScrumMasters, chefs de projet, managers… et de leurs équipes ! Véronique Messager.

N°13414, 2012, 324 pages.

À un grand philosophe, Daniel Rigot, qui se trouve être mon père et que j’ai toujours entendu parler d’écrire son propre livre. Tu vois, au final, tu l’auras écrit à travers moi…

R.R.

PRÉFACE

Lorsque j’ai commencé à bricoler des pages web dans le bureau de la maison familiale, je n’avais pas de connexion Internet. Pour mettre ces pages en ligne, l’opération était un poil compliquée : il s’agissait de compresser au maximum les fichiers (et notamment les images) pour les stocker sur une disquette (1,44 Mo). Celle-ci étant parfois capricieuse, chaque fichier était dupliqué une ou deux fois, histoire de s’assurer qu’il serait récupérable. Je me rendais ensuite à la médiathèque (équipée d’ordinateurs connectés à Internet) pour téléverser les mises à jour via FTP depuis les disquettes.

Quel rapport entre cette anecdote et la conception de sites web aujourd’hui ? La démocratisation des connexions haut débit a décomplexé les designers web, dont les pages ont enflé jusqu’à peser des poids hier délirants (plusieurs mégaoctets). Or, retour de bâton inattendu, cette inflation fait à nouveau obstacle aux performances des sites web et l’on revient à une recherche forcenée de l’optimisation des pages. La rapidité d’accès à l’information est devenue cruciale, alors que les conditions de navigation sur mobile sont aussi variables qu’imprévisibles. La spectaculaire pénétration du marché par les smartphones et les tablettes a bouleversé notre modèle de conception, chose que personne n’aurait soupçonnée avant l’arrivée de l’iPhone en 2007. Tandis que nous produisions des produits destinés à des plates-formes vieillissantes, les consoles de jeu portables se sont mises à intégrer des navigateurs web dignes de ce nom, puis les consoles et platines de salon ont suivi la tendance. Demain, il sera compliqué de trouver un téléviseur qui ne soit pas équipé d’un navigateur web. Au fur et à mesure que le marché se standardisait (résolutions d’écran plus uniformes, connexions ADSL…), nous nous sommes confortablement habitués à une conception en 1 024 × 768 pixels – toujours considérée comme la norme dans de nombreuses agences – sans nous soucier de la multiplicité des périphériques inhérente au World Wide Web. Nous sommes désormais mis devant cette évidence : nous avons cassé le Web.

La question qui se pose est celle de la livraison de nos contenus à ce panel grandissant de périphériques et d’usages. Nous pouvons nous évertuer à produire des sites spécifiques à chaque type de plate-forme et des applications dédiées, mais à long terme, cette approche n’est viable ni financièrement ni sur un plan pratique.

Les expérimentations récentes autour du trio des langages du Web que sont HTML, CSS et JavaScript montrent qu’il est possible de produire des sites qui s’adaptent intelligemment aux plates-formes de nos utilisateurs, quel que soit le contexte dans lequel ils accèdent à l’information. Le concept de base derrière cette idée, qu’Ethan Marcotte a nommé responsive web design – ou RWD pour les intimes – a inspiré des méthodes qui en sont encore à l’état embryonnaire, mais qui semblent tellement prometteuses qu’elle sont sans aucun doute le futur de la chaîne de conception web. Adopter cette approche permettra d’architecturer des produits qui fonctionnent sur les navigateurs d’hier et d’aujourd’hui, tout en restant accessibles sur les périphériques du futur.

En creusant le sujet, on se tournera vers l’adaptive web design (design adaptatif), grâce auquel on saura proposer des déclinaisons du même document pour qu’il se transforme de manière adéquate sur des périphériques aussi disparates que des lunettes connectées, des interfaces gestuelles, des consoles de jeu, une montre intelligente…

Le livre que vous tenez entre les mains est le témoin de l’intérêt que la communauté des professionnels du Web porte au responsive web design, mais il ne s’agit pas ici de suivre un effet de mode passager. Sensibiliser le client, former l’équipe, garder un cap précis tout en étant flexible en cours de projet… Tant de défis techniques et humains auxquels ont été confrontés les auteurs en conditions réelles. Merci à eux pour ce précieux partage.

Kaelig Deloumeau-Prigent

Intégrateur et auteur du blog Le ministère de l’intégration Auteur du livre CSS maintenables avec Sass et Compass, aux éditions Eyrolles
http://kaelig.fr

AVANT-PROPOS

Chaque événement de progrès ressemble un peu à un galet qui tombe dans un étang : au début, beaucoup de bruit vient de la surface, et chacun y va de son opinion sur la direction qu’il prendra. Puis, le galet tombe lentement, l’eau et les autres galets se positionnent progressivement pour lui permettre d’avancer à son rythme, prenant le temps de la réflexion à chaque goutte. Alors qu’il heurte le fond et prend sa position finale, chacun s’étonne de tout le chemin parcouru et reste un peu en émoi sur ce qui a été construit, ce qui a changé. Enfin, progressivement, le galet se fait oublier…...

REMERCIEMENTS

Nous remercions très chaleureusement nos relecteurs volontaires, qui ont mené une course effrénée contre la montre et ont apporté une énorme valeur au livre grâce à leurs retours, tous très pertinents : Stéphane Deschamps, Damien Boyer, Nicolas Catherin, Sophie Taboni, Yan Paquis, Florian Lonqueu-Brochard, Vincent Valentin, Marie Guillaumet, Nicolas Hoizey, avec une mention particulière pour Olivier de Villardi, aussi connu sous le nom de « l’homme qui relisait plus vite que son ombre » !

Aussi, nous présentons des remerciements accompagnés d’excuses à Julien Femia et Matthias Dugué, qui se sont aimablement portés volontaires pour relire, mais ont eu la malchance d’arriver tout juste trop tard. De même pour Corinne Massacry, qui nous a aimablement proposé des jolies illustrations, que nous aurions adoré intégrer au livre, si nous ne l’avions pas oubliée en chemin… (oups, désolés !)

Nous remercions aussi Vanessa Paquerot-Rigot, pour sa patience infinie, mais aussi ses crêpes magiques qui nous ont redonné du cœur à l’ouvrage à l’approche de la ligne d’arrivée !

Nous remercions aussi Kaelig Deloumeau-Prigent, qui nous signe une préface digne du philosophe web qu’il est.

Et nous remercions tout particulièrement Karine Joly, des éditions Eyrolles, qui nous a proposé cette aventure de fous et a géré avec brio notre approche très approximative de la littérature !

Merci à tous, ce livre est aussi le vôtre !

Quelques concepts clés pour bien démarrer
1

Le Web est une science relativement neuve, chargée de bon sens et de bonnes pratiques qui s’utilisent au fur et à mesure qu’elles se découvrent, et qu’il faudra découvrir au fur et à mesure qu’elles évoluent naturellement. Ce bon sens se déduit de valeurs simples qui s’énoncent clairement, comme l’accessibilité (universalité d’accès des contenus et services à tous les utilisateurs, quel que soit leur matériel, handicap…), les performances (qu’elles soient du côté des technologies serveur ou client), l’optimisation pour les moteurs de recherche (SEO, Search Engine Optimization), etc. Dans le contexte du responsive web design, le bon sens de notre réflexion viendra de plusieurs notions qu’il nous faudra également énoncer clairement, pour être sûr de bien les comprendre avant de nous lancer la tête la première.

RESPONSIVE ? ADAPTATIF ?

Qu’est-ce que le responsive web design ?

Avant de décortiquer finement un concept tel que le responsive web design, il serait bienvenu de le définir. Un site ayant été conçu selon ce principe est un site dont le design (fonctionnel ou graphique) change en fonction de la taille de l’écran sur lequel il est consulté (ou de la fenêtre du navigateur, selon votre choix de conception). En français, la traduction « design réactif » serait la plus juste, mais force est de constater que c’est le terme anglais qui s’est imposé.

L’amalgame est facile, mais ce concept est différent de celui des media queries ; ces dernières sont un outil technique de la spécification CSS3 qui permet d’exécuter des règles CSS en fonction de certaines conditions (la taille de l’écran n’est qu’une partie des 13 règles existantes dans la recommandation, à l’état final depuis le 19 juin 2012).

FIG. 1-1 : Capture d’écran de la recommandation finale CSS3 media queries publiée par le W3C

Recommandation finale CSS3 media queries

http://xav.cc/css2mq¹

L’évolution de la définition du terme « responsive web design »

Lorsqu’Ethan Marcotte a initialement écrit l’article « Responsive Web Design » sur le blog A List Apart, puis le livre du même nom...

Recueillir les besoins
2

Tout projet commence par un recueil des besoins détaillés par le client. Du premier contact à la qualification du projet, cette étape est cruciale car c’est elle qui va déterminer toute la suite. Prendre du temps lors de cette première étape, c’est s’assurer que le projet se déroulera dans les meilleures conditions, pour vous aussi bien que pour votre client.

Nous allons donc analyser les différentes étapes du recueil des besoins. Il va de soi que chaque projet est unique et chaque client a ses propres préoccupations. Pour cette raison, nous n’allons pas essayer de dresser un tableau exhaustif des besoins possibles, ni même essayer de définir des profils de clients. Non. Nous allons nous concentrer sur les points clés et, surtout, sur les points spécifiques à un projet de type responsive web design.

LA PRISE DE CONTACT : L’ÉTAPE FONDATRICE

Tout commence par une prise de contact. Elle peut être à votre initiative ou bien à celle du client, selon la qualité de votre réseau commercial. De deux choses l’une : soit le client vient directement à vous en vous exposant son projet, soit c’est vous qui allez au client, très souvent en répondant à un appel d’offres. Dans ce dernier cas, son examen peut déjà vous en dire long sur le projet.

L’art de lire un appel d’offres

Disséquer un appel d’offres est une étape importante dans la vie d’un projet. Soyons clair, sa lecture s’apparente beaucoup à une forme de voyance ; à tout le moins, sans sombrer dans le mysticisme, vous devrez savoir lire entre les lignes.

Avant même le projet en soi, un appel d’offres en dit beaucoup sur le client. Le formalisme du document vous en dira long sur sa capacité à structurer ses demandes. La précision dans l’usage des éventuels termes techniques vous permettra de déduire s’il les maîtrise, s’il fait croire qu’il les maîtrise ou s’il n’y connaît strictement rien.

• Dans le premier cas, il est important de s’assurer si cette maîtrise sera un avantage (vous pourrez parler ensemble de manière claire...

Rédiger le cahier des charges
3

Maintenant que vous vous êtes entendu avec le client et que, puisque le contrat est signé, vous savez que c’est vous qui allez réaliser le projet, il va falloir entrer dans les détails. Comme vous vous en doutez, on ne part jamais bille en tête dans un projet sans en définir le périmètre et sans savoir où l’on met les pieds. Bref, avant de planter un beau parterre de fleurs, on commence par débroussailler le terrain et on se renseigne sur le prix des graines.

L’étape préliminaire à tout projet est la rédaction du cahier des charges. Il s’agit de formaliser l’expression des besoins du client dans des documents structurés qui seront les tables de la loi du projet. Le cahier des charges définit les tenants et les aboutissants du projet. Il est loin d’être monolithique, mais se subdivise régulièrement en plusieurs documents :

• le cahier des charges fonctionnel, qui définit toutes les fonctionnalités attendues lors de la réalisation du projet ;

• le cahier des charges technique, qui pose toutes les bases techniques du projet : choix technologiques, définition des architectures matérielle et logicielle ;

• le cahier des charges graphique, qui regroupe tous les éléments liés au design du projet : planches tendance, charte graphique, détail des parcours...

Monter l’équipe projet
4

Bien que les choix qui restent à faire au cours du projet puissent encore avoir un certain effet sur les charges nécessaires pour les mettre à exécution, vous devriez maintenant avoir suffisamment les grandes lignes du projet en tête pour imaginer son déroulement approximatif dans son ensemble. Dans votre tête s’entrechoquent alors les diverses possibilités de planning et la combinaison parfaite des intervenants pour recouvrir tous les besoins, au bon moment.

Selon le type de structure dans lequel vous travaillez, cette tâche de « directeur de casting » web sera plus ou moins simple… et dans certains cas, totalement infaisable ! C’est pourtant un exercice qui aura des conséquences sévères sur le produit fini. Voila qui mérite une réflexion de fond…

Une particularité qui distingue le Web de beaucoup d’autres domaines est qu’il existe un nombre incroyable d’expertises à fouiller, qui évoluent toutes continuellement. Pour les passionnés du Web, c’est un excellent art de vivre : vous avez la garantie que vous ne cesserez jamais d’apprendre. En revanche, pour monter une équipe avec une expertise globale satisfaisante sur tous les fronts, cet état de fait rend la tâche très complexe.

Les lecteurs les plus cartésiens seront ravis de l’approche que nous allons suivre : nous tentons d’aborder ce problème complexe en le découpant en parties simples, que nous allons appeler les « rôles projet ».

COMMENT ORCHESTRER LES RÔLES PROJET ?

Avec un peu de recul, on constate que l’industrialisation de la réalisation de sites web est un concept relativement récent. Après tout, il y a dix ou quinze ans, un amateur seul au fond de son garage pouvait réaliser, sans autre assistance, un site web conforme à l’état de l’art : contenus basiques, peu voire pas du tout de services fonctionnels (les outils techniques n’existaient pas encore) et peu d’inquiétude quant au fait que les internautes accèdent tous au site dans des conditions optimales.

Aujourd’hui, les attentes liées au Web, qu’elles viennent des utilisateurs ou des annonceurs, ont spectaculairement augmenté et les sites web d’envergure doivent répondre à des contraintes couvrant une grande variété d’expertises, et donc de nombreux « rôles projet ».

Face à cette évolution, les travailleurs du Web d’aujourd’hui ne sont pas tous égaux. À une extrémité, les grands groupes piochant leurs profils dans un pool de sous-traitants ont peutêtre parfois la liberté, si leur budget le permet, de réunir un casting de rêve. Au milieu, les agences web s’appuient en priorité sur les ressources dont elles disposent déjà dans leurs rangs et doivent donc composer de manière équilibrée avec les compétences et les disponibilités de chacun. Enfin, à l’autre extrémité, les petits éditeurs de produits (de type « start-up », par exemple) devront compter sur des effectifs très limités et un panel d’expertises restreint pour parvenir à tout réaliser, malgré tout.

Ne paniquons pas et restons réalistes : de toute...

La préconception
5

La phase de pré-conception est une étape importante du projet. C’est elle qui va permettre de poser ses prérequis définitifs avant sa prise en main par l’équipe projet. C’est typiquement à ce moment là que l’on définit le périmètre exact de ce que le client appelle « responsive ». À cette occasion, il n’est pas rare que l’on produise des prototypes ou des POC (Proof Of Concept) pour obtenir les premières validations du client.

LES APPROCHES DE CONCEPTION

Les projets responsive sont souvent plus difficiles à mettre en œuvre car ils demandent de faire le grand écart entre des conditions d’utilisation parfois radicalement différentes. Entre, d’un côté, un ordinateur de bureau avec connexion ADSL, clavier, souris et écran 27 pouces et, de l’autre, un smartphone avec connexion EDGE, interface tactile et écran de 3,5 pouces, la différence est énorme. Et pourtant, il va vous falloir gérer l’affichage d’un même site et ses interactions sur ces deux environnements, ainsi que sur tous les systèmes intermédiaires imaginables.

Pour cette raison, il est nécessaire de passer un temps beaucoup plus important en conception, le nombre de points à prendre en compte étant bien plus élevé. Cependant, pour ne pas sombrer dans le piège d’une conception qui n’en finit jamais, ce travail peut être orienté de diverses manières.

« Mobile first » : le mobile d’abord !

Une des approches de conception les plus connues est celle appelée mobile first. Cette méthode recommande de commencer par la conception mobile, qui comprend le plus souvent les appareils les plus petits : petit écran, petit processeur, petite connexion. C’est une logique de contrainte maximale : si ça passe dans ces conditions, ça passera forcément avec de meilleures conditions !

Cette logique de contrainte maximale oblige à se concentrer sur les points essentiels du projet : les contenus et les fonctionnalités les plus importants. De plus, les tout petits écrans des smartphones supportent difficilement les mises en page complexes ; le réflexe habituel est donc de tout linéariser sur une seule colonne, le plus efficace étant même d’adopter une logique de « une page égale une fonctionnalité unique ». Cela aussi est très pratique, car cela permet de formater...

Après la mise en production
12

Félicitations ! Votre recette applicative est maintenant terminée, le client est suffisamment satisfait du résultat pour considérer qu’il n’y a plus de raisons de cacher ce bel ouvrage aux yeux du public. Certes, il reste peut-être un bug ou deux par-ci par-là et toutes les fonctionnalités secondaires ne sont peut-être pas encore intégrées (a fortiori si vous menez ce projet en mode agile), mais le choix est tranché : pourquoi attendre plus longtemps, alors que nous avons déjà un site tout à fait fonctionnel et satisfaisant ?

Une fois le site en ligne, tous vos amis et ceux du client – a minima – s’y rendent dans la foulée et vous remontent une quantité de détails que vous n’aviez pas remarqués (tous sans gravité ou, en tout cas, on vous le souhaite !) Ces premières...