Intégration HTML5 CSS3 : conseils et exemple à télécharger pour bien démarrer votre site

Récapitulons : les langages HTML et CSS sont les langages les plus connus. Tous les développeurs ont déjà regardé comment fonctionne le code HTML et les feuilles de style pour apprendre à créer un petit site web.

Au début on fait des copier coller et en bidouillant un peu le code et on arrive, sans tout comprendre, à faire fonctionner la page. Et puis on apprend que les tableaux de présentation c’est le mal et enfin on essaye de ne pas attraper la maladie de la divite aigüe.
Bref, on arrive à créer de petits sites mais on a toujours l’impression de faire du bricolage.

Vient enfin l’instant fatidique où l’on vous demande de travailler sur un gros site web d’entreprise. Un site comportant un nombre important de pages. Un site professionnel avec beaucoup de fonctionnalités métiers. Vous vous dîtes qu’il va falloir partir sur une architecture solide et arrêter le bricolage !

Côté serveur, pas de problème : vous maîtrisez votre technologie et vous savez déjà comment industrialiser votre code.
Côté client, c’est une autre affaire !
Vous avez lu pas mal d’articles expliquant comment écrire du code HTML sémantique, comment positionner vos éléments avec du CSS mais vous ne savez pas comment démarrer votre site pro. En même temps, vous avez entendu parler de framework CSS, de responsive design, de CSS orienté objet et de grille.

Pas de panique, Kiwano vous propose un tour rapide des éléments à prendre en compte si vous démarrer un gros site web.
Ensuite nous verrons comment batir une architecture HTML et CSS solide avec une bonne base HTML et un bon découpage des styles avec en cadeau une archive d’un template de base HTML5 CSS3 par Kiwano.
Enfin nous terminerons avec une liste de conseils.

html5+css3

Framework CSS et grilles CSS

Un framework CSS est un ensemble de styles CSS réutilisables prêts à être appliqués sur votre code HTML. Les frameworks CSS sont découpés en composants. La plupart du temps il vous suffira d’indiquer une ou plusieurs classes à votre code HTML pour utiliser les styles dans votre code et les appliquer à votre site.

bootstrap-twitter
Le meilleur framework actuel est le Bootstrap de Twitter.
Par exemple, avoir ce framework, si vous voulez que votre élément ressemble à un bouton : il suffit de lui appliquer le style btn. Si vous voulez en plus lui appliquer le style d’un bouton d’alerte vous lui indiquez le style supplémentaire btn-danger.

Exemple de code :
<a class="btn btn-danger" href="">Link</a>

Rendu :
bouton-twitter

Le framework bootstrap de Twitter est basé sur une grille CSS. Qu’est ce qu’une grille CSS ?

Grille CSS

Une grille CSS est un ensemble de styles vous permettant de positionner vos éléments dans une grille verticale (colonnes).
Pour faire simple, vous indiquez à l’aide d’une classe CSS combien de colonnes doit prendre votre bloc de contenu.
Les grilles CSS sont découpées soit en 12 colonnes soit en 16 colonnes, ce qui vous donne le maximum de flexibilité. De plus ces grilles fonctionnent souvent en mode Responsive pour s’adapter à la largeur de votre écran.

Exemple avec la grille 12 colonnes de Twitter :
grille-twitter

Si vous avez deux éléments et vous souhaitez que le premier possède une largeur de 4 colonnes et le deuxième une largeur de 8 colonnes, vous devez indiquer les classes row, span4 et span8 dans votre code HTML. Le chiffre à côté de span indique ce nombre de colonne :

<div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
</div>

1140-grid
Une autre grille utilisable est la 1140 CSS Grid de 12 colonnes fonctionnant jusqu’en 1280 pixels.

skeleton
Skeleton est un autre framework CSS qui comporte aussi une grille CSS.

Doit-on obligatoirement utiliser un framework CSS ?

Démarrer un projet avec un framework CSS comme le bootstrap de Twitter vous fera certainement gagner du temps. Cependant, si le design que vous souhaitez est différent de celui de base du framework, cela vous posera rapidement des problèmes.
Deux solutions sont alors possibles : soit vous customisez le code du framework pour avoir un style graphique personnalisé, soit vous partez de zéro pour construire votre propre style graphique.
Dans le deuxième cas, prenez le temps de regarder comment est construit le code du framework, il y a beaucoup d’astuces et de solutions à reprendre (et à copier) pour recréer efficacement un style propre.

Constuire une base HTML + CSS : j’ai besoin de quoi ?

Il vous faut d’abord une base HTML solide et une feuille de style initiale pour vos éléments HTML. Plutôt qu’utiliser un Reset CSS, on utilise de plus en plus des styles d’initialisation pour l’ensemble des navigateurs. Il est en effet plus logique d’indiquer la bonne valeur dès le départ plutôt que de passer par une étape de mise à zéro.

Pour cela, le plus simple est de partir avec le code HTML5 boilerplate. Cependant, le conseil avisé de Kiwano est le suivant : vous pouvez plutôt utiliser l’outil Initializr qui vous aidera à construire cette base.

