adapter un design au web mobile grâce aux css - confoo 2011
DESCRIPTION
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 HTML5TRANSCRIPT
![Page 1: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/1.jpg)
Web Mobile et CSSComment adapter un design sur mobile
www.alsacreations.comwww.goetter.frwww.ie7nomore.com twitter : @goetter
Raphaël Goetter
Webdesign · standards web · intégration · HTML · CSS · papa · alsacréations · autodidacte · sport · formation · écriture · webmobile · accessibilité · photographie
![Page 2: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/2.jpg)
Web Mobile et CSSComment adapter un design sur mobile
Et aussi...
Sortie le17 mars
Techniques CSS avancées
Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3)
Gestion de projet(conventions, optimisation des performances, frameworks)
HTML5, CSS3
Résolution de bogues
Multimédia(web mobile, e-mailing, impression, projection,...)
![Page 3: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/3.jpg)
Web Mobile et CSSComment adapter un design sur mobile
Comment adapter (rapidement) un site
web sur terminal mobile ?
![Page 4: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/4.jpg)
Web Mobile et CSSComment adapter un design sur mobile
Mobinaute ?
![Page 5: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/5.jpg)
Web Mobile et CSSComment adapter un design sur mobile
Votre navigateur ?
![Page 6: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/6.jpg)
Web Mobile et CSSComment adapter un design sur mobile
Web mobile ?
![Page 7: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/7.jpg)
Au programmeDo you want to play mobile ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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ît
![Page 8: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/8.jpg)
Au programmeDo you want to play mobile ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Applications nativesLangages Java, Objective-C, C++
![Page 9: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/9.jpg)
Au programmeDo you want to play mobile ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Applications nativesLangages Java, Objective-C, C++
Sites web dédiésNouvelle structure HTML, médias optimisés
![Page 10: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/10.jpg)
Au programmeDo you want to play mobile ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Applications nativesLangages Java, Objective-C, C++
Sites web dédiésNouvelle structure HTML, médias optimisés
Adaptation de design existantAdapter aux mobiles grâce à CSS
![Page 11: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/11.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
![Page 12: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/12.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
Raphaël Goetter alsacreations.com @goetter Confoo 2011
de «mobinautes» en France(contre 13% au Québec, mais en progression de 65% par an)
Sources : Médiamétrie + ARCEP + cyberpresse.ca
28%
![Page 13: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/13.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
Navigateurs mobiles au Canada
![Page 14: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/14.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
Navigateurs mobiles en Amérique du Nord
![Page 15: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/15.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
Et dans le monde ?
![Page 16: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/16.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Conclusion :
Faire un design pour mobile...
Ce n’est pas faire un site pour iPhone !
![Page 17: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/17.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Fréquence de renouvellement des téléphones mobiles
Source : Strategies.fr (2007) et Mobifrance.com (2008)
16 mois
![Page 18: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/18.jpg)
Quelques statistiquesDes usages, des chiffres et des lettres
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Fréquence de renouvellement des téléphones mobiles
16 mois
Les mobiles vont plus vite, plus haut, plus fort...
![Page 19: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/19.jpg)
Vers l'infini et au-delàLes mobiles, à la conquête du monde ?
![Page 20: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/20.jpg)
Vers l'infini et au-delàLes mobiles, à la conquête du monde ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Le jeu des ressemblances...
Nokia N8Nokia C3, C5etc.
Apple iPhoneApple iPadApple iPod
TorchOS6 (récents)
HTC TattooHTC Desireetc.
Galaxy SWaveetc.
Palm Preetc.
![Page 21: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/21.jpg)
Vers l'infini et au-delàLes mobiles, à la conquête du monde ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Le jeu des ressemblances...
Nokia N8Nokia C3, C5Nokia récents
Apple iPhoneApple iPadApple iPod
TorchOS6 (récents)
HTC TattooHTC Desireetc.
Galaxy SWaveetc.
Palm Preetc.
WebKit
![Page 22: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/22.jpg)
Vers l'infini et au-delàLes mobiles, à la conquête du monde ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
moteurs de rendu très aux normes(Webkit (50%), presto, gecko)
un potentiel extraordinaire
Sur mobiles :
moteurs de rendu hétéroclites(Internet Explorer (50%), webkit, gecko)
tenir compte des retardataires
Sur écrans de bureau :
![Page 23: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/23.jpg)
Vers l'infini et au-delàLes mobiles, à la conquête du monde ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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.)
![Page 24: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/24.jpg)
Vers l'infini et au-delàLes mobiles, à la conquête du monde ?
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Conclusion :
YAY !
Et passons enfin aux choses sérieuses…
![Page 25: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/25.jpg)
Largeur(s)Parce que tout est une question de taille
une question
de taille ?
![Page 26: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/26.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
Et...
Si on ne touchait
à rien ?
![Page 27: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/27.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
![Page 28: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/28.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
![Page 29: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/29.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
![Page 30: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/30.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
![Page 31: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/31.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
![Page 32: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/32.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
![Page 33: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/33.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
Si on ne touchait à rien ?Contenus minuscules
Textes illisibles sans zoom
Multicolonnes gênantesDépassement de contenus ou d’images
Design inadapté
Mauvaise expérience utilisateur
![Page 34: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/34.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
Préambule :
quelle est la largeur d’un terminal mobile ?
![Page 35: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/35.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Un écran, plusieurs largeurs :1- screen width2- device-width3- viewport
Largeur(s)
![Page 36: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/36.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Un écran, plusieurs largeurs :1- screen width
Largeur(s)
« Largeur physique réelle de l’écran d’un terminal mobile »
![Page 37: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/37.jpg)
Parce que tout est une question de taille
HTC Tattoo, HTC Legend : 240px
Iphone 3 : 320pxBlackBerry Torch : 360px
Samsung Galaxy S, HTC HD7 : 480px
Iphone 4 : 640px
Ipad : 768px
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Un écran, plusieurs largeurs :1- screen width
Largeur(s)
![Page 38: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/38.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Un écran, plusieurs largeurs :2- device-width
Largeur(s)
« Largeur déclarée par un terminal mobile »
![Page 39: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/39.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Un écran, plusieurs largeurs :2- device-width
Iphone 3 : 320px
Iphone 4 : 320px !
Ipad : 768px
Largeur(s)
![Page 40: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/40.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Un écran, plusieurs largeurs :3- Viewport
Largeur(s)
« Surface virtuelle qu’un mobile accepte d’afficher par défaut à l’écran »
![Page 41: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/41.jpg)
Parce que tout est une question de taille
Android : 800px
Opera : 850pxSafari : 980px
IEMobile : 1024px
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Un écran, plusieurs largeurs :3- Viewport
Largeur(s)
![Page 42: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/42.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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 980px
Largeur(s)
![Page 43: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/43.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Conclusion :
Faire un design pour mobile...
Ce n’est pas fixer sa largeur à 320px !
Largeur(s)
![Page 44: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/44.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
La solution ?
Jouer avec le levier « viewport »
Largeur(s)
![Page 45: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/45.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Largeur(s)
Viewport à l’appréciation du mobile
![Page 46: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/46.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
<meta name="viewport" content="width=320">
Forcer la largeur du Viewport à 320px
Largeur(s)
![Page 47: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/47.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
La balise HTML Meta « Viewport »
<meta name="viewport" content="width=980">
<meta name="viewport" content="width=480">
<meta name="viewport" content="width=320">
Définir la largeur du Viewport en pixels
Largeur(s)
![Page 48: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/48.jpg)
Parce que tout est une question de taille
La balise HTML Meta « Viewport » width=480 width=320width=980
Largeur(s)
![Page 49: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/49.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
La balise HTML Meta « Viewport »
<meta name="viewport" content="width=device-width">
Adapter le viewport à la largeur du terminal
Largeur(s)
![Page 50: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/50.jpg)
Parce que tout est une question de taille
La balise HTML Meta « Viewport » Adapter le viewport à la largeur du terminal
Bingo !
Largeur(s)
![Page 51: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/51.jpg)
Parce que tout est une question de taille
Hey, mais ça déborde ! 320px
c’est tout cassé, là
... width=device-width
Largeur(s)
img 640px
![Page 52: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/52.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Conclusion :
Définir un viewport commun
n’est qu’une (bonne) première étape
Largeur(s)
![Page 53: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/53.jpg)
Parce que tout est une question de taille
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Conclusion :
Définir un viewport commun
n’est qu’une (bonne) première étape
Largeur(s)
C’est là qu’interviennent les Media Queries
![Page 54: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/54.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Daniel Glazman
![Page 55: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/55.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Les médias habituels
Screen : écran
Print : imprimante
Handheld : périphériques mobiles
Speech, Braille : synthèses vocales, plagesProjection : projecteurs (slides)
TV : téléviseur
All : tous les médias à la fois
![Page 56: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/56.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Dans le contexte :
@media print { body { width: 21cm; }}@media handheld { body { width: auto; }}
![Page 57: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/57.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Syntaxe CSS Media Query
@media (screen and max-width:640px) { body { width: auto; }}
Au sein d'une feuille de style :
![Page 58: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/58.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Exemple de Media Query
<link rel="stylesheet" media="screen and (max-width: 640px)" href="mobile.css" type="text/css" />
Appel depuis la page HTML :
![Page 59: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/59.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Media Query en action !
Écran de largeur supérieure à 640px Moins de 640px
![Page 60: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/60.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Cibler un écran de moins de 640px en paysage ? Facile !
@media screen and (max-width:640px) and (orientation:landscape) { body { width: auto; }}
![Page 61: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/61.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
En pratique : passer de flottants à mono-colonne
#nav #content #nav
#content
![Page 62: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/62.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
En pratique : passer de flottants à mono-colonne
#nav { float: left; width: 200px;}#content { float: left; width: 760px; }
@media (max-width:640px) { #nav, #content { float: none; width: auto;}}
Feuille de style CSS unique
![Page 63: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/63.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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 ?
![Page 64: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/64.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Mobile Moteur Navigateur Media Queries
Iphone, iPad, iPod,Blackberry récents
Webkit Safari Mobile OUI
Nexus, certains HTC / Motorola / Nokia / SonyEricsson, Samsung Galaxy et Wave, Palm
Webkit Chrome Mobile OUI
Multiplateformes Presto Opera OUI
Anciens Blackberry Mango Blackberry NON
LG, Anciens HTC, anciens Samsung
Trident (Windows / Bada)
IE Mobile (IE7) NON
HTC, Samsung, nouveaux Nokia
Trident (Windows Phone 7)
IE Mobile (IE7/IE9) NON / OUI
Raphaël Goetter alsacreations.com @goetter Confoo 2011
![Page 65: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/65.jpg)
Media Queries à la rescousse Alerte à Malibu dans votre smartphone
Le truc en plus pour IE Mobile
<link rel="stylesheet"media="screen and (max-width: 640px)"href="mobile.css" type="text/css" />
<!--[if IEMobile]> <link rel="stylesheet" media="screen" href="mobile.css" type="text/css" /> <![endif]-->
<link rel="stylesheet" media="screen" href="styles.css" type="text/css" />
Styles pour tous
Styles pour mobiles
Commentaire conditionnel pour IE mobile
![Page 66: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/66.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
![Page 67: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/67.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°1 :Meta Viewport automatique
![Page 68: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/68.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°1 :Meta Viewport automatique
<meta name="viewport" content="width=device-width">
![Page 69: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/69.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°2 :Dimensions fluides
![Page 70: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/70.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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 HTML
![Page 71: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/71.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°3 :Une seule colonne !
![Page 72: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/72.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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 colonnes
![Page 73: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/73.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°4 :Gérez les débordements
![Page 74: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/74.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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, samp
![Page 75: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/75.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°5 :Supprimez le superflu
![Page 76: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/76.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
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; }}
![Page 77: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/77.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°6 :Adaptez les tailles de polices
![Page 78: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/78.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°6 :Adaptez les tailles de polices
@media screen and (max-width:640px) and (orientation:landscape) { body { -webkit-text-size-adjust: 80% }}
![Page 79: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/79.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°7 :Un zeste de HTML5
![Page 80: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/80.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°7 :Un zeste de HTML5
<input type="email" ><input type="url" ><input type="search" ><input type="number" >...
![Page 81: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/81.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°8 :Optimiser la navigation
![Page 82: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/82.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Bonne pratique n°8 :Optimiser la navigation
#competences nav a {display: block;padding: 6px 18px;width: 92%;...
}
![Page 83: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/83.jpg)
Adapter pour le mobile Les bonnes recettes de grand-mère
Un exemple concret : alsacreations.fr
![Page 84: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/84.jpg)
Un café et l’additionRessources et crédits
Ressources
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Galerie de sitesutilisant media queries :www.mediaqueri.es
![Page 85: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/85.jpg)
Un café et l’additionRessources et crédits
Ressources
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Base de données smartphones :www.deviceatlas.comValidateur W3C Mobile :http://validator.w3.org/mobile/
Media queries JS pour IE :https://github.com/scottjehl/Respond
![Page 86: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/86.jpg)
Un café et l’additionRessources et crédits
Raphaël Goetter alsacreations.com @goetter Confoo 2011
Crédits
Photos, illustrations : www.fotolia.fr
Police : Fontin Sans Rg
Icones et pictos :WPZOOM Developer Icon
![Page 87: Adapter un design au Web Mobile grâce aux CSS - Confoo 2011](https://reader037.vdocuments.mx/reader037/viewer/2022110303/54c820884a79599d5f8b458b/html5/thumbnails/87.jpg)
Merci !
Raphaël Goetter alsacreations.com @goetter Tous droits réservés