RWDConception d’IHM Web adaptativesBreizhCamp 2013Ven. 14 juin@JulienLeThuaut
2RWD – Responsive Web DesignSommaire• Contexte & problématique• Concept du  « Responsive design »• Focus sur les Media-que...
3Contexte & problématiqueConstat : La consultation des sites sur Internet tend de plus en plus àse faire via des appareils...
4Contexte & problématique De plus en plus d’internautes disent accéder au web« uniquement » depuis leur mobile/tablette !
Contexte & problématique Et ça va s’amplifier ! (Sources : lesnumeriques)
6Contexte & problématiqueSolution 1 : Concevoir un site par plateforme ?Temps et coût de conception plus important, revie...
7Contexte & problématiqueAlors ?Peut-on produire aujourd’hui un site ou uneinterface Web, pouvant à la fois :être visuali...
Contexte & problématiqueConcevoir un site en utilisant les techniques de « Responsive Design »= design adaptatif/réactif
Contexte & problématiqueAlors, le Responsive Web Design :Mode ?Tendance ?Concept magique ?Ou nouveau standard ?
10Le conceptA partir d’un code HTML unique, mettre en œuvre un ensemble demécanismes permettant l’adaptation (taille, agen...
11Le conceptOK, donc comment ça fonctionne ?Le RWD = ensemble de techniques, et basé sur 3 principes fondamentaux :• Défin...
Le conceptAutres démos : http://mediaqueri.es/
13TECH : Focus sur les media-queriesMedia-queries CSS : conditions dans l’application des styles CSSCritères de tests•Tail...
Exemple :Utilisation pour un layout en colonnes « responsive »Quel support ?Media-queries > CSS3 (Caniuse) donc pas suppor...
15TECH : Focus sur les media-queriesCombien de points de ruptures ?Minimum 1 : Petits écrans <> Grands écrans (bascule à 4...
16Techniques et mise en œuvre du RWD - illustrationsCe qu’on va pouvoir adapterLayout flexible / Grilles (Fluide / RWD)Ima...
17Techniques et mise en œuvre du RWD - illustrationsExemple concret et complet : Site du Smashing magazine
18Bilan : Principaux avantagesProposer une seule version d’un site Web visualisable et utilisable via de multiplesterminau...
19Bilan : Inconvénients majeursProposer une seule version d’un site Web optimisée sur tous lesterminaux est utopique !Il f...
20Bilan : Possibles inconvénients, points d’attentionCoût de conception augmenté par rapport à un site/une interface « cla...
21Donc ?Pour choisir entre le responsive ou les versions séparées, tout dépenddonc :•du nombre de terminaux visés•du type ...
22TECH : Outils / FrameworksFrameworks simples (grilles fluides [+ templates HTML et Photoshop])•1140 CSS Grid•Columnal•In...
23TECH : Quelques limitesAttention : Modification de l’apparence seulement et pas du contenu L’ensemble du DOM est évalué...
24UI/UX : Impacts sur le design / graphismeComment aborder la conception :Quelle approche :• Desktop first vs. Mobile fir...
25Réflexions : Les impacts sur la méthodo, le cycle de vie du projetQuels impacts sur la conception (maquettage) Créativi...
26Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
27Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
28Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
29Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
30Réflexions : Les impacts sur la méthodo, le cycle de vie du projetQuels impacts sur L’intégration HTML (Mobile-first / D...
31Réflexions : Les impacts sur la méthodo, le cycle de vie du projetQuels impacts sur le développement ( Client / Serveur ...
32Bilan : Impacts sur le coûtAssez difficile à évaluer/chiffrer car dépend du contexte/client Hypothèses :• Un site « res...
33C’est tout pour aujourd’hui !
Upcoming SlideShare
Loading in...5
×

Responsive Web Design - BreizhCamp 2013

864
-1

Published on

Introduction aux concepts de Responsive Web Design, méthodos, outils et REX sur ces méthodes (Avantages, inconvénients, coûts...) pour le BreizhCamp 2013

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
864
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • MBA Multimedia 14 juin 2013 Web mobile, tendances IHM, concepts d’ergonomie adaptative
  • 1 er but : Sensibilisation aux concepts et survol des technos MBA Multimedia 14 juin 2013
  • MBA Multimedia 14 juin 2013
  • MBA Multimedia 14 juin 2013
  • MBA Multimedia 14 juin 2013
  • Souvent gérés par les frameworks, pas forcément facile à adapter (critere de choix du framework) MBA Multimedia 14 juin 2013
  • waterfall MBA Multimedia 14 juin 2013
  • Responsive Web Design - BreizhCamp 2013

    1. 1. RWDConception d’IHM Web adaptativesBreizhCamp 2013Ven. 14 juin@JulienLeThuaut
    2. 2. 2RWD – Responsive Web DesignSommaire• Contexte & problématique• Concept du  « Responsive design »• Focus sur les Media-queries CSS3• Les techniques de mise en œuvre• Les outils, frameworks existants• Bilan 1 : Avantages / Inconvénients• Impacts sur un projet : Conception / Intégration / Développement• Bilan 2 : Le coût du « Responsive Design »
    3. 3. 3Contexte & problématiqueConstat : La consultation des sites sur Internet tend de plus en plus àse faire via des appareils mobiles, aux multiples formats (Taille,résolution, O/S, navigateur, support tactile, orientation, qualitéconnexion réseau, etc.) http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-200812-201212
    4. 4. 4Contexte & problématique De plus en plus d’internautes disent accéder au web« uniquement » depuis leur mobile/tablette !
    5. 5. Contexte & problématique Et ça va s’amplifier ! (Sources : lesnumeriques)
    6. 6. 6Contexte & problématiqueSolution 1 : Concevoir un site par plateforme ?Temps et coût de conception plus important, revient à créer plusieurs sitesSolution 2 : Appli native ? (IOS, Android…)Problématique différenteSolution 3 : Concevoir un unique site avec une mise en page fluide(tailles variables) ?Pas une nouveauté ! Le Web est fluide de base, mode des années 2000(tables), etc..Mais… aucune mise en page, qu’elle soit fixe ou variable, ne peut s’adapter defaçon homogène et optimale à un contexte autre que celui pour lequel elle aété conçue 
    7. 7. 7Contexte & problématiqueAlors ?Peut-on produire aujourd’hui un site ou uneinterface Web, pouvant à la fois :être visualisée et utilisée sur tout type de plateforme ?et ceci dans des résolutions différentes et des contextesd’utilisation différents ?
    8. 8. Contexte & problématiqueConcevoir un site en utilisant les techniques de « Responsive Design »= design adaptatif/réactif
    9. 9. Contexte & problématiqueAlors, le Responsive Web Design :Mode ?Tendance ?Concept magique ?Ou nouveau standard ?
    10. 10. 10Le conceptA partir d’un code HTML unique, mettre en œuvre un ensemble demécanismes permettant l’adaptation (taille, agencement, structure,…)de ce site à diverses résolutions, orientations, etc.
    11. 11. 11Le conceptOK, donc comment ça fonctionne ?Le RWD = ensemble de techniques, et basé sur 3 principes fondamentaux :• Définition d’un layout fluide (Taille des éléments en %, grilles CSS)• Intégration de média flexibles (Images, vidéos, textures…)• Utilisation de media-queries : adapter le site lorsque le rendu n’est plusacceptableL’UI est conçue pour s’adapter à certaines [plages de] résolutions. On parle de« Breakpoints » (Points de rupture, points de bascule).On peut déterminer autant de breakpoints que l’on souhaite pour un projet.(0 < > 480px < > 960px <> 1024 px <> 1280px <> 1600 px <> etc.)
    12. 12. Le conceptAutres démos : http://mediaqueri.es/
    13. 13. 13TECH : Focus sur les media-queriesMedia-queries CSS : conditions dans l’application des styles CSSCritères de tests•Taille écran (largeur min-max, hauteur min-max)•Résolution écran (PPI)•Orientation (Paysage, portrait)•Type d’appareil (screen, handheld, print, tv, etc.)•AutresCes critères peuvent être combinés :Ex. : si taille max écran = 480px et orientation = portrait
    14. 14. Exemple :Utilisation pour un layout en colonnes « responsive »Quel support ?Media-queries > CSS3 (Caniuse) donc pas supportées sous IE<9 (respond.js)Mais supporté pas l’ensemble des navigateurs mobiles du marché TECH : Focus sur les media-queries
    15. 15. 15TECH : Focus sur les media-queriesCombien de points de ruptures ?Minimum 1 : Petits écrans <> Grands écrans (bascule à 480px)Maximum 2 : Petits <> moyens <> grands écrans (480 / 768 )Souvent définis par les frameworks (critère de choix ?)
    16. 16. 16Techniques et mise en œuvre du RWD - illustrationsCe qu’on va pouvoir adapterLayout flexible / Grilles (Fluide / RWD)Images / Vidéos (demo)Taille des éléments HTMLAffichage/Masquage d’élémentsÉléments de navigation / MenusTypographie (rem)Formulaires/Tableaux (RDT)Etc.
    17. 17. 17Techniques et mise en œuvre du RWD - illustrationsExemple concret et complet : Site du Smashing magazine
    18. 18. 18Bilan : Principaux avantagesProposer une seule version d’un site Web visualisable et utilisable via de multiplesterminaux est une démarche très avantageuse pour plusieurs raisons •Pas besoin de créer plusieurs sites/applis dédiées à un type d’appareil précis•Pas de mécanisme à mettre en place (et à maintenir) pour basculer automatiquementl’utilisateur vers la version du site adéquate (ex. test UserAgent)•Même sur un appareil donné, si la taille du navigateur est modifiée (Redimensionnementde fenêtre, orientation), le contenu va s’adapter•Un seul code à maintenir (bugs, modification de contenu)•SEO : Ne pénalise pas le référencement du site (Duplicate content)•Touche un maximum d’utilisateurs Si le site n’est pas destiné à un type d’appareil particulier, il y a un grand intérêtà privilégier une conception « responsive »
    19. 19. 19Bilan : Inconvénients majeursProposer une seule version d’un site Web optimisée sur tous lesterminaux est utopique !Il faudra forcément faire des compromis qui peuvent ne pas êtresatisfaisant pour l’utilisateur.Difficile d’envisager une interface Web unique confortable à la fois surles petits et grands écrans : soit le site sera étriqué sur grand écranavec des boutons surdimensionnés, soit il faudra sans cesse zoomer dansla page pour pouvoir lire le contenu sur un petit écran…Contenus tiers : Ex. codes embarqués, iframes (ex. boutons FB) 
    20. 20. 20Bilan : Possibles inconvénients, points d’attentionCoût de conception augmenté par rapport à un site/une interface « classique » ?Nécessite plus de temps et de compétences (Conception, réalisation, tests) donc coûte plus cher àmettre en œuvre Mais, doit pouvoir être maitrisé et cadré (ex. Utilisation de frameworks ?)Liberté de l’utilisateur limitée ?Risque de brider l’utilisateur en l’empêchant d’accéder à la version qu’il souhaite visualiser !Concepts d’Opt-in / Opt-out ?Problématiques en cours d’étude…Design épuré = manque d’originalité ?C’est un risque, possibilité de voir de plus en plus de sites « responsive » fortement semblables,surtout du fait de l’utilisation de Frameworks ou de templates responsive.Grilles souvent décriées car plus un outil de typographie plébiscité par les designers issus du print…Attention à ne pas sacrifier l’identité du client seulement par contrainte technique !
    21. 21. 21Donc ?Pour choisir entre le responsive ou les versions séparées, tout dépenddonc :•du nombre de terminaux visés•du type de contenu et d’interaction que le site propose (donc de l’effort demaintenance)•Du degré de complexité des interfaces (Visuelles ou non…)•de la compétence HTML/CSS dans l’équipeUne analyse fine doit être faite au départ du projet.Si des expériences clairement différentes doivent être proposées sur mobile,tablette, desktop ou TV, il faut alors plus imaginer une solution dédiée par support !Sinon ! Let’s GOOOO
    22. 22. 22TECH : Outils / FrameworksFrameworks simples (grilles fluides [+ templates HTML et Photoshop])•1140 CSS Grid•Columnal•Ingrid•…Frameworks évolués (Composants + scripts + styles CSS prédéfinis + grilles + templatesHTML, etc.)•Foundation•Twitter bootstrap•Gumby•Skeleton•…Cloner, créer son propre framework ou sa solution Hybride
    23. 23. 23TECH : Quelques limitesAttention : Modification de l’apparence seulement et pas du contenu L’ensemble du DOM est évalué par le navigateur donc tous les médias (images, vidéos)présentes dans le HTML sont chargées, même si masquées par le CSSNB : Possibilité de « tricher » : Scripts JS (ex. mobiledetect.js)Optimisations par certains navigateurs (Contenu masqué non chargé)Certains Frameworks complexes, difficilement customisables (design)Tests sur plusieurs navigateurs nécessaires Évaluation du CSS et rendu pas tout le temps identique… même si cela tend às’améliorerTests sur un navigateur desktop seulement pas suffisant Moteurs de rendus des navigateurs différents en fonction des plateformes…(Adobe Inspect)
    24. 24. 24UI/UX : Impacts sur le design / graphismeComment aborder la conception :Quelle approche :• Desktop first vs. Mobile first ?• Progressive enhancement vs. Graceful degradation ?Maquettage : toutes les résolutions ? version principale seulement ?Définition de comportement génériques sur les éléments HTML lors du passage d’unerésolution à une autre ? Ou re-définition sur chaque projet de comportement spécifiques ?Pistes :- Templates zoning (Visio, papier, Web)- Prototypes / Site de démo / Maquettes de démo- Frameworks A éviter : 3 Résolutions à concevoir + à maquetter + à intégrer + à maintenir = Budgetde 3 sites distincts
    25. 25. 25Réflexions : Les impacts sur la méthodo, le cycle de vie du projetQuels impacts sur la conception (maquettage) Créativité : Se limiter forcément sur desschémas d’interface simples (Lignes etcolonnes, grilles) ?  Doit-on vraiment réaliser plusieursmaquettes ou peut-on définir et utiliser descomportements génériques (modèles) quis’appliqueront à l’UI ? (ex. Une lignedivisée en 3 blocs horizontaux sur PC =Empilement vertical des blocs sur mobile) Nouveaux documents de schématisationplutôt qu’une maquette ? (Content-choreography)Les patterns à la rescousse !
    26. 26. 26Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
    27. 27. 27Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
    28. 28. 28Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
    29. 29. 29Réflexions : Les impacts sur la méthodo, le cycle de vie du projetUtilisation ou définition de design patterns RWD
    30. 30. 30Réflexions : Les impacts sur la méthodo, le cycle de vie du projetQuels impacts sur L’intégration HTML (Mobile-first / Desktop-first) Communication / échanges / collaboration indispensable dès le début entregraphiste et intégrateur Process de production linéaire : Graphiste > Intégrateur > Développeur : Pasadapté ! Utilisation de nouveaux outils/Frameworks ou codage from-scratch ? Mise à jour de la méthodo de l’intégrateur, codes réutilisables à faire évoluer,gabarits à mettre à jour… Procédure de tests plus longue (toutes les résolutions ?), retouches nécessaires aucas par cas ? (Utile : Responsinator, Adobe EDGE Inspect, BrowserStack) RWD = Concept encore jeune. Best-practices pas encore forcément identifiées Place de l’intégrateur/développeur au sein de la chaîne de production plus importante surce type de projet. Le graphiste n’est pas le seul maître du rendu final de l’application.Si pas de graphiste ou d’intégrateur CSS  Framework
    31. 31. 31Réflexions : Les impacts sur la méthodo, le cycle de vie du projetQuels impacts sur le développement ( Client / Serveur ) Être « responsive » au niveau de l’affichage n’est pas suffisant ! Optimisation des performances, de l’utilisabilité, des requêtes serveuraussi à prendre en compteRécent concept de RESS : Responsive web design Server Side Appliquer des conditions basées sur la résolution, le device, l’orientationcôté serveur et par exemple, produire un code HTML structurédifféremment en fonction de ces infos (RESS)
    32. 32. 32Bilan : Impacts sur le coûtAssez difficile à évaluer/chiffrer car dépend du contexte/client Hypothèses :• Un site « responsive » avec 3 résolutions == Cout site classique x 3 ?  Si autant de travail sur chaque version, c’est fortement possible ! Peu souhaitable• Un site « responsive » avec 3 résolutions >= Cout site classique x 3 ?  C’est le risque si mal conçu, si trop d’aller-retour client, si trop de règles spécifiques àcertaines versions du site ! Peu être plus pertinent d’imaginer 3 projets distincts dans ce cas…•Un site « responsive » avec 3 résolutions <= Cout site classique x 3 ?  C’est le but à atteindre en :• améliorant la méthodo de conception/production progressivement (Retour d’exp.)• optimisant le travail de l’équipe (Nouveaux documents de conception, outils,utilisation de frameworks)• Sensibilisant le client sur le coût réel du RWD (Ce n’est pas magique ni gratuit !)•Un site « responsive » avec 3 versions == Cout site classique ? Très peu probable car forcément plus de travail (Conception, maquettage, intégration,tests)
    33. 33. 33C’est tout pour aujourd’hui !

    ×