Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
42
Raphaël Goetter Un site mobile en 1h ? Un site mobile en 1h ? Crédits : flickr.com/photos/st3f4n TOP CHRONO !
-
Upload
raphael-goetter -
Category
Technology
-
view
7.949 -
download
2
description
Votre site web s'affiche mal sur terminal mobile ? Vous n'avez pas forcément les ressources et les moyens de vous offrir une version dédiée ou une application native ?Ou plus simplement, vous être pressé et voulez "arranger les choses" en attendant mieux.Voici quelques outils et pistes à suivre pour réaliser une adaptation mobile d'un site existant via meta viewport et CSS3 media queries.
Transcript of Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Raphaël Goetter
Un site mobile en 1h ?Un site mobile en 1h ?
Crédits : flickr.com/photos/st3f4n
TOP CHRONO !
www.alsacreations.comwww.goetter.frwww.ie7nomore.com@goetter
Raphaël Goetter
Un site mobile en une heure, top chrono !Un site mobile en une heure, top chrono !
depuis le17 mars
depuis le17 mars
et aussi...et aussi...Techniques CSS avancéesPositionnement 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, CSS3Résolution de boguesMultimédia(web mobile, e-mailing, impression, projection,...)
Techniques CSS avancéesPositionnement 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, CSS3Résolution de boguesMultimédia(web mobile, e-mailing, impression, projection,...)
Un site mobile en une heure, top chrono !Un site mobile en une heure, top chrono !
Au menu :Un site mobile en 1h ?
Au menu :Un site mobile en 1h ?Posons le décor et les contraintesiPhone : Maître du monde ? Tout est une question de taille !CSS3 : et tout devient possibleAtelier : barcamp-bordeaux.com mobile !
Posons le décor et les contraintesiPhone : Maître du monde ? Tout est une question de taille !CSS3 : et tout devient possibleAtelier : barcamp-bordeaux.com mobile !
Un site mobile c'est quoi ?
Crédits : flickr.com/photos/bfishadow
Démo !Démo !
En une heure, vous avez dit ?Crédits : flickr.com/photos/st3f4n
Applications nativesLangages Java, Objective-C, C++
Applications nativesLangages Java, Objective-C, C++
Sites web dédiésNouvelle structure HTML, médias optimisés
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
Iphone Maître du monde ?
Crédits : flickr.com/photos/mastrobiggo
Faire un design pour mobile...Ce n’est pas faire un site pour iPhone !
Conclusion :Conclusion :
Tout est une question de taille !
Crédits : .flickr.com/photos/st3f4n
Un écran, plusieurs largeurs :
Screen width Device widthViewport
Screen width Device widthViewport
« Surface virtuelle qu’un mobile accepte d’afficher par défaut à l’écran »
Viewport :Viewport :
La balise HTML Meta « Viewport »width=480 width=320width=980
<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width">
Adapter le viewport à la largeur du terminalAdapter le viewport à la largeur du terminal
Adapter le viewport à la largeur du terminalAdapter le viewport à la largeur du terminal
Bingo !Bingo !
Démo !Démo !viewportviewport
CSS3 : et tout devient possible
Crédits : flickr.com/photos/udono
« requête CSS3 permettant de cibler selon des conditions déterminées »
Media Queries :Media Queries :
<link rel="stylesheet" media="screen"
href="styles.css" type="text/css" />
<link rel="stylesheet"
media="screen"
href="styles.css" type="text/css" />
Sans Media Queries (cible = tous écrans) :Sans Media Queries (cible = tous écrans) :
<link rel="stylesheet"
media="screen"
href="styles.css" type="text/css" />
Sans Media Queries (cible = tous écrans) :Sans Media Queries (cible = tous écrans) :
<link rel="stylesheet"
media="screen and (max-width: 640px)"
href="mobile.css" type="text/css" />
<link rel="stylesheet"
media="screen and (max-width: 640px)" href="mobile.css"
type="text/css" />
Avec MQ (cible = écrans de moins de 640px) :Avec MQ (cible = écrans de moins de 640px) :
@media (max-width:640px) { body { width: auto; }
}
@media (max-width:640px) {
body { width: auto; }
}
Au sein d'une feuille de style :Au sein d'une feuille de style :
@media (max-width:640px) {
body { width: auto; }
}
Au sein d'une feuille de style :Au sein d'une feuille de style :
body { background-color: black; }
@media (max-width:640px) {
body { background-color: red; }}
body { background-color: black; }
@media (max-width:640px) { body { background-color: red; }
}
En pratique :En pratique :
Résultat :Résultat :
Écran de largeur supérieure à 640pxÉcran de largeur supérieure à 640px Moins de 640pxMoins de 640px
Démo !Démo !media queriesmedia queries
www.barcamp-bordeaux.comadapté pour terminaux mobiles
Au boulot :Au boulot :
→→
→→
Zoom nécessaire Bugs d’affichageNavigation aveugle
Zoom nécessaire Bugs d’affichageNavigation aveugle
Textes lisibles Tailles adaptéesNavigation aisée
Textes lisibles Tailles adaptéesNavigation aisée
Au programme :Au programme :Viewport automatiqueMedia QueriesLargeurs fluidesGestion des débordementsAdaptation des tailles de textesSuppression d’éléments inutiles
Viewport automatiqueMedia QueriesLargeurs fluidesGestion des débordementsAdaptation des tailles de textesSuppression d’éléments inutiles
goetter.fr/conf/2011-bordeaux/
CréditsCrédits
Raphaël Goetter alsacreations.com @goetterRaphaël Goetter alsacreations.com @goetter
Photos, illustrations : www.flickr.comPolice : MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.net
Photos, illustrations : www.flickr.comPolice : MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.net
Raphaël Goetter alsacreations.com Merci !Merci !
Crédits : flickr.com/photos/st3f4n
