Formation - Blogperformance

Formation
Responsive Web Design
« Adapter son site pour le Web mobile »
Responsive Web Design Franck Dumesnil – blogperformance.com 1

Table des matières
LE CONTEXTE :.................................................................................................................................3
De quoi parle-ton en Responsive design ?.......................................................................................3
Exemples de sites web Responsive......................................................................................................4
PENSER MOBILE FIRST...................................................................................................................4
LES OUTILS........................................................................................................................................5
Outils de développement.................................................................................................................5
Brakets........................................................................................................................................5
Chrome :......................................................................................................................................8
Outils de tests sur mobile.................................................................................................................9
UN CONTENU FLUIDE ..................................................................................................................10
Les contenu non fluides.................................................................................................................10
comment rendre un contenu fluide ...............................................................................................11
Les images responsives ............................................................................................................11
Exercice : Rendre une image responsive..............................................................................12
Les vidéos responsive...............................................................................................................12
Les tableaux responsive............................................................................................................12
Exercice : Créer une page d'accueil contenant une vidéo totalement responsive................12
Rappels sur la hiérarchie parent enfant des classes CSS....................................................................12
RESPONSIVE WEB DESIGN EN 3 POINTS..................................................................................12
LE VIEWPORT : La première étage du RWD...................................................................................12
zoom sur écran :.............................................................................................................................12
MEDIA QUERIES.............................................................................................................................14
Les syntaxes d'appel des média queries.........................................................................................14
Exercice de Responsivité.........................................................................................................14
Exercices – TP :..................................................................................................................................20
Création d'un menu de navigation mobile :...................................................................................21
Création d'une grille de tableau responsive en css :.......................................................................21
Les frameworks de développement MOBILE :..................................................................................21
1- Utiliser BOOTSTRAP :........................................................................................................21
2- Utilisation de Jquery Mobile................................................................................................21
3- Utiliser Foundation framework :..........................................................................................21
Concepts de la grille (ligne / colomnes ) de foundation :..............................................................22
Le composant GRID :...............................................................................................................22
Le composant TOP-BAR..........................................................................................................25
Le composant INTERCHANGE...............................................................................................25
Avec les images :..................................................................................................................26
Le cas d'une image de Background :....................................................................................27
Étendre le css avec SAAS et COMPASS :.........................................................................................28
Les navigateurs mobiles :...................................................................................................................34
Créer un thème wordpress avec foundation framework :...................................................................34
Commment Optimiser la performance mobile :.................................................................................34
Sprite images : Comment ça fonctionne ?..........................................................................................34
LIENS UTILES..................................................................................................................................35
Responsive Web Design Franck Dumesnil – blogperformance.com 2

LE CONTEXTE :
De quoi parle-ton en Responsive design ?
http://www.liquidapsive.com/
3 Systèmes d'exploitation mobile :
FRONT-END / BACK END : les navigateurs mobiles pour ces OS :
http://www.kantarworldpanel.com/global/smartphone-os-market-share/
Exemples de sites web Responsive
http://leidgens-piscines.be/
http://www.creativeslashers.com/
http://www.legipass.com/
http://zurb.com/responsive
http://www.liberation.fr/
Responsive Web Design Franck Dumesnil – blogperformance.com 3

Testez si votre site est « mobile-friendly »
https://www.google.com/webmasters/tools/mobile-friendly/
PENSER MOBILE FIRST = PENSER USAGE MOBILE
•Le contenu est d'abord pensé pour le mobile.
•Le design et les fonctionnalités ne se voient plus dégradés mais "enrichis" pour la tablette et
le desktop.
•Ne pas vouloir « faire rentrer tout le contenu ».
•Qui dit mobile, dit Tactile (Touch), qui dit Usage
Responsive Web Design Franck Dumesnil – blogperformance.com 4

LES OUTILS
Outils de développement :
Brakets : Editeur html5 / CSS3 avec Plugins
http://brackets.io/
Brackets est un éditeur open-source pour le web design et le développement sur des technologies Web telles
que HTML, CSS et JavaScript. Le projet a été créé et est maintenu par Adobe, et est publié sous une licence
MIT.
Surligner l'aperçu en direct
Une fonctionnalité très interessante est le « highlight » de la partie sélectionnée.
Comment l'activer ?
Il faut pour cela :
1°) ouvrir un dossier et non un fichier seul.
2°) l'adresse ne doit pas être une adresse locale mais une adresse serveur local :
ex: http://127.0.0.1:51138/colonnes.html
Pour cela aller dans les paramètres du projet et mettre comme adresse locale :
http://127.0.0.1 ou http://localhost
à l'installation de Brakets un serveur web est installé.
Responsive Web Design Franck Dumesnil – blogperformance.com 5