Projet responsive web design , livre ebook

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, 3 e é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, 3 e é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, 3 e é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, 2 e é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
TABLE DES MATIÈRES
Avant-propos
Remerciements
CHAPITRE 1
Quelques concepts clés pour bien démarrer
Responsive ? Adaptatif ?
Amélioration progressive et dégradation élégante
Le lâcher-prise du Web
Rappel sur les méthodologies de gestion de projet
CHAPITRE 2
Recueillir les besoins
La prise de contact : l’étape fondatrice
Faire parler le client et l’écouter
Le projet est-il manifestement responsive