Successfully reported this slideshow.

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

9

Share

Loading in …3
×
1 of 42
1 of 42

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

9

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

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 @goetter Un 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 contraintes iPhone : Maître du monde ? Tout est une question de taille ! CSS3 : et tout devient possible Atelier : barcamp-bordeaux.com mobile !
  5. 5. Un site mobile c'est 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 natives Langages Java, Objective-C, C++
  9. 9. Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisés
  10. 10. Applications natives Langages Java, Objective-C, C++ Sites web dédiés Nouvelle structure HTML, médias optimisés Adaptation de design existant Adapter 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 un site 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 virtuelle qu’un mobile accepte d’afficher par défaut à l’écran »
  16. 16. La balise HTML Meta « Viewport » width=980 width=480 width=320
  17. 17. Adapter le viewport à la largeur du terminal <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
  18. 18. Adapter le viewport à la largeur 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 CSS3 permettant de cibler selon des conditions dé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 d'une feuille de style : @media (max-width:640px) { @media (max-width:640px) { body { width: auto; } body { width: auto; } } }
  25. 25. Au sein d'une 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.com adapté pour terminaux mobiles
  29. 29.
  30. 30. → Zoom nécessaire Textes lisibles Bugs d’affichage Tailles adaptées Navigation aveugle Navigation aisée
  31. 31. Au programme : Viewport automatique Media Queries Largeurs fluides Gestion des débordements Adaptation des tailles de textes Suppression d’éléments inutiles
  32. 32. goetter.fr/conf/ 2011-bordeaux/
  33. 33. Crédits Photos, illustrations : www.flickr.com Police : MegalopolisExtra by SMeltery Icones et pictos : www.iconfider.net Raphaël Goetter alsacreations.com @goetter
  34. 34. Merci ! Raphaël Goetter alsacreations.com Crédits : flickr.com/photos/st3f4n

×