Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)

9,272 views

Published on

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.

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
  • L'iphone est un peu exagérer sur le graphique x)
    il n'as jamais été aussi haut x)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,272
On SlideShare
0
From Embeds
0
Number of Embeds
2,107
Actions
Shares
0
Downloads
132
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)

  1. 1. Un site mobile en 1h ? O ! N Raphaël Goetter TOP CHRO Crédits : flickr.com/photos/st3f4n
  2. 2. Raphaël Goetter www.alsacreations.com www.goetter.fr www.ie7nomore.com @goetterUn site mobile en une heure, top chrono !
  3. 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. 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. 5. Un site mobile cest quoi ? Crédits : flickr.com/photos/bfishadow
  6. 6. Démo !
  7. 7. En une heure, vous avez dit ? Crédits : flickr.com/photos/st3f4n
  8. 8. Applications nativesLangages Java, Objective-C, C++
  9. 9. Applications nativesLangages Java, Objective-C, C++Sites web dédiésNouvelle structure HTML, médiasoptimisés
  10. 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. 11. Iphone Maître du monde ? Crédits : flickr.com/photos/mastrobiggo
  12. 12. Conclusion :Faire un design pour mobile...Ce n’est pas faire unsite pour iPhone !
  13. 13. Tout est une question de taille ! Crédits : .flickr.com/photos/st3f4n
  14. 14. Un écran, plusieurs largeurs : Screen width Device width Viewport
  15. 15. Viewport :« Surface virtuellequ’un mobile accepted’afficher par défaut àl’écran »
  16. 16. La balise HTML Meta « Viewport »width=980 width=480 width=320
  17. 17. Adapter le viewport à lalargeur du terminal<meta name="viewport" content="width=device-width"><meta name="viewport" content="width=device-width">
  18. 18. Adapter le viewport à lalargeur du terminal Bingo !
  19. 19. Démo !viewport
  20. 20. CSS3 : et tout devient possible Crédits : flickr.com/photos/udono
  21. 21. Media Queries :« requête CSS3permettant de ciblerselon des conditionsdéterminées »
  22. 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. 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. 24. Au sein dune feuille de style :@media (max-width:640px) {@media (max-width:640px) { body { width: auto; } body { width: auto; }}}
  25. 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. 26. Résultat :Écran de largeur supérieure à 640px Moins de 640px
  27. 27. Démo !media queries
  28. 28. Au boulot :www.barcamp-bordeaux.comadapté pourterminaux mobiles
  29. 29.
  30. 30. →Zoom nécessaire Textes lisiblesBugs d’affichage Tailles adaptéesNavigation aveugle Navigation aisée
  31. 31. Au programme :Viewport automatiqueMedia QueriesLargeurs fluidesGestion des débordementsAdaptation des tailles de textesSuppression d’éléments inutiles
  32. 32. goetter.fr/conf/2011-bordeaux/
  33. 33. CréditsPhotos, illustrations :www.flickr.comPolice :MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.netRaphaël Goetter alsacreations.com @goetter
  34. 34. Merci !Raphaël Goetter alsacreations.com Crédits : flickr.com/photos/st3f4n

×