1. Adaptation d'un site aux tablettes et smart phone : design adaptative
1.a. Principes de base
Créer une version d’un site spécialement pour les mobiles ce n’est pas compliqué.
En fait, c’est très simple. En utilisant seulement quelques lignes de code, il est possible de repenser toute l’organisation d’un site Web, et d’offrir un superbe affichage sur les smartphones. Pour cela, on fait appel au viewport, à la balise @media, et surtout à quelques principes d’ergonomie qui vont changer la vie de votre site Web.
Le Viewport
La première chose à faire est de configurer le viewport de votre page. Pour cela, il suffit simplement de rajouter le code suivant dans la partie head de la page HTML :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Le mot clé @media
Le mot clé CSS @media est appelé Media Queries par le W3C.
Il permet de faire des tests dans un fichier CSS, et d’exécuter du code uniquement si certains critères sont remplis. Ce qui nous intéresse ici c’est la possibilité de choisir ce qui sera affiché en fonction de la résolution de l’écran qui affiche le site. Voici le code source:
@media screen and (max-width: 480px) {
/* Code CSS ici*/
}
A l’intérieur des deux crochets, tout le code CSS ne sera exécuté que si :
-
Le support est un écran (grâce à
@media screen) -
La largeur maximale est de 480px (propriétés
max-width)
Ce code fonctionne aussi bien sur mobile que sur un ordinateur ordinaire, vous pouvez tester dès maintenant en réduisant la taille de la fenêtre.
Exemple simple des différents conditionnements de largeur d'écran : http://codepen.io/semantiqueweb/pen/pjxadB
Comme indiqué précédemment les adaptations de site selon l'adaptative design créent des points de rupture.Selon ces principes de conditionnement CSS en fonction de la largeur d'écran disponible nous allons pouvoir appliquer différentes règles CSS permettant d'adapter le site.
Les ajustements de positionnement : libérez de la place !
En général, un thème pour une page web se compose d’un en-tête, d’un corps comprenant une barre latérale et une partie principale, et d’un pied de page :
Le but du responsive design consiste surtout à réarranger les différents éléments de façon à ce que le rendu sur petits écrans reste lisible (surtout concernant la largeur limitée sur ces écrans). On fera donc ce genre de choses :
- Placement de la barre latérale ailleurs (souvent en ligne, au dessus ou au dessous de la partie centrale)
- Réduction des marges (margin, padding) à gauche et à droite
- Remplacement des largeurs fixes par des largeurs relatives (100%, ou 98% avec une marge de 1% pour centrer le tout sans coller sur les côtés)
-
Pour les images : ne pas utiliser de largeurs et hauteurs en pixels (pouvant dépasser de leur cadre) mais utiliser ceci :
width: 100%; height: auto;
Avec ça, les images occuperont la largeur complète et la hauteur sera adaptée de façon à conserver les proportions. - Les menus déroulants seront adaptés,
- Les liens seront mis en exergue pour faciliter le clic au doigt
Exemple :
- La page web suivante a été construite n'est pas adaptée aux mobiles et tablettes : http://codepen.io/semantiqueweb/pen/OyBQww
-
Nous allons selon les principes ci dessus l'adapter aux tablettes puis aux mobiles
- nous ajoutons dans le code HTML :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
- nous ajoutons en bas du CSS :
@media screen and (max-width: 1110px) {
}
-
- la largeur max des éléments HTML est de 1110px, nous allons donc dans 1 premier temps contraindre les éléments en cas d'affichage dans un écran inférieur à cette taille
-
nous ajoutons dans ce conditionnement CSS :
-
une contrainte sur les éléments ayant une largeur fixe :
- le body : largeur en % + padding
- différents HTML de la page : largeur maximum + marge à droite, à gauche annulée, hauteur fixe annulée, flottements annulés
-
une contrainte sur les éléments ayant une largeur fixe :
body{width:96%; padding: 0 2%}
nav, #ft1, #hd1, #main, #hd1 hgroup, #hd1 hgroup h1, aside, article,
footer, ul, li, #hd1 .logo-image
{max-width:100%; margin-right:0; margin-left:0; padding-right:0; padding-left:0;float:none; height:inherit}
Cela nous donne : http://codepen.io/semantiqueweb/pen/zvmRmr : d'ores et déjà l'ensemble du site a été "verticalisé" et peut s'afficher dans un navigateur ayant une largeur en pixels inférieurs à 1110px.
Nous pouvons continuer nos adaptations :
- Gestion des mots longs et retours à la ligne :
textarea, table, td, th, code, pre, samp
{
-webkit-hyphens: auto; /* césure propre */
-moz-hyphens: auto;
hyphens: auto;
word-wrap: break-word; /* passage à la ligne forcé */
}
code, pre, samp {
white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
}
- Améliorer la facilité de clic sur les menus (transformés en bouton)
/* Transformation des liens en bouton */
nav a{background:blue; color:#fff; padding:8px; margin:8px; display:inline-block; font-size:20px; border-radius:5px}
/*Effet sur les boutons au passage de la souris */
nav a:hover, nav a:focus{background:#000;color:#fff}
- Ajout d'un message personnalisé affiché uniquement pour un affichage inférieur à 1110px :
/* Un message personnalisé apparaissant spécifiquement */
body:before {
content: "Version mobile du site";
display: block;
text-align: center;
font-style: italic;
color: #777;}
Nous obtenons alors : http://codepen.io/semantiqueweb/pen/XmxEWj
Et nous pourrions continuer ces optimisations pour : centrer le logo et le titre du site, améliorer la surface cliquable des autres liens de la page...
Il faudrait ensuite vérifier l'affichage pour les écrans les moins larges et créer éventuellement d'autres séries d'adaptations en recourant à de nouvelles contraintes CSS exprimées via les media queries.
1.b. Ressources et liens utiles en responsive
- http://www.alsacreations.com/article/lire/930-css3-media-queries.html
- http://www.alsacreations.com/tuto/lire/1267-un-menu-deroulant-adapte-au-web-mobile.html
- http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html
- http://blog.evolya.fr/index.php?post/11/10/2011/Adapter-un-site-web-pour-les-peripheriques-mobiles-grace-aux-CSS
- http://lehollandaisvolant.net/?d=2012/11/24/20/37/08-css-faire-un-theme-mobile-avec-html5-et-responsive-design
2. Adaptation du site à l'impression : mediaqueries "print"
Les pages web peuvent être adaptés aux impressions selon les mêmes principes que les adaptations mobiles et tablettes : via le recours au mediaqueries.
L'adaptation à l'impression fait partie de la qualité d'accueil des internautes et est très importante dans certains cas (fiches produits, plans d'accès, formalités).
Exemple d'usage :
@media print {
#menu, #footer, aside {display:none;}
body { font-size:120%; color:black; }
}
L'essentiel de ces adaptations consistent à :
- annuler les largeurs fixes importantes
- supprimer les éléments gênant l'impression
- n'imprimer que l'essentiel en cachant le reste (display:none) : header (sauf logo), footer, sidebar,...
- supprimer les images si elles ne sont pas essentielles
- supprimer les couleurs et revenir à du noir et blanc
- forcer l'impression des intitulés de liens
Si on reprend le précédent exemple on ajoutera les css suivants pour adapter la page aux impressions :
@media print {
/* On élimine les éléments non intéressants pour le print */
footer, aside, nav {display:none;}
/* On agrandit la taille de police et on passe toutes les polices en noir */ body { font-size:120%; color:black!important; }
/* On supprime les flottements, les tailles fixes les marges */
nav, #ft1, #hd1, #main, #hd1 hgroup, #hd1 hgroup h1, aside, article, footer, ul, li, #hd1 .logo-image {max-width:100%; margin-right:0; margin-left:0; padding-right:0; padding-left:0;float:none; height:inherit}
/* On force l'affichage du détail des liens positionnés dans la zone de contenu */ section a:after { content: " ("attr(href)")" }
}Cela va permettre d'otenir le document suivant : http://mmi-pub-2015.kiubi-web.com/theme/fr/includes/test-print.html
2.1. Une feuille de style de base sur le print
Sources : http://www.alsacreations.com/astuce/lire/1160-une-feuille-de-styles-de-base-pour-le-media-print.htmlComme nous l'avons vu au cours précédent pour les mobiles et tablettes il est possible d'utiliser des portions de code CSS spécifiquement adaptés à l'impression. Moyennant quelques adaptations liées aux spécificités de chaque site et chaque page web, cela permet d'optimiser la qualité d'utilisation du site en cas d'impression et apporte une satisfaction à l'utilisateur.
Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide de la règle-at @media print {...}.
L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes (marges, couleurs, contrastes, tailles, gestion des sauts de pages et des veuves et orphelines), que vous pourrez adapter à vos convenances ou besoins personnels.
body {
width: auto!important;
margin: auto!important;
font-family: serif;
font-size: 12pt;
background-color: #fff!important;
color: #000!important;
}
p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {
color: #000!important;
margin: auto!important;
}
.print {
display: block; /* affichage des éléments de classe print */
}
p, blockquote {
orphans: 3; /* pas de ligne seule en bas */
widows: 3; /* pas de ligne seule en haut */
}
blockquote, ul, ol {
page-break-inside: avoid; /* pas de coupure dans ces élements */
}
h1 {
page-break-before: always; /* chaque titre commence sur une nouvelle page */
}
h1, h2, h3, caption {
page-break-after: avoid; /* pas de saut après ces éléments */
}
a {
color: #000!important;
text-decoration: underline!important;
}
a[href]:after {
content: " (" attr(href) ")"; /* affichage des URL des liens */
}
Pour rappel, un certain nombre de propriétés sous-citées ne sont reconnues que sur Opera ou à partir d’Internet Explorer 8 et Firefox 4, mais ne demeurent pas bloquantes pour les retardataires.