Il existe de nombreux sites (comme celui-ci) qui proposent des « templates » (modèles) en libre téléchargement, libre d’utilisation, de modification… encore faut-il comprendre/lire le HTML, le CSS et « intégrer » le responsive design.
La structure que je vous propose de réaliser vous permettra d’appréhender toutes ces notions simplement. Nous nous aiderons d’un framework gratuit – Skeleton – qui intègre déjà la notion de responsive design. Ce projet semble abandonné – malheureusement – mais reste fonctionnel et simple au premier abord, par sa lisibilité et son écriture rationnelle.
Le responsive design, c’est écrire une seule fois un élément et le décider de sa restitution sur les différents terminaux existant – écran de bureau, tablette et smartphone.
Je n’ai pas d’avis sur la question, mais il semblerait qu’un « courant de pensée » privilégie le « mobile first ».
Les navigateurs intégrant des outils nous permettant de voir les différentes restitutions possibles, nous pourrons travailler sereinement sur une vision globale.
<sur un écran de bureau>
<sur une tablette>
<sur un smartphone>
Cette structure, est l’opportunité de concevoir différents type de pages, une page d’accueil ainsi que trois pages destinées à recevoir du contenu – avec 2 colonnes ou sans.
Zones utiles sur toutes les pages.
Tête de page et pied de page – header et footer.
Contiennent généralement l’identité/logo et navigation.
Rappel d’une adresse, liens formels obligatoires – mentions légales, politique de confidentialité, (…)
Zones utiles sur la page d’accueil – hero
Une image (représentative) qui « anime » la page, peut être support de texte
Zones d’appel.
Liens vers d’autres parties du site – ou présentation de services.
Zone des propos principaux de la page – Main.
Texte, listes, tableaux, liens, images, vidéos, galerie photos…
Zone secondaire – sidebar.
Si relatif aux propos principaux, peut contenir des liens complémentaires.
Texte, listes, tableaux, liens, images, vidéos, galerie photos…
- Les lignes + flèches définissent les différents type de pages.