Projet Responsive Web

download Projet Responsive Web

of 175

  • date post

    02-Jun-2018
  • Category

    Documents

  • view

    223
  • download

    2

Embed Size (px)

Transcript of Projet Responsive Web

  • 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 trans