En sortie, vous aurez :

  • Un code HTML5 de base avez de bons commentaires conditionnels pour gérer les surcharges IE
  • La librairie Modernizr pour la compatibilité des nouveaux éléments HTML5 avec les anciennes versions de Internet Explorer et la possibilité de tester le support d’un certain nombre de fonctionnalités
  • Une feuille de style de base pour vos éléments
  • Un ensemble de styles d’aide comme le fameux clearfix
  • Une feuille de style de base pour l’impression.

Une grille CSS et un premier zoning HTML5

Il vous reste à ajouter une grille pour la gestion de vos styles et à découper votre layout de page HTML5.

Exemple de découpage de la page avec les nouveaux éléments HTML5 :
decoupage-html5

Découpage des CSS

Pour le découpage des CSS, en plus des styles de base, il vous faut d’abord une feuille de style décrivant les layouts dont vous avez besoin pour positionner vos principaux éléments.
Kiwano vous conseille ensuite de construire des modules réutilisables pour vos éléments, par exemple un module pour vos boutons, un module pour vos formulaires, un module pour vos tableaux, un module pour vos icones, etc.

Media Queries

Les styles media queries de surcharge servent à faire fonctionner votre site quelle que soit la largeur de l’écran. Ils doivent être insérés au même endroit que le style de base surchargé.
Par exemple pour le code media queries de vos formulaires il faut l’insérer dans la même feuille CSS que le code de vos formulaires.

Le découpage conseillé est donc le suivant pour vos feuilles de style :
decoupage-styles

Téléchargement

En suivant le lien de téléchargement ci-dessous, vous trouverez un template HTML5+CSS3 pour bien démarrer vos projets Web. Ce template contient un code HTML de base, une feuille de style d’initialisation des éléments principaux, une grille CSS responsive (extrait du bootstrap de Twitter), quelques classes helper et enfin une feuille de style de base pour l’impression.
N’hésitez pas à modifier/adapter pour vos projets et à nous faire part de vos remarques/suggestions en commentaire.

Télécharger le kit de démarrage HTML5 CSS3 de Kiwano

Conseils, astuces et pièges à éviter

Pour finir Kiwano vous propose quelques conseils et erreurs à éviter pour le développement HTML et CSS.

HTML : les erreurs à éviter

– Faire de la mise en page avec HTML
– Utiliser des noms de classes et d’id en rapport avec l’aspect visuel
– Ecrire de l’HTML non sémantique (pour la mise en forme)
– Ecrire du code HTML uniquement pour le fonctionnement de scripts

CSS : les erreurs à éviter

– Utiliser des syntaxes complexes pour sélectionner votre élément à styler (il manque peut-être une classe non ?)
– Etre trop spécifique vous compliquera la tâche pour faire évoluer votre code
– Utiliser des hacks CSS

Recommandations HTML

– Utiliser des noms en minuscule séparés par des tirets
– Utiliser des doubles quotes pour vos valeurs d’attributs HTML à la place de la simple quote que vous utiliserez pour votre code JavaScript
– Utiliser une convention de nommage pour vos classes, images

Recommandations CSS

– Aller du générique au spécifique dans le code et respecter l’ordre HTML
– Mettre un style par ligne pour suivre plus facilement les changements de code
– Ordonner les propriétés par pertinence et non par ordre alphabétique
– Essayer d’avoir les sélecteurs le plus court possible et idéalement d’utiliser un nom de classe le plus à droite possible dans la définition du sélecteur
– Utiliser les sélecteurs d’enfants pour limiter la zone d’application du style

N’hésitez pas à partager votre expérience dans les commentaires.

9 réflexions au sujet de « Intégration HTML5 CSS3 : conseils et exemple à télécharger pour bien démarrer votre site »

    1. Salut Quentin, le téléchargement remarche bien sur html5boilerplate.com mais tu peux toujours télécharger notre kit de démarrage en cas de problème 😉

  1. Salut, c’est ma première visite sur le blog et je tombe sur un article bien pointu…mais très intéressant et qui m’a permis de mieux comprendre les différences entre ces deux langages même si certaines choses m’ont échappées, mais je vais aller voir un peu ailleurs sur le blog pour essayer de me mettre au niveau.

  2. Ne vaut t’il pas mieux utiliser les balises nav dans le aside, au lieu des section, qui sont plus lié aux balises article ?

    1. @Nicolas, la balise nav est réservée pour la navigation principale du site, pour la navigation dans la barre latérale du site (aside) une simple liste suffira.

  3. Salut,
    d’abord merci pour cet article et le kit de démarrage ! Ca permet vraiment de commencer sur une bonne base. Par ailleurs j’aurai une question à poser, j’ai un petit soucis avec mon background qui ne s’affiche pas, depuis hier j’ai tout vérifié plusieurs fois et je n’arrive pas à trouver le problème. Quand il s’agit d’une couleur ca marche, quand c’est une image non.
    Y aurait-il quelqu’un pour m’apporter son aide et m’éclairer ? 🙂 Merci d’avance !

    1. Salut Ines,
      Par expérience si le background image ne s’affiche pas c’est un problème de chemin.
      Par exemple si l’image est dans un sous répertoire img on indique ‘img/monimage.png’ mais si l’image est appelé depuis un fichier css contenu dans un répertoire css il faut plutôt indiquer ‘../img/monimage.png’.
      En espérant que cela t’aide.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *