Adapter un design au Web Mobile grâce aux CSS - Confoo 2011

24,613 views

Published on

Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320px ou proposer une version iPhone, voici un tour d'horizon de toutes les solutions offertes par CSS pour adapter un design existant au mobinautes.

* vous aimez les chiffres ? bon, c'est pas grave
* un mobile c'est : 1 écran, et... plusieurs largeurs
* le Viewport : c'est quoi et comment le gérer ?
* le messie CSS3 media query en renfort

Pour finir, une méthodologie générale d'adaptation grâce aux CSS :
* gérer la largeur,
* redimensionner les éléments,
* passer à une seule colonne,
* gérer les débordements,
* supprimer le superflu,
* adapter les liens et les polices,
* un zeste de HTML5

Published in: Technology, Education
6 Comments
17 Likes
Statistics
Notes
  • Bonne présentation! Merci!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @BeatBB : il me semble normal que des solutions récentes telles que les media-queries ne soient pas reconnues par les anciens navigateurs tels que IE8.
    C'est reconnu par IE9 et s'il le faut, des solutions alternatives existent, comme par exemple Respond : https://github.com/scottjehl/Respond

    Pour finir : quelle est la part de navigateur IE sur mobile (notre cible) ? ;)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Je viens de prendre connaissance de votre slide que je trouve extrêmement encourageant pour faire évoluer mes sites, en particulier via les media-queries.

    Cependant, dans la foulée, je lis sur OpenWeb que: «Internet Explorer ne supporte pas du tout les media-queries (version mobile et 8 comprises)»

    Lien: http://openweb.eu.org/articles/adapter_site_smartphones Si je comprends bien, le «boxon» avec Internet Explorer continue!!! On n’en aura donc jamais fini?
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Vraiment bien présenté. Merci !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dommage j'ai raté cette conférence ! grr, heureusement il y a des exemples, merci.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
24,695
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
401
Comments
6
Likes
17
Embeds 0
No embeds

No notes for slide

