6 choses à connaître avant de réaliser un webdesign responsive

Ce site n'a pas pour but d'être exhaustif, c'est une liste de choses à garder en tête lorsque l'on réalise une maquette pour un site internet responsive.
Dans le doute, n'hésitez pas à chercher plus d'informations sur internet ou à demander l'avis d'un intégrateur.

Grille

Voyez comme tout est calculé au Parthénon ! L'ordre est dorique, et le peu de hauteur de la colonne dans cet ordre vous donne à l'instant l'idée de durée et de solidité... François René

Lorsque l'on réalise une maquette, il faut utiliser une grille (de 12 colonnes, ou plus si besoin).
Respecter ces contraintes de taille et de symétrie améliore l'harmonie et la lisibilité du site. De plus ces colonnes sont ensuite transformées en règles d'affichage par le développeur qui peut ensuite les appliquer sur toutes les pages sans se répéter.

Breakpoints (exemple)

Il y a une limite à toute chose, et il faut toujours la dépasser. Georges Guynemer

Les breakpoints (ou points de rupture) sont des limites qui, lorsqu'elles sont atteintes, permettent d'appliquer de nouvelles règles d'affichage au site, comme par exemple faire passer deux blocs l'un en dessous de l'autre, cacher un élément, augmenter une taille de police, etc...

Responsive vs Adaptive (exemple)

L’homme raisonnable s’adapte au monde ; l’homme déraisonnable s’obstine à essayer d’adapter le monde à lui-même. Tout progrès dépend donc de l’homme déraisonnable. Bernard Shaw

Responsive vs Adaptative

Comme on peut le voir sur l'image ci-dessus, en responsive les blocs passent de 100px de large (par exemple) à 101px puis 102px, etc... jusqu'à 500px. Ils passent donc par toutes les largeurs possibles, avec les conséquences que cela implique sur le contenu.

En adaptive, les blocs ont une largeur de 100px jusqu'à ce qu'un certain breakpoint soit atteint, puis passent directement à 500px. Il n'y a donc que deux largeurs possibles, la gestion du contenu des blocs est simplifiée mais l'affichage n'est pas optimal si notre largeur d'écran n'est pas exactement la même que celle prévu par le breakpoint.

Unité relative vs unité statique

Tout est relatif, excepté l’infini. Duc de Lévis

Les unités relatives sont préférées à celles statiques pour un site internet responsive, car elles permettent de contrôler des proportions plutôt que de fixer des tailles.

Largeur maximale (max-width) (exemple)

Ce qui distingue les grands hommes, c'est plutôt la largeur et l'étendue que l'originalité. Ralph Waldo Emerson

Un élément peut avoir une largeur maximale (et une hauteur maximale aussi), et heureusement sinon certains sites seraient beaucoup trop large sur grand écran. Ce que l'on fait généralement est de fixer une largeur maximum au conteneur principal de notre site afin qu'il arrête de "s'étirer" à partir d'un certain breakpoint. Mais cela ne s'applique pas que au conteneur principal, une largeur maximal peut être définie, si besoin, pour chaque élément.

Vectorisé vs pixellisé

Derrière tout problème négligeable, il y en a un de taille prêt à surgir. Paul Hughes

En ayant compris les différents points précédents, il est facile de comprendre l'importance des éléments graphique vectorisé sur un site internet dont les dimensions peuvent changer pour chaque taille d'écran.

Mais il n'est pas possible de vectoriser une photo ou une élément graphique complexe.
C'est pour cela que nous utilisont des images pixellisé, au format PNG si l'on a besoin de la couche alpha ou en JPEG si l'on a besoin d'optimiser le poids de l'image.