Anatomie d’un th√®me : d√©composez les pages de votre site

La plupart des sites que vous visitez disposent d’√©l√©ments r√©utilis√©s pour plusieurs raisons. Un menu, un logo, le contenu ou encore un pied de page…

Pourquoi structurer vos pages ?

Structurer les pages de votre site est la première étape pour créer votre thème.

Rendre compréhensible vos contenus aux internautes

Une structure, est un assemblage d’√©l√©ments. Ces √©l√©ments apportent une hi√©rarchie visuelle pour vos utilisateurs. Ainsi ils comprennent d’un coup d’oeil votre site et son fonctionnement.

Si on prends l’exemple de Wikipedia, sur chaque page de contenu, vous pouvez retrouver un sommaire.

Cet √©l√©ment permet √† l’utilisateur de naviguer au sein de la page et ceci est effectu√© en instaurant une habitude de navigation √† l’utilisateur. En r√©utilisant des √©l√©ments sur chaque page, les utilisateurs comprennent mieux les diff√©rentes fonctionnalit√©s et vous avez ainsi une meilleure exp√©rience utilisateur.

Imaginez un site dans lequel chacune des pages est diff√©rente et ne se ressemblent pas du tout. Ca serait un enfer n’est-ce pas ?

Wikipedia Sommaire
Sommaire de Wikipedia

Expliciter nos contenus pour les robots

LA Sémantique est importante

En plus des utilisateurs, nous devons √©galement faire comprendre le contenu de notre site web aux robots. Cela peut √™tre les robots des moteurs de recherche qui scan vos pages web pour indexer vos diff√©rentes pages, o√Ļ encore les robots utilis√©s par les personnes d√©ficientes, pour cela, on passe par la s√©mantique.

Vous devez donc commencer à réfléchir aux balises HTML que vous allez utiliser.

Dans le cadre d’un √©l√©ment de navigation, quelle balise allez-vous utiliser ?

J’esp√®re que vous avez choisi la nav, en faisant les bons choix de structure d√®s le d√©but vous √™tes assur√©s d’avoir une bonne fondation pour votre th√®me, que ce soit pour vous et vos utilisateurs.

Comment structurer vos pages ?

Bien, maintenant que nous avons vu l’important de bien structurer nos pages, nous allons prendre un exemple, et d√©structurer ensemble une maquette. C’est en faisant que l’on apprend !

Site

On encadre les éléments pour les isoler les uns des autres.

Un site finalement, c’est pleins de petites boites qui sont assembl√©s et qui font des plus grandes boites.

Dans l’image, ci-contre, on identifie quelques √©l√©ments :

  • Header
  • Le contenu
  • Un footer avec des listes, des ic√īnes et un logo

Plus vous allez loin dans la déstructuration de la maquette, plus vous allez identifier des éléments qui sont réutilisés sur votre site.

Les éléments qui composent notre page

La composition du Header

Header

Le header c’est la partie sup√©rieur de notre site. Il souvent compos√© d’un menu, d’un logo et des titres et il ne change pas o√Ļ tr√®s peu sur les diff√©rentes pages de votre site. N√©anmoins il est compos√© d’√©l√©ments qui subissent des modifications.

Le menu

Le menu est la premi√®re chose qui change lorsque l’on navigue sur le site. Souvent on rends plus visible l’√©l√©ment du menu en fonction de la page sur laquelle nous sommes.

LE LOGO ET LE TITRE

Le logo ou le titre du site ne changent pas souvent aussi, √ßa serait bizarre d’ailleurs non ?

Le contenu de notre page, ou main

Content

Le contenu de la page change tout le temps ! Vous imaginez un site avec des pages qui ont tout le temps le même texte ? Vous non plus ?

Pour le titre par exemple, si je suis sur la page d’accueil, le titre pourrait √™tre ¬ę¬†Bienvenue sur mon site¬†¬Ľ et sur une page boutique on aurait ¬ę¬†Acheter sur la boutique¬†¬Ľ.

Le titre permet √† l’utilisateur d’identifier d’un coup d’oeil la page sur laquelle il se trouve.

Le contenu de la page change donc en fonction de la page sur laquelle l’utilisateur est.

  • Je suis sur un article : le contenu sera le contenu de mon article
  • Je suis sur l’accueil de blog : le contenu sera un listing de mes articles
  • Je suis sur la page des conditions g√©n√©rales de ventes : le contenu sera les diff√©rentes conditions

la composition du footer

Footer

Le footer ressemble beaucoup au header, il ne change pas o√Ļ tr√®s peu sur le site. Tr√®s souvent utilis√© pour remettre le logo, et les diff√©rents lien important du site, certains l’utilisent √©galement pour mettre un formulaire de contact.