Introduction au responsive design : comment rendre son site responsive sans trop d’efforts ?

Responsive design Depuis quelques mois, beaucoup de développeurs et d’intégrateurs web entendent parler de responsive design , c’est à dire avoir un seul site web qui s’adapte parfaitement à la taille de l’écran de l’utilisateur…

Seulement au final, peu de sociétés ont le courage de se lancer dans cette voie, et de transformer leur site pour que celui-ci soit “100% responsive”. En effet, cela demande énormément de travail : il faut un design totalement adapté, une intégration quasi-parfaite, des choix marketing importants, une recette plus complète (définitions d’écran * navigateurs web = démultiplication du nombre de tests), etc.

Aujourd’hui, je vais donc vous présenter rapidement en quoi consiste la création d’un site responsive, et comment transformer, sans trop d’efforts, votre site classique en un site agréable à consulter sur tablettes et smartphones !

1) Le responsive, en quoi ça consiste ?

En quelques mots, c’est l’application de CSS spécifiques à une page web, en fonction de la largeur de l’écran. En général, on essaie de découper un site en 2 ou 3 CSS spécifiques : “desktop” (> 1024px de large), tablette (de 600px à 1000px de large) et mobile (< 600px de large).

Ainsi, rendre son site responsive peut être réalisé de différentes façons :

  • spécifier des plages de largeurs, chacune appliquant un CSS spécifique,
  • déclarer des largeurs maximales pour l’application de chaque CSS (les valeurs du CSS mobile écrasent celles des CSS tablette qui remplaçaient les CSS “desktop” définies par défaut),
  • définir des largeurs minimales pour l’application de chaque CSS (dans le sens inverse, le design “desktop” se substituent aux CSS tablette qui elles-mêmes écrasent les CSS mobile).

Comment fait-on cela ? Il suffit d’utiliser l’attribut CSS @media .

Dans le cadre de cet exemple, prenons le cas numéro deux, à savoir un CSS qui s’applique sur tout le site, un qui modifie des éléments pour les tablettes, et un qui est destiné aux mobiles. Nous aurons donc :

  • Un fichier mondesign.css qui contient les CSS à appliquer sur l’ensemble du site.
  • Un fichier responsive.css qui contient ceci :
    @media screen and (max-width: 625px)
    {
    /* propriétés pour mobile */
    }
    @media screen and (max-width: 976px)
    {
    /* propriétés pour tablette */
    }
    

Il est également possible de le faire en plusieurs fichiers :

    <style>
    @import url(mobile.css) (max-width: 625px);
    @import url(tablette.css) (max-width: 976px);
    @import url(mondesign.css); </style>
    

Il faut noter que les largeurs de 625px et 976px sont propres à mon design de base. Ces valeurs peuvent, bien évidemment, être modifiées en fonction de ce que vous souhaitez faire. Les largeurs les plus utilisées pour séparer les affichages sont 320, 480 (smartphones en portrait), 720, 768 (smartphones en paysage et tablettes en portrait), 900 et 1024 (tablettes en paysage).

Enfin, il faut ajouter ceci dans le head du html :

    <meta name="viewport" content="width=device-width, user-scalable=yes" />
    

Le “width=device-width” sert à spécifier que la largeur affichée est bien celle de l’écran. Quant à lui, le “user-scalable=yes” sert à indiquer que l’utilisateur peut zoomer sur le contenu.

Voici 3 différents rendus, visibles (bientôt) sur mon blog :

Affichage plein écran

Sur n’importe quel pc de bureau

Affichage tablette

Sur une tablette (on peut voir que certains éléments disparaissent)

Affichage smartphone

Sur smartphone (l’agencement de la page change totalement)

2) Prioriser et réagencer les pages

Pour rendre notre site navigable depuis un smartphone ou une tablette, la première chose à faire au niveau CSS est de revoir la taille du conteneur principal de notre page. En effet, la majorité des sites ont un bloc principal d’une largeur fixe et des marges “auto” de chaque côté (afin que ce bloc soit centré). Il faut donc changer la largeur de notre bloc conteneur pour qu’elle ne soit plus “en dur”, mais belle et bien de la largeur de l’écran :

    #monBlocConteneur { width: 100%; }
    

Ensuite, on se rend compte que certaines parties du site sont inutiles, ou peuvent poser problème sur mobile. Qu’il s’agisse d’un formulaire inintéressant, d’un texte secondaire, d’un champ pour laisser un commentaire, d’une publicité, … on se dit que les masquer sur mobile nous arrangerait bien.

Pour cela, la solution est très simple. Il suffit de créer une classe CSS “not_mobile” dans responsive.css :

    .not_mobile { display: none; }
    

Puis, il faut l’appliquer à tous nos objets, qui doivent disparaître lorsque la largeur tombe en dessous de 976 ou 625 px.

Maintenant que les éléments inutiles ont été masqués en mode mobile, il faut se débarrasser des objets flottants et des marges.

Pour les premiers, la solution est simple. Avoir un contenu flottant à droite n’est plus utile sur mobile, car tout (ou presque) est censé s’afficher sur une seule colonne. On empêchera donc nos balises “div” de flotter, de la même façon qu’on a masqué certaines parties de notre site, ceci grâce à une classe “dont_float_mobile” qu’on appliquera sur tous les objets qui le nécessite.

    .dont_float_mobile { float: none; }
    

En ce qui concerne les marges, le traitement se fait en général au cas par cas. Certaines marges minimes peuvent rester, mais celles de plus de 20px sur mobile sont plus gênantes qu’autre chose. Autant les diminuer ou les supprimer…

    #monDivAvecUneMargeTropGrande { margin-left : 10px; }
    

Enfin, pour toutes les images, la solution la plus simple est d’imposer une largeur maximale, à savoir celle du bloc conteneur, soit 100%.

    img { max-width: 100%; }
    

3) Ajouter des contenus dédiés au mobile

Certains contenus sont parfois difficiles à adapter à un affichage mobile. Dans ce cas, la solution de facilité peut être de créer deux conteneurs différents, un dédié à l’affichage en mode “desktop” :

    <div id="mesboutons"><!-- ... --></div>
    

…et de créer une balise “div”, dédié au mobile masqué par défaut :

    <div id="boutonsmobile"><!-- ... --></div>
    

Avec dans mondesign.css :

    #boutonsmobile { display: none; }
    

Et dans responsive.css

    #boutonsmobile { display: block; }
    

En revanche, il faut bien garder à l’esprit que ce n’est pas forcément la meilleure chose côté référencement, Google n’aimant pas spécialement les liens dupliqués et masqués. Pour résoudre ce problème, la solution, plus élégante, est d’afficher des boutons “Plus de contenu” sur smartphone et/ou tablette, afin d’éviter de dupliquer les informations.

4) Astuces et conseils

Enfin, voici quelques astuces qui pourront vous aider à améliorer la finition de votre site 100% responsive :

Pensez déjà à bien rendre votre contenu totalement linéaire. Le principe du responsive est de ne naviguer de haut en bas, que ce soit sur mobile ou sur tablette. Si vous devez naviguer en “Z” sur tout le site, vous perdez tout l’intérêt du responsive…

D’autre part, il nous arrive souvent de mettre du CSS inline dans notre html. Malheureusement, il peut arriver que ce ne soit pas adapté à un affichage sur mobile. Afin de résoudre ceci, vous pouvez le surcharger dans vos fichiers CSS à l’aide de l’attribut !important, comme ceci :

    .mesCommentaires { margin-left: 0px !important; }
    

Le seul défaut de cette technique est qu’elle ne fonctionne pas sur tous les navigateurs…

Et plutôt que de toujours utiliser des tailles en pixels, il est préférable d’utiliser des tailles en “em” et en pourcentages, pour définir la taille de vos polices et la largeur de vos conteneurs. Ceci est particulièrement important du fait que les fabricants de smartphones s’amusent aujourd’hui à mettre des définitions incroyables sur des écrans ridiculement petits.

Mais lorsque vous combinez des tailles en pourcentage et en pixels, il se peut que vous dépassiez les 100% de largeur. Par exemple, si vous avez un bloc avec 80% de largeur et 20px de padding. Afin d’éviter que le rendu global ne casse, vous pouvez utiliser l’attribut : “box-sizing: border-box;” qui limitera la taille de votre bloc à la taille de son conteneur parent.

Même si cela semble contradictoire, augmenter la taille du texte sur mobile n’est pas une si mauvaise idée. Comme dit précédemment, la résolution des écrans de smartphones ne cesse d’augmenter depuis quelques mois ! A quoi bon rendre son site responsive si l’utilisateur doit à zoomer pour pouvoir le consulter ?

De plus, sur mobile, cliquer sur un lien minuscule est toujours difficile. Il est donc conseillé de fournir des liens et des boutons de tailles conséquentes, l’objectif étant que vos “visiteurs” n’aient pas à zoomer pour cliquer dessus.

Surtout, n’hésitez pas à utiliser des attributs HTML5, comme par exemple le type des champs dans les formulaires, afin de spécifier le contenu attendu (email, numéro de téléphone, etc.). Ceci permet aux smartphones et aux tablettes de savoir quel clavier virtuel afficher.

Un autre conseil : allégez au maximum vos pages. En “Edge” ou en 3G, télécharger une page de 5mo avec 300 fichiers prend un temps considérable. Alors il peut être utile de compresser vos images, utiliser des sprites CSS et “minifier” vos fichiers JavaScript et CSS !

Dans le cas d’un projet qui part de zéro, il est conseillé d’utiliser des CSS bien découpées : une contenant tout ce qui est commun aux différentes tailles d’écran, une pour les smartphones, une pour les tablettes et une pour l’affichage desktop. Vous serez gagnant au niveau des données envoyées aux différents devices, et cela vous aidera à concevoir vos écrans convenablement.

Enfin : testez, testez, testez, testez, testez, et TESTEZ ! Entre les différents devices, navigateurs, définitions d’écrans, le rendu n’est jamais le même. Evitez de faire rager les utilisateurs en affichant un contenu sortant de l’écran et donc illisible, ou un formulaire impossible à utiliser sur tablette !

D’ailleurs, une dernière astuce : pour vos tests, je vous recommande fortement l’utilisation de ce bookmarklet, qui vous permet de tester très facilement le rendu responsive de votre site !

Photo credit: dampoint

© SOAT
Toute reproduction interdite sans autorisation de la société SOAT

Nombre de vue : 945

COMMENTAIRES 7 commentaires

  1. Julien dit :

    Merci pour le post, effectivement, ça demande énormément de travail depuis une version existante. A moindre cout/temps on peut partir sur des thèmes déjà responsive et les modifier.

  2. Dimitri dit :

    La seul chose que j’aurai bien voulu voir c’est un site d’exemple fais par vos soins.
    Car même si je suis d’accord avec le contenu de votre article, tout ceci est très nouveau.

    Et pour avoir passer de nombreuses heures à développer des applications html5 responsive, il y a beaucoup de théorique et peux de démonstrations pratiques et bien réaliser(smashmagasine).

    Rendre un blog responsive c’est bien, mais quand est il des scroll sur overflow…

    Pour améliorer l’expérience utilisateurs, en plus des nombreuses heures de tests, il faudra un article un peu plus conséquent qu’une brève explication des media queries.

    Allez mettre un css au résolution d’une dalle d’écran, developper sur desktop et passer à l’iphone vous comprendrez ce que je veux dire.

  3. pascal dit :

    bonjour je trouve votre sujet vraiment interessant et je me posse la question pourquoi que les navigateurs Internet ne font ils pas eu meme une aplication pour que les sites courant soient mieux visibles sur les mobiles.

  4. Hypiebody dit :

    @Pascal : Effectivement ce serait tellement plus facile…
    @Tommy : Merci pour les différents conseils, je m’en vais voir tout ça de ce pas, j’espère y arriver seule !

  5. […] le temps de lire petit article, il te donne les différentes manière pour s’y prendre et comment les mettre en […]

  6. pierre vially dit :

    tres intérressant vos remarques

    je suis jeune ingénieur aussi, je vs félicite pour votre courage

AJOUTER UN COMMENTAIRE