Download - Projet Responsive Web Design.pdf

Transcript
  • 8/11/2019 Projet Responsive Web Design.pdf

    1/175

    Jrmie Patonnier

    Rudy Rigot

    ProjetResponsiveWeb Design

    DU RECUEIL DES BESOINS LA MISE EN LIGNE

    DESIGN

    Prface de Kaelig Deloumeau-Prigent

  • 8/11/2019 Projet Responsive Web Design.pdf

    2/175

    RUSSIR SA CONDUITE DE PROJET

    EN RESPONSIVE WEB DESIGN

    Adapter laffichage dun site web toutes les tailles dcrans pour

    rpondre aux besoins des internautes dans tous les contextes dutilisa-tion : un dfi lheure o le Web mobile a envahi notre quotidien !

    Permettant de crer des sites qui ragissent intelligemment lcran

    sur lequel ils sont consults (ordinateur, smartphone, tablette), le

    responsive web designconvainc de plus en plus de concepteurs web.

    Mais alors que la pratique se rpand, comment adapter les processus

    dindustrialisation dun projet web ces nouvelles mthodes ?

    Au-del de la mise en uvre technique, ce livre accompagne le chef deprojet, mais aussi tous les intervenants (designers, dveloppeurs), tout

    au long du droulement dun projet, prvenant contre les embches

    et proposant des rponses aux dfis techniques et humains que cette

    adaptabilit ne manque pas de poser.

    Un guide indispensable pour apprhender de manire dtendue

    la gestion de projet web aujourdhui !

    AU SOMMAIRE

    Responsive ou adaptatif ? Quelques

    notions cls pour bien commencer

    Recueil des besoins et cahier des charges

    Monter lquipe projet

    Conception, design graphiqueet intgration

    Dveloppement back-end

    Rle et formation des contributeurs

    ditoriaux

    Recette applicative et TMA

    CodeG13713

    ISBN9

    78-2-212-13713-2

    ConceptionNordCompo

    Graphiste de formation, Jrmie

    Patonnierest aujourdhui expert en

    dveloppement 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 Rigotfut lun des premiers signaler les

    consquences du responsive web

    designsur la gestion de projet.

    Tous deux interviennent dans des

    confrences de renom en France

    (Paris Web, Sud Web) comme

    ltranger.

    DESIGN

  • 8/11/2019 Projet Responsive Web Design.pdf

    3/175

    ProjetResponsive

    Web DesignDU REC UEIL DES BE SOINS

    LA MISE EN L IGNE

  • 8/11/2019 Projet Responsive Web Design.pdf

    4/175

    Chez le mme diteur

    Mmento Performances web.Armel Fauveau et Lionel Pointet.N 13658, 2013, 18 pages.

    Mmento Sites web : les bonnes pratiques.lie Slom.

    N12802, 3edition, 2010, 18 pages.

    Accessibilit web.Normes et bonnes pratiquespour des sites plus accessibles.Armony Altinier.N12889, 2012, 320 pages.

    Ergonomie web.Pour des sites web efcaces.Amlie Boucher.N13215, 3edition, 2011, 356 pages.

    Ergonomie web illustre.60 sites la loupe.

    Amlie Boucher.N12695, 2010, 336 pages.

    Bien rdiger pour le Web.Stratgie de contenupour amliorer son rfrencement naturel.

    Isabelle Canivet.N13750, 3edition, 500 pages.

    Russir son rfrencement web.Olivier Andrieu.N13664, 2013, 552 pages.

    CSS avances.Vers HTML5 et CSS3.Raphal Goetter.

    N13405, 2e

    dition, 2012, 385 pages.HTML5.Une rfrence pour le dveloppeur web.Rodolphe Rimel.N12982, 2011, 604 pages.

    Relever le df du Web mobile. Bonnes

    pratiques de conception et de dveloppement.Franois Daoust et Dominique Hazal-Massieux.N12828, 2011, 300 pages.

    Gestion de projet agile.Avec Scrum, Lean,

    eXtreme Programming...Vronique Messager.N13666, 2013, 294 pages.

    Coacher une quipe agile. Guide lusage

    des ScrumMasters, chefs de projet, managers...

    et de leurs quipes !Vronique Messager.N13414, 2012, 324 pages.

    Dans la collection A Book Apart

    Dans la collection Design Web

    Stratgie de contenu mobile. Karen McGrane.N13675, 2013, 172 pages.

    Mtier web designer. Mike Monteiro.N13527, 2012, 156 pages.

    Mobile frst.Luke Wroblewski.N13406, 2012, 144 pages.

    Design motionnel.Aarron Walter.N13398, 2011, 110 pages.

    Responsive Web Design.Ethan Marcotte.N13331, 2011, 160 pages.

    Stratgie de contenu web.Erin Kissane.N13279, 2011, 96 pages.

    CSS3 pour les Web designers.Dan Cederholm.N12987, 2011, 132 pages.

    HTML5 pour les Web designers.Jeremy Keith.N12861, 2010, 98 pages.

    Intgration web : les bonnes pratiques.

    Le guide de survie de lintgrateur !

    Corinne Schillinger.N13370, 2012, 412 pages.

    CSS maintenables avec Sass & Compass.Outils et bonnes pratiques pour lintgrateur web.

    Kaelig Deloumeau-Prigent.N13417, 2012, 272 pages.

    Design dexprience utilisateur. Principes

    et mthodes. Sylvie Daumal.N13456, 2012, 192 pages.

    Rfrencement mobile.Web Analytics et strat-gie de contenu. Isabelle Canivet Bourgaux.N13667, paratre 2013, 400 pages.

    Card Sorting. Ne perdez plus vos internautes !

    Gautier Barrre et ric Mazzone.

    N13448, 2012, 108 pages.

    La stratgie de contenu en pratique.

    30 outils passs au crible. Isabelle Canivetet Jean-Marc Hardy.N13510, 2012, 170 pages.

  • 8/11/2019 Projet Responsive Web Design.pdf

    5/175

    ProjetReponsive

    Web DesignDU REC UEIL DES BE SOINS

    LA MISE EN L IGNE

    P r face de Kae l ig De loumeau-Pr igent

    Jrmie Patonnier Rudy Rigot

  • 8/11/2019 Projet Responsive Web Design.pdf

    6/175

    DITIONS EYROLLES

    61, bld Saint-Germain

    75240 Paris Cedex 05

    www.editions-eyrolles.com

    Remerciements Anne Bougnoux et tous les relecteursde cet ouvrage.

    En application de la loi du 11 mars 1957, il est interdit de reproduire intgralementou partiellement le prsent ouvrage, sur quelque support que ce soit, sans autorisationde lditeur ou du Centre Franais dExploitation du Droit de Copie, 20, rue des GrandsAugustins, 75006 Paris.

    Groupe Eyrolles, 2013ISBN : 978-2-212-13713-2

  • 8/11/2019 Projet Responsive Web Design.pdf

    7/175

    un grand philosophe, Daniel Rigot, qui se trouve tre mon pre

    et que jai toujours entendu parler dcrire son propre livre.Tu vois, au final, tu lauras crit travers moi

    R.R.

  • 8/11/2019 Projet Responsive Web Design.pdf

    8/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    9/175

    PRFACE

    Lorsque jai commenc bricoler des pages web dans le bureaude la maison familiale, je navais pas de connexion Internet.

    Pour mettre ces pages en ligne, lopration tait un poil compli-que : il sagissait de compresser au maximum les fichiers (etnotamment les images) pour les stocker sur une disquette(1,44 Mo). Celle-ci tant parfois capricieuse, chaque fichier taitdupliqu une ou deux fois, histoire de sassurer quil serait rcu-prable. Je me rendais ensuite la mdiathque (quipe dordi-nateurs connects Internet) pour tlverser les mises jourvia FTP depuis les disquettes.

    Quel rapport entre cette anecdote et la conception de sites webaujourdhui ? La dmocratisation des connexions haut dbit adcomplex les designers web, dont les pages ont enfl jusqupeser des poids hier dlirants (plusieurs mgaoctets). Or, retourde bton inattendu, cette inflation fait nouveau obstacle auxperformances des sites web et lon revient une rechercheforcene de loptimisation des pages. La rapidit daccs linformation est devenue cruciale, alors que les conditions denavigation sur mobile sont aussi variables quimprvisibles. Laspectaculaire pntration du march par les smartphones et lestablettes a boulevers notre modle de conception, chose quepersonne naurait souponne avant larrive de liPhone en2007. Tandis que nous produisions des produits destins desplates-formes vieillissantes, les consoles de jeu portables se sontmises intgrer des navigateurs web dignes de ce nom, puis lesconsoles et platines de salon ont suivi la tendance. Demain, il

    sera compliqu de trouver un tlviseur qui ne soit pas quipdun navigateur web. Au fur et mesure que le march sestandardisait (rsolutions dcran plus uniformes, connexionsADSL), nous nous sommes confortablement habitus uneconception en 1 024 768 pixels toujours considre commela norme dans de nombreuses agences sans nous soucierde la multiplicit des priphriques inhrente au World WideWeb. Nous sommes dsormais mis devant cette vidence : nous

    avons cass le Web.

    PRFACE

  • 8/11/2019 Projet Responsive Web Design.pdf

    10/175

    PROJET RESPONSIVE WEB DESIGN

    La question qui se pose est celle de la livraison de nos contenus ce panel grandissant de priphriques et dusages. Nouspouvons nous vertuer produire des sites spcifiques chaque type de plate-forme et des applications ddies, mais

    long terme, cette approche nest viable ni financirement ni surun plan pratique.

    Les exprimentations rcentes autour du trio des langages du Webque sont HTML, CSS et JavaScript montrent quil est possiblede produire des sites qui sadaptent intelligemment aux plates-formes de nos utilisateurs, quel que soit le contexte dans lequel ilsaccdent linformation. Le concept de base derrire cette ide,

    quEthan Marcotte a nomm responsive web design ouRWDpourles intimes a inspir des mthodes qui en sont encore ltatembryonnaire, mais qui semblent tellement prometteuses quellesont sans aucun doute le futur de la chane de conception web.Adopter cette approche permettra darchitecturer des produits quifonctionnent sur les navigateurs dhier et daujourdhui, tout enrestant accessibles sur les priphriques du futur.

    En creusant le sujet, on se tournera vers ladaptive web design(design adaptatif ), grce auquel on saura proposer des dclinai-sons du mme document pour quil se transforme de manireadquate sur des priphriques aussi disparates que des lunettesconnectes, des interfaces gestuelles, des consoles de jeu, unemontre intelligente

    Le livre que vous tenez entre les mains est le tmoin de lin-trt que la communaut des professionnels du Web porte au

    responsive web design, mais il ne sagit pas ici de suivre un effetde mode passager. Sensibiliser le client, former lquipe, garder uncap prcis tout en tant flexible en cours de projet Tant de dfistechniques et humains auxquels ont t confronts les auteurs enconditions relles. Merci eux pour ce prcieux partage.

    Kaelig Deloumeau-Prigent

    Intgrateur et auteur du blogLe ministre de lintgrationAuteur du livre CSS maintenables avec Sass et Compass,aux ditions Eyrolles

    http://kaelig.fr

  • 8/11/2019 Projet Responsive Web Design.pdf

    11/175

    TABLE DES MATIRES ix

    1 Avant-propos

    5 Remerciements

    1

    7 Quelques concepts clspour bien dmarrer

    8 Responsive ? Adaptatif ?

    11 Amlioration progressive et dgradation lgante

    14 Le lcher-prise du Web

    15 Rappel sur les mthodologies de gestion de projet

    2

    23 Recueillir les besoins 24 La prise de contact : ltape fondatrice

    27 Faire parler le client et lcouter

    30 Le projet est-il manifestement responsive ?

    3

    37 Rdiger le cahier des charges 38 Les principales contraintes dun projet

    40 Dfinir le primtre du projet

    4

    45 Monter lquipe projet 46 Comment orchestrer les rles projet ?

    48 Lvolution des rles projet typiquesdans un contexte responsive

    56 Les changements en cours dans les mtiersdu Web

    60 Lamlioration continue des expertises

    TABLE DES MATIRES

  • 8/11/2019 Projet Responsive Web Design.pdf

    12/175

    x PROJET RESPONSIVE WEB DESIGN

    5

    63 La pr-conception 63 Les approches de conception

    67 Grer les gabarits

    74 Les outils ncessaires la conception

    6

    77 La conception 77 La rpartition des rles

    79 Le prototypage

    7

    87 Le design graphique 87 Organisation et chiffrage

    91 Les livrables graphiques

    8

    97 Lintgration 98 La gestion des images

    104 Dfinir une stratgie de tests 106 Documenter le projet

    9

    109 Le dveloppement back-end 110 Grer les risques lintrieur

    du primtre intgr

    115 Grer les risques lextrieurdu primtre intgr

    121 Grer les images fluides ct serveur

    10

    127 Rle et formationdes contributeurs ditoriaux

    128 La contribution dimages

  • 8/11/2019 Projet Responsive Web Design.pdf

    13/175

    TABLE DES MATIRES xi

    131 Texte : de nouvelles contraintes

    135 Tenir compte de la mise en page

    11

    139 Effectuer la recette applicative 140 Se prparer pour une recette efficace

    145 Pendant la recette applicative

    12

    149 Aprs la mise en production 151 Le dilemme habituel : trouver

    le bon consultant de TMA

    153 Une difficult : la continuit du travaildintgration

    155 Aprs-propos : le mot de la fin

    157 propos des deux auteurs

    159 Index

  • 8/11/2019 Projet Responsive Web Design.pdf

    14/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    15/175

    AVANTPROPOS 1

    AVANT-PROPOS

    Chaque vnement de progrs ressemble un peu un galet quitombe dans un tang : au dbut, beaucoup de bruit vient de

    la surface, et chacun y va de son opinion sur la direction quilprendra. Puis, le galet tombe lentement, leau et les autres galetsse positionnent progressivement pour lui permettre davancer son rythme, prenant le temps de la rflexion chaque goutte.Alors quil heurte le fond et prend sa position finale, chacunstonne de tout le chemin parcouru et reste un peu en moi surce qui a t construit, ce qui a chang. Enfin, progressivement,le galet se fait oublier Il fait maintenant partie dun tout, il

    est maintenant une partie du monde et plus personne ne sentonne.

    Cest ce qui sest historiquement pass pour chaque innovationstant avre un progrs : quelle est la dernire fois que vousvous tes enthousiasm du confort de vie que vous offre votrevoiture ou votre transport en commun ? Quand votre grille-pain vous a-t-il fascin pour la dernire fois ?

    Alors que le concept de mobilit se consolide enfin et que nousen sommes dj ltape de lmoi devant le chemin parcouru,la sphre du Web ( dfaut du grand public) est aujourdhuien train dobserver lavance progressive que ralise linnova-tion du responsive web design, qui consiste concevoir un sitepour quil sadapte toutes les largeurs dcrans possibles. Lespremires observations empiriques de sites refondus selonces techniques tmoignent dun vritable progrs : le taux de

    rebond mobile a baiss de 26 % depuis la refonte du site dumagazine Time, le chiffre daffaires du site ONeill a augmentde 101,2 % pour les visiteurs sur iPhone/iPod et de 591,4 % surAndroid, le chiffre daffaires du site Skinny Ties a augment de377,6 % pour les visiteurs sur iPhone et de 42 % tous visiteursconfondus, les inscriptions en ligne ont augment de 63 % surle site du Regent College1Certes, ce nest sans doute pas le

    . Source : http://www.lukew.com/ff/entry.asp?

  • 8/11/2019 Projet Responsive Web Design.pdf

    16/175

    2 PROJET RESPONSIVE WEB DESIGN

    responsive web design en soi qui est la cause de ces chiffresenthousiasmants, mais plus largement la prise en compte desterminaux modernes, notamment par le design.

    Grce ces premiers retours, parmi les clameurs que nousavons entendues lorsque le concept a frapp la surface, noussavons aujourdhui que celles qui le dcrivaient comme un effetde mode passager semblent stre trompes. Le responsive webdesign est bel et bien cens rejoindre le fond de ltang, celui otoutes les innovations qui restent dans le temps reposent sousnos yeux dans leur tat final.

    Pourtant, aujourdhui, il en est encore un tat davancementassez jeune de son industrialisation. Charge nous de pousserchaque goutte deau de manire rflchie.

    Que trouver dans ce livre ?

    Si vous avez prcdemment manipul loutil technique quesont les requtes de mdia CSS (CSS media queries), vous tessans doute tomb comme tout le monde en admiration devantla simplicit dutilisation de cet outil, qui apporte pourtant despossibilits incroyables. Vos premires mises en uvre (votresite personnel, peut-tre ?) ont t tellement simples raliserque vous avez peut-tre imagin, au premier abord, tre devantun concept la courbe dapprentissage trs favorable.

    Peut-tre avez-vous ensuite eu loccasion de mettre en uvre

    des designs responsivesur des projets en quipe. Si cest le cas,cest l que vous avez d rencontrer vos premiers vritablesproblmes : designers ne sachant pas comment structurer leurslivrables, intgrateurs levant des alertes rouges dinfaisabilitstechniques et, videmment, tout le retard qui saccumule force de devoir invalider du travail refaire...

    Et si vous avez eu ensuite loccasion de participer un projet

    responsive denvergure, vous vous tes alors aperu que la

  • 8/11/2019 Projet Responsive Web Design.pdf

    17/175

    AVANTPROPOS 3

    complexit de mise en uvre de ce type de projets grimpe enflche en mme temps que la complexit du projet.

    En prenant un peu de recul, vous vous tes alors certainement

    fait cette rflexion, que nous nous sommes faite nous-mmes :ce nest pas le design qui se complique, ce sont nos habitudeset nos outils, que nous avons forgs autour des pages largeurunique, que nous avons de plus en plus de mal tordre pour cenouveau contexte.

    Dans ce livre, nous avons essay daider rsoudre tous lesproblmes typiques que nous avons frquemment rencontrs

    sur des projets denvergure (et de taille moyenne), en compa-raison avec les projets dont nous avions lhabitude prc-demment. Vous, lecteur, qui vous posez des questions sur lamanire dont vous devriez aborder votre prochain projet quivous inquite tant, nous avons essay de vous prendre par lamain pour drouler les tapes et rflexions importantes quidevront jalonner son droulement.

    Ce livre ne contient absolument pas de recettes toutes faites appliquer tout projet ; nous considrons lindustrialisation dece type de projets comme tant un travail en cours de dcou-verte et navons pas toutes les rponses, pour la simple raisonquaujourdhui, personne ne les a. En revanche, nous avons nosrponses nous, notre vision des problmatiques et, dans lamesure du possible, nous avons essay de les accompagner dunmaximum de pistes de rsolution adapter votre situation.

    Un guide pratique, mais pour qui ?

    Ce livre sadresse toute personne tant intervenue, sur le pointdintervenir ou souhaitant intervenir terme sur des projetsutilisant le responsive web design et dsireuse de perfectionnersa rflexion sur la meilleure manire dy participer.

  • 8/11/2019 Projet Responsive Web Design.pdf

    18/175

    4 PROJET RESPONSIVE WEB DESIGN

    Ce livre aura une rsonance dans son intgralit pour les chefsde projet, puisquils sont les tmoins de toutes les tapes duprojet. Il sera globalement intressant pour les autres profils,mais ils y trouveront des chapitres qui leur seront davantage

    destins que dautres, quils aient le rle du client (ou productowner), du designer, du commercial, du dveloppeur, etc.

    Afin de rendre plus efficace son objectif de guide pratique pourtous ces profils, nous avons dcid de le construire dans lordrechronologique du droulement dun projet web typique. Nousvous conseillons fortement de lire le premier chapitre, qui vousservira de base de connaissance thorique pour vous lancer

    sereinement dans les autres sujets ; mais nhsitez pas, ensuite, choisir entre lire le reste dans lordre chronologique ou privi-lgier les chapitres qui vous intressent le plus. Il a t construitde sorte rendre ce mode de lecture possible.

    Le blog du livre !

    Retrouvez les auteurs et changez avec eux sur :http://projetresponsive.fr

  • 8/11/2019 Projet Responsive Web Design.pdf

    19/175

    REMERCIEMENTS 5

    REMERCIEMENTS

    Nous remercions trs chaleureusement nos relecteurs volon-taires, qui ont men une course effrne contre la montre et

    ont apport une norme valeur au livre grce leurs retours,tous trs pertinents : Stphane Deschamps, Damien Boyer,Nicolas Catherin, Sophie Taboni, Yan Paquis, Florian Lonqueu-Brochard, Vincent Valentin, Marie Guillaumet, Nicolas Hoizey,avec une mention particulire pour Olivier de Villardi, aussiconnu sous le nom de lhomme qui relisait plus vite que sonombre !

    Aussi, nous prsentons des remerciements accompagns dex-cuses Julien Femia et Matthias Dugu, qui se sont aimable-ment ports volontaires pour relire, mais ont eu la malchancedarriver tout juste trop tard. De mme pour Corinne Massacry,qui nous a aimablement propos des jolies illustrations, quenous aurions ador intgrer au livre, si nous ne lavions pasoublie en chemin... (oups, dsols !)

    Nous remercions aussi Vanessa Paquerot-Rigot, pour sapatience infinie, mais aussi ses crpes magiques qui nous ontredonn du cur louvrage lapproche de la ligne darrive !

    Nous remercions aussi Kaelig Deloumeau-Prigent, qui noussigne une prface digne du philosophe web quil est.

    Et nous remercions tout particulirement Karine Joly, desditions Eyrolles, qui nous a propos cette aventure de fous

    et a gr avec brio notre approche trs approximative de lalittrature !

    Merci tous, ce livre est aussi le vtre !

  • 8/11/2019 Projet Responsive Web Design.pdf

    20/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    21/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 7

    Quelquesconceps clspour biendmarrer

    Le Web est une science relativement neuve, charge de bon senset de bonnes pratiques qui sutilisent au fur et mesure quelles sedcouvrent, et quil faudra dcouvrir au fur et mesure quellesvoluent naturellement. Ce bon sens se dduit de valeurs simplesqui snoncent clairement, comme laccessibilit (universalitdaccs des contenus et services tous les utilisateurs, quel quesoit leur matriel, handicap), les performances (quelles soientdu ct des technologies serveur ou client), loptimisation pourles moteurs de recherche (SEO,Search Engine Optimization), etc.Dans le contexte du responsive web design, le bon sens de notre

    rflexion viendra de plusieurs notions quil nous faudra gale-ment noncer clairement, pour tre sr de bien les comprendreavant de nous lancer la tte la premire.

  • 8/11/2019 Projet Responsive Web Design.pdf

    22/175

    8 PROJET RESPONSIVE WEB DESIGN

    RESPONSIVE ? ADAPTATIF ?

    Quest-ce que le responsive web design ?

    Avant de dcortiquer finement un concept tel que le responsiveweb design, il serait bienvenu de le dfinir. Un site ayant tconu selon ce principe est un site dont le design (fonctionnelou graphique) change en fonction de la taille de lcran surlequel il est consult (ou de la fentre du navigateur, selonvotre choix de conception). En franais, la traduction designractif serait la plus juste, mais force est de constater que cestle terme anglais qui sest impos.

    Lamalgame est facile, mais ce concept est diffrent de celui desmedia queries; ces dernires sont un outil technique de la spci-fication CSS3 qui permet dexcuter des rgles CSS en fonctionde certaines conditions (la taille de lcran nest quune partiedes 13 rgles existantes dans la recommandation, ltat finaldepuis le 19 juin 2012).

    F. 1-1 : Capture dcran de la recommandation finale CSS3 media queriespublie par le W3C

  • 8/11/2019 Projet Responsive Web Design.pdf

    23/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 9

    Recommandation finale CSS3 media queries

    http://xav.cc/css2mq1

    Lvolution de la dfinition du terme responsive web design

    LorsquEthan Marcotte a initialement crit larticle Responsive Web Design sur le blog A List Apart, puis lelivre du mme nom (initialement aux ditions A Book Apart,puis traduit en franais et publi aux ditions Eyrolles), ladfinition quil proposait ntait pas exactement celle quenous venons de poser. Il le dfinissait comme lalliance deplusieurs technologies (dont les CSS3 media queries, mais

    aussi les grilles fluides et les images fluides) pour permettreune nouvelle approche moins contraignante (dun point devue 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 dcouverte du responsive web designet sa publication ont t ralises sous lgide dun certainJeffrey Zeldman (fondateur du magazine A List Apart etde la collection A Book Apart) et, quelques mois plus tard,Zeldman remettait gravement en question la dfinition quilsavaient prcdemment choisie pour correspondre cetteappellation, dans un article sur son blog : Responsivedesign, je ne pense pas que ce mot signifie ce que vous

    pensez quil signifie .

    Il y dclare : Je pense aussi quil sagit sans doute duneplus grande ide que ce que nous imaginions, une ide troplarge pour tre limite une unique approche techniquepour rsoudre le problme de multiples environnements de

    . http://www.w.org/TR/css-mediaqueries/

    . http://alistapart.com/article/responsive-web-design

  • 8/11/2019 Projet Responsive Web Design.pdf

    24/175

    10 PROJET RESPONSIVE WEB DESIGN

    consultation trs segments. () Notre comprhension dudesign responsive devrait tre largie pour contenir touteapproche mise en uvre dans lintention de proposer uneexprience visuelle lgante quelle que soit la taille de lcran

    de lutilisateur. Voici pourquoi il sagit de la dfinition quenous prfrons proposer ici.

    http://xav.cc/rwd-zeldman3

    Et le design adaptatif ?

    Le concept de responsive web design est trs souvent injuste-ment confondu avec celui dadaptive web designou design adap-tatif ; cest excusable, car tous deux partagent davantage quedes sonorits voisines. Tout comme le responsive web design,ladaptive web design est prsent par son propre livre, crit parAaron Gustafson (Jeffrey Zeldman en signe la prface). Alorsque le responsive consiste grer uniquement les diffrentestailles dcran, ladaptive sapplique plutt une catgorie desites dont le design (fonctionnel ou graphique) change en fonc-tion des capacits du navigateur (Est-il capable dexcuter duJavaScript ? Est-il capable de stocker de la donne ct client ?Est-il capable de reprsenter des blocs avec des dgrads enCSS ? Etc.) ou du systme dexploitation.

    On y retrouve la mme ide dadaptation, mais une diffrencenotable est que, pour un contexte client donn, le design adap-tatif apportera par dfinition une seule rponse (puisquil

    sadapte aux capacits du navigateur et du systme dexploita-tion, qui ne bougent pas pour un mme contexte), tandis que leresponsive web design apportera souvent plusieurs rponses :en effet, la taille peut changer soit parce quon retaille la fentredu navigateur (pour un systme dexploitation multifentre),

    . http://www.zeldman.com////responsive-design-i-dont-think-that-

    word-means-what-you-think-it-means/

  • 8/11/2019 Projet Responsive Web Design.pdf

    25/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 11

    soit parce quon change lorientation du terminal (sil a ungyroscope).

    Si beaucoup des conseils que vous trouverez dans ce livre sont

    applicables pour adapter un design aux capacits du terminal(surtout lorsque lon vous incitera prvoir et documenter desalternatives diffrentes), ce ne sera volontairement pas le centrede nos proccupations : en ce qui concerne la conception et lagestion de projet, cest larrive du responsive web design, etnon du design adaptatif, qui a fortement rendu nos manires defaire obsoltes. Cest donc sur la gestion des tailles dcrans quenous nous concentrerons ici, mme si nous nous autorisons

    doccasionnels commentaires concernant le design adaptatif.

    AMLIORATION PROGRESSIVEET DGRADATION LGANTECes concepts sont pertinents pour notre sujet car il sagit gale-ment dadapter un design un contexte.

    La dgradation lgante

    La dgradation lgante sutilise sur les langages dits tolrantsaux erreurs : cest le cas de HTML et CSS, dont les spcificationsprvoient les cas o linterprteur ne comprend pas lune desinstructions, de sorte la rendre transparente et laisser les

    autres sexcuter quand mme. Cela permet dutiliser les tech-nologies les plus avances sur les navigateurs les plus jour,tout en les laissant se dgrader seules et lgamment sur lesautres.

    Un exemple typique est la proprit border-radiusen CSS :lorsquelle est applique un lment, les navigateurs modernesdonnent ce dernier des bords arrondis. Toutefois, les navi-

    gateurs plus anciens et incapables de traiter cette proprit

  • 8/11/2019 Projet Responsive Web Design.pdf

    26/175

    12 PROJET RESPONSIVE WEB DESIGN

    laissent des bords angulaires classiques llment. moindreeffort, tout reste accessible, seul laspect esthtique est lgre-ment affect ; voil qui est lgant !

    Un exemple typique ct HTML est la multitude dlments deformulaires qui ont fait leur apparition dans les spcificationsHTML5. En effet, un champ de type color, par exemple, vatre interprt par un colorpicker (slecteur de couleur) dansles navigateurs modernes, mais se dgradera en champ textesimple pour les autres navigateurs, dans lequel lutilisateur auratoute possibilit de saisir le code dune couleur. videmment,cet exemple de dgradation technique simple entrane une

    dgradation ergonomique forte (il est souvent beaucoup plussimple pour un utilisateur de slectionner une couleur dans uncolorpicker que de saisir son code hexadcimal). Cependant,certaines dgradations sont plus lgantes fonctionnellement :datepickernatif se dgradant en champ texte o saisir la date,slidernatif se dgradant en champ texte o saisir la valeur, etc.

    F. 1-2 : Le colorpicker, tel quinterprt gauche par le navigateur Chrome, aumilieu par Opera et, droite, par un navigateur ancien

  • 8/11/2019 Projet Responsive Web Design.pdf

    27/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 13

    Lamlioration progressive

    Lamlioration progressive, au contraire, consiste enrichir lesite en dtectant proactivement les fonctionnalits acceptes

    par le navigateur. Ceci a notamment du sens en JavaScript, carce nest pas un langage tolrant lerreur : une instruction inva-lide en JavaScript parce que la mthode ou lobjet utilis nexistepas dans un navigateur peut totalement interrompre lexcutiondes autres instructions.

    La solution consiste sassurer que vous avez prvu un compor-tement alternatif pertinent pour toutes les fonctionnalits les

    plus susceptibles de ne pas tre implmentes sur les naviga-teurs de vos utilisateurs.

    Lexemple typique frquemment utilis est la golocalisation :on peut imaginer un bouton Me localiser, dont le comportementserait adapt pour les navigateurs qui ne limplmentent pas.On peut citer aussi un cas qui devient de plus en plus perti-nent aujourdhui : un comportement diffrent si le terminalsutilise avec un cran tactile. En effet, bien quon trouve chezcertains dveloppeurs une volont de considrer les cranstactiles comme mobiles , cette approche est de moins enmoins satisfaisante, surtout depuis que les tablettes font, enmode paysage, une largeur quivalente certains crans dordi-nateur ; cest dautant plus vrai depuis que Microsoft pousse lemodle de lcran tactile sur ordinateur avec son Windows 8. Lasolution consiste donc prvoir un comportement manipuleravec la souris dans un premier temps (qui puisse tre gr par

    les navigateurs anciens), puis de lamliorer lorsque la capacit interagir avec un cran tactile est dtecte, en remplaant lecomportement par un autre ou en lenrichissant.

    Vous laurez compris, la dgradation lgante et lamliorationprogressive sont deux approches diffrentes (et compatibles)permettant dadapter un design aux capacits du navigateurou du systme dexploitation. Vous aurez peut-tre reconnu la

  • 8/11/2019 Projet Responsive Web Design.pdf

    28/175

    14 PROJET RESPONSIVE WEB DESIGN

    dfinition : il sagit en fait de deux solutions techniques pourmettre en place des stratgies de design adaptatif.

    LE LCHER-PRISE DU WEB

    Le blog qui a vu natre le concept de design responsive, A ListApart, fait partie des rfrences les plus anciennes en ce quiconcerne le design web. Aussi serez-vous peu surpris en appre-nant que ses plus anciens billets datent de 1998 et que lide quilmettait en avant de raliser des designs laide de standards du

    Web tait trs avant-gardiste lpoque. Toutefois, si lon vousdit que lun de ses plus anciens articles, publi le 7 avril 2000,semble toujours la pointe de la modernit aujourdhui, vousserez sans doute plus intrigu.

    En signant A Dao of Web Design, John Allsopp expose unmessage de fond incitant ne pas tenter de faire des ralisationsqui se veulent matrises de bout en bout et absolument iden-tiques dans tous les contextes dutilisation. lpoque, il esten guerre contre la perfection au pixel prs hrite des mdiasimprims et pousse renoncer aux tentatives dapprivoisementexcessif du Web. Il ne sagit pas ici de perdre en qualit, mais dese concentrer sur la garantie dune cohrence seulement l oelle est ncessaire, pour justement gagner en qualit globale ;notamment, il pouvait sagir, lpoque, de prfrer utiliser untexte (accessible et non matrisable esthtiquement) une imagecontenant un texte (inaccessible mais fortement matrisable)

    car, nen dplaise aux graphistes travaillant pour limprim,laccessibilit tait plus importante quune esthtique parfaite.

    lire :

    A Dao of Web design

    http://xav.cc/dao4

    . http://alistapart.com/article/dao, traduction en franais disponible

    http://www.pompage.net/traduction/dao

  • 8/11/2019 Projet Responsive Web Design.pdf

    29/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 15

    Plus dune dcennie plus tard, ce message rsonne encore beau-coup alors que les terminaux ayant accs au Web se multiplient,et avec eux, les moyens dinteragir avec le Web. Du navigateurtrs limit sur un feature phone (tlphone fonctionnalits,

    de la gnration ayant prcd les smartphones, dont lutilisa-tion est trs prdominante dans certains pays, notamment enAfrique) au dernier Chrome sur un ordinateur tout juste sorti,les contextes du ct client se sont tellement diversifis quevouloir tous les matriser est une aventure impossible.

    On peut alors reprendre ce lcher-prise du Web que JohnAllsopp nous prsentait et concevoir une exprience optimale

    dans les meilleurs cas, mais qui sadaptera au mieux dans tousles autres cas, en nhsitant pas mettre en uvre la dgrada-tion lgante et lamlioration progressive.

    Ce lcher-prise du Web est une notion dangereuse, car ellepourrait servir dexcuse une certaine paresse ( La policedcriture ntait pas celle prvue en design ? Cest bon, lcheprise ! ) Il faut donc toujours sassurer de lutiliser dans le butde tirer la qualit vers le haut pour la globalit des contextesclient, lexception tolrable des clients les plus la pointe.

    Nous reparlerons trs souvent de cette notion au cours du livre.

    RAPPEL SUR LES MTHODOLOGIESDE GESTION DE PROJETSil y a quelque chose de relativement similaire dun projet web lautre, cest sans doute lordre des tapes qui le composeront(bien quil y ait des exceptions notables). Pour ne garder queles tapes quasi invitables, on commencera toujours par listerles charges, puis on rdigera les spcifications, on ralisera ledesign fonctionnel et graphique, lintgration, le dveloppe-ment back-end, puis la mise en ligne. Cest dailleurs la raison

  • 8/11/2019 Projet Responsive Web Design.pdf

    30/175

    16 PROJET RESPONSIVE WEB DESIGN

    pour laquelle nous avons dcoup ce livre suivant les tapes duprojet qui nous semblent les plus immuables.

    Toutefois, la mthodologie pour grer les contraintes lint-

    rieur des phases, ainsi que lenchanement des phases, diffreselon les contextes (que les raisons soient financires, lies la confiance du client ou une souplesse exceptionnelle delquipe projet, etc.).

    Bien que les informations que vous trouverez dans ce livrerestent pertinentes quelle que soit la mthodologie que vouschoisirez, nous avons jug utile, pour un livre qui parle de

    gestion de projet, de rappeler rapidement les principales mtho-dologies ; nous pourrons alors utiliser librement ces conceptsdans les chapitres suivants.

    Le modle en cascade

    Le modle en cascade (vous lentendrez aussi appel waterfallpar les amateurs de franglais) est le plus basique et il ne connatquune contrainte : la fin dune phase projet doit tre sanc-tionne dune validation pour dclencher la phase suivante.Cela signifie aussi que chaque phase de projet doit se conclurepar un livrable valider. partir de ces hypothses, le planningest simple raliser, mme sil est idaliste et prend rarementles risques en compte.

    Hrit du BTP ( Les fondations sont bien en place ? On pose

    les murs ! ), ce modle est celui utilis le plus souvent dans lescas rels. Cependant, il arrive souvent, sur un projet web, quonne valide une phase que partiellement pour pouvoir dclencherune partie de la suivante ; bien videmment, nous ne recom-mandons pas cette pratique, bien quelle puisse se rvler indis-pensable pour rattraper des glissements de planning avec unminimum de perte de qualit.

  • 8/11/2019 Projet Responsive Web Design.pdf

    31/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 17

    F. 1-3 : Un exemple simplifi de modle en cascade pour un projet webtypique

    Le cycle en VLe cycle en V considre que le travail fait en premier sur unprojet doit aussi tre le dernier tre valid, une fois toutesles autres phases projet passes. Il permet de sassurer que lac-cumulation de complexit au fil du droulement du projet nedtourne pas le produit fini des conceptions qui ont t rali-ses en amont.

    En Web, un cycle en V typique va ressembler au schma repr-sent sur la . 1-4, page suivante.

  • 8/11/2019 Projet Responsive Web Design.pdf

    32/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    33/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 19

    commerciale avec une charge prvisionnelle, un planning et untarif fig pour lensemble du projet. videmment, tout ceci netient aucun compte des risques rels (qui sont alors inconnus)et, ds que les imprvus saccumulent, la situation est idale

    pour que chacun se renvoie la faute : le client rappelle au pres-tataire quil sest engag un rsultat pour un tarif fig et quilne paiera pas plus, le prestataire cherche tout cart de conduitedu client pour justifier le retard (validation plus longue queprvue, recette mal faite) et demander une rallonge budg-taire, tout en essayant au maximum de rduire les cots (etdonc la qualit) pour sauver sa chemise. Le client pense partirgagnant car il matrise son budget, mais il sagit aussi du type de

    contractualisation qui finit le plus souvent trs mal...

    Il faut modrer ce constat, malgr tout : dans une ententecordiale entre un client et un prestataire, il arrive quand mmetrs souvent que la ngociation en cas dimprvus se passe bienet que lun des deux (ou les deux conjointement) assume ledcalage. Notons que ce type dentente ncessite une souplessedaction du ct du client, ce qui nest pas toujours possible,notamment dans le cadre des marchs publics ; nous revien-drons sur ce cas trs particulier.

    Les mthodes agiles

    Lapproche agile tente dapporter simultanment une rponseviable en tant que mthodologie de projet (au mme sens que lemodle en cascade ou le cycle en V) mais aussi en tant que cadre

    de contractualisation (au mme titre que la rgie ou le forfait).Elle apporte une philosophie qui a le vent en poupe, car elletente de dfavoriser le moins possible lensemble des interve-nants au projet (ct client comme prestataire).

    Tout projet (web ou non) contient toujours trois contraintesprincipales surveiller : les dlais, le budget et la couverturedu chantier (dans notre cas, la couverture fonctionnelle). Tout

    dbordement de lun des axes (couverture fonctionnelle qui se

  • 8/11/2019 Projet Responsive Web Design.pdf

    34/175

    20 PROJET RESPONSIVE WEB DESIGN

    rvle plus large que prvue, pertes de temps) devrait natu-rellement ncessiter du mouvement sur les autres axes aussi ;mais le modle du forfait fixe ces trois axes en dbut de projet,sans possibilit de mouvement.

    F. 1-5 : Les trois contraintes principales de la gestion de projet :tirez sur un des angles du triangle et cest lensemble du triangle qui est cens

    grandir, sur les deux autres axes galement.

    Dans le cadre des mthodes agiles, le prestataire et le clientvont convenir dun budget fixe et souvent de dlais fixes ; maisils vont accepter que le troisime axe, la couverture fonction-nelle, ne soit pas fixe.

    Pour atteindre cet objectif, le projet va tre dcoup en fonc-

    tionnalits, regroupes par ce que lon appelle des sprints,priodes fixes au terme desquelles le produit est toujours stableet testable, mais incomplet fonctionnellement. Les premierssprints contiennent les fonctionnalits indispensables et lesderniers contiennent celles dont il est possible de se passer.

    Au terme de chaque sprint, on pourra effectuer la recette duproduit, stable, et toute fonctionnalit ayant un problme sera

    repositionne dans le sprint suivant (pour tre nouveau teste

  • 8/11/2019 Projet Responsive Web Design.pdf

    35/175

    QUELQUES CONCEPTS CLS POUR BIEN DMARRER 21

    par la suite). Ce principe des mthodes agiles est dailleursfondateur : celui que lon appelle leproduct owner(responsablede la vision globale du produit) sera plus fortement prsenttout le long du projet et aura un rle actif dans sa construc-

    tion. Dans le cadre dune relation client-prestataire, le productowner sera le client ; mais un diteur de logiciel ne pourra passe passer dun product owner pour autant, alors quil nest pasun client proprement parler ; pour cette raison, nous utili-serons prfrentiellement le mot product owner client dans le reste de ce livre.

    Enfin, puisque les mthodes agiles sous-entendent des phases de

    recueil des besoins puis de conception qui ne sont pas inclusesdans ce fonctionnement, on parle de cycle semi-itratif .

    La . 1-6 donne une reprsentation graphique dun projetsuivant les mthodes agiles : aprs la phase de conception, onitre avec autant de sprints quil a t dfini lors du cadragedu projet. Chaque sprint livre un produit stable, mais noncomplet ; le dernier sprint est sanctionn par un produit stable,auquel il manque les fonctionnalits secondaires ne rentrantpas dans le budget initialement prvu.

    F. 1-6 : Reprsentation graphique dun projet suivant les mthodes agiles

  • 8/11/2019 Projet Responsive Web Design.pdf

    36/175

    22 PROJET RESPONSIVE WEB DESIGN

    Mthodes agiles

    Au pays des mthodes agiles, il y a plusieurs coles, appor-tant chacune ses outils et ses procds : Scrum, le Kanban,Crystal... En voici une prsentation gnrale, compare aux

    mthodologies traditionnelles de gestion de projet :

    V. Messager, Gestion de projet agile, Eyrolles, 2013

    Si vous souhaitez mettre en uvre la mthode Scrum (la pluscomplte et la plus populaire), nous vous conseillons dappro-fondir le sujet avec le livre :

    A. Vannieuwenhuyze, Scrum, une mthode agile pour votreprojets, ENI, 2013.

  • 8/11/2019 Projet Responsive Web Design.pdf

    37/175

    RECUEILLIR LES BESOINS 23

    Tout projet commence par un recueil des besoins dtaills parle client. Du premier contact la qualification du projet, cettetape est cruciale car cest elle qui va dterminer toute la suite.Prendre du temps lors de cette premire tape, cest sassurer quele projet se droulera dans les meilleures conditions, pour vousaussi bien que pour votre client.

    Nous allons donc analyser les diffrentes tapes du recueil desbesoins. Il va de soi que chaque projet est unique et chaque

    client a ses propres proccupations. Pour cette raison, nousnallons pas essayer de dresser un tableau exhaustif des besoinspossibles, ni mme essayer de dfinir des profils de clients.Non. Nous allons nous concentrer sur les points cls et, surtout,sur les points spcifiques un projet de type responsive webdesign.

    Recueillirles besoins

  • 8/11/2019 Projet Responsive Web Design.pdf

    38/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    39/175

    RECUEILLIR LES BESOINS 25

    Dans le deuxime cas, il vous faudra vrifier sil sagit dunefaon de se mettre votre niveau pour bnficier de votreexprience ou bien sil sagit de masquer linquitude quereprsente votre savoir-faire unique.

    Enfin, dans le dernier cas, il faudra vrifier que cette absencede connaissance des rouages techniques ou fonctionnelsvous permettra dexercer pleinement votre expertise.

    En bref, la premire chose faire est de sassurer que le clientsouhaite travailler dans un esprit de collaboration plutt que decontrle. L, malheureusement, il ny a pas de recette miracle :cest lexprience qui vous indiquera quoi vous en tenir.

    Cependant, cet aspect des choses est trs important car, commenous allons le voir, la gestion de projet responsive requiert dela souplesse et de la confiance, en raison des nombreux ajuste-ments qui auront lieu tout au long du projet.

    Concentrons-nous sur le projet. Lappel doffres est trs souventle premier contact que lon a avec ce projet. En consquence, ilest tout aussi important de sarrter sur ce qui y est dit que sur cequi en est absent. La lecture en creux des documents est essen-tielle. En effet, la rponse un appel doffres fait souvent lobjetdun document dtaill et dune soutenance face au client. Pourremporter le projet, il est donc primordial davoir bien comprisce que veut le client... parfois mme mieux que lui !

    Un bon appel doffres vous indique quels sont les objectifs duclient, mais aussi ses attentes fonctionnelles pour atteindreces objectifs. Malheureusement, les appels doffres clairs sont

    rares. Pour cette raison, vous aller devoir vous poser beaucoupde questions et, le cas chant, les poser votre client poursavoir ce quil en est exactement. Que lon ne sy trompe pas,les raisons pour lesquelles un appel doffres nest pas clair sontlgion. Dans certains cas, il sagira simplement dun oubli, maisdans dautres, ce pourra tre une sous-estimation des enjeuxdu projet. Dans ce dernier cas, si vous sentez que le projet a unpotentiel mais quil est trop mal exprim pour pouvoir faire une

    offre de mise en uvre, nhsitez pas proposer une mission

  • 8/11/2019 Projet Responsive Web Design.pdf

    40/175

    26 PROJET RESPONSIVE WEB DESIGN

    de cadrage pralable de quelques jours pour aider le client formaliser sa demande clairement.

    Rencontrer le client en face faceAinsi, il arrive toujours un moment ou vous allez rencontrerle client. Ny allons pas par quatre chemins : vous tes l pourlui tirer les vers du nez, pas pour prendre le th. Assez parado-xalement, un client est parfois rticent parler de son projet ;en consquence, vous allez devoir gentiment mais fermementle soumettre la question. Si cela est vrai dans tout projet, cest

    encore plus critique dans un projet qui se rvlera responsive.Ici, cest bien la question de ce que va devenir le projet qui esten jeu. En effet, au moment ou vous croisez le client pour lapremire fois, au mieux, vous avez une intuition et il va vousfalloir la transformer en certitude, au pire, vous nen savez rienet, l encore, il va falloir vous assurer de ne rien oublier.

    Le risque est de vous retrouver avec un projet qui ne rpondepas exactement aux attentes du client et qui conduise, dans lemeilleur des cas, des tensions accompagnes dun ou plusieursavenants endommageant durablement la relation avec le client.Dans la pire des situations, le projet va tourner court, avecsuites judiciaires dans les cas extrmes. Soyez donc fermelors de vos rencontres. Cela sera toujours bnfique aux deuxparties : vous cernerez bien le projet et le droulerez sereine-ment et, pour le client, ce sera lassurance que son projet estmatris et en de bonne mains.

    Vous devez donc tout savoir pour apporter une rponseadapte et correctement chiffre. Quelles questions faut-il doncse poser ?

  • 8/11/2019 Projet Responsive Web Design.pdf

    41/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    42/175

    28 PROJET RESPONSIVE WEB DESIGN

    qui sadresse le site ?

    Est-il destin des jeunes ou des plus gs, des hommes ou des femmes, des cadres ou des ouvriers, des professionnels

    ou des particuliers, etc. ?

    Cela conditionne grandement les habitudes des utilisateurs etleur facilit utiliser les diffrents moyens daccder Internet.Par exemple, le taux dquipement peut varier selon lge etla catgorie socioprofessionnelle ; de mme, les navigateursutiliss au bureau sont parfois sensiblement diffrents de ceuxutiliss la maison, etc. Connatre les cibles du futur site va

    vous permettre dextrapoler sur les attentes et la capacit desvisiteurs utiliser le site.

    quoi sert le site ?

    Que permet-il de faire ? Sagit-il de vente en ligne, dun rseausocial, dune application utilitaire, etc. ?

    Connatre les usages du site est primordial, car cela permet dan-ticiper sur les conditions dutilisation ( la maison, au bureau,dans les transports, en station debout ou assise, en intrieur ouen extrieur, etc.). Cependant, il ne faut pas hsiter demanderexplicitement ce qui est attendu en la matire. Cest dailleurssans doute la question la plus importante pour valuer la nces-sit dadaptation dun site. Quels sont les cas dusage ? Dansquelles conditions le site va-t-il tre utilis ? quel moment ? Et

    inversement, y-a-t-il des cas dusage qui ne doivent surtout pastre couverts par le site ? Cette dernire question est galementtrs importante. En effet, un usage prvu ne prsume pas duneabsence dusage. Par exemple, si vous posez assez directementla question Votre site va-t-il tre utilis assis un bureau ? ,une rponse positive ne signifie pas que ce site ne sera pasutilis debout dans les transports.

  • 8/11/2019 Projet Responsive Web Design.pdf

    43/175

    RECUEILLIR LES BESOINS 29

    Faites toujours trs attention ne pas tirer de conclusionshtives. Prenez le temps de poser des questions qui se recoupentet, si votre client commence devenir bavard, essayez de luiposer des questions ouvertes (cest--dire des questions qui

    commencent par comment plutt que par est-ce que ). Lesquestions ouvertes sont toujours un exercice un peu dlicat, carcest la porte ouverte aux digressions improductives ; cepen-dant, leurs rponses peuvent amener des lments auxquelsvous nauriez sinon pas pens.

    Les utilisateurs pourront-ils contribuer au contenu

    du site ?Et si cest le cas, de quelle faon ? Ce point a de limportance, carles moyens de contribution rejoignent de prs les cas dusage.L aussi, cela vous permettra dextrapoler sur ce que devra oune devra pas faire le site, ou comment il devra sadapter, le caschant.

    Les contraintes connatreDans un autre ordre dides, il va tre galement crucial deconnatre les contraintes spcifiques du projet. Certes, lescontraintes habituelles de dlais et de budget sont importanteset sont souvent celles auxquelles le client pense spontanment.Pourtant, il y en a dautres qui vont tre tout aussi capitalespour vous.

    Quels sont les matriels et navigateurs cibles ? Quels est le degr de dgradation acceptable pour les vieux

    navigateurs ?

    Les clients sont loin dtre au fait de ces problmatiques et il estparfois ncessaire de faire preuve de pdagogie pour expliquerles contraintes que peut induire la compatibilit avec de vieux

    navigateurs. En particulier, il est ncessaire dtre parfaitement

  • 8/11/2019 Projet Responsive Web Design.pdf

    44/175

    30 PROJET RESPONSIVE WEB DESIGN

    transparent sur les questions de faisabilit, de performances et,surtout, du cot supplmentaire, parfois significatif, que celapeut reprsenter pour le projet.

    LE PROJET EST-IL MANIFESTEMENT RESPONSIVE ?

    Nous avons dsormais suffisamment dinformations pourqualifier le projet. Cette qualification va se matrialiser par lechoix entre trois possibilits.

    Le site na aucun besoin dtre adaptable.Il sagit typiquement des projets ciblant des populations parti-culires sur des cas dusage spcifiques. Le besoin dadaptabi-lit est alors minime et le responsive web design est inutile.

    Le site a besoin dadaptation, mais une approche responsivenest pas adquate.Trs souvent, il sagit des sites offrant un panel fonctionneltrs large et pour lesquels il est ncessaire de construire desparcours utilisateur spcifiques telle ou telle plate-forme.Dans ce cas, il est parfois ncessaire de crer des sites ditsadaptatifs. Dans les cas les plus extrmes, on peut mme enarriver crer plusieurs sites diffrents plutt quessayer detordre tout prix un site pour le faire rentrer dans un moulepour lequel il nest pas fait.

    Le site est ligible une solution responsive.

    Bravo, ce livre est fait pour vous, nous allons donc creuser lafaon de mener bien ce projet !

  • 8/11/2019 Projet Responsive Web Design.pdf

    45/175

    RECUEILLIR LES BESOINS 31

    Les cas Twitter et Facebook

    Ces deux sites sont un excellent exemple de notreproblmatique.

    Dun ct, Twitter propose un service simple, facilementdclinable sur tout format. Malgr cela, ses concepteursont fait le choix dun site mobile ddi, diffrent du sitegnral. Le service offert est fondamentalement le mme.Cependant, ce choix sest fait sur la base de deux contraintesspcifiques : loptimisation des performances et la crationdune exprience utilisateur spcifique cet environnement.

    Dun autre ct, Facebook propose quantit de fonctionna-

    lits. Le problme, cette fois, est un peu diffrent. La versionmobile de Facebook noffre pas du tout la mme couverturefonctionnelle que le site gnral. Il y a une volont clairede simplifier les services pour offrir une exprience utilisa-teur de meilleure qualit tout en offrant des performancesoptimales.

    On trouve quelques dfenseurs du responsive pour tous ,

    qui considrent que tous les sites web pourraient sadapteraux diffrentes tailles dcran ; nous ne partageons absolu-ment pas leur approche et ne sommes pas surpris que desleaders dopinion tels que Facebook, Twitter ou Googlene la partagent pas non plus (et les restrictions de budgetqui peuvent expliquer la rticence de certains clients sontfranchement inapplicables ici !) Une seule explication estpossible : une simple approche responsive naurait

    simplement pas suffi optimiser tous les points qui leursemblaient stratgiques.

    Aprs mre rflexion, vous avez donc identifi un projet de siteresponsive et vous allez donc pouvoir lannoncer votre client.L encore, plusieurs cas vont se prsenter : soit le client parlespontanment de responsive , soit vous allez devoir le luiproposer.

  • 8/11/2019 Projet Responsive Web Design.pdf

    46/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    47/175

    RECUEILLIR LES BESOINS 33

    que dans un projet traditionnel. En effet, pendant le projet luimme, les sollicitations seront plus importantes (validation,rdaction de contenu, etc.), mais aprs le projet, des cots deformation seront peut-tre envisager pour que ses quipes

    puissent sereinement prendre en main les spcificits du site(en particulier lors de la contribution).

    Alors certes, le cot du projet nest pas multipli par deux, maisselon les exigences du client, il nest pas exceptionnel de voir lebudget augmenter de 20 % 50 %.

    Comment proposer une solution responsive ?Vous voici donc face au client. Ce peut tre dans le cadre dunrendez-vous en face face ou lors dune prsentation formelle.Comme nous venons de le voir, le plus gros cueil lors de laprsentation dun projet responsive est trs souvent celui dubudget. Si, pour une raison ou une autre, le client trouve quevous tes trop cher, il va falloir faire valoir les avantages spci-fiques de ce type de projets, et ils sont plus nombreux quon nele croit.

    Dun point de vue budgtairedirect, il est important de men-tionner que pour couvrir tous les cas dusage demands, cettesolution reste moins onreuse que la cration diffrencie dedeux sites distincts.

    Dun point de vue technique, un projet responsive correcte-ment men simplifiera la maintenance du site, ce qui rduira

    les cots rcurrents lis la correction de bugs ou aux invi-tables volutions fonctionnelles qui ne manqueront pas de seprsenter une fois le projet livr.

    Dun point de vue utilisabilit, ce type de sites offre un doubleavantage. Pour les administrateurs du site, la gestion est sim-plifie. Quel que soit le support, les oprations de contribu-tion et de gestion ne se feront quune seule fois, ce qui, lencore, rduira les cots rcurrents (certes, cest galement

    possible sur des sites diffrencis, mais au prix dune architec-

  • 8/11/2019 Projet Responsive Web Design.pdf

    48/175

    34 PROJET RESPONSIVE WEB DESIGN

    ture serveur qui peut se rvler complexe et donc coteuse).Pour les utilisateurs, cest une exprience unifie qui leur estpropose, quel que soit leur moyen daccs. Cela contribue valoriser limage de marque du client, tout en favorisant la

    fidlisation (si un site marche dans tous les contextes prvus,et mme au-del, un client est moins tent daller voir ailleurssi lherbe y est plus verte).

    Dun point de vue infrastructure, l aussi, les avantages sontnombreux. En particulier, cest une seule et mme infrastruc-ture qui va rpondre tous les cas dusage en dlguant unegrande partie du travail au navigateur du client, ce qui rduittrs srieusement les cots dinstallation et de maintenance.

    Attention tout de mme, ce nest pas magique et cela doit trepens en consquence, par exemple avec la question type : Quid de la bande passante, si tout le trafic est rout versla mme infrastructure ? Eh bien, l aussi, des conomiessont possibles sous rserve de disposer dun systme decache correctement configur. Sur cette question, ce nest pasla nature responsive du projet qui aura une influence, maisbien la comptence des dveloppeurs et des administrateurssystme.

    Dautres avantages spcifiques au projet peuvent galementexister : nhsitez pas les dtailler. Cest votre savoir-faire etvotre capacit identifier ces bonus qui vous permettrontde remporter le projet en expliquant comment un surcot appa-rent (la facture payer) peut en ralit induire une conomie long terme.

    Tous les clients ne sont pas ncessairement rceptifs ce genredargumentaire et certains exigeront mme des engagements dersultats conomiques ou techniques. Dans ce cas, soyez trsprudent avant de vous engager quoi que ce soit. En effet, len-vironnement Internet, surtout en matire de responsive webdesign, est trop complexe et changeant pour prdire commentles choses vont voluer. Entre le dbut dun projet et sa rali-sation, plusieurs mois peuvent scouler. Pendant ce temps,

    les pratiques techniques voluent, les navigateurs changent,

  • 8/11/2019 Projet Responsive Web Design.pdf

    49/175

    RECUEILLIR LES BESOINS 35

    les modes passent... Bref, sengager sur un rsultat a quelquechose dhasardeux. Prfrez un engagement sur les ressourcesncessaires mettre en uvre pour mener le projet bien telquil a t dfini lors de son lancement. Un tel type dengage-

    ment ne vous dispense pas, bien au contraire, de prendre gardeaux volutions de primtre fonctionnel lors de la ralisationdu projet, volutions qui ne manqueront pas darriver et quidevront obligatoirement faire lobjet davenants et de chiffragescirconstancis.

    Voil, vous avez fait de votre mieux : vous avez dcortiqula demande du client et vous avez dfini la meilleure rponse

    possible. Il ne vous reste plus qu patienter. Quelques jours(semaines ?) dangoisse plus tard, la rponse tombe : cest vousqui tes slectionn pour prendre en main le projet. Nousallons donc maintenant passer aux choses srieuses.

  • 8/11/2019 Projet Responsive Web Design.pdf

    50/175

  • 8/11/2019 Projet Responsive Web Design.pdf

    51/175

    RDIGER LE CAHIER DES CHARGES 37

    Maintenant que vous vous tes entendu avec le client et que,puisque le contrat est sign, vous savez que cest vous qui allezraliser le projet, il va falloir entrer dans les dtails. Comme vousvous en doutez, on ne part jamais bille en tte dans un projet sansen dfinir le primtre et sans savoir o lon met les pieds. Bref,avant de planter un beau parterre de fleurs, on commence pardbroussailler le terrain et on se renseigne sur le prix des graines.

    Ltape prliminaire tout projet est la rdaction du cahier descharges. Il sagit de formaliser lexpression des besoins du client

    dans des documents structurs qui seront les tables de la loi duprojet. Le cahier des charges dfinit les tenants et les aboutis-sants du projet. Il est loin dtre monolithique, mais se subdi-vise rgulirement en plusieurs documents :

    le cahier des charges fonctionnel, qui dfinit toutes les fonc-tionnalits attendues lors de la ralisation du projet ;

    le cahier des charges technique, qui pose toutes les bases

    techniques du projet : choix technologiques, dfinition desarchitectures matrielle et logicielle ;

    Rdiger le cahierdes charges

  • 8/11/2019 Projet Responsive Web Design.pdf

    52/175

    38 PROJET RESPONSIVE WEB DESIGN

    le cahier des charges graphique, qui regroupe tous les l-ments lis au design du projet : planches tendance, chartegraphique, dtail des parcours utilisateur, personas, etc. Toutprojet ne requiert pas tous ces lments, mais assurez-vous

    davoir ce dont vous aurez besoin.

    La plupart du temps, il sagit de documents fournis par leclient, mais il peut parfois vous revenir de les formaliser afinquils soient plus facilement exploitables. Dans le cadre de cetouvrage, nous nallons pas rentrer dans le dtail de tous cesdocuments, mais nous attacher simplement ceux qui ont uneincidence particulire dans un projet responsive.

    LES PRINCIPALES CONTRAINTES DUN PROJET

    Les projets qui font appel au responsive web design ont uncertain nombre de contraintes qui leur sont propres et quil estncessaire de prendre en compte ds les premires heures. Leurformalisation au sein du cahier des charges vitera nombre deproblmes et autres dceptions.

    Le projet est-il responsive ?

    Nous lavons voqu prcdemment : ce nest pas parce quunprojet va se dcliner sur plusieurs matriels quil va ncessaire-ment tre trait sous la forme du responsive web design.

    tablir des priorits de fonctionnalitsselon les supportsAinsi, contrairement au design adaptatif, le design responsivemontre ses limites. Il se borne a travailler sur laspect graphiquedun site ou dune application, sans jamais remettre en question

    ses diffrentes fonctionnalits, quel que soit le matriel de luti-

  • 8/11/2019 Projet Responsive Web Design.pdf

    53/175

    RDIGER LE CAHIER DES CHARGES 39

    lisateur. En effet, le client arrive le plus souvent avec une listede fonctionnalits, un peu comme un enfant rdige sa lettre aupre Nol.

    Cependant, afin destimer au mieux les charges du projet, il estindispensable de bien dfinir les fonctionnalits selon le mat-riel : chacune sera qualifie en fonction de sa difficult treralise sur un matriel donn, ainsi que par son importance auregard des objectifs du projet.

    Cette dfinition des priorits est importante deux titres. Enpremier lieu, elle va vous indiquer prcisment si le projet se

    destine tre responsive ou bien adaptatif. Il y a peu de chancesque cela se rvle tre un projet dissoci (avec des sites ou desapplications diffrentes selon le matriel), car vous avez djd liminer cette possibilit lors de lanalyse de lappel doffres.Cependant, si cela ce rvle ncessaire, cest maintenant quilfaut le signaler. Aprs, il sera trop tard et vous risquez de mettreen danger la gestion budgtaire du projet, tout en crant uneinsatisfaction nuisible au projet. Quoi quil en soit, vous identi-fierez rapidement les impossibilits de mise en uvre (la diffu-sion de vidos sur un mdia print, par exemple) ainsi que lesaberrations conceptuelles (par exemple, avec un smartphone,laffichage sur une seule page de dix fonctionnalits considrescomme critiques).

    Dans un second temps, ce travail sur les priorits vous permettrade planifier le travail faire. Ce sera dautant plus important sivous faites le choix dorganiser votre travail selon les prceptes

    des mthodes de dveloppement agile. Cest ce travail de miseen priorits et de rationalisation qui vous aidera dfinir vosrythmes de livraisons (desprints, si vous faites du Scrum), en vousdonnant une premire vision du backlogfonctionnel (cest--direla liste des fonctions que va vous demander le product owner).

    Dun point de vue purement mthodologique, il ny a pas desolution miracle. Cela va dun ensemble de tableaux croiss

    dynamiques dans votre tableur prfr jusqu la liste rdige

  • 8/11/2019 Projet Responsive Web Design.pdf

    54/175

    40 PROJET RESPONSIVE WEB DESIGN

    sur un coin de table. Limportant est davoir, au final, une listeclaire et dtaille qui serve de garde-fou tout au long du projet.

    DFINIR LE PRIMTRE DU PROJET

    Avec la dfinition des priorits, vous disposez dj dun premierprimtre fonctionnel. Quon ne sy trompe pas, ce primtreva voluer en cours de projet, mais vous pourrez en toute lgi-timit demander une rallonge budgtaire sil volue de maniretrop importante ; cest pour cette raison quil est ncessaire de

    bien le dlimiter.

    Cependant, le primtre fonctionnel nest pas le seul qui aitbesoin dtre clairement bord. Le primtre technique, luiaussi, se doit dtre dfini.

    Dfinir clairement les plates-formes cibles

    Parmi les facteurs de succs dun projet, la partie la plus impor-tante sera sans doute la dfinition des plates-formes cibles.Entre un smartphone, une tablette et un ordinateur, il y abeaucoup de diffrences et il est important de savoir quoi estdestin exactement le projet. Cela ne veut pas dire que vous netiendrez pas compte des autres plates-formes (aprs tout, lesprojets responsive ont toujours une dimension universelle) ;cela signifie seulement que vous ne prendrez pas dengagement

    contractuel sur ces autres plates-formes.

    Une mise en page parfaite, a nexiste pas !

    Ce quil faut bien comprendre, cest quavec la diversit sanscesse croissante des matriels disponibles, il nest pas ralistede croire quil sera possible de couvrir tous les cas de figure.

    En particulier, il va tre ncessaire de faire comprendre votre

  • 8/11/2019 Projet Responsive Web Design.pdf

    55/175

    RDIGER LE CAHIER DES CHARGES 41

    client que la notion de mise en page parfaite nexiste pas voussavez, le fameux lcher-prise avec lequel on vous rebatles oreilles rgulirement, celui dont nous avons parl danslintroduction

    Un projet responsive impose cette vision du design web. Eneffet, il nest pas rare, en fin de projet, de voir le client arriveravec un matriel et vous reprocher que la mise en forme nestpas optimale (pour rester poli). Dans ces cas, il faut savoirquoi rpondre ; sinon, vous vous retrouverez corriger des bugsqui nont jamais t identifis et qui vont, dune part, retarderle projet (et donc accrotre le risque que le client revienne vous

    voir avec un nouveau matriel exotique) et, dautre part, greverle budget que vous devrez prendre votre charge, car le clientrefusera de payer pour un travail quil estimera mal fait.

    Poser de bonnes bases de travail en la matire est donc imp-ratif. Le cas chant, il vous faudra prendre le temps de fairede la pdagogie auprs de votre client pour quil comprenneles contraintes et prenne des dcisions claires. Linformationet lducation des clients est sans doute lun des points les plussous-estims des projets responsive, mais cest celui qui mettrale plus dhuile dans les rouages du projet.

    quoi sert la plate-forme cible ?

    Avant de voir comment dfinir une plate-forme cible, rappe-lons ce quoi elle va servir et, surtout, ce quoi elle ne va pas

    servir.

    La plate-forme cible, cest celle sur laquelle vous vous engagez corriger tous les bugs dcouverts avant la livraison du projetet sur laquelle vous allez galement engager une garantie.Une garantie est un engagement de rsolution des bugs nondcouverts lors de la recette, pendant un priode donne (parexemple, un mois aprs la livraison en production du projet).

  • 8/11/2019 Projet Responsive Web Design.pdf

    56/175

    42 PROJET RESPONSIVE WEB DESIGN

    Cependant, pas de mprise ! Ce nest pas parce quun bug estdcouvert sur une plate-forme non cible que vous nallez pas lecorriger. Non. Tous doivent tre corrigs. Cependant, un bugsur une plate-forme non cible ne sera jamais bloquant pour la

    mise en production du projet et pourra ventuellement fairelobjet dun avenant au budget, sil apparat quil sera particu-lirement coteux rsoudre, voire diagnostiquer (lexempletypique tant un problme de performances sur une plate-forme vieillissante ou la prise en charge des images retina nous y reviendrons dans le chapitre 8 alors que cela na past prvu dans le primtre dorigine).

    Comment dfinir cette plate-forme cible ?

    Comment dcide-t-on alors des plates-formes cibles ? Petitedfinition en prambule : une plate-forme est un couple formdun navigateur et dun systme dexploitation. Il est trs impor-tant de toujours bien prciser les deux, car sinon, vous aurezdes surprises. Par exemple, si vous dterminez que la plate-forme est Firefox, sans prciser le systme dexploitation, celavoudra dire que vous vous engagez prendre en charge Firefoxsous Windows, sous Mac OS et sous Linux. Cest un problme,car les optimisations du navigateur ne sont pas les mmespour tous les systmes dexploitation. Vous pouvez aussi vousretrouver avec de mauvaises performances, qui vous coteronttrs cher si vous navez pas pens tester toutes les versionsdu navigateur. Pire ! Cela veut galement dire que vous devrezcorriger des bugs sous Android, en version smartphone ou en

    version tablette Si vous navez travaill quavec une versiondesktop en tte, a va faire mal !

    Il y a donc trois faons de dfinir lensemble des plates-formescibles.

    tudier les statistiques dutilisation.Dans lventualit o ily en ait, interprter des statistiques nest pas toujours chose

    aise et on peut, dans certains cas, passer ct de certaines

  • 8/11/2019 Projet Responsive Web Design.pdf

    57/175

    RDIGER LE CAHIER DES CHARGES 43

    plates-formes. Cest typiquement le cas si le site actuel nefonctionne pas avec une plate-forme donne. Cependant,dans le cas dune refonte ou dun projet destination dunpublic connu, cela vous donnera de grandes lignes directrices

    assez robustes. Observer le matriel utilis par votre client.Cest bte dire,

    mais quelle que soit la cible du projet, votre client regarderatoujours le rsultat avec son matriel lui. Certains clientsont du mal accepter que le rsultat ne soit pas impeccablesur leur propre matriel. Ainsi, mme si vous tes persuadque la cible du projet ne va utiliser que des navigateurs der-nire gnration, si votre client utilise une vieille version

    dInternet Explorer, pas de chance... mais il va falloir lint-grer dans les plates-formes cibles. couter les demandes explicites formules par le client.Si

    le projet a clairement pour objectif de cibler un ensemble deplates-formes donnes, il ne faut pas oublier de les prendreen compte. Cela peut paratre vident, mais mfions-nous dunombre de fois o lon a tendance oublier les vidences...

    Normalement, un projet responsive demande que lon cibleentre 4 et 6 plates-formes pour la recette (2 3 versions desktop,1 tablette et 1 2 smartphones). Dans tous les cas, nacceptez pasplus de 10 plates-formes. En effet, le temps de dveloppement,ainsi que les cots de test et de dbogage risquent de grimperen flche, sans garantie que le projet soit de meilleure qualit aubout du compte. Avec un trop grand nombre de plates-formescibles, vous risquez de passer trop de temps sur des dtails insi-gnifiants en perdant de vue lobjectif global.

    Planifier limprvu, mission impossible ?

    Quel que soit le soin que vous preniez dfinir les plates-formescibles du projet, limprvu est toujours au rendez-vous du designresponsive : taille des crans (de 3 24 pouces), conditions deluminosit (intrieur, extrieur, en plein soleil, lombre, etc.),

    priphriques daccs (cran tactile, clavier, souris, touchpad,

  • 8/11/2019 Projet Responsive Web Design.pdf

    58/175

    44 PROJET RESPONSIVE WEB DESIGN

    stylo capacitif, etc.) et bien dautres, le tout combin linfini. Ily a l de quoi prendre de sacres migraines si lon veut absolu-ment tout prvoir... Nessayez pas, cest impossible !

    Non, vous ne pourrez pas tout prvoir ; oui, il y aura des caso a va se dgrader. La question est darriver anticiper lesdgradations. Lunivers du responsive web design contraint lencore trs fortement faire siennes des techniques qui nontrien de nouveau. Les notions damlioration progressive et dedgradation lgante prennent une toute nouvelle dimensiondans ce genre de contexte.

    Dfinir des points de rupture

    Cela se matrialise en particulier par la dfinition de ce quonappelle les points de rupture , ainsi que des comportementsde linterface entre deux points de rupture.

    Traditionnellement, la dfinition de ces points de rupture se faitde manire assez brutale en prenant les tailles dcran des plates-formes cibles, et puis voil. Cest une mauvaise ide. Avec unetelle approche, vous pouvez tre certain que vous allez trs viterencontrer des cas o a ne marche pas . Nous verrons auchapitre 4 quil existe une meilleure manire de dfinir prcis-ment les points de rupture. Cependant, lapproche par plate-forme cible reste une bonne faon davoir les ides claires ltape du cahier des charges.

  • 8/11/2019 Projet Responsive Web Design.pdf

    59/175

    MONTER L QUIPE PROJET 45

    Bien que les choix qui restent faire au cours du projet puissentencore avoir un certain effet sur les charges ncessaires pour lesmettre excution, vous devriez maintenant avoir suffisammentles grandes lignes du projet en tte pour imaginer son droule-ment approximatif dans son ensemble. Dans votre tte sentre-choquent alors les diverses possibilits de planning et la combi-naison parfaite des intervenants pour recouvrir tous les besoins,au bon moment.Selon le type de structure dans lequel vous travaillez, cette tchede directeur de casting web sera plus ou moins simple... et

    dans certains cas, totalement infaisable ! Cest pourtant un exer-cice qui aura des consquences svres sur le produit fini. Voilaqui mrite une rflexion de fond...

    Une particularit qui distingue le Web de beaucoup dautresdomaines est quil existe un nombre incroyable dexper-tises fouiller, qui voluent toutes continuellement. Pour les

    passionns du Web, cest un excellent art de vivre : vous avez la

    Monerlquipe proje

  • 8/11/2019 Projet Responsive Web Design.pdf

    60/175

    46 PROJET RESPONSIVE WEB DESIGN

    garantie que vous ne cesserez jamais dapprendre. En revanche,pour monter une quipe avec une expertise globale satisfaisantesur tous les fronts, cet tat de fait rend la tche trs complexe.

    Les lecteurs les plus cartsiens seront ravis de lapprocheque nous allons suivre : nous tentons daborder ce problmecomplexe en le dcoupant en parties simples, que nous allonsappeler les rles projet .

    COMMENT ORCHESTRER LES RLES PROJET ?

    Avec un peu de recul, on constate que lindustrialisation de laralisation de sites web est un concept relativement rcent.Aprs tout, il y a dix ou quinze ans, un amateur seul au fond deson garage pouvait raliser, sans autre assistance, un site webconforme ltat de lart : contenus basiques, peu voire pas dutout de services fonctionnels (les outils techniques nexistaientpas encore) et peu dinquitude quant au fait que les internautesaccdent tous au site dans des conditions optimales.

    Aujourdhui, les attentes lies au Web, quelles viennent des utili-sateurs ou des annonceurs, ont spectaculairement augment etles sites web denvergure doivent rpondre des contraintescouvrant une grande varit dexpertises, et donc de nombreux rles projet .

    Face cette volution, les travailleurs du Web daujourdhui

    ne sont pas tous gaux. une extrmit, les grands groupespiochant leurs profils dans un poolde sous-traitants ont peut-tre parfois la libert, si leur budget le permet, de runir uncasting de rve. Au milieu, les agences web sappuient en prio-rit sur les ressources dont elles disposent dj dans leursrangs et doivent donc composer de manire quilibre avecles comptences et les disponibilits de chacun. Enfin, lautreextrmit, les petits diteurs de produits (de type start-up ,

    par exemple) devront compter sur des effectifs trs limits et un

  • 8/11/2019 Projet Responsive Web Design.pdf

    61/175

    MONTER L QUIPE PROJET 47

    panel dexpertises restreint pour parvenir tout raliser, malgrtout.

    Ne paniquons pas et restons ralistes : de toute manire, y compris

    dans les meilleures conditions, vous naurez simplement jamaislutilit davoir une personne spare pour chaque rle projet. Ilfaut donc viser une distribution intelligente des rles selon lesintervenants qui sont disponibles, en affectant intelligemment chaque personne les rles qui lui sont les plus adapts.

    Dans tous les cas, il ne faut surtout pas approcher les rlescomme un concept statique dans la vie dun projet : dune part,

    plusieurs rles seront affects une mme personne et certainsrles seront partags entre plusieurs personnes ; dautre part,les diffrents rles nont pas pour utilit de se drouler lunaprs lautre, mais souvent simultanment. Cest la complmen-tarit de ces rles projet et leur capacit intervenir en bonneconscience des autres qui rend ce dcoupage pertinent.

    Puisquil faut distribuer intelligemment, noubliez pas deresponsabiliser aussi les profils juniors. Privilgiez plutt unrle fort sur un lot limit, par exemple : responsable du designgraphique pour le tunnel dachat ou responsable du dve-loppement sur lAPI publique .

    Matriser limprvu et le facteur humain dans la conduite de qualit :la charte CATEEA

    propos de la distribution des rles projet, Rudy Rigot a

    prsent Paris Web 2011 une confrence o il proposaitune solution simple pour la reprsenter symboliquementauprs des acteurs du projet, par le biais dune charte noncontractuelle affectant nommment les expertises, quilnommait CATEEA (Collaborative Achievement ThroughEveyones Expertise Acknowledgement). Cette charte doit tremoralement comprise et accepte par tous les intervenants,chef de projet et client (product owner)compris.

  • 8/11/2019 Projet Responsive Web Design.pdf

    62/175

    48 PROJET RESPONSIVE WEB DESIGN

    Lide, en dsignant un responsable pour chaque rleprojet, est de parvenir responsabiliser chaque membre delquipe par rapport ses expertises et celles des autres.Lobjectif est un produit dont chaque axe correspond la

    vision cohrente dun seul expert.

    http://xav.cc/cateea5

    LVOLUTION DES RLES PROJET TYPIQUES

    DANS UN CONTEXTE RESPONSIVEIl existe une myriade de mtiers du Web et, plus on explore lespossibilits de ce support, plus on constate quils se multiplient.Il existe des mtiers que lon retrouve frquemment, sur la largemajorit des projets ; mais certains sont propres des besoinsatypiques.

    Par exemple, vous recherchez un effet waouh gnrallorsque vos utilisateurs regarderont les textes de votre design ?Il vous faut trs certainement un expert en typographie...Vous allez devoir manipuler des quantits astronomiques dedonnes ? Il vous faut trs certainement un expert en big data(qui ne se stocke pas du tout comme de la donne relationnelleclassique).

    Lobjectif, lorsque vous montez votre quipe, est le mme

    pour les rles typiques de projet ou pour les rles atypiques :plus le rle est stratgique, plus vous devrez vous efforcer delaffecter la personne la plus pertinente possible. linverse,plus le rle est secondaire, plus vous pourrez vous autoriser descompromis : par exemple, ce sera le cas avec le rle de designerfonctionnel pour un site de contenus simples (blog, etc.), ou le

    . http://www.paris-web.fr//conferences/maitrisez-limprevu-et-le-facteur-

    humain-dans-votre-conduite-de-qualite-la-charte-cateea.php

  • 8/11/2019 Projet Responsive Web Design.pdf

    63/175

    MONTER L QUIPE PROJET 49

    rle darchitecte back-end pour un site avec peu de dveloppe-ments spcifiques.

    Le chef de projetComme pour tout projet non web, le chef de projet doitconserver la matrise de ses trois sempiternelles contraintes(budget, dlais, couverture fonctionnelle), mener lquipe poursassurer que chacun travaille dans les meilleures conditions etfaire un reportingcontinu et de qualit auprs du client. Il a toutela latitude ncessaire pour laisser sexprimer son expertise.

    La complexit supplmentaire dans le domaine du Web estque le chef de projet doit matriser et arbitrer la manire dontcette myriade dexpertises sarticule. Et celle-ci est tellementtendue que lon prfre souvent diviser le rle en deux : lechef de projet fonctionnel, qui va soccuper de tous les mtiersfront-end, et le chef de projet technique, responsable de tous lesmtiers back-end.

    Dans le contexte indit du design responsive, une nouvelleproblmatique du chef de projet fonctionnel sera darbitrerselon le nouveau dcoupage des expertises dsormais impos.Cette tche sera particulirement difficile face des quipeshabitues au cycle dun projet habituel (designers ne souhai-tant pas de nouvelles contraintes techniques, intgrateurspas intresss pour conseiller les designers...). Toutefois, aufur et mesure que les quipes monteront en comptence et

    prendront de laisance, cet effet indsirable devrait sestomperprogressivement.

    Le product owner

    Leproduct ownerest responsable de la vision globale du projet,surtout par rapport tout lcosystme contextuel qui lentoure

    (le plan de communication global dans lequel il sinscrit, les

  • 8/11/2019 Projet Responsive Web Design.pdf

    64/175

    50 PROJET RESPONSIVE WEB DESIGN

    objectifs marketing en gnral, les potentielles contraintes politiques ). Chez un diteur de logiciels, ce sera certaine-ment un employ, ou lentrepreneur lui-mme sil sagit dunestart-up ; dans une agence web, il se trouvera le plus souvent

    ct client.

    La confusion est facile entre ce rle et celui du chef de projet ;toutefois, il nest pas toujours sain de faire tenir ce rle par lamme personne. Lopposition des deux objectifs est construc-tive. Le chef de projet doit comprendre les contraintes et limi-tations poses par le product owner, mais se concentrer enpriorit sur la qualit du projet lintrieur de ces contraintes.

    Le product owner doit tre preneur des conseils en qualit duchef de projet, mais doit sassurer avant tout que les contraintesdiverses (marketing, politiques) sont respectes. La russitedu projet dpend trs fortement de la qualit de cette opposi-tion de pouvoirs ; la bonne entente entre ces deux profils seradonc un facteur critique de la russite du projet.

    Si vous apprciez les analogies, nous oserons mme comparerces mtiers ceux du cinma : le producteur est le productowner, qui doit sassurer de la bonne sortie du projet, dansles temps, pour le distribuer tel que promis et dans le budgetprvu, tandis que le ralisateur est le chef de projet, qui doitavant tout se concentrer sur la qualit artistique et technique duprojet. Il sagit rellement de la mme opposition saine.

    Dans notre contexte, le product owner nest pas cens treconcern par les nouveauts techniques, puisque le chef de

    projet lui sert justement darbitre et de conseiller sur ces probl-matiques. En revanche, ces nouveauts techniques ont desconsquences marketing, car la stratgie dune marque et lesattentes des utilisateurs peuvent tre globalement diffrentessur mobile et sur desktop. Il faudra donc que le product ownerconnaisse bien les objectifs de ses internautes pour chacun deces types de priphriques, en tant capable de les sparer clai-rement afin que ses retours soient les plus pertinents possibles

    pour chacune des versions.

  • 8/11/2019 Projet Responsive Web Design.pdf

    65/175

    MONTER LQUIPE PROJET 51

    Le directeur artistique

    Comme le dit un certain directeur artistique habitu travaillersur le march amricain, Christophe Zlobinski-Furmaniak,

    en France, on voit toujours fortement le mot artistique; maisdans les pays anglo-saxons, on voit avant tout le mot directeur .

    Le rle du directeur artistique est particulirement incontour-nable dans des contextes stratgiques de communication : il estle garant du respect optimal des valeurs de la marque (dont ila parfois lui-mme cr lidentit). Souvent, il ne fera pas lui-mme le design du site, mais traduira les besoins de communi-

    cation du client en concepts graphiques et livrera une charte lquipe de design graphique pour quelle travaille sans risquerde faux pas. Il est responsable du bon respect de cette chartepar les quipes, et aussi le garant du maintien ou de la monteen comptence artistique des quipes.

    Design motionnel

    Linvitable collection A Book Apart publie un livre du nomde Designing For Emotion (Design motionnel, en franais), quiapporte des preuves concrtes que lempreinte motionnellemise par un design conditionne fortement le comportementde lutilisateur. Il explique galement des mcanismes pourparvenir diffuser lmotion la plus adapte au contexte.Parmi les dmonstrations les plus spectaculaires du livre,lauteur Aaron Walter explique comment un changement de

    quelques couleurs lui a permis daugmenter sensiblement lechiffre daffaires dun site e-commerce majeur.

    A. Walter, Design motionnel, A Book Apart , Eyrolles, 2011

    Si lon dit que le directeur artistique sur des projets web largeur fixe doit, dans la mesure du possible, avoir une bonneconnaissance des contraintes web, cette comptence devient

    un prrequis indispensable lorsquil sagit dadapter le design

  • 8/11/2019 Projet Responsive Web Design.pdf

    66/175

    52 PROJET RESPONSIVE WEB DESIGN

    aux diffrentes tailles dcran. En revanche, le contenu de sontravail changera peu dans ce contexte, surtout sil est habitu travailler sur des projets multicanaux (une charte graphiqueapplicable simultanment un site web, une application

    mobile, des supports imprims). Ici, la charte devra conserversa pertinence travers tous les contextes dcrans ; mais ce nestpas un exercice spcialement nouveau.

    Lergonome et le designer fonctionnel

    Lobjectif de lergonome est simple : rendre le site aussi facile

    et rapide prendre en main que possible pour tout utilisateur.Lobjectif du designer fonctionnel est aussi simple : porter lavision fonctionnelle du projet (organisation de linformation,fluidit dutilisation, correspondance aux objectifs dutilisa-tion), ce qui le mnera le plus souvent la production denombreux wireframes/prototypes/storyboards/scnarios fonc-tionnels, quil ne restera plus qu habiller esthtiquement. Lesdeux rles ont des objectifs suffisamment proches pour tresouvent mis en uvre par la mme personne, mme si lon peutimaginer un ergonome nintervenir quen conseil, par exemple.

    Il sagit de lun des rles les plus concerns par la gestion desdiffrents crans. Une reprsentation fonctionnelle par gabaritne suffira plus : il faudra reprsenter toute la complexit detous les cas dutilisation, qui peuvent tre nombreux. Il faudraaussi parfois remettre en cause les outils habituels, adapts auxdesigns fixes. Nous reviendrons en dtail sur la conception

    fonctionnelle au cours du chapitre 5, qui lui est ddi.

    Design persuasif : pourquoi et comment ?

    Le design persuasif (persuasive design)est une notion qui faitpetit petit son apparition dans les rflexions de consul-tants fonctionnels, notion autant controverse quelle estpotentiellement puissante. Lide initiale est dutiliser des

  • 8/11/2019 Projet Responsive Web Design.pdf

    67/175

    MONTER LQUIPE PROJET 53

    mcanismes de manipulation psychologique pour mener unutilisateur atteindre un objectif donn.

    Prenons un exemple concret utilisant leffet de gel (tendance

    humaine vouloir rester cohrent contre sa propre volont) :on remplace le texte dun bouton Je souhaite accder cette information par le texte Je souhaite accder cetteinformation et acheter ce produit . Lorsque, sur la pagesuivante, on prsentera lutilisateur un bouton Acheterce produit , il aura alors plus frquemment tendance raliser son achat