Le Hollandais Volant

CSS : faire un thème mobile avec HTML5 et responsive design

Samedi 24 novembre 2012

Faire un thème mobile en CSS/HTML qui n’utilise ni sous-domaine (m. ou mobile.) ni détection de navigateur est très avantageux : plus simple à maintenir, moins lourd pour vos visiteurs, et techniquement plus fiable (pas de détection foireuse des navigateurs).
L’idée est de cibler des styles CSS en fonction de la taille de l’écran. Ainsi, un petit écran aura du CSS différent d’un grand écran (permettant par exemple de réduire les marges et les espaces de blancs quand l’espace manque sur les petits écrans.

Ce mini tutoriel vous donnera les bases pour faire un design utilisant le responsive design, et quelques astuces que je donne en complément :


Le responsive design en quelques mots


Le responsive desing (ou media query) ce sont des techniques HTML/CSS pour adapter le desing de votre site web à la taille de l’écran ou celui du navigateur. C’est très pratique à l’heure où votre site peut être vu sur un écran à très grande définition, un écran normal ou un petit écran comme les smartphones ou les tablettes.
Essayez de redimensionner la fenêtre du navigateur sur cette page : il y a pas moins de 4 adaptations au thème :

  • pour les écrans de plus de 1800 px de large
  • pour les écrans de plus de 1300 px de large
  • pour les écrans dont la taille est comprise entre 800 px et 1000px
  • pour les écrans dont la taille est inférieure à 799px
(les écrans dont la taille est comprise entre 1000 et 1300 px utilisent le thème par défaut, sans modifications)

La beauté du truc, c’est par exemple ça : le thème change quand la tablette ou le smartphone est en mode portrait ou en mode paysage, ce qui peut être utile sur les écrans allongés (comme le dernier iPhone par exemple) :

debout-couche.png

Le responsive design en pratique


Pour en arriver là, voici la marche à suivre :

Dans le HTML, ajoutez ceci dans le <head> :
<meta name="viewport" content="width=device-width, user-scalable=yes" />

Dans le CSS, créez des sections pour chaque domaine de largeur d’écran que vous souhaitez personnaliser :

@media (max-width: 1000px) {
    /* votre code ici, pour les écrans de taille <1000px */
}

@media (max-width: 800px) {
    /* votre code ici */
}

@media (max-width: 400px) {
    /* votre code ici */
}

Notez qu’avec cette technique, un écran de 650 px de largeur verra s’appliquer le code pour les écrans plus petit que 1000 px et celui pour les écrans plus petits que 800 px. Par ailleurs, le code pour les écrans <800 px sera appliqué en priorité par rapport à celui des écrans <1000 px à cause de l’ordre de déclaration des CSS, ce sont donc des applications de CSS en cascade. Il faut en tenir compte !

Pour cibler directement une catégorie, et uniquement celle-là, on peut faire ainsi (et je le recommande car c’est moins casse gueule, même si ça augmente un peu la quantité de code) :

@media (min-width: 800) and (max-width: 999px) {
    /* votre code ici, pour les écrans de taille comprise entre 800 et 999 px */
}

@media (min-width: 1000) and (max-width: 1299px) {
    /* votre code ici, pour les écrans de taille comprise entre 1000 et 1299 px */
}

Attention à bien faire une section de 800 à 999 pixels et non pas de 800 à 1000 pixels ! Autrement pour un écran (ou une fenêtre de navigateur) de largeur 1000 px, deux sections seront appliquées !

Pour compléter le tout, je balaye tout le domaine de largeur : les tous petits écrans, puis deux domaines, puis les très grands écrans :

@media (max-width: 799px) {
    /* votre code ici, pour les écrans de taille < 799 px */
}

@media (min-width: 800px) and (max-width: 999px) {
    /* votre code ici, pour les écrans de taille comprise entre 700 et 999 px */
}

@media (min-width: 1000px) and (max-width: 1299px) {
    /* votre code ici, pour les écrans de taille comprise entre 1000 et 1299 px */
}

@media (min-width: 1300px) {
    /* votre code ici, pour les écrans de taille supérieure à 1300 px */
}

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 :

general-page-layout.png
L’en-tête peut parfois comprendre un menu avec divers liens, comme c’est le cas sur mon site (qui comprend même un menu déroulant assez conséquent).

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 déroulés, ou supprimés (comme c’est le cas chez moi). En effet : un effet de survol (:hover) n’est pas utilisable sur un écran tactile.

Les ajustements de décor


Maintenant que les éléments sont positionnés de façon à ce que le contenu utile (les articles) occupe toute la largeur et que le contenu secondaire (barre latérale et menu) est placé au dessus, en dessous voire complètement supprimé, on peut modifier les styles de décoration (je sais pas si ça s’appelle ainsi (color, background…) , mais c’est par contraste avec les styles de positionnement (margin, padding, width, position, display)).
On effectuera par exemple ce genre de modifications :

  • Adaptation de la taille de police. Vu qu’on a spécifié dans le HTML que le contenu peut être zoomé (voir au début du tuto) :
    user-scalable=yes
    il n’est en général pas nécessaire d’adapter la taille de police pour chaque type d’écran : les navigateurs mobiles ont des règles et des styles qui suffisent en théorie à faire un rendu lisible de la page. Quoi qu’il en soit, NE METTEZ JAMAIS LE user-scalable À no. C’est un crime envers vos lecteurs.
  • Réduisez aussi la taille de police des titres. Inutile de les faire quatre fois plus gros que le texte : sur un mobile, assurez-vous que le contenu soit lisible avant de faire dans le tape à l’œil.
  • Augmenter la hauteur des lignes (line-height) : c’est bon pour la lisibilité quand c’est aéré. Quand on est dans le bus sur son téléphone, ça secoue et bouge. On a rapidement fait de perdre l’endroit où on était en train de lire. Augmenter la taille des lignes permet d’aérer.
  • Adaptez la taille de police dans les formulaires ! Les formulaires sont des éléments de la page qui sont le plus souvent zoomés de façon automatique par les navigateurs. C’est très difficile (j’en conviens) de faire quelque chose de bien (surtout que tous les navigateurs ne s’accordent pas là dessus), mais il faut réussir à faire quelque chose quand même.
  • Concernant les formulaires : utilisez les attributs du HTML5 type="email" ou type="url" : cela adaptera le type de clavier que l’écran tactile affichera : si c’est une adresse email, les boutons « @ » ou « .com » seront mis sur le clavier principal : input-de-type-email.png C’est une chose simple, mais qui est très utile et vos visiteurs vous en remercieront.
  • Sur les liens et dans les menus, n’hésitez pas à faire de gros boutons et des liens visibles (soulignés et en couleur) : c’est beaucoup plus pratique sur une interface tactile

Concernant les font de pages : il y a soit les fond qui se répètent (motifs) et dans ce cas il n’y a rien à faire ; soit les images qui contiennent elle même de l’information (certains utilisent une entête avec le logo dans dans le fond).
Dans ce dernier cas, il faut que l’image reste visible : il est possible de faire en sorte que l’image conserve soit toujours visible (mais probablement distordue) avec ce code :
background-size: 100% 100%;

Avec les media-queries, n’hésitez pas à modifier le bloc (par exemple de header) en hauteur : comme j’ai dit, si sa largeur baisse, le ratio est perdu et l’image est déformée. Baisser sa hauteur (même de façon non 100% flexible) permet de conserver un ratio lisible.

Quelques conseils


N’hésitez pas à utiliser le HTML5 et CSS3 : si on doit attendre que ça soit terminé à 100%, on y viendra jamais, tout simplement car le web n’est jamais fini et le HTML non plus.
Les outils sont là pour adapter votre site au plus grand nombre, dont aux utilisateurs de tablettes : apprenez à les maîtriser, puis utilisez-les !

Si vos pages sont lourdes (beaucoup de scripts ou styles gourmands en ressources) : modérez-les, car les téléphones sont limités en puissance de calcul (quoi que, maintenant certains smartphones sont plus rapide que mon ordinateur) et surtout en bande passante (la 3G en data coûte cher) et je compte pas la couverture réseau : si votre plus grand visiteur se trouve dans une zone mal couverte en 3G, il sera déçu si votre page met cinq heures à s’afficher.

Faites également attention avec les pseudo-effets de style : tout ce qui est hover, active ou focus (en CSS ou en JS) fonctionne encore de façon assez aléatoire sur un écran tactile. Tenez-en compte…

Un dernier truc : si votre page est longue, ajoutez un bouton « retour en haut » en bas de votre page ! J’en ai pas encore mis moi et c’est mal, je sais…


EDIT : voilà une infographie géante avec 10 astuces : http://www.splio.fr/responsive/ (image locale)

(mis à jour le 2013-07-13)

GoustiFruit : #

Ce qui est bien avec ton site c'est qu'on sait que c'est toi qui l'as fait ! :-p

Bon sinon il y a des "frameworks" tout prêts à l'emploi (Twitter Bootstrap, Skeleton, Foundation, ...)

@répondre

Dimanche 25 novembre 2012 à 09:40:45

mart-e : #

Merci pour les explications, ça m'aidera pour mon thème. Tient au passage, en HTML5, la balise forme <balise/> (meta, input, link,...) est encore valide ou l'on doit préférer <balise> ?

@GoustiFruit : ce que je ne n'aime pas avec les squelettes tout fait c'est qu'on ne comprend pas toujours ce qu'ils font, et qu'au nom de la compatibilité maximale, ils utilisent parfois des attributs privés style "webkit-" en css. C'est le cas de boileplate en tout cas.

@répondre

Dimanche 25 novembre 2012 à 13:00:58

Arfy : #

Merci, je cherchais un support depuis quelque temps pour l'expliquer sereinement au boulot.

J'avais eu une chouette prés aux Microsoft's Day à Strasbourg l'année dernière, mais impossible de mettre la main dessus.
(même en leur demandant gentillement)

@répondre

Dimanche 25 novembre 2012 à 14:09:05

Ploppe : #

Pour avoir une affichage en grille CSS, je conseille fortement la Dead Simple Grid :
http://mourner.github.com/dead-simple-grid/

Le code CSS est /très/ light, et le tout semble fonctionnel, une fois qu'on a ajouté les règles perso expliquées par Timo.
Elle n'utilise qu'une extension CSS plutôt bien supportée (et qui évite d'avoir des marges à virgule :

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;


Ca permet de considérer les bordures DANS les tailles width/height, et non en dehors.


Pour le coup du bouton "Retour en haut", je ne suis pas fan. C'est mieux d'utiliser les mécanismes de l'OS : un tap sur la barre d'état sur iOS permet de scroller tout en haut, quelque soit l'application. C'est plus cohérent.

Et enfin, quelle est l'action de ce code, à part autoriser le redimensionnement, ce qui est déjà le cas par défaut ?
<meta name="viewport" content="width=device-width, user-scalable=yes" />

@répondre

Dimanche 25 novembre 2012 à 15:23:56

Le Hollandais Volant : #

@Ploppe : le code html permet de dire au navigateur que la largeur que l'on donne dans les responsive design CSS est la largeur du navigateur, et pas juste de l'écran.

D'où le "width=viewport-width".

J'aurais aussi pu faire ça :
@media (viewport-max-width : 800px) en css.

@répondre

Dimanche 25 novembre 2012 à 16:57:01

JeromeJ : #

Récemment (je crois, en tout cas moi je l'ai vu récemment :p), je-ne-sais-plus-qui (si je retrouve, je dis, promis :)), a pondu un article "anti-responsive-design" que je n'aurais su que plussoyer.

Autant c'est chouette wink wink et tout, anéfé, quoi de plus "énervant" qu'un site qui fait bouger les choses (voir en faire disparaître certaines) lorsque je redimensionne ma fenêtre, dans, par exemple, le but d'afficher seulement une partie et agencer mon espace de travail avec d'autres fenêtres :o

(Ou alors, c'est pas ça et je confond, oups)

les tortues ninja : #

Quand tu vois que des sites de presse gros comme celui de l'équipe par exemple ou encore le nouvelobs ne sont pas responsive, tu te dis que la route est encore très longue...

Le Hollandais Volant : #

@JeromeJ : y'aura toujours des pour et des contres, avec des raisons valables et des moins valables.
C'est comme ça.

Perso on a mis à ma disposition un puissant outils accessibilité, je vois pas pourquoi ne pas l'utiliser.

Nickko : #

Très bon article, pratique, droit au but, mais il manque une chose selon moi.
Je trouve que ce qu'il manque dans ton article c'est une explication sur la taille des images et les avantages d'utiliser des unités relative comme les em ou les %.

Ainsi, on peut s'assurer que l'en-tête du site prend toujours la bonne largeur.
(attention toutefois à ne pas utiliser la même image pour chaque partie de la CSS en effet, charger une image en 1280 pour la réduire artificiellement à 640px n'aurait aucun sens)

En revanche, au sein d'une même section par exemple de 800 à 999px on pourrait utiliser la même image pour l'en-tête et faire en sorte qu'elle se redimentionne toute seule.

Julien : #

Bonjour,
Est-ce que vous connaissez des gros sites (plusieurs millions de VU) qui ont passé le cap du Responsive ? J'ai l'impression qu'ils mettent du temps à passer le cap. Est-ce que cela est du au fait que le passage en responsive est souvent lié à une simplification du design ?
Merci.

Vaaa : #

Merci pour ces précieux conseils, le responsive design je m'y mets doucement mais sûrement, et il est grand temps ! :-)

Le Hollandais Volant : #

@Nickko : en effet, pour les images JPEG. Jamais de la vie pour les PNG !

Les PNG sont très bon pour les images avec des applats de couleurs et des formes géométriques.
Si on réduit le format de l’image, on peut se retrouver avec des dégradés aux jonctions des applats de couleurs, et ces simples dégradés prennent énormément de place pour les fichiers.

Exemple avec ce fichier très simple :
http://lehollandaisvolant.net/img/1.png (1,2 ko)
La même image mais réduite de dimensions de 50%, avec une interpolation cubique pour garder le texte lisible) :
http://lehollandaisvolant.net/img/2.png (2,2 ko)

L’augmentation du poids de l’image est de plus de 80%.
Si on charge l’image 1 et qu’on utilise un redimentionnement artificiel en CSS, la taille change mais le poids de l’image ne varie pas et reste bas.

Et encore, là j’ai optimisé les deux images avec OptiPNG. Si je ne l’avais pas fait, comme c’est le cas avec 99% des images redimentionnées en PHP, le fichier 2 ferait plus de 4 ko.

Évidemment 4 ko ce n’est rien. Maintenant appliques ça à un fichier de 50 ko qui passe subitement à 200 ko quand on le réduit…

Perso je conserve la taille de fichier d’origine pour mes captures d’écran avec du texte, et je les réduit en CSS : le gain de bande passante et d’espace disque est d’un facteur 2 à 5.

@Julien : Google Plus fait ça oui. Mais je ne saurais dire si c’est en CSS ou en JS.
En tout cas, le thème est légèrement modifié selon la taille de la fenêtre du navigateur (autour de 1050 px de largeur).


Une simplification du desing ? je ne sais pas. Mais un alourdissement du code CSS, oui. C’est pour ça que les sites comme FB ou Google.com utilisent préférentiellement des détections de navigateur en PHP, et servent une page mobile, un peu comme les sous domaines mobile. ou m.

Nickko : #

@Julien Les gros sites poussent parfois la reflexion plus loin.
Du point de vue ergonomique, les conditions d'usage varient bien entre un ordi et un téléphone, parfois, ça justifie d'avoir 2 sites différents avec des services différents ou alors avec les mêmes services et informations mais avec des priorités différentes.

Exemple une boutique en ligne, sur un PC on peut naviguer, flâner comme on le ferait dans les aller d'un grand magasin, mais il y a peu de chance qu'on scan un code bar avec sa webcam pour trouver un article moins cher que celui qu'on a en mains (puisque si on la en mains devant son ordi, on l'a déjà acheté).

Alors que depuis un téléphone, c'est beaucoup plus crédible, on peut par exemple être ds un magasin.

JeromeJ : #

@osternaud_clem : Non mais ce blog a l'air chouette, merci :)


@Le Hollandais Volant : Nos différences font nos richesses (j'ai du mal à croire ça pour IE aussi :troll: mais ça doit être vrai de quelques façons … ^^)

scout123 : #

Super article, digne d'un tutoriel :).

@répondre

Mercredi 28 novembre 2012 à 13:53:51

Dan : #

Bien ton article !
Perso, je me frotte au responsive depuis cet été. Pfui... c'est du boulot !
Juste une remarque sue ton blog : les sites(blogs) full largeur c'est fatiguant quand on a un écran de 1920px. à force balayer de gauche à droite on finit avec les vertèbres en miettes;-) Moi je limite à 1200, 1400 max. m'enfin ça ne regarde que moi.
Bien l'article parce que l'indispensable y est. Se passer d'un grid est quasi impossible, encore faut-il en trouver un ... buvable !
Pour l'instant je développe avec http://www.responsivegridsystem.com/ . Simple et efficace. Graham Miller est super cool, il répond aux courriers. J'ai prévu (avec son accord)de publier une traduction en FR.
Responsive ou pas ? La question ne se pose pas ! Il suffit de jeter un oeil sur les stats de fréquentation web sur mobiles. j'ai vu des stats 2011 qui décoiffent, alors 2015... Mon site est responsive depuis 3 mois et j'ai triplé le nombre de contacts depuis ! ! Je vais pas faire un roman, mais si le développement responsive apporte des limites au délire ambiant, c'est pas plus mal. Plus court, plus concis, plus efficace, le web 2013 va gagner en lisibilité, en clarté de navigation...
Stoooooop, j'arrête là !
Allez, bonne année à toutes et tous et joyeux développement ;-)
Ah j'allais oublier... KNACSS de Raphael Goetter c'est bien. Pour WP je potasse sur Bones (http://themble.com/bones/, un peu pointu mais très efficace.

cecirjass : #

question !

comment je fais pour appliquer ça mais à une page uniquement ?
parce que mon thème est déjà responsive mais j'aimerai que le contenu de la page que j'ai créé le soit également...

comment est-ce possible ?

Sachant que si je met du css dans ma page html, s'il n'est pas dans le style.css de mon theme, ça ne le prend pas en compte...

Le Hollandais Volant : #

@cecirjass : normalement, un tel code devrait fonctionner même s'il est placé entre deux balises <style>.

Je ne vois pas trop le problème...

Ceneri : #

@Dan :
Bonjour et bravo à tous pour les informations.
Je suis photographe et je veux refaire mon site en full responsive ... C'est compliqué, en plus avec la taille des photos ... ca n'arrange rien.
Est-ce que vous connaissez quelqu'un qui pourrait me faire 3 ou 4 css3 pour mon site en full responsive ? contre remuneration bien sur (ou une séance photo).

Merci et encore bravo,
Benoît

Dan : #

@Ceneri : Suite à notre entretien phone... et pour informer tout le monde : j'ai beaucoup travaillé depuis mon dernier post ici. J'ai totalement abandonné les GRID, trop lourds, trop laborieux pour la maintenance. En m'inspirant de KNACCSS de Raphael Goetter j'ai développé une feuille de styles perso. seul défaut visible pour l'instant c'est incompatible IE7 et inférieurs..
Je développe un cours actuellement sur http://webastuce.fr. ça va être long parce que j'ai peu de temps.
Je note le changement de template de ce site, c'est du beau boulot ;-) A bientôt les amis...

paro : #

Bonjour à tous,

L'article est excellent mais il me semble qu'il ne répond pas à une question perso ou peut-être ai-je mal lu.
Je suis confronté à un petit problème... comment redimensionné la police proportionnellement à la fenêtre
entre deux breakpoints sans javascript. Un peu comme on pourrait le faire en flash avec un event resize ou enterframe.
Si quelqu'un à une piste à ce propos je prends parce qu'à force de charger des scripts pour forcer la compatibilité sur les vieux navigateurs ça commence à être lourd...

Citation filmù : #

Merci pour cet article très intéressant, qui me donne justement l'information que je cherchai !

Les commentaires sont fermés pour cet article