CSS : améliorer la page d’accueil de son site web

Pour apprendre l’utilisation des styles CSS, le mieux est je pense de passer par la pratique sur des cas concrets. Voici donc un cas concret, l’amélioration de la page d’accueil (homepage) de mon site web perso sur lequel vous êtes en ce moment : ericmurat.com

Contexte

  • Mon site perso est réalisé sous WordPress, mon thème est le thème Sparkling de ColorLib.
  • Pour le cas de cet article, il s’agit juste d’améliorer la présentation de la page d’accueil, pas le contenu. On va donc essentiellement agir sur les propriétés CSS.
  • Normalement, pour bien faire il faudrait tester la visualisation obtenue sur plusieurs navigateurs différents : Chrome, Firefox, Internet Explorer etc… Mais bon, il s’agit juste de mon site perso, je me limiterai donc à 2 items de visualisation : le navigateur Chrome, et une visualisation « smartphone ».
  • Il y a 50.000 façons d’améliorer une page web, ma façon sera basée sur l’utilisation des outils développeurs du navigateur Chrome : Chrome DevTools.

Objectif

Bon, maintenant que je vous ai présenté le contexte, je vais préciser un peu de quoi je parle quand je dis « améliorer ma homepage ». Comme des images valent mieux qu’un long discours, voilà en fait je veux passer de ça :


Desktop Mobile

à ça :

Desktop Mobile

Qui est quand même, reconnaissez le, une homepage plus sexy !  🙂

Réalisation

Passons maintenant à la partie réalisation, voilà comment j’ai procédé pour arriver à mon objectif : j’ai résolu pas à pas les problèmes suivants :

Ne pas afficher la barre latérale droite (sidebar)

–> Modification de la propriété « Modèle » des attributs de la page : « Full-width(no sidebar) »

2016-05-29_Propriete-full_width

Afficher l’image principale en pleine largeur (Full width)

Après recherche sur internet, voici l’article que j’ai trouvé : full width homepage – ColorLib

Je modifie donc comme indiqué le fichier style.css correspondant au custom CSS du thème :

  • Apparence \ Personnaliser \ Sparkling Options \ Autres \ CSS personnalisé :
.home .post-inner-content {
 border: none; 
}

 @media (min-width: 1200px) {
 .home .container {
  width: 100%; 
 }
}

 .home .post-inner-content {
 padding: 0; 
}

Résolution de petits défauts

L’application du CSS à l’étape précédente donne ceci :
Css-Homepage_05
C’est pas mal, mais il reste quelques ajustements à faire pour que l’image prenne vraiment toute la largeur. J’inspecte donc les propriétés de l’élément à l’aide des outils de développement fournis par Chrome :

  • Bouton Menu \ Plus d’outils \ Outils de développement (raccourci clavier : CTRL + SHIFT + I)

J’essaie de trouver le plus « haut » élément au sein de la balise <body> pouvant poser un problème au niveau des marges ou du padding, et je m’aperçois que l’élément « main-content-area » doit être ajusté :
Css-Homepage_06
En vert apparait le padding indésirable :
Css-Homepage_07
Et en orange apparaissent les marges indésirables :
Css-Homepage_08
Je rajoute donc à mon Custom CSS le code suivant pour adapter ces problèmes :

.home .main-content-area {
width: 100%;
padding: 0px;
margin: 0px;
}

Ah au passage pourquoi « .home .main-content-area » ?
Ceci s’appelle l’emboîtement de propriétés CSS, cette notation est utilisée pour indiquer que le style doit s’appliquer aux éléments de classe « home » <strong>ET</strong> aux éléments de classe « main-content-area ». On évite ainsi d’appliquer ce style aux autres pages du site car je ne veux modifier QUE la page d’accueil.
Pour plus d’informations, voir l’article : Héritages et cascades en CSS

Problème avec la scrollbar horizontale

La modification précédente donne ça :
Css-Homepage_09
On s’aperçoit qu’il y a un souci avec l’élément « row » au sein du « main-content-area » qui cré un décalage et fait apparaître une scrollbar horizontale indésirable.
Essayons de corriger cela en rajoutant ceci :

.home .row {
margin-right: 0px;
margin-left: 0px;
}

Encore des ajustements

Suite aux modifs précédentes, on obtient ceci :
Css-Homepage_10
C’est maintenant l’élément « main-content-inner » qu’il faut adapter :

.home .main-content-inner {
padding: 0px;
}

Un test rapide montre qu’il faut aussi adapter « post-inner-content » :

.home .post-inner-content {
border: 1px solid #1F1F1F;
padding: 0px;
background-color:#1F1F1F;
}

Vérification qu’il n’y ai pas de modifications superflues

Au final voilà ce qu’on obtiens :
Css-Homepage_11
On pourrait s’arrêter là, mais je rajoute une petite étape permettant de vérifier que l’on n’ai pas modifié trop de chose.
Pour faire ça, il faut

  • sélectionner un élément dont on a modifié les propriétés dans la partie gauche de l’onglet DevTools (élément « row pull-left » dans l’image ci-dessus)
  • jouer avec les cases à cocher apparaissant devant les propriétés dans la partie droite de l’onglet DevTools (propriétés « margin-right » et « margin-left » de l’image ci-dessus)

Normalement, chaque décochage doit entraîner un affichage dégradé, sinon cela veut dire que la modification de la propriété n’était pas nécessaire.

Pour plus d’infos sur l’utilisation de Chrome DevTools, voir : Chrome DevTools Overview

La feuille CSS finale

Conclusion

Voilà, évidemment il y a plein d’autres choses à faire pour avoir une jolie page d’accueil, mais vous venez de voir ma méthode que j’ai utilisé sur la page d’accueil de mon site avec chaque étape détaillée. Et vous, quelle est votre méthode pour améliorer votre page d’accueil ? N’hésitez pas à laisser un petit commentaire ci-dessous !  🙂