Menu

Créer un thème adaptatif (Responsive Design)

Vous démarrez un nouveau projet de site web vierge en Responsive Design ? Ces pages vous intéresseront !

Un site web adaptatif (Responsive Web Design) est une notion de réalisation de site web regroupant des techniques permettant d'adapter visuellement ledit site à tous types de terminaux. Un seul gabarit permettra d'afficher le site sous différentes formes suivant le terminal utilisé.

Recommandations

Pensez en EM plutôt qu'en pixels

L'unité EM est une unité relative utilisée dans les feuilles de styles. Elle permet d'avoir un meilleur rendu quelque soit le terminal utilisé.

N EM correspondent à N fois la taille du texte de l'élément parent.

Prenons l'exemple suivant :

p { font-size: 16px; }
p a { font-size: 1.5em; }

Dans ce cas, les liens A dans le paragraphe P auront une taille de 1,5 X 16px, soit 27px.

Néanmoins dans cet exemple, nous avons utilisé une taille en pixels pour définir notre taille de base. Il vous faudra effectivement définir une taille de base dans votre feuille de styles. On utilise pour cela une taille en pourcentage. Prenons cet exemple :

body { font-size: 100%; }
p { font-size: 0.8em; }
p a { font-size: 1.5em; }

Dans cet exemple, le texte du paragraphe P aura une taille de 0,8 X 100% (16px par défaut) = 12.8px.

Par contre la taille du texte des liens dans le paragraphe P aura une taille de 1,5 X 0,8 X 100% (16px par défaut) = 19.2px.

Par défaut, la plupart des navigateurs ont une taille de police à 16px. Une police de base à 100% permet de définir donc une taille de police à 16px.

Attention à ne pas trop imbriquer de propriétés font-size dans vos styles : vous risquez d'avoir des surprises...de taille.

Pensez Mobile en premier ! (Mobile first)

La notion de mobile first peut être considérée comme un mode de pensée dans lequel on privilégierait la construction d'une interface ergonomique pour terminaux mobiles avant d'établir l'ergonomie pour un terminal "desktop" (de bureau). Ce qui est, dans l'histoire d'Internet, l'affichage traditionnel. Cette pensée a pour objectif d'améliorer l'expérience utilisateur (UX).

L'élaboration d'un site web sous la contrainte d'un faible espace d'affichage force à épurer au maximum les éléments visibles par l'utilisateur final. Une tendance que l'on retrouve de plus en plus dans l'ergonomie des interfaces web.

Largeur de page non fixe

Généralement, une des questions posées par les webdesigners sur la réalisation d'un site responsive concerne la largeur du site web. Et bien sachez qu'il n'y a pas de taille fixe. En effet on détermine à maximum sur la largeur de page (donc la largeur fixe finalement sur une visualisation en mode "desktop") et en réduisant la fenêtre, la largeur du site va diminuer automatiquement.

Framework Foundation

Comavoo vous propose par défaut un "starter-kit" pour bien démarrer le thème. Ce starter kit est basé sur le framework opensource Foundation et vous assure une certaine flexibilité en terme de Responsive Web Design.

  • Nombre de colonnes par défaut : 12
  • Largeur maximale par défaut : 62,5em, soit 1000 pixels.
  • L'entre-colonne (appelée gutter — ou gouttière) : 1,875em, soit environ 30 pixels.

Voici ci-dessous une figure montrant la grille :

grid_1000x12c.png


Articles en vedette