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

6.
Démo !

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

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

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

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.
Iphone Maître du monde ?
Crédits : flickr.com/photos/mastrobiggo

12.
Conclusion :
Faire un design pour mobile...
Ce n’est pas faire un
site 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 virtuelle
qu’un mobile accepte
d’afficher par défaut à
l’écran »

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

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

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

19.
Démo !
viewport

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

21.
Media Queries :
« requête CSS3
permettant de cibler
selon des conditions
dé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 d'une feuille de style :
@media (max-width:640px) {
@media (max-width:640px) {
body { width: auto; }
body { width: auto; }
}
}

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.
Résultat :
Écran de largeur supérieure à 640px Moins de 640px

27.
Démo !
media queries

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

29.
→

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

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

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

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.
Merci !
Raphaël Goetter alsacreations.com
Crédits : flickr.com/photos/st3f4n