Compatibilité avec tous les écrans
De plus en plus de personnes utilisent leur smartphone, plutôt qu'un ordinateur pour naviguer sur Internet. Rendre un site web accessible et fonctionnel à la fois sur un smartphone, une tablette ou un grand écran de bureau est devenu un enjeu majeur. Diverses approches ont été élaborées dans ce but.
Les 3 approches
Pour simplifier à l'extrême, nous dirons qu'il existe 3 approches principales :
1. Un site différent pour chaque largeur d'écran
On a préconisé parfois d'envisager jusqu'à six largeurs d'écrans différentes, conduisant à autant de sites à réaliser ! À cause des délais de mise en œuvre, et des coûts de réalisation considérables, on conçoit qu'une telle approche soit à peu près abandonnée aujourd'hui.
2. Un site unique compatible tous écrans
On a cherché à réaliser des sites dont le code, unique, s'affiche de manière satisfaisante quel que soit la largeur de l'écran utilisé. Cette méthode se subdivise elle-même en deux approches différentes, selon que l'on privilégie l'affichage sur grands écrans ("Desktop First" pour les PC, Macinsosh, smartTV) ou l'affichage sur écrans plus petits ("Mobile First" pour les smartphones et tablettes).
2a. Desktop First,
Elle met en œuvre un mécanisme automatique complexe et assez génial.
Pour les grands écrans, on réalise une mise en page essentiellement basée sur des blocs de textes ou d'images disposés en colonnes verticales parallèles, le tout occupant la totalité de la largeur de l'écran des PC et Macintosh.
Sur les smartphones et petites tablettes, ces mêmes blocs sont automatiquement disposés les uns en dessous des autres. Naturellement, c'est un peu plus subtil que cela dans la réalité, mais cette description donne une assez bonne idée générale du mécanisme utilisé.
2b. Mobile First,
Une qualité graphique compatible avec les faibles largeur d'écrans est obtenue avant tout par la rigueur et la simplicité de la mise en page, ainsi que par la qualité et la lisibilité de la typographie.
Lorsque la page s'affiche sur un écran plus grand, les texte, parfois très légèrement agrandis, se coulent en une colone généralement unique, dont on fixe la largeur en tenant compte des règles admises pour favoriser une lisibilité optimale, soit généralement 6 à 10 mots par ligne pour la langue française.
Ici, on ne cherche pas à utiliser la largeur totale de l'écran : ce qui serait inadmissible dans une mise en page imprimée, à cause du coût élevé du papier, est parfaitement tolérable sur un écran. Pourquoi s'astreindre à utiliser la surface totale de l'écran ? En "gaspiller" une partie ne coûte rien ! Même si cette approche peut perturber les habitudes de certains graphistes...
On aura deviné que c'est cette approche qui a notre préférence, pour sa relative facilité de mise en œuvre, la clarté et la lisibilité du résultat, et l'agrément de la lecture. Et aussi, la facilité de la maintenance, ce qui n'est pas négligeable.
Quelques remarques
Le terme "Responsive" est souvent utilisé pour qualifier une mise en page s'adaptant automatiquement à la largeur de l'écran, quelle que soit la méthode utilisée pour cela. Cependant, les puristes utilisent ce mot uniquement pour la méthode "2a", celle qui donne la priorité à la mise en page pour les grands écrans, au détriment, parfois des smartphones.
Il semblerait aussi que Google privilégie le type "2b" (Mobile First) de mise en page, lors de l'indexation des sites web, ce qui n'est pas sans intéret.