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.

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
@goetter
Un 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 contraintes
iPhone : Maître du monde ?
Tout est une question de taille !
CSS3 : et tout devient possible
Atelier : barcamp-bordeaux.com mobile !

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

11. Démo !

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

13. Applications natives
Langages Java, Objective-C, C++

14. Applications natives
Langages Java, Objective-C, C++
Sites web dédiés
Nouvelle structure HTML, médias
optimisés

15. 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

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

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

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

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

23. Viewport :
« Surface virtuelle
qu’un mobile accepte
d’afficher par défaut à
l’écran »

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

25. Adapter le viewport à la
largeur du terminal
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width">

26. Adapter le viewport à la
largeur du terminal
Bingo !

27. Démo !
viewport

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

29. Media Queries :
« requête CSS3
permettant de cibler
selon des conditions
déterminées »

30. 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" />

31. 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" />

32. Au sein d'une feuille de style :
@media (max-width:640px) {
@media (max-width:640px) {
body { width: auto; }
body { width: auto; }
}
}

33. 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; }
}
}

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

35. Démo !
media queries

36. Au boulot :
www.barcamp-bordeaux.com
adapté pour
terminaux mobiles

37. →

38. →
Zoom nécessaire Textes lisibles
Bugs d’affichage Tailles adaptées
Navigation aveugle Navigation aisée

39. Au programme :
Viewport automatique
Media Queries
Largeurs fluides
Gestion des débordements
Adaptation des tailles de textes
Suppression d’éléments inutiles

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

41. Crédits
Photos, illustrations :
www.flickr.com
Police :
MegalopolisExtra
by SMeltery
Icones et pictos :
www.iconfider.net
Raphaël Goetter alsacreations.com @goetter

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