Học lap trình Web với các ngôn ngữ CSS3, HTML 5 và Javascript. Dành cho các bạn sinh viên, người muốn tìm hiểu để làm các trang web đẹp, các design thiết kế frontend một ứng dụng web. Sách bằng tiếng anh Cách làm một trang web có tính co giãn, phù hợp với các loại màn hình, các thiết bị như màn hình máy vi tính, điện thoại, máy tính bảng
DESIGN Prộface de Kaelig Deloumeau-Prigent Jộrộmie Patonnier R u d y Rigot Projet Responsive Web Design DU RECUEIL DES BESOINS LA MISE EN LIGNE RẫUSSIR SA CONDUITE DE PROJET EN RESPONSIVE WEB DESIGN Adapter laffichage dun site web toutes les tailles dộcrans pour rộpondre aux besoins des internautes dans tous les contextes dutilisation : un dộfi lheure 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 dindustrialisation dun 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 dun 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 aujourdhui ! 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 DESIGN Graphiste de formation, Jộrộmie Patonnier est aujourdhui 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 dinnovation Zenexity, Rudy Rigot fut lun 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 Code G13713 ISBN 978-2-212-13713-2 Conception Nord Compo AU SOMMAIRE Projet Responsive Web Design DU RECUEIL DES BESOINS LA MISE EN LIGNE Dans la collection ô Design Web ằ Intộgration web: les bonnes pratiques Le guide de survie de lintộgrateur! Corinne Schillinger N13370, 2012, 412 pages CSS maintenables avec Sass & Compass Outils et bonnes pratiques pour lintộgrateur web Kaelig Deloumeau-Prigent N13417, 2012, 272 pages Design dexpộrience utilisateur Principes et mộthodes Sylvie Daumal N13456, 2012, 192 pages Rộfộrencement mobile Web Analytics et stratộgie de contenu Isabelle Canivet Bourgaux N13667, paraợtre 2013, 400pages Card Sorting Ne perdez plus vos internautes! Gautier Barrốre et ẫric Mazzone N13448, 2012, 108 pages La stratộgie de contenu en pratique 30 outils passộs au crible Isabelle Canivet et Jean-Marc Hardy N13510, 2012, 170 pages Dans la collection ô A Book Apart ằ Stratộgie de contenu mobile Karen McGrane N13675, 2013, 172pages Responsive Web Design Ethan Marcotte N13331, 2011, 160pages Mộtier web designer Mike Monteiro N13527, 2012, 156pages Stratộgie de contenu web Erin Kissane N13279, 2011, 96pages Mobile first Luke Wroblewski N13406, 2012, 144pages CSS3 pour les Web designers Dan Cederholm N12987, 2011, 132pages Design ộmotionnel Aarron Walter N13398, 2011, 110pages HTML5 pour les Web designers Jeremy Keith N12861, 2010, 98pages Chez le mờme ộditeur Mộmento Performances web Armel Fauveau et Lionel Pointet N 13658, 2013, 18pages Rộussir son rộfộrencement web Olivier Andrieu N13664, 2013, 552pages Mộmento Sites web: les bonnes pratiques ẫlie Sloùm N12802, 3e ộdition, 2010, 18pages CSS avancộes Vers HTML5 et CSS3 Raphaởl Goetter N13405, 2e ộdition, 2012, 385pages Accessibilitộ web Normes et bonnes pratiques pour des sites plus accessibles Armony Altinier N12889, 2012, 320 pages HTML5 Une rộfộrence pour le dộveloppeur web Rodolphe Rimelộ N12982, 2011, 604pages Ergonomie web Pour des sites web efficaces Amộlie Boucher N13215, 3e ộdition, 2011, 356 pages Relever le dộfi du Web mobile Bonnes pratiques de conception et de dộveloppement Franỗois Daoust et Dominique Hazaởl-Massieux N12828, 2011, 300pages Ergonomie web illustrộe 60 sites la loupe Amộlie Boucher N12695, 2010, 336 pages Gestion de projet agile Avec Scrum, Lean, eXtreme Programming Vộronique Messager N13666, 2013, 294pages Bien rộdiger pour le Web Stratộgie de contenu pour amộliorer son rộfộrencement naturel Isabelle Canivet N13750, 3e ộdition, 500 pages Coacher une ộquipe agile Guide lusage des ScrumMasters, chefs de projet, managers et de leurs ộquipes! Vộronique Messager N13414, 2012, 324pages 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 dExploitation du Droit de Copie, 20, rue des Grands Augustins, 75006 Paris â Groupe Eyrolles, 2013 ISBN : 978-2-212-13713-2 un grand philosophe, Daniel Rigot, qui se trouve ờtre mon pốre et que jai toujours entendu parler dộcrire son propre livre Tu vois, au final, tu lauras ộcrit travers moi R.R PRẫFACE Lorsque jai commencộ bricoler des pages web dans le bureau de la maison familiale, je navais pas de connexion Internet Pour mettre ces pages en ligne, lopộration ộtait un poil compliquộe : il sagissait de compresser au maximum les fichiers (et notamment les images) pour les stocker sur une disquette (1,44Mo) Celle-ci ộtant parfois capricieuse, chaque fichier ộtait dupliquộ une ou deux fois, histoire de sassurer quil serait rộcupộrable Je me rendais ensuite la mộdiathốque (ộquipộe dordinateurs 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 aujourdhui? 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 lon revient une recherche forcenộe de loptimisation des pages La rapiditộ daccốs linformation est devenue cruciale, alors que les conditions de navigation sur mobile sont aussi variables quimprộvisibles La spectaculaire pộnộtration du marchộ par les smartphones et les tablettes a bouleversộ notre modốle de conception, chose que personne naurait soupỗonnộe avant larrivộe de liPhone 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ộ dun 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 1024ì768pixels 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 P R ẫ FA C E vii La question qui se pose est celle de la livraison de nos contenus ce panel grandissant de pộriphộriques et dusages 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 nest 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 quil est possible de produire des sites qui sadaptent intelligemment aux platesformes de nos utilisateurs, quel que soit le contexte dans lequel ils accốdent linformation Le concept de base derriốre cette idộe, quEthan 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 quelle sont sans aucun doute le futur de la chaợne de conception web Adopter cette approche permettra darchitecturer des produits qui fonctionnent sur les navigateurs dhier et daujourdhui, tout en restant accessibles sur les pộriphộriques du futur En creusant le sujet, on se tournera vers ladaptive web design (design adaptatif ), grõce auquel on saura proposer des dộclinaisons du mờme document pour quil 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 lintộrờt que la communautộ des professionnels du Web porte au responsive web design, mais il ne sagit 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 lintộgration Auteur du livre CSS maintenables avec Sass et Compass, aux ộditions Eyrolles http://kaelig.fr viii PROJET RESPONSIVE WEB DESIGN possibilitộ dajouter un champ vos tickets, qui spộcifie clairement des intervalles de largeurs dộcrans Cest une maniốre intelligente de sassurer que linformation nest pas oubliộe, lorsquelle est pertinente Par analogie, si votre site contient certaines fonctionnalitộs adaptatives (tracộ ditinộraire masquộ si le terminal ne dispose pas de gộolocalisation, communication vidộo non disponible si le navigateur ne sait pas rộcupộrer le flux de lộventuelle webcam du client ), il est toujours pertinent, pour les bugs touchant ces fonctionnalitộs, de spộcifier clairement les platesformes sur lesquelles ils sont constatộs (systốme dexploitation, nom et version du navigateur) Si cest une bonne pratique que vous aviez dộj mise en uvre pour vos autres projets, tant mieux, vous ne pourrez dộsormais plus vous en passer! Dans tous les cas, la reproduction du bug est potentiellement plus difficile que dhabitude Il faut alors faire appel aux techniques habituelles, mais appliquộes plus systộmatiquement Par exemple, nhộsitez pas ờtre trốs spộcifique sur le dộtail du mode opộratoire Par ailleurs, puisquil peut ờtre plus difficile de simuler les conditions front-end dautrui, une simple capture dộcran est quelquefois trốs salvatrice pour comprendre le problốme en un clin dil! Lexercice de la recette lexception de linhabituel nombre de plates-formes applicatives sur lesquelles tester, lexercice de la recette en lui-mờme sera relativement similaire nos habitudes Le piốge interviendra avant tout lors des retours de bugs: il faudra, comme dhabitude, contrụler leur correction convenablement, mais aussi sassurer que celle-ci nengendre pas deffets de bord sur les autres versions de largeurs dộcrans Sil faut bien penser tester toutes les versions, il existe un critốre sur lequel il ne faut pas se focaliser: les animations entre E ffectuer la recette applicative 147 versions ! Certes, il est toujours constructif de sassurer de conserver un site accessible en cas de redimensionnement du navigateur desktop par lutilisateur, mais souvenez-vous quil sagit dun cas dutilisation marginal et que la mouvance visant peaufiner les transitions dune largeur dộcran une autre a tout de leffet de mode Si les utilisateurs rộels ont besoin de redimensionner leur ộcran (ne serait-ce quen basculant du mode portrait en mode paysage sur leur pộriphộrique mobile), seuls nous autres web-geeks nous amusons retailler les navigateurs pour le plaisir des yeux! 148 PROJET RESPONSIVE WEB DESIGN 12 Aprốs la mise en production Fộlicitations! Votre recette applicative est maintenant terminộe, le client est suffisamment satisfait du rộsultat pour considộrer quil ny 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 sy rendent dans la foulộe et vous remontent une quantitộ de dộtails que vous naviez pas remarquộs (tous sans gravitộ ou, en tout cas, on vous le souhaite !) Ces premiốres opinions externes donnent quantitộ didộes dộvolutions pour le site que le client commence formuler Comment sy prend-on, alors? Cest tout lart de la TMA (tierce maintenance applicative) A prốs la mise en production 149 Contractuellement, la TMA (tierce maintenance applicative) est toujours un exercice de style Si votre projet ộtait vendu avec une obligation de rộsultat, le client vous a potentiellement imposộ une pộriode de garantie, mais vous devez mettre un point dhonneur ny accepter que les bugs (cest--dire des diffộrences claires entre les spộcifications et le fonctionnement observộ) Que faire alors des bugs dộcouverts aprốs cette pộriode et de toutes les ộvolutions? Deux choix soffrent vous: soit ces ộvolutions et ces bugs sont connus aujourdhui et facilement chiffrables, auquel cas il est possible de les regrouper simplement en un projet qui ressemblera contractuellement nimporte quel projet (rộgie? forfait? agile? les mờmes questions se posent nouveau ); soit le client a besoin de disponibilitộ continue pour rộsoudre des problốmes encore inconnus, qui surviendront avec le temps, au jour le jour Dans ce cas, vous pouvez partir sur la rộservation pour lui dun contingent de xjours par mois La difficultộ est, comme pour tous les projets, dộvaluerx en fonction dun nombre inconfortable de facteurs, parmi lesquels la vộlocitộ de lộquipe de TMA (avec qui vous venez peut-ờtre tout juste de faire connaissance), la complexitộ et la maintenabilitộ de lapplication web, ainsi que le nombre de problốmes qui surviendront chaque mois TMA On dit de la TMA que cest une ôtierceằ maintenance applicative, car elle est frộquemment rộalisộe par une autre ộquipe que celle qui a dộveloppộ le projet Que ce soit rộellement le cas ou non, on dộsigne tout de mờme en ces termes les modifications apportộes au projet au-del de la couverture fonctionnelle contractualisộe pour la rộalisation du site, le plus frộquemment aprốs sa mise en production 150 PROJET RESPONSIVE WEB DESIGN Le contexte contractuel de ces opộrations (inclus dans le contrat initial en tant que pộriode de garantie, dộpenses supplộmentaires prộvues dans le contrat initial, dộpenses supplộmentaires encadrộes par un avenant au contrat ) est fortement dộpendant de laccord que vous avez avec votre client et, bien souvent, il existe autant de modalitộs de TMA que de clients, voire de projets! Dans ce chapitre, nous ộvoquons indiffộremment nimporte quelle forme contractuelle de maintenance ou dộvolution dun projet web aprốs sa mise en production LE DILEMME HABITUEL: TROUVER LE BON CONSULTANT DE TMA Dans la mộthodologie agile Scrum, il est clairement spộcifiộ que lộquipe doit rester la mờme du premier au dernier jour du projet, car linverse peut entraợner trois consộquences: une perte de qualitộ, une perte de temps et une totale impossibilitộ de calculer la vộlocitộ de lộquipe Mờme si cet enseignement est clairement ộnoncộ dans le manifeste Scrum, il nen reste pas moins effectif dans les autres types de projets Si certaines agences web peuvent se permettre de conserver les mờmes acteurs sur un projet aprốs sa mise en production, pour dautres, cela est totalement irrộaliste en termes de gestion du personnel Il faudra alors accepter que la perte de temps, la perte de qualitộ et la perte de toute information sur la vộlocitộ de lộquipe sont inộvitables On peut toutefois diminuer la perte de qualitộ en donnant la nouvelle ộquipe lopportunitộ de mettre en place une vộritable continuitộ avec les mộthodes de lộquipe sortante Globalement, le choix dun intervenant de TMA sur un rụle particulier peut ờtre effectuộ en se posant les questions suivantes, dans lordre A prốs la mise en production 151 Le consultant qui ộtait en poste lors de la rộalisation du projet sera-t-il disponible pour gộrer la TMA ? Si oui, vous avez bien ộvidemment dộj sous vos yeux votre consultant TMA idộal ! Si non, poursuivez avec les autres questions Le consultant qui ộtait en poste lors de la rộalisation du projet sera-t-il disponible de temps en temps, pour intervenir en qualitộ de conseil auprốs de lộquipe TMA? condition daccepter de lui rộserver un temps suffisant, cette solution peut savộrer trốs efficace Existe-t-il un consultant disponible pour gộrer la TMA qui soit trốs familier avec les mộthodes du consultant sortant? Cette question est particuliốrement pertinente pour les mộtiers faiblement industrialisộs : dộfaut dindustrialisation technique reconnue, privilộgions lhumain! Le consultant sortant laisse-t-il derriốre lui une documentation dộtaillộe sur sa mộthodologie? Le travail peut ờtre fastidieux, mais reste alors votre derniốre opportunitộ doffrir une continuitộ Le niveau dindustrialisation du mộtier en question (industrialisation publiquement reconnue, dune part, mais surtout, lindustrialisation rộellement appliquộe au cours du projet) rendra ce besoin de continuitộ plus ou moins relatif: les consultants en infrastructure dhộbergement, suivant la lettre des rốgles prộcises de sộcuritộ infrastructurelle, seront plus facilement interchangeables que des consultants en design fonctionnel, utilisant potentiellement des outils diffộrents Dans tous les cas, mờme si le consultant prộsent en cours de projet est disponible (solution n1 dans notre liste), on ne peut pas compter sur cette issue de maniốre pộrenne: ce consultant peut trốs bien quitter lentreprise ou navoir plus de souvenirs de ses mộthodes lộpoque de la rộalisation du projet (si plusieurs mois se sont ộcoulộs), et vous serez alors soulagộ davoir mis 152 PROJET RESPONSIVE WEB DESIGN en place un plan de continuitộ plus avancộ, surtout par le biais dune documentation (solution plus pộrenne que de compter sur la connaissance par chacun des mộthodologies des autres) UNE DIFFICULTẫ: LA CONTINUITẫ DU TRAVAIL DINTẫGRATION Dans le cas dun projet responsive, la problộmatique reste la mờme, mais elle est beaucoup plus stratộgiquement positionnộe autour du travail dintộgration front-end Cet effet a deux causes: il sagit non seulement de lune des expertises les plus cruciales du projet, mais aussi dun domaine encore mal industrialisộ Ainsi, mờme une mộthodologie de travail appliquộe la lettre par lintộgrateur lors de la rộalisation du projet ne suffira pas, puisquil nexiste pas vộritablement de mộthodologie globalement reconnue Tout le soin du monde nempờchera pas que le prochain consultant pourrait trốs bien ờtre un parfait ộtranger ne connaissant pas la mộthode que vous avez si soigneusement appliquộe Aux mờmes causes, les mờmes effets : sil est impossible que leffort soit encadrộ par le mờme expert front-end que pendant la rộalisation, il faudra privilộgier la passation la plus douce possible On sappuiera le plus possible sur de la documentation, ou mieux, on sộlectionnera en TMA un expert frontend trốs familier avec les mộthodes de celui qui a fait le travail jusqu maintenant Il existe un effet pervers supplộmentaire, apportộ par lộvolution rapide des bonnes pratiques dans le domaine du responsive web design actuellement: le mờme intộgrateur peut trốs bien intervenir en TMA quelques mois plus tard sur le projet, mais avoir complốtement changộ sa maniốre daborder les projets entre-temps Il peut rộellement arriver que le changement soit si intense que la situation sera trốs similaire celle oự lintộgrateur est un nouvel intervenant sur le projet Encore une fois, A prốs la mise en production 153 cest la documentation laissộe lộpoque qui sauvera la situation; lintộgrateur, en se relisant, retrouvera naturellement son chemin Il en va de lộvolutivitộ du projet : mờme si la modification de la conception fonctionnelle (notamment via la retouche des prototypes fonctionnels initiaux) peut sembler impressionnante au premier abord, dans le contexte responsive, on saperỗoit lusage quelle nest pas particuliốrement complexe en tant que telle En revanche, elle remet parfois en question des partis pris fondateurs qui avaient ộtộ actộs par lintộgrateur pour correspondre cette conception initiale Cest donc bel et bien sur la continuitộ du travail dintộgration que se situe le risque le plus fort 154 PROJET RESPONSIVE WEB DESIGN APRẩS-PROPOS: LE MOT DE LA FIN Eh bien, voil, cest fini! Ou plutụt non, cest maintenant que tout commence Ce livre est lun des tout premiers traiter de la gestion de projet menộ en responsive web design, mais cest loin dờtre le dernier Notre petite ambition, si jamais il y en eut une, ộtait de poser les premiốres bases dun terrain beaucoup plus vaste En effet, le responsive web design est trốs largement traitộ ici et l dans sa dimension technique ; on ne remerciera dailleurs jamais assez Ethan Marcotte pour tout ce quil a pu ộcrire en la matiốre Cependant, force de travailler sur des projets web de cette nature, nous navons pu que constater limmense absence de littộrature concernant les aspects pratiques de la gestion de projet Dans ce domaine, les pratiques ộvoluent tous les jours et les prestataires, aussi bien que les clients, gagnent en maturitộ Nous ne sommes donc pas inquiets : une bonne partie de ce que nous avons ộcrit ici va devenir obsolốte dans les mois et annộes venir Aussi surprenant que cela paraisse, surtout si vous avez dộpensộ de largent pour faire lacquisition de cet ouvrage (au fait, merci!), cest une excellente nouvelle En effet, le responsive web design et son petit frốre, le design adaptatif, ne sont sans doute que la partie ộmergộe dun Web actuellement en pleine rộvolution Lapparition du Web mobile a forcộ les dộveloppeurs et concepteurs de sites retrouver des contraintes quon croyait oubliộes (petits ộcrans, faibles ressources de calcul, rộseaux lents) En parallốle, les navigateurs deviennent de plus en plus puissants, ces simples liseuses de documents se transformant en de vộritables plates-formes dexộcution applicative Tout cela va pousser de profondes remises en question de la gestion des projets web De nouveaux modốles vont apparaợtre, de nouvelles mộthodologies, de nouvelles pratiques Essais, erreurs Que de moments passionnants devant nous Vivement demain! Comme vous le voyez, le sujet est nouveau et vaste, aussi navons-nous finalement fait quouvrir une porte, que nous A P R ẩ S - P R O P O S : L E M OT D E L A F I N 155 vous invitons franchir Nous navons en aucune maniốre eu la prộtention dờtre exhaustifs ni mờme visionnaires Nous avons simplement voulu partager notre expộrience des problộmatiques rencontrộes quotidiennement sur ce sujet Dộsormais, la balle est dans votre camp: faites-vous votre propre idộe, expộrimentez et, finalement, partagez votre tour votre savoir-faire Ils seront nombreux, nous les premiers, vous en remercier 156 PROJET RESPONSIVE WEB DESIGN PROPOS DES DEUX AUTEURS Jộrộmie Patonnier Au sortir dộtudes dimprimerie et darts appliquộs, Jộrộmie se lance dans le Web en tant que designer web Il dộcouvre alors le dộveloppement informatique, trouve ỗa rigolo et dộcide de devenir dộveloppeur web Comme ỗa ne lui suffit toujours pas, il dộcide de passer au management en devenant responsable dộquipe web Aprốs toutes ces tribulations, il est maintenant consultant web pour lagence parisienne du cabinet dexpertises Clever Age, oự il fait bộnộficier ses clients de son expertise aussi bien cụtộ serveur que cụtộ client cụtộ de ỗa, il mốne plusieurs projets de front, qui ont tous pour objectif de donner aux designers et dộveloppeurs web toutes les connaissances nộcessaires pour bien faire leur travail Cofondateur des sites typographisme.net et letrainde13h37.fr, il est ộgalement contributeur au projet Mozilla, oự il participe la documentation des technologies du Web ouvert sur le Mozilla Developer Network (MDN) Il intervient rộguliốrement en tant quorateur des confộrences, aussi bien en France (Sud Web, Paris Web) qu lộtranger (The Graphical Web) Rudy Rigot Rudy est un passionnộ du Web sous toutes ses approches : tombộ dedans par la technique (en gagnant ses premiers galons au cur du dộveloppement Java/JEE), il a ensuite trouvộ son bonheur dans dautres contrộes, du design fonctionnel au webmarketing, et surtout, dans la jonction de tous ces mộtiers Toujours laffỷt de nouvelles choses apprendre, mais aussi soucieux de partager ses dộcouvertes, il intervient comme orateur dans diverses confộrences et comme auteur dans divers magazines professionnels Il est aussi lun des membres fondateurs des confộrences Sud Web, qui ont lieu depuis 2011 P R O P O S D E S AU T E U R S 157 Lorsque le responsive web design a ộmergộ, il a ộtộ parmi les premiers mettre en garde quant aux impacts sur les processus habituels de conception et de gestion de projet (notamment lors de son intervention aux confộrences Front Row Cracovie, en octobre 2011, ou dans un article publiộ en avril 2012 par le magazine en ligne Dev.Opera) Il doit son apprentissage et ses travaux de recherche sur le responsive web design la collaboration efficace avec ses collốgues de lagence Clever Age, pendant quatre ans Depuis, il a dirigộ le produit Steerious (fondộ par Clever Age, et aidant les organisations piloter leur stratộgie numộrique) et fait maintenant partie du think-tank dinnovation web Zenexity (dont le produit phare est le framework Play) 158 PROJET RESPONSIVE WEB DESIGN INDEX A accessibilitộ 7, 72, 83 Adaptive Images 124 adaptive web design 10 agence web 60 agile (mộthode) 19 Allsopp, John 14 amộlioration continue 60 progressive 13 AMOA (assistance maợtrise douvrage outillộe) 24 appel doffres 24 architecte back-end 55 infrastructurel 55 B budget 33, 90 bug 145 bugtracker 146 C cahier des charges 37 fonctionnel 37 graphique 38 prioritộs 38 technique 37 card sorting 57 CATEEA (charte) 47 charte graphique 92 chef de projet 49, 77, 83, 114 client 27 prise de contact 24, 26 colonne 72, 73 composant graphique 93 conception 77 approches 63 outils 74 contributeur 56, 127 formation 128 gestion des images 122 recette 132 texte 131 coỷt 32, 78 design graphique 87 CSS (Cascading Style Sheet) @font-face 95 media queries 8, 71, 102 pixel 100 transform 100 D dộgradation ộlộgante 11 dộlais design graphique 88 mộthodes agiles 20 design adaptatif 10 dexpộrience utilisateur 57 ộmotionnel 51 graphique 87 persuasif 52 designer 78 dexpộrience utilisateur (UX) 57 fonctionnel 52 graphique 53 design pattern 59 dộveloppement back-end 109 front-end 97, 109, 119 dộveloppeur back-end 110, 115 front-end 59 directeur artistique 51, 92 interactif 57 documentation 106, 120, 152, 153 E ộcran capacitộs 102 largeurs ộditorial 127 ộquipe 45 rụle projet 46, 48, 77 ergonome 57 expộrience utilisateur 31, 65 conception 78 design 57 INDEX 159 JavaScript 104 services tiers 118 F L Facebook 31, 60 fichier source graphique 94 fluiditộ 121 fonte licence 95 unitộs de mesure 68 framework de dộveloppement rapide 75 HTML 81 G gabarit 67, 89 fluide 69 horizontal 70 paginộ 70 gestion de projet 15 cycle en V 17 en forfait 18 mộthode agile 19 modốle en cascade 16 grille typographique 72, 80 Gustafson, Aaron 10 I iframe 117 image 98, 102 contribution 128 gestion cụtộ serveur 121 optimisation cụtộ serveur 103 redimensionnement 122 redimensionnement non homothộtique 130 industrialisation 3, 46, 152 intộgrateur 54, 58, 110, 114, 119 expert 78 intộgration 80, 97 continuitộ 154 documentation 106 gestion des images 98 stratộgie de test 104 internationalisation 134, 136 iPad mini 72 160 J expertise 45 amộlioration continue 60 sộparation 111 eye-tracking 57 PROJET RESPONSIVE WEB DESIGN lõcher-prise 14, 40, 137 livrable graphique 91 liste des tailles dimages 128 prototype 82 lorem ipsum 80 M maintenance 151 Marcotte, Ethan 9, 97, 121, 155 mộtier 48, 56 mise en page 135 mobile first 64 N navigateur de bureau 104 desktop 142 mobile 105, 143 moteur de rendu 141 recette 141 O objectifs du projet 27 Opera Mini 144 P performances 7, 31 images 102 persona 57 persuasive design 52 Photoshop 90 pixel 68, 98 CSS 99, 100, 101 OS 100, 101 physique 99, 101 plate-forme cible 40, 41, 42 point de rupture 44, 71, 73 police de caractốres 95, 132 licence 95 unitộs de mesure 68 prộ-conception 63 product owner 49 projet contraintes 29, 38 objectifs 27 pộrimốtre 40 responsive ou non ? 30 prototypage 78, 79 retours 82 publicitộ 115 R recette applicative 139 contributeurs 128 contribution 132 exercice 147 interne 112 matộriel 140 technique (back-end) 113 tickets 145, 146 virtualisation 142 recueil des besoins 23 responsive web design 8, retina display 99 test back-end 111 contributions 132 navigateurs 104 recette 141 stratộgie 104 utilisateur 57, 65 TMA (tierce maintenance applicative) 149, 150 Twitter 31 typographie 95, 132 U unitộ de mesure 68, 69 user first 65 utilisateur conception centrộe ~ 65 tests 57 UX designer 65 V veille 62 viewport 69, 100 virtualisation 105 S W Scrum 151 service tiers 117 war room 91 wireframe 75 T Z TDD (Test Driven Development) 114 Zeldman, Jeffrey 9, 10 INDEX 161 [...]... le design adaptatif ? Le concept de responsive web design est très souvent injustement confondu avec celui d’adaptive web design ou design adaptatif ; c’est excusable, car tous deux partagent davantage que des sonorités voisines Tout comme le responsive web design, l’adaptive web design est présenté par son propre livre, écrit par Aaron Gustafson (Jeffrey Zeldman en signe la préface) Alors que le responsive. .. Fig. 1-1 : Capture d’écran de la recommandation finale CSS3 media queries publiée par le W3C 8 PROJET RESPONSIVE WEB DESIGN Recommandation finale CSS3 media queries http://xav.cc/css2mq1 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 (initialement aux éditions... l’occasion de participer à un projet responsive d’envergure, vous vous êtes alors aperçu que la 2 PROJET RESPONSIVE WEB DESIGN complexité de mise en œuvre de ce type de projets grimpe en flèche en même temps que la complexité du projet En prenant un peu de recul, vous vous êtes alors certainement fait cette réflexion, que nous nous sommes faite nous-mêmes : ce n’est pas le design qui se complique, ce... pour un même contexte), tandis que le responsive web design apportera souvent plusieurs réponses : en effet, la taille peut changer soit parce qu’on retaille la fenêtre du navigateur (pour un système d’exploitation multifenêtre), 3 http://www.zeldman.com/2011/07/06 /responsive- design- i-dont-think-thatword-means-what-you-think-it-means/ 10 PROJET RESPONSIVE WEB DESIGN soit parce qu’on change l’orientation... esthétique parfaite À lire : A Dao of Web design http://xav.cc/dao4 4 http://alistapart.com/article/dao, traduction en français disponible à http://www.pompage.net/traduction/dao 14 PROJET RESPONSIVE WEB DESIGN Plus d’une décennie plus tard, ce message résonne encore beaucoup alors que les terminaux ayant accès au Web se multiplient, et avec eux, les moyens d’interagir avec le Web Du navigateur très limité... sur un projet web, qu’on ne valide une phase que partiellement pour pouvoir déclencher une partie de la suivante ; bien évidemment, nous ne recommandons pas cette pratique, bien qu’elle puisse se révéler indispensable pour rattraper des glissements de planning avec un minimum de perte de qualité 16 PROJET RESPONSIVE WEB DESIGN Fig. 1-3 : Un exemple simplifié de modèle en cascade pour un projet web typique... chapitre 3 37 Rédiger le cahier des charges Les principales contraintes d’un projet Définir le périmètre du projet 38 40 chapitre 4 45 Monter l’équipe projet 46 48 56 60 Comment orchestrer les rôles projet ? L’évolution des rôles projet typiques dans un contexte responsive Les changements en cours dans les métiers du Web L’amélioration continue des expertises TA B L E D E S M AT I È R E S ix... fluides et les images fluides) pour permettre une nouvelle approche moins contraignante (d’un point de vue design) de la fabrication des pages flexibles http://xav.cc/rwd-article2 E Marcotte, Responsive Web Design, A Book Apart, Eyrolles, 2011 Seulement voilà, la découverte du responsive web design et sa publication ont été réalisées sous l’égide d’un certain Jeffrey Zeldman (fondateur du magazine... 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 Q U E LQ U E S C O N C E P T S C L É S P O U R B I E N D É M A R R E R 7 RESPONSIVE ? ADAPTATIF ? Qu’est-ce que le responsive web design ? Avant de décortiquer finement... méthodologies traditionnelles de gestion de projet : V. Messager, Gestion de projet agile, Eyrolles, 2013 Si vous souhaitez mettre en œuvre la méthode Scrum (la plus complète et la plus populaire), nous vous conseillons d’approfondir le sujet avec le livre : A Vannieuwenhuyze, Scrum, une méthode agile pour votre projets, ENI, 2013 22 PROJET RESPONSIVE WEB DESIGN ... loccasion de participer un projet responsive denvergure, vous vous ờtes alors aperỗu que la PROJET RESPONSIVE WEB DESIGN complexitộ de mise en uvre de ce type de projets grimpe en flốche en... P O U R B I E N D ẫ M A R R E R RESPONSIVE? ADAPTATIF? Quest-ce que le responsive web design? Avant de dộcortiquer finement un concept tel que le responsive web design, il serait bienvenu de le... queries publiộe par le W3C PROJET RESPONSIVE WEB DESIGN Recommandation finale CSS3 media queries http://xav.cc/css2mq1 Lộvolution de la dộfinition du terme responsive web design LorsquEthan Marcotte