SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
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.
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
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
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 !
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
31.
Au programme :
Viewport automatique
Media Queries
Largeurs fluides
Gestion des débordements
Adaptation des tailles de textes
Suppression d’éléments inutiles