1.
Un site mobile en 1h ? O ! N Raphaël Goetter TOP CHRO Crédits : flickr.com/photos/st3f4n

2.
Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetterUn site mobile en une heure, top chrono !

3.
et aussi... Techniques CSS avancées Positionnement avancé (inline-block, modèle tabulaire, modèle de boîte flexible et autres positionnements CSS3) depu Gestion de projet is le 17 m (conventions, optimisation ars des performances, frameworks) HTML5, CSS3 Résolution de bogues Multimédia (web mobile, e-mailing, impression, projection,...) Un site mobile en une heure, top chrono !

4.
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 !

5.
Un site mobile cest quoi ? Crédits : flickr.com/photos/bfishadow

6.
Démo !

7.
En une heure, vous avez dit ? Crédits : flickr.com/photos/st3f4n

8.
Applications nativesLangages Java, Objective-C, C++

9.
Applications nativesLangages Java, Objective-C, C++Sites web dédiésNouvelle structure HTML, médiasoptimisés

10.
Applications nativesLangages Java, Objective-C, C++Sites web dédiésNouvelle structure HTML, médiasoptimisésAdaptation de designexistantAdapter aux mobiles grâce à CSS

11.
Iphone Maître du monde ? Crédits : flickr.com/photos/mastrobiggo

12.
Conclusion :Faire un design pour mobile...Ce n’est pas faire unsite pour iPhone !

13.
Tout est une question de taille ! Crédits : .flickr.com/photos/st3f4n

14.
Un écran, plusieurs largeurs : Screen width Device width Viewport

15.
Viewport :« Surface virtuellequ’un mobile accepted’afficher par défaut àl’écran »

16.
La balise HTML Meta « Viewport »width=980 width=480 width=320

17.
Adapter le viewport à lalargeur du terminal<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width">

18.
Adapter le viewport à lalargeur du terminal Bingo !

19.
Démo !viewport

20.
CSS3 : et tout devient possible Crédits : flickr.com/photos/udono

21.
Media Queries :« requête CSS3permettant de ciblerselon des conditionsdéterminées »

22.
Sans Media Queries (cible = tous écrans) :<link rel="stylesheet"<link rel="stylesheet" media="screen" media="screen" href="styles.css" href="styles.css" type="text/css" /> type="text/css" />

23.
Sans Media Queries (cible = tous écrans) :<link rel="stylesheet" media="screen" href="styles.css" type="text/css" />Avec MQ (cible = écrans de moins de 640px) :<link rel="stylesheet"<link rel="stylesheet" media="screen and (max-width: 640px)" media="screen and (max-width: 640px)" href="mobile.css" href="mobile.css" type="text/css" /> type="text/css" />

24.
Au sein dune feuille de style :@media (max-width:640px) {@media (max-width:640px) { body { width: auto; } body { width: auto; }}}

25.
Au sein dune feuille de style :@media (max-width:640px) { body { width: auto; }}En pratique :body { background-color: black; }body { background-color: black; }@media (max-width:640px) {@media (max-width:640px) { body { background-color: red; } body { background-color: red; }}}

26.
Résultat :Écran de largeur supérieure à 640px Moins de 640px

27.
Démo !media queries

28.
Au boulot :www.barcamp-bordeaux.comadapté pourterminaux mobiles

29.
→

30.
→Zoom nécessaire Textes lisiblesBugs d’affichage Tailles adaptéesNavigation aveugle Navigation aisée

31.
Au programme :Viewport automatiqueMedia QueriesLargeurs fluidesGestion des débordementsAdaptation des tailles de textesSuppression d’éléments inutiles

32.
goetter.fr/conf/2011-bordeaux/

33.
CréditsPhotos, illustrations :www.flickr.comPolice :MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.netRaphaël Goetter alsacreations.com @goetter

34.
Merci !Raphaël Goetter alsacreations.com Crédits : flickr.com/photos/st3f4n