Adapter un design au Web Mobile grâce aux CSS - Confoo 2011

  1. 1. Web Mobile et CSSComment adapter un design sur mobileWebdesign · standards web ·intégration · HTML · CSS · papa ·alsacréations · autodidacte ·sport · formation · écriture ·webmobile · accessibilité · photographie Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com twitter : @goetter
  2. 2. Web Mobile et CSSComment adapter un design sur mobileEt aussi... Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) Sortie Gestion de projet 17 ma le (conventions, optimisation des rs performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...)
  3. 3. Web Mobile et CSSComment adapter un design sur mobile Comment adapter(rapidement) un site web sur terminal mobile ?
  4. 4. Web Mobile et CSSComment adapter un design sur mobileMobinaute ?
  5. 5. Web Mobile et CSSComment adapter un design sur mobileVotre navigateur ?
  6. 6. Web Mobile et CSSComment adapter un design sur mobileWeb mobile ?
  7. 7. Au programme Do you want to play mobile ? Des usages, des chiffres et des lettres Vers l’infini et au-delà ! Largeur(s) : tout est une question de taille CSS3 Media Queries à la rescousse Comment adapter pour le Web Mobile ? Un café et l’addition s’il vous plaîtRaphaël Goetter alsacreations.com @goetter Confoo 2011
  8. 8. Au programme Do you want to play mobile ? Applications natives Langages Java, Objective-C, C++Raphaël Goetter alsacreations.com @goetter Confoo 2011
  9. 9. Au programme Do you want to play mobile ? Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisésRaphaël Goetter alsacreations.com @goetter Confoo 2011
  10. 10. Au programme Do you want to play mobile ? Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisés Adaptation de design existant Adapter aux mobiles grâce à CSSRaphaël Goetter alsacreations.com @goetter Confoo 2011
  11. 11. Quelques statistiquesDes usages, des chiffres et des lettres
  12. 12. Quelques statistiques Des usages, des chiffres et des lettres 28% de «mobinautes» en France (contre 13% au Québec, mais en progression de 65% par an) Sources : Médiamétrie + ARCEP + cyberpresse.caRaphaël Goetter alsacreations.com @goetter Confoo 2011
  13. 13. Quelques statistiquesDes usages, des chiffres et des lettresNavigateurs mobiles au Canada
  14. 14. Quelques statistiquesDes usages, des chiffres et des lettresNavigateurs mobiles en Amérique du Nord
  15. 15. Quelques statistiquesDes usages, des chiffres et des lettresEt dans le monde ?
  16. 16. Quelques statistiques Des usages, des chiffres et des lettres Conclusion : Faire un design pour mobile... Ce n’est pas faire un site pour iPhone !Raphaël Goetter alsacreations.com @goetter Confoo 2011
  17. 17. Quelques statistiques Des usages, des chiffres et des lettres 16 Fréquence de renouvellement des mois téléphones mobiles Source : Strategies.fr (2007) et Mobifrance.com (2008)Raphaël Goetter alsacreations.com @goetter Confoo 2011
  18. 18. Quelques statistiques Des usages, des chiffres et des lettres 16 Fréquence de renouvellement des mois téléphones mobiles Les mobiles vont plus vite, plus haut, plus fort...Raphaël Goetter alsacreations.com @goetter Confoo 2011
  19. 19. Vers linfini et au-delàLes mobiles, à la conquête du monde ?
  20. 20. Vers linfini et au-delà Les mobiles, à la conquête du monde ? Le jeu des ressemblances... Nokia N8 HTC Tattoo Nokia C3, C5 HTC Desire etc. etc. Apple iPhone Galaxy S Apple iPad Wave Apple iPod etc. Palm Pre Torch etc. OS6 (récents)Raphaël Goetter alsacreations.com @goetter Confoo 2011
  21. 21. Vers linfini et au-delà Les mobiles, à la conquête du monde ? Le jeu des ressemblances... WebKit Nokia N8 HTC Tattoo Nokia C3, C5 HTC Desire Nokia récents etc. Apple iPhone Galaxy S Apple iPad Wave Apple iPod etc. Palm Pre Torch etc. OS6 (récents)Raphaël Goetter alsacreations.com @goetter Confoo 2011
  22. 22. Vers linfini et au-delà Les mobiles, à la conquête du monde ? Sur écrans de bureau : moteurs de rendu hétéroclites (Internet Explorer (50%), webkit, gecko) tenir compte des retardataires Sur mobiles : moteurs de rendu très aux normes (Webkit (50%), presto, gecko) un potentiel extraordinaireRaphaël Goetter alsacreations.com @goetter Confoo 2011
  23. 23. Vers linfini et au-delà Les mobiles, à la conquête du monde ? Positionnement avancé (inline-block, table-layout) CSS 2.1 avancé (:before, :after, sélecteurs, first-child) CSS 3 (border-radius, box-shadow, @font-face, flexible model, transparence, transformations, animations, media-query) HTML 5 (formulaires, géolocalisation, etc.)Raphaël Goetter alsacreations.com @goetter Confoo 2011
  24. 24. Vers linfini et au-delà Les mobiles, à la conquête du monde ? Conclusion : YAY ! Et passons enfin aux choses sérieuses…Raphaël Goetter alsacreations.com @goetter Confoo 2011
  25. 25. Largeur(s)Parce que tout est une question de taille une question de taille ?
  26. 26. Largeur(s) Parce que tout est une question de taille Et... Si on ne touchait à rien ?Raphaël Goetter alsacreations.com @goetter Confoo 2011
  27. 27. Largeur(s) Parce que tout est une question de tailleRaphaël Goetter alsacreations.com @goetter Confoo 2011
  28. 28. Largeur(s) Parce que tout est une question de tailleRaphaël Goetter alsacreations.com @goetter Confoo 2011
  29. 29. Largeur(s) Parce que tout est une question de tailleRaphaël Goetter alsacreations.com @goetter Confoo 2011
  30. 30. Largeur(s) Parce que tout est une question de tailleRaphaël Goetter alsacreations.com @goetter Confoo 2011
  31. 31. Largeur(s) Parce que tout est une question de tailleRaphaël Goetter alsacreations.com @goetter Confoo 2011
  32. 32. Largeur(s) Parce que tout est une question de tailleRaphaël Goetter alsacreations.com @goetter Confoo 2011
  33. 33. Largeur(s) Parce que tout est une question de taille Si on ne touchait à rien ? Contenus minuscules Textes illisibles sans zoom Multicolonnes gênantes Dépassement de contenus ou d’images Design inadapté Mauvaise expérience utilisateurRaphaël Goetter alsacreations.com @goetter Confoo 2011
  34. 34. Largeur(s) Parce que tout est une question de taille Préambule : quelle est la largeur d’un terminal mobile ?Raphaël Goetter alsacreations.com @goetter Confoo 2011
  35. 35. Largeur(s) Parce que tout est une question de taille Un écran, plusieurs largeurs : 1- screen width 2- device-width 3- viewportRaphaël Goetter alsacreations.com @goetter Confoo 2011
  36. 36. Largeur(s) Parce que tout est une question de taille Un écran, plusieurs largeurs : 1- screen width « Largeur physique réelle de l’écran d’un terminal mobile »Raphaël Goetter alsacreations.com @goetter Confoo 2011
  37. 37. Largeur(s) Parce que tout est une question de taille Un écran, plusieurs largeurs : 1- screen width HTC Tattoo, HTC Legend : 240px Iphone 3 : 320px BlackBerry Torch : 360px Samsung Galaxy S, HTC HD7 : 480px Iphone 4 : 640px Ipad : 768pxRaphaël Goetter alsacreations.com @goetter Confoo 2011
  38. 38. Largeur(s) Parce que tout est une question de taille Un écran, plusieurs largeurs : 2- device-width « Largeur déclarée par un terminal mobile »Raphaël Goetter alsacreations.com @goetter Confoo 2011
  39. 39. Largeur(s) Parce que tout est une question de taille Un écran, plusieurs largeurs : 2- device-width Iphone 3 : 320px Iphone 4 : 320px ! Ipad : 768pxRaphaël Goetter alsacreations.com @goetter Confoo 2011
  40. 40. Largeur(s) Parce que tout est une question de taille Un écran, plusieurs largeurs : 3- Viewport « Surface virtuelle qu’un mobile accepte d’afficher par défaut à l’écran »Raphaël Goetter alsacreations.com @goetter Confoo 2011
  41. 41. Largeur(s) Parce que tout est une question de taille Un écran, plusieurs largeurs : 3- Viewport Android : 800px Opera : 850px Safari : 980px IEMobile : 1024pxRaphaël Goetter alsacreations.com @goetter Confoo 2011
  42. 42. Largeur(s) Parce que tout est une question de taille Tableau récapitulatif (Apple) : Terminal Screen Width Device-width Viewport Iphone 3 (portrait) 320px 320px 980px Iphone 4 (portrait) 640px 320px 980px Iphone 4 (paysage) 960px 480px 980px Ipad (portrait) 768px 768px 980pxRaphaël Goetter alsacreations.com @goetter Confoo 2011
  43. 43. Largeur(s) Parce que tout est une question de taille Conclusion : Faire un design pour mobile... Ce n’est pas fixer sa largeur à 320px !Raphaël Goetter alsacreations.com @goetter Confoo 2011
  44. 44. Largeur(s) Parce que tout est une question de taille La solution ? Jouer avec le levier « viewport »Raphaël Goetter alsacreations.com @goetter Confoo 2011
  45. 45. Largeur(s) Parce que tout est une question de taille Viewport à l’appréciation du mobileRaphaël Goetter alsacreations.com @goetter Confoo 2011
  46. 46. Largeur(s) Parce que tout est une question de taille Forcer la largeur du Viewport à 320px <meta name="viewport" content="width=320">Raphaël Goetter alsacreations.com @goetter Confoo 2011
  47. 47. Largeur(s) Parce que tout est une question de taille La balise HTML Meta « Viewport » Définir la largeur du Viewport en pixels <meta name="viewport" content="width=980"> <meta name="viewport" content="width=480"> <meta name="viewport" content="width=320">Raphaël Goetter alsacreations.com @goetter Confoo 2011
  48. 48. Largeur(s)Parce que tout est une question de tailleLa balise HTML Meta « Viewport »width=980 width=480 width=320
  49. 49. Largeur(s) Parce que tout est une question de taille La balise HTML Meta « Viewport » Adapter le viewport à la largeur du terminal <meta name="viewport" content="width=device-width">Raphaël Goetter alsacreations.com @goetter Confoo 2011
  50. 50. Largeur(s)Parce que tout est une question de tailleLa balise HTML Meta « Viewport »Adapter le viewport à la largeur du terminal Bingo !
  51. 51. Largeur(s)Parce que tout est une question de tailleHey, mais ça déborde ! 320px... width=device-width c’est tout cassé, là img 640px
  52. 52. Largeur(s) Parce que tout est une question de taille Conclusion : Définir un viewport commun n’est qu’une (bonne) première étapeRaphaël Goetter alsacreations.com @goetter Confoo 2011
  53. 53. Largeur(s) Parce que tout est une question de taille Conclusion : Définir un viewport commun n’est qu’une (bonne) première étape C’est là qu’interviennent les Media QueriesRaphaël Goetter alsacreations.com @goetter Confoo 2011
  54. 54. Media Queries à la rescousseAlerte à Malibu dans votre smartphone Daniel Glazman
  55. 55. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Les médias habituels Screen : écran Print : imprimante Handheld : périphériques mobiles Speech, Braille : synthèses vocales, plages Projection : projecteurs (slides) TV : téléviseur All : tous les médias à la foisRaphaël Goetter alsacreations.com @goetter Confoo 2011
  56. 56. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Dans le contexte : @media print { body { width: 21cm; } } @media handheld { body { width: auto; } }Raphaël Goetter alsacreations.com @goetter Confoo 2011
  57. 57. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Syntaxe CSS Media Query Au sein dune feuille de style : @media (screen and max-width:640px) { body { width: auto; } }Raphaël Goetter alsacreations.com @goetter Confoo 2011
  58. 58. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Exemple de Media Query Appel depuis la page HTML : <link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" type="text/css" />Raphaël Goetter alsacreations.com @goetter Confoo 2011
  59. 59. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Media Query en action ! Écran de largeur supérieure à 640px Moins de 640pxRaphaël Goetter alsacreations.com @goetter Confoo 2011
  60. 60. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Cibler un écran de moins de 640px en paysage ? Facile ! @media screen and (max-width:640px) and (orientation:landscape) { body { width: auto; } }Raphaël Goetter alsacreations.com @goetter Confoo 2011
  61. 61. Media Queries à la rescousse Alerte à Malibu dans votre smartphone En pratique : passer de flottants à mono-colonne #nav #content #nav #contentRaphaël Goetter alsacreations.com @goetter Confoo 2011
  62. 62. Media Queries à la rescousse Alerte à Malibu dans votre smartphone En pratique : passer de flottants à mono-colonne #nav { float: left; width: 200px;} Feuille de #content { float: left; width: 760px; } style CSS unique @media (max-width:640px) { #nav, #content { float: none; width: auto;} }Raphaël Goetter alsacreations.com @goetter Confoo 2011
  63. 63. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Et la compatibilité navigateurs de bureau ? ✔ Mozilla Firefox : 3.5+ ✔ Internet Explorer : 9+ ✔ Google Chrome : 5+ ✔ Opera : 10.5+ ✔ Apple Safari : 4+ Mais où sont cachés IE6, IE7 et IE8 ?Raphaël Goetter alsacreations.com @goetter Confoo 2011
  64. 64. Media Queries à la rescousse Alerte à Malibu dans votre smartphone Mobile Moteur Navigateur Media Queries Iphone, iPad, iPod, Webkit Safari Mobile OUI Blackberry récents Nexus, certains HTC / Webkit Chrome Mobile OUI Motorola / Nokia / SonyEricsson, Samsung Galaxy et Wave, Palm Multiplateformes Presto Opera OUI Anciens Blackberry Mango Blackberry NON LG, Anciens HTC, anciens Trident (Windows / IE Mobile (IE7) NON Samsung Bada) HTC, Samsung, nouveaux Trident (Windows IE Mobile (IE7/IE9) NON / OUI Nokia Phone 7)Raphaël Goetter alsacreations.com @goetter Confoo 2011
  65. 65. Media Queries à la rescousseAlerte à Malibu dans votre smartphoneLe truc en plus pour IE Mobile<link rel="stylesheet" media="screen" Styles pourhref="styles.css" type="text/css" /> tous<link rel="stylesheet" Styles pourmedia="screen and (max-width: 640px)" mobileshref="mobile.css" type="text/css" /><!--[if IEMobile]> Commentaire<link rel="stylesheet" media="screen" conditionnel pour IEhref="mobile.css" type="text/css" /> mobile<![endif]-->
  66. 66. Adapter pour le mobileLes bonnes recettes de grand-mère
  67. 67. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°1 : Meta Viewport automatiqueRaphaël Goetter alsacreations.com @goetter Confoo 2011
  68. 68. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°1 : Meta Viewport automatique <meta name="viewport" content="width=device-width">Raphaël Goetter alsacreations.com @goetter Confoo 2011
  69. 69. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°2 : Dimensions fluidesRaphaël Goetter alsacreations.com @goetter Confoo 2011
  70. 70. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°2 : Dimensions fluides Pas de blocs avec width supérieur au device-width Attention à min-width, margin et padding Attention aux dimensions de images HTMLRaphaël Goetter alsacreations.com @goetter Confoo 2011
  71. 71. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°3 : Une seule colonne !Raphaël Goetter alsacreations.com @goetter Confoo 2011
  72. 72. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°3 : Une seule colonne ! Remettre les éléments dans le flux (float: none, position: static) Préférer les empilements verticaux aux colonnesRaphaël Goetter alsacreations.com @goetter Confoo 2011
  73. 73. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°4 : Gérez les débordementsRaphaël Goetter alsacreations.com @goetter Confoo 2011
  74. 74. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°4 : Gérez les débordements max-width: 100% sur img, table, td, blockquote, object, embed, video, input, textarea word-wrap:break-word sur blocs de contenus white-space: pre-wrap sur code, pre, sampRaphaël Goetter alsacreations.com @goetter Confoo 2011
  75. 75. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°5 : Supprimez le superfluRaphaël Goetter alsacreations.com @goetter Confoo 2011
  76. 76. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°5 : Supprimez le superflu body { background: url(caribou.jpg); } #pub { background: url(sirop_erable.jpg); } @media screen and (max-width:640px) { body { background: none; } #pub { display: none; } }Raphaël Goetter alsacreations.com @goetter Confoo 2011
  77. 77. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°6 : Adaptez les tailles de policesRaphaël Goetter alsacreations.com @goetter Confoo 2011
  78. 78. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°6 : Adaptez les tailles de polices @media screen and (max-width:640px) and (orientation:landscape) { body { -webkit-text-size-adjust: 80% } }Raphaël Goetter alsacreations.com @goetter Confoo 2011
  79. 79. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°7 : Un zeste de HTML5Raphaël Goetter alsacreations.com @goetter Confoo 2011
  80. 80. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°7 : Un zeste de HTML5 <input type="email" > <input type="url" > <input type="search" > <input type="number" > ...Raphaël Goetter alsacreations.com @goetter Confoo 2011
  81. 81. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°8 : Optimiser la navigationRaphaël Goetter alsacreations.com @goetter Confoo 2011
  82. 82. Adapter pour le mobile Les bonnes recettes de grand-mère Bonne pratique n°8 : Optimiser la navigation #competences nav a { display: block; padding: 6px 18px; width: 92%; ... }Raphaël Goetter alsacreations.com @goetter Confoo 2011
  83. 83. Adapter pour le mobileLes bonnes recettes de grand-mèreUn exemple concret : alsacreations.fr
  84. 84. Un café et l’addition Ressources et crédits Ressources Galerie de sites utilisant media queries : www.mediaqueri.esRaphaël Goetter alsacreations.com @goetter Confoo 2011
  85. 85. Un café et l’addition Ressources et crédits Ressources Base de données smartphones : www.deviceatlas.com Validateur W3C Mobile : http://validator.w3.org/mobile/ Media queries JS pour IE : https://github.com/scottjehl/RespondRaphaël Goetter alsacreations.com @goetter Confoo 2011
  86. 86. Un café et l’addition Ressources et crédits Crédits Photos, illustrations : www.fotolia.fr Police : Fontin Sans Rg Icones et pictos : WPZOOM Developer IconRaphaël Goetter alsacreations.com @goetter Confoo 2011
  87. 87. Merci !Raphaël Goetter alsacreations.com @goetter Tous droits réservés

×