Personnaliser son thème responsive en CSS : bonnes pratiques

Le but de cet article n'est pas de vous apprendre le langage CSS, des sites spécialisés le font déjà très bien ! Vous trouverez sur internet énormément de ressources permettant d'acquérir facilement les bases de ce language puissant et incontournable dès lors que vous souhaitez personnaliser de manière poussée l'apparence de votre site.

EMS Tricks par exemple est un site conçu par et pour les utilisateurs d'e-monsite présentant un grand nombre d'astuces CSS, permettant d'acquérir facilement les bases de ce langage.

Deux possibilités vous sont offertes pour ajouter vos styles CSS depuis le formulaire de personnalisation du thème :

1. En haut du formulaire de personnalisation, en cliquant sur le bouton "Mode avancé" : vous éditez ainsi la feuille de style conçue par le web designer d'e-monsite, reprenant les paramètres définis dans le formulaire de personnalisation (couleur du texte, des liens, etc.).
    
2. En bas du formulaire de personnalisation, dans la section "Modifier / Ajouter du code CSS" : les styles CSS saisis à cet endroit viennent s'ajouter à la suite de la feuille de style conçue par le web designer d'e-monsite. Puisqu'ils sont ajoutés à la fin de la feuille de style du thème, vos styles peuvent donc contredire un style existant. Vous pouvez également insérer des styles CSS depuis Configuration > réglages > zones éditables. Les styles figurant dans cette zone sont également chargés à la fin de la feuille de style du thème.

Chacune de ses méthodes a ses avantages et ses inconvénients :

• Choisir le "mode avancé" offre l'avantage d'avoir entièrement la main sur la feuille de style utilisée pour l'apparence de votre site. Vous pouvez donc librement modifier le CSS existant ou même en supprimer certains styles. L'inconvénient est que vous ne bénéficierez plus des éventuelles mises à jour de la feuille de style apportées par le web designer, notamment pour apporter diverses améliorations graphiques ou corriger certaines incohérences. Si vous souhaitez modifier une couleur par exemple, il vous faudra saisir son code héxadecimal (ex : #fff pour le blanc), son choix ne sera plus possible depuis le formulaire de personnalisation. Cette solution est donc préconisée pour les personnes ayant de bonnes bases en CSS souhaitant avoir entièrement la main sur l'apparence de leur site.
   
• Opter pour l'ajout de CSS depuis la section "Modifier / Ajouter du code CSS" permet à l'inverse de continuer à bénéficier des éventuelles corrections apportées sur la feuille de style CSS de votre thème. L'inconvénient est que pour modifier un style existant, il vous faudra le reécrire, ce qui augmentera in fine, le poids de votre feuille de style et donc, son temps de chargement. Cette méthode est donc à priviligier si vos connaissances en CSS sont limitées et que vous souhaitez bénéficier des éventuelles corrections graphiques apportées.

Quelle que soit la solution retenue, préférez écrire vos styles CSS à un seul et même endroit, cela facilite leur accès et leur maintenance.
Une fois la méthode d'insertion définie, il ne vous reste plus qu'à vous lancer dans l'écriture de vos propres CSS.

Nous partons du principe que votre site est responsive, autrement dit, que vous avez appliqué un thème basé sur les frameworks CSS Bootstrap (version 2) ou EMS Framework.

Points de rupture

Qu'appele-t-on un "point de rupture" en web design ? Le principe d'un site web dit "responsive" est de pouvoir s'adapter à toute taille d'écran, quelle que soit sa largeur. Pour y parvenir, le but est donc grâce aux style CSS de pouvoir modifier l'apparence d'un élément en fonction de la taille de l'écran. Voici ci-dessous un exemple des principales résolutions évaluées en CSS pour définir sur quel type d'écran est affiché un site web (valeurs reprises du célèbre framework CSS Bootstrap dans sa version 2) :

Largeur d'écran	Type de terminal
>= 1200 px	Large écran de bureau
>= 980 px	Tablette en mode paysage
>= 768 px	Tablette en mode portrait
<= 480 px	Smartphone en mode paysage
<= 320 px	Smartphone en mode portrait

Un point de rupture est donc une limite à partir de laquelle on applique un ou plusieurs styles CSS. Dans le tableau ci-dessus, cette limite est exprimée en pixels mais d'autres unités de mesure sont possibles (vw, rem, etc.).

Puisque votre site est responsive, avant d'écrire un style CSS, il est donc important de vous posez la question "Quel est le type d'écran concerné par ce style" ? Si la réponse n'est pas "tous les écrans !", il vous faudra alors conditionner votre style CSS à un type d'écran prédéfini.

Imaginons que vous souhaitiez cacher l'entête de votre site, uniquement sur petits écrans (smartphones). À partir des résolutions ci-dessus, cela revient à dire : "Cacher mon entête sur tous les écrans de largeur inférieure ou égale à 480px de large". En langage CSS, cela se traduit de la manière suivante :

@media(max-width: 480px){
    header{
        display: none;
    }
}

Nous avons recours ici à une "@media query", qui renseigne le navigateur sur la condition d'exécution de ce style CSS. Lorsqu'il lit cette ligne, le navigateur comprend que tous le(s) style(s) inclus dans cette @media query ne sont valables que sur les écrans ayant une largeur maximale de 480px (max-width: 480px).

Supposons maintenant que vous souhaitiez définir une hauteur de 200px pour votre entête uniquement sur écrans moyens (tablettes, petits écrans de bureau), autrement dit : "Afficher mon entête uniquement sur les écrans dont la largeur est comprise entre 768px et 1199px". En CSS, voilà ce que cela donnerais:

@media (min-width: 768px) and (max-width:1199px){
    header{
        height: 200px;
    }
}

Il est donc possible de combiner une largeur minimale (min-width: 768px) à partir de laquelle le style sera pris en compte par le navigateur à une largeur maximale (max-width:1199px) au delà de laquelle le style sera ignoré.

Imaginons enfin que vous souhaitiez augmenter la taille du texte figurant dans votre entête uniquement sur écrans larges (17″ et plus), autrement dit : "Augmenter le texte de mon entête uniquement sur les écrans dont la largeur est supérieure ou égale à 1200px". Le CSS correspondant :

@media (min-width: 1200px){
    header{
        font-size: 2rem;
    }
}

Nous pouvons donc nous contenter de définir uniquement une largeur minimale (min-width: 1200px) à partir de laquelle notre style sera pris en compte.

Site Mobile First ou pas ?

Avant de continuer, il est également important de vous poser une seconde question, qui vous aidera sur la manière d'ordonner vos styles CSS : "Le CSS de mon site est-il conçu prioritairement pour les terminaux mobiles ?", autrement dit, mon site est-il "mobile first" ?

Comment savoir si le CSS de mon site est mobile first !?

Sur e-monsite, c'est très simple : 

• Tous les thèmes basés sur le framework CSS Bootstrap v2 (reconnaissables grâce au suffixe [Bootstrap]) ne sont pas mobile first.
   
• Tous les thèmes basés sur le framework CSS EMS Framework (reconnaissables grâce au suffixe [EMS Framework]) sont mobile first.

Gardez à l'esprit que les styles CSS de votre site sont conçus pour une largeur d'écran par défaut. Tous les styles CSS non adaptés à cette largeur devront logiquement figurer dans une @media query correspondante.

Thèmes [Bootstrap]

Sur les thèmes [Bootstrap], cette largeur par défaut est de 980px. Votre feuille de style pourrait donc être configurée de la manière suivante : 

/* Styles par défaut (écran de bureau) */
... 

/* Grand écran */
@media (min-width: 1200px) { ... }

/* Tablette en mode portrait et résolutions inférieures */
@media (max-width: 768px) { ... }

/* Smartphone en mode paysage et résolutions inférieures */
@media (max-width: 480px) { ... }

/* Smartphone en mode portrait */
@media (max-width: 320px) { ... }

Les styles sont déclarés dans un ordre décroissant, de la plus grande largeur vers la plus petite. Tous les styles CSS non optimisés pour la largeur par défaut (980px) devront figurer dans les @media-queries correspondantes.

Thèmes [EMS framework]

Concernant les thèmes [EMS framework], elle est de 320px.Votre feuille de style pourrait donc ressembler à ceci : 

/* Styles par défaut (smartphone en mode portrait) */
...

/* Smartphone en mode paysage et résolutions supérieures */
@media (min-width: 480px) { ... }

/* Tablette en mode portrait et résolutions supérieures */
@media (min-width: 768px) { ... }

/* Tablette en mode paysage et résolutions supérieures */
​@media (min-width: 992px) { ... }

/* Écrans de bureau et résolutions supérieures */
@media (min-width: 1200px) { ... }

Ici, les styles figurent en ordre croissant, de la plus petite largeur vers la plus grande. Tous les styles non optimisés pour un affichage mobile en mode portrait (320px) devront figurer dans des @media-queries appropriées.

Bien sûr, rien ne vous oblige à respecter cette logique d'organisation lorsque vous écrivez vos styles CSS. Cependant, pour des questions de lisibilité et de compatibilité avec les styles conçus par le web designer d'e-monsite, nous vous conseillons grandement de respecter ce principe.

Il vous est également possible de limiter ces points de rupture afin de cibler plus précisemment une résolution :

/* Styles par défaut (smartphone en mode portrait) */
...

/* Du smartphone en mode paysage à la tablette en mode portrait */
@media (min-width: 480px) and (max-width: 991px) { ... }

/* De la tablette en mode paysage à l'écran de bureau */
@media (min-width: 992px) and (max-width: 1199px) { ... }

/* Grand écran seulement */
@media (min-width: 1200px) { ... }

Inutile de s'armer d'un smartphone, d'une tablette et d'un ordinateur pour tester le bon fonctionnement de vos @media queries ! Pour simuler la largeur d'un écran, il vous suffit simplement de réduire ou d'agrandir la taille de la fenêtre de votre navigateur. En fonction de la largeur de cette dernière et de vos points de rupture, vous verrez les styles correspondants s'appliquer.

Le navigateur Chrome permet même depuis sa console (touche F12 du clavier pour l'afficher) de simuler l'affichage de la page web en cours sur différents terminaux : smartphones, tablettes,...

Vous l'aurez compris, les @media queries s'avèrent être indispensables dès lors que l'on souhaite rendre son site lisible et accessible sur tous les types d'écrans possibles. Le design et le contenu de votre site doivent s'adapter en toute circonstance, sur grand ou petit écran. Ne négligez jamais cet aspect lorsque vous personnalisez votre site en CSS !