Le vocabulaire du web design responsive en anglais

Un client demande souvent, des le premier appel : "Will this look good on mobile?" Pour un designer web, la réponse professionnelle commence par le mobile-first, cette approche qui consiste a concevoir d'abord la version mobile d'une interface avant de l'adapter aux écrans plus larges. Expliquer cette méthode en anglais rassure immédiatement un client qui a déjà vu un site "casse" sur son téléphone après une refonte mal pensée.

Le point de bascule entre deux mises en page s'appelle le breakpoint : une largeur d'écran précise, souvent 768 ou 1024 pixels, ou la grille se reorganise pour rester lisible. Présenter clairement ces breakpoints dans une maquette évite les malentendus avec une équipe de développement basee à l'étranger, ou chaque seuil doit être documente avant le début du code. Enfin, ne jamais se fier uniquement à un navigateur redimensionne sur ordinateur : il faut toujours vérifier le rendu sur le véritable viewport d'un téléphone, cette zone d'affichage réelle qui varie enormement d'un modèle à l'autre.

Sur un écran qui passe de 1440 a 375 pixels de large, une grille figee casse immédiatement. C'est la que la fluid grid entre en jeu : une grille flexible ou les colonnes se redimensionnent proportionnellement plutôt que de deborder ou de s'ecraser. Combinée à des marges relatives plutôt que fixes, elle garantit qu'un bouton ou un titre garde toujours le même équilibre visuel, quel que soit l'appareil du visiteur.

Autre réflexe indispensable sur mobile : tout ce qui compte vraiment doit tenir above the fold, c'est-à-dire visible sans que l'utilisateur ait besoin de faire defiler la page. Un designer qui présente une maquette à un client anglophone doit savoir justifier pourquoi le titre principal et le bouton d'action se trouvent bien dans cette zone, et non trois écrans plus bas. Pour libérer cet espace précieux, la navigation complète se replie généralement derriere un hamburger menu, cette icone à trois traits horizontaux désormais reconnue partout dans le monde.

Le scroll etant l'interaction principale sur mobile, beaucoup de sites gardent une sticky nav : une barre de navigation qui reste collée en haut ou en bas de l'écran pendant que le reste du contenu defile. Ce choix mérite d'être justifie en anglais lors d'une revue client, car certains le trouvent envahissant sur un petit écran s'il n'est pas suffisamment discret.

Enfin, chaque élément cliquable doit être pense pour un doigt et non plus pour un curseur de souris. Les guides d'accessibilite recommandent un touch target d'au moins 44 pixels de côté pour chaque bouton, afin d'éviter les clics manques. Les designers expérimentés placent aussi les actions les plus frequentes dans la thumb zone, cette zone de l'écran naturellement atteignable par le pouce quand un utilisateur tient son téléphone d'une seule main — un détail qui change concretement le taux de conversion d'un site.