Architecture, urbanisme, master planning Maquette de site Web

L'image superposée et l'annuaire sur trois colonnes nécessitent un examen attentif selon l'écran

La section initiale « Contactez-nous » constitue la première zone sensible au responsive car elle combine plusieurs plans visuels : une photographie de chantier, un encadré de contenu blanc aux coins arrondis, des arrière-plans géométriques orange et gris, ainsi qu'un bouton d'action. Sur les largeurs d'écran plus réduites, il convient de vérifier le rapport entre l'échelle de l'image, l'emplacement de l'encadré, la largeur du texte et les formes décoratives afin que la photographie reste identifiable et que le contenu d'introduction ne paraisse pas encombré.

La section « Tous nos bureaux » pose une problématique d'examen différente. Neuf exemples d'agences sont organisés sur trois colonnes sur grand écran, reprenant pour chaque entité le lieu, l'adresse, le téléphone et le fax. L'affichage responsive doit être contrôlé pour vérifier l'empilement des colonnes, le retour à la ligne du texte et l'espace vertical généré par l'annuaire. Cette structure répétée doit rester facile à parcourir sans que des adresses ou numéros de téléphone trop longs ne viennent déformer les entrées adjacentes.

Le bloc de contact inférieur associe également un formulaire arrondi, un panneau d'information orange et une photo de bâtiment. L'examen doit porter sur l'ordre et la largeur de ces zones, la visibilité du bouton d'action « Envoyer » et l'équilibre entre coordonnées et photographie sur les écrans plus petits. L'en-tête compact et la commande de menu doivent être vérifiés en parallèle de ces sections afin que la navigation reste proportionnée face aux zones d'information denses de la page.