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