Un site mobile en 1h ? O !                      N        Raphaël Goetter           TOP CHRO                    Crédits : f...
Raphaël Goetter                           www.alsacreations.com                           www.goetter.fr                  ...
et aussi...                               Techniques CSS avancées                               Positionnement avancé     ...
Au menu :Un site mobile en 1h ?Posons le décor et les contraintesiPhone : Maître du monde ?Tout est une question de taille...
Un site mobile cest quoi ?          Crédits : flickr.com/photos/bfishadow
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édiasoptimisés
Applications nativesLangages Java, Objective-C, C++Sites web dédiésNouvelle structure HTML, médiasoptimisésAdaptation de d...
Iphone Maître du monde ?              Crédits : flickr.com/photos/mastrobiggo
Conclusion :Faire un design pour mobile...Ce n’est pas faire unsite pour iPhone !
Tout est une question de taille !                    Crédits : .flickr.com/photos/st3f4n
Un écran, plusieurs largeurs : Screen width Device width Viewport
Viewport :« Surface virtuellequ’un mobile accepted’afficher par défaut àl’écran »
La balise HTML Meta « Viewport »width=980   width=480    width=320
Adapter le viewport à lalargeur du terminal<meta name="viewport" content="width=device-width"><meta name="viewport" conten...
Adapter le viewport à lalargeur du terminal                Bingo !
Démo !viewport
CSS3 : et tout devient possible                  Crédits : flickr.com/photos/udono
Media Queries :« requête CSS3permettant de ciblerselon des conditionsdéterminées »
Sans Media Queries (cible = tous écrans) :<link rel="stylesheet"<link rel="stylesheet"     media="screen"     media="scree...
Sans Media Queries (cible = tous écrans) :<link rel="stylesheet"     media="screen"     href="styles.css"     type="text/c...
Au sein dune feuille de style :@media (max-width:640px) {@media (max-width:640px) {  body { width: auto; }  body { width: ...
Au sein dune feuille de style :@media (max-width:640px) {  body { width: auto; }}En pratique :body { background-color: bla...
Résultat :Écran de largeur supérieure à 640px   Moins de 640px
Démo !media queries
Au boulot :www.barcamp-bordeaux.comadapté pourterminaux mobiles
→
→Zoom nécessaire      Textes lisiblesBugs d’affichage     Tailles adaptéesNavigation aveugle   Navigation aisée
Au programme :Viewport automatiqueMedia QueriesLargeurs fluidesGestion des débordementsAdaptation des tailles de textesSup...
goetter.fr/conf/2011-bordeaux/
CréditsPhotos, illustrations :www.flickr.comPolice :MegalopolisExtraby SMelteryIcones et pictos :www.iconfider.netRaphaël ...
Merci !Raphaël Goetter   alsacreations.com                      Crédits : flickr.com/photos/st3f4n
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Prochain SlideShare
Chargement dans…5
×

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

9 166 vues

Publié le

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.

Publié dans : Technologie
1 commentaire
9 j’aime
Statistiques
Remarques
  • L'iphone est un peu exagérer sur le graphique x)
    il n'as jamais été aussi haut x)
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
9 166
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2 107
Actions
Partages
0
Téléchargements
129
Commentaires
1
J’aime
9
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

×