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
Recommended
