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
3°) ensuite allez dans affichage > surlignement dans l'aperçu en direct
Modifier le code css directement dans le html
sous mac : cmd + E en se positionnant sur la balise html (ex : body) ou bien la classe ou le id.
le style est alors mis à jour visuellement sans avoir à basculer vers le fichier css , sauver, revenir vers la html
et rafraichir. Toutes ces actions sont faites en direct.
Sous windows :
CTRL + E (en se positionnant sur la balise ou la classe), Brakets ouvre le fichier de style directement dans la
structure HTML.
Responsive Web Design
Franck Dumesnil – blogperformance.com
6
CLIC-DROIT : On peut via clic-droit (windows) ouvrir une fenêtre contextuelle d'édition rapide permettant
de modifier visuellement la couleur d'un élément.
Plugins de développement CSS rapide : le cas d'EMMET
http://docs.emmet.io/
https://www.youtube.com/watch?v=hyLDtIj3zw4
Tutoriaux brakets :
http://css-snippets.com/brackets-course/
Responsive Web Design
Franck Dumesnil – blogperformance.com
7
Chrome :
Installer chrome pour tous les utilisateurs.
https://support.google.com/chrome/answer/118663?hl=fr
Les outils pour développeurs de chrome :
On utilisera chrome pour lire le code source de certaines pages web dont on souhaite analyser le code mais
aussi pour tester en direct des nouveaux styles css sans pour autant devoir télécharger le contenu.
Responsive Web Design
Franck Dumesnil – blogperformance.com
8
Outils de tests sur mobile :
Tests de responsivité :
http://responsivetest.net
Emulateurs :
http://mobiletest.me
http://www.responsinator.com/
Generateurs :
Pour générer du code et ensuite vernir le mettre à jour, et dans un souci de productivité, nous utiliserons un
outil de génération de code pour le design de colonnes (ou grids)
http://www.responsivegridsystem.com/calculator/
UN CONTENU FLUIDE
Faire en sorte que le contenu apparaisse toujours à l'écran.
Les contenu non fluides :
ex : http://www.errefom.fr/
Débordement du contenu :
Lorsque la fenêtre du navigateur est réduite le contenu n’apparaît plus.
Responsive Web Design
Franck Dumesnil – blogperformance.com
9
Un contenu fluide :
ex : prenons le cas du site www.lefigaro.fr
2 colonnes : Une colonne fluide , une colonne fixe
comment rendre un contenu fluide ?
EM :
%
REM
min-width et max-width
Responsive Web Design
Franck Dumesnil – blogperformance.com
10
Les images responsives :
La base :
Les spécificités :
http://responsiveimages.org/
Le cas des logos responsive :
http://www.responsivelogos.co.uk/
Responsive Web Design
Franck Dumesnil – blogperformance.com
11
On peut créer un logo responsive avec des sprites et le format SVG.
Exercice : Rendre une image responsive
1) créer une image en png sur pixlr
2) mettre l'imae dans un div
3) créer la classe
Les vidéos responsive
voir www.embedresponsively.com
Les tableaux responsive :
Une façon de créer des tableaux responsive est d'utiliser le selecteur nth-child() pour accéder aux divers
élements d'un tableau <tr>, <td> afin de masquer les colonnes avec des media queries.
Ex : table th:nth-child(3){display: none;}
Exercice : Créer une page d'accueil contenant une vidéo totalement responsive
Rappels sur la hiérarchie parent enfant des classes CSS
Comment fonctionnent les classes CSS ?
Les styles CSS fonctionnent sur le principe d'imbrication, de parenté et d'héritage.
<div class= nav »>
<ul>
<li class=active ><a href= >lien</a></li>
</ul>
Responsive Web Design
Franck Dumesnil – blogperformance.com
12
</div>
.nav .active a { attributs du lien }
.nav ul li { attributs de li }
RESPONSIVE WEB DESIGN EN 3 POINTS :
1. Le viewport
2. Le container et les medias fluides
3. Les media queries
LE VIEWPORT : La première étage du RWD
zoom sur écran :
Comment autoriser ou interdire l'agrandissement via l'élargissement ou le pincement des doigts ?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
Exercice : montrer comment autoriser on interdire le zoom sur écran mobile.
http://viewportsizes.com/
Responsive Web Design
Franck Dumesnil – blogperformance.com
13
http://viewportsizes.com/mine/
Conception des interfaces : Les wireframes
1) s'inspirer :
2) Créer
http://mocknow.com/
http://zurb.com/playground/prototyping-mobile-first
MEDIA QUERIES
http://www.w3.org/TR/css3-mediaqueries/
Les syntaxes d'appel des média queries :
Comprendre rapidement les media queries :
http://www.webdesignerwall.com/demo/media-queries/
Responsive Web Design
Franck Dumesnil – blogperformance.com
14
http://caniuse.com/#feat=css-mediaqueries
Exercice de Responsivité: Passer de 3 à 1 colonnes en fonction de la dimension de la fenêtre du
navigateur.
Partie 1 : Créer une page de 3 colonnes non responsive
1°) créer une classe colonne-1-3 :
cette classe va s'appliquer à chacune des 3 colonnes.
Il faut compter les bordures et les marges dans la largeur globale de 100%.
Dans ce cas, on divide 100 par 3 (3 colonnes) soit 33.33 %. on décide de donner
une marge de 1% autour de chaque colonne, soit 6%. il faut donc d'abord faire
100 – 6 = 94% et ensuite diviser 94 / 3 = 31.33 %. Dans ce cas aucune bordure
n'est possible dans les colonnes.
1°) créer une classe permettant de styler chaque colonne indépendamment :
cela permettra de styler différemment chaque colonne lors du changement de taille d'écran.
Responsive Web Design
Franck Dumesnil – blogperformance.com
15
3°) le cas du OnePLus One :
sa résolution est de 1920 x 1080. hors en mode vertical , lorsque je consulte la page en mode « portrait » le test montre
que la résolution est de 980. si je met max-width à 980, l'affichage passe sur 2 colonnes et si le met max-width à 979, le
css n'est pas modifié et l'affichage reste sur 3 colonnes.
Tant que la résolution d'écran ou la largeur de la fenêtre du navigateur est supérieur ou égale à 980 pixels, on reste sur 3
colonnes. Dès que cette résolution passe à 979 et inférieure, on passe à 2 colonnes.
3°) passage à 1 colonne :
lorsque la résolution ou la largeur de la fenetre du navigateur est inférieure à 580 px, alors le css utilisé est celui
ci-dessus.
Lors du passage à 1 colonne, on créé 2 classes : une classe mobile qui sert à afficher le contenu d'une colonne sans
limite sur toute la largeur et une classe cacher-mobile destinée à masquer les contenu qui en hériteront comme la sidebar
par exemple.
On applique les classes cacher-mobile et mobile aux div contenu et sidebar auxquels ont veut attribuer des styles
particuliers lors du passage à l'écran mobile.
Responsive Web Design
Franck Dumesnil – blogperformance.com
16
4°) Suppression de contenus non vitaux en mode mobile :
il suffit d'appliquer la classe cacher-mobile aux div que l'on veut masquer.
Responsivite du menu de navigation
création d'un menu de navigation avec ul > li (liste non ordonnée)
Responsive Web Design
Franck Dumesnil – blogperformance.com
17
Création des styles pour affichage au delà de 980 pixels : (desktop)
Rappel Règles CSS
Pour attribuer un style à un
1°) on sélectionne la balise html de destination ex : ul
2°) on sélectionne la classe sur laquelle on souhaite attribuer le style ex : .nav
3°) on écrit : ul.nav { /* le style entre les crochets */ }
Pour rendre fluide la liste ul > li il faut mettre :
ul.nav { width: auto; }
Pour espacer les liens du menu entre eux :
ul.nav li { padding-left : 10px ; }
menus en fonctions de la taille d'écran :
Responsive Web Design
Franck Dumesnil – blogperformance.com
18
@media screen and (max-width:620px) {
ul.nav {
width: 60%;
font-size: 1.1em;
}
@media screen and (max-width:579px) {
ul.nav {
width: 320px;
font-size: 1.2em;
}
Pour conserver le menu sur 3 lignes, je bloque la largeur sur 320 px.
Responsive Web Design
Franck Dumesnil – blogperformance.com
19
Vidéo responsive :
Partie HTML
<div class="videoresponsive">
<iframe width="100%" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1"
frameborder="0" allowfullscreen></iframe>
</div>
Partie CSS
.videoresponsive {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoresponsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
Responsive Web Design
Franck Dumesnil – blogperformance.com
20
height: 100%;
}
Exercices – TP :
Création d'un menu de navigation mobile :
Le cas du menu responsive de sitepoint :
http://www.sitepoint.com/
Création d'une grille de tableau responsive en css :
Les frameworks de développement MOBILE : ou frameworks front-end
1- Utiliser BOOTSTRAP :
2- Utilisation de Jquery Mobile
3- Utiliser Foundation framework :
Responsive Web Design
Franck Dumesnil – blogperformance.com
21
nos outils de conception et dev sont : brakets & foundation
restrictions :
IE8 n'est pas supporté par Foundation. On utilisera alors https://github.com/scottjehl/Respond
avantages :
Utiliser SAAS afin de personnaliser le framework.
Concepts de la grille (ligne / colomnes ) de foundation :
foundation fonctionne avec des composants :
Le composant GRID :
http://foundation.zurb.com/docs/components/grid.html
large-x : c'est le style qui « affectera uniquement » les larges écrans : (ie) > 13
pouces.
small-x : c'est le style qui « affectera uniquement » les petits (small) écrans : (ie)
smartphone. (4,2 à 5,5 pouces)
medium-x : c'est le style qui « affectera uniquement » les moyens (medium) écrans :
(ie) tablettes ou 10 pouces.
Le style small affecte l'apparence sur les petits écrans mais aussi sur les écrans de
taille supérieure si les styles medium et large ne sont pas définis.
Exercice : on comprend avec cet exo que Foundation est mobile-first
Responsive Web Design
Franck Dumesnil – blogperformance.com
22
Large :
medium :
small : les 2 colonnes sont maintenant rendues en une seule colonne.
Quels sont les points de ruptures ? (breakpoints)
sur le site http://pxtoem.com/ on obtient les correspondances entre em et px, car dans foundation
toutes les valeurs sont données en em.
Par défaut :
de 0 à 640 pixels : small.
De 641 px à 1024px : medium
de 1025 px à 1440px : large
de 1441 px à 1920px : xlarge
de 1921 px et supérieurs : xxlarge
Responsive Web Design
Franck Dumesnil – blogperformance.com
23
Modifier les styles css par defaut :
on créé un nouveau fichier app.css et on modifie les styles existants de foundation.css. Ainsi pas de
problème lors des MAJ des versions du framework.
Responsive Web Design
Franck Dumesnil – blogperformance.com
24
Comment modifier les points de ruptures des media queries ?
Si l'on veut modifier les valeurs par défaut dans foundation il faut utiliser SAAS et travailler avec
des fichiers .scss http://sass-lang.com/
1°) Installer RUBY : http://rubyinstaller.org/
2°)
Le composant TOP-BAR
http://foundation.zurb.com/docs/components/topbar.html
Le composant INTERCHANGE
http://foundation.zurb.com/docs/components/interchange.html
Responsive Web Design
Franck Dumesnil – blogperformance.com
25
c'est le concept même du responsive , à savoir charger et diffuser des médias différents en fonction
du support.
Avec les images :
On peut créer des profils personnalisés de media queries :
il faut que la résolution minimale de l'image soit au moins de la largeur du device sinon elle ne peut
pas se réduire proprotionnellement et un vide existe à droite ou à gauche de l'image. On peut faire
un test avec test page afin de connaître la largeur en pixels de la fenêtre en cliquant sur le bouton
bleu « test a page »
Responsive Web Design
Franck Dumesnil – blogperformance.com
26
Le cas d'une image de Background :
Responsive Web Design
Franck Dumesnil – blogperformance.com
27
Personnaliser les menus de navigations responsive : Menu vertical :
modifier le breakpoint du menu :
Responsive Web Design
Franck Dumesnil – blogperformance.com
28
Wireframe : Prototype
Création des templates avec Balsamiq (pc ou mac)
Responsive Web Design
Franck Dumesnil – blogperformance.com
29
Autres front-end frameworks
http://getuikit.com/
http://getkickstart.com/
Étendre le css avec SAAS et COMPASS :
http://thesassway.com/beginner/getting-started-with-sass-and-compass
Saas permet de créer des variables dans le code css et donc de gagner du temps lors de
modification du code.
Responsive Web Design
Franck Dumesnil – blogperformance.com
30
Les fichiers doivent être compilés.
Saas permet de créer des calculs dans le code css
Saas permet de créer des conditions dans le code css
Modifier les valeurs par défaut du framework :
et notamment les valeurs de rupture des mediaqueries.
Il faut pour cela utiliser le fichier .scss
Méthode :
1°) Installer GIT, NODE JS et RUBY
2°) Installer BOWER
3°) Installer CANVAS (pour la compilation)
Ex : http://foundation.zurb.com/docs/sass.html
2 vidéos bien expliquées :
1°) https://www.youtube.com/watch?v=FCngOUW-UXg
2°) https://www.youtube.com/watch?v=IjwUuJ_i2cg
Une fois que le dossier a été créé on utilisera via powershell (windows 7 et 8)
la commande de compilation qui va créer le fichier app.css dans le dossier stylesheet à partir du
fichier .scss
Responsive Web Design
Franck Dumesnil – blogperformance.com
31
Personnalisation des fichiers css :
http://foundation.zurb.com/docs/sass-files.html
Pour modifier par exemple le point de rupture entre small et medium il suffit d'éditer le fichier
_settings.scss à la ligne 154.
ensuite il faut compiler ce fichier pour générer le fichier app.css dans le dossier :
Responsive Web Design
Franck Dumesnil – blogperformance.com
32
Rappel :
1°) installer GIT :
https://git-scm.com/download/win
2°) Installer Nodejs :
https://nodejs.org/download/
3°) Installer bower:
npm install -g bower
4°) Installer CLI:
npm install -g grunt-cli
5° Install Ruby
http://rubyinstaller.org/
6°) Install foundation
gem install foundation
Responsive Web Design
Franck Dumesnil – blogperformance.com
33
7°) Installer le compilateur compass
gem install compass
Notes:
le fichier scss/_stettings.scss n'est pas modifié lors d'un update de foundation.
http://foundation.zurb.com/forum/posts/431-questions-about-_settingsscss
seul le fichier _settings.scss est mis à jour.
Minification des CSS
Responsive Web Design
Franck Dumesnil – blogperformance.com
34
Optimisation des CSS & test de performances :
https://www.google.com/webmasters/tools/mobile-friendly
https://developers.google.com/speed/pagespeed/insights
Les navigateurs mobiles :
http://fr.wikipedia.org/wiki/Mod%C3%A8le:Parts_de_march%C3%A9_des_navigateurs_mobiles
Créer un thème wordpress avec foundation framework :
Commment Optimiser la performance mobile :
temps de chargement des images, zoom, sprite...
Sprite images : Comment ça fonctionne ?
http://openclassrooms.com/courses/bien-utiliser-les-sprites-css
Nouveaux CMS : alternatives à drupal et wp
Responsive Web Design
Franck Dumesnil – blogperformance.com
35
https://bolt.cm/
Alternatives aux framework front end : Flexbox
FlexBOX se joue nativement dans le navigateur.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
LIENS UTILES
http://www.edwardrobertson.co.uk/blog/tag/responsive-web-design
https://www.youtube.com/watch?v=BIz02qY5BRA
http://www.w3.org/TR/css3-mediaqueries/
Video responsive :
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
CSS generateurs
http://www.cssmatic.com/border-radius
Compatibilités des navigateurs :
http://caniuse.com/
Responsive Web Design
Franck Dumesnil – blogperformance.com
36
Jquery mobile :
http://www.w3schools.com/jquerymobile/default.asp
Framework ou alternatives :
http://getkickstart.com/
Technologies pour sites responsives :
http://sass-lang.com/
http://compass-style.org/
http://necolas.github.io/normalize.css/
http://fortawesome.github.io/Font-Awesome/
http://modernizr.com/
https://nodejs.org/
http://gruntjs.com/
http://bower.io/
http://semantic.gs/
Apprendre Foundation :
http://zurb.com/university
Responsive Typography :
http://gakimball.github.io/responsive-modular-scale/
http://geoffkimball.com/
CSS pre-preprocesseur
http://sass-lang.com/install
Installation SAAS :
http://stackoverflow.com/questions/26141589/gem-install-error-sass-compass
Plugins to quicker code
http://docs.emmet.io/
http://www.uistencils.com/
Realisations d'icones
http://iconion.com/fr/
Responsive Web Design
Franck Dumesnil – blogperformance.com
37
Responsive Web Design
Franck Dumesnil – blogperformance.com
38