Création de site : zoom sur le responsive design

Une approche « mobile-first » du Responsive web design

La conception web « Mobile-first » consiste à créer avant toute chose un site web mobile (avant de se consacrer à la création d'un site pour PC). Cette approche séduit de plus en plus, car elle présente des avantages avérés. Premièrement, les sites web mobiles posent davantage de problèmes de fonctionnalités (principalement en raison du manque de surface d'écran). Il est de ce fait plus pratique et plus efficace de se concentrer d'abord sur la conception mobile.

Il est également plus facile d'augmenter la taille de la version mobile que de réduire celle de la version bureau (encore une fois, en raison du manque d'espace sur les sites mobiles). Enfin, la conception web « Mobile First » permet de réévaluer ce qui est visuellement et fonctionnellement nécessaire. La conception d'un site web en tant que site responsive mobile-first oblige les concepteurs de sites responsive comme 3310street à poser un certain nombre de questions importantes. Et pour cause, il y a moins de surface d'écran avec laquelle travailler.

Voici donc les questions les plus importantes qu'il faut se poser : cette caractéristique/fonction est-elle vraiment nécessaire ? Comment concevoir quelque chose de minimaliste pour le mobile et qui sera ensuite adapté aux ordinateurs de bureau ? Cet effet visuel vaut-il le temps qu'il faut pour le charger sur le mobile ? Quel est l'objectif principal, et quels éléments visuels aident les utilisateurs à l'atteindre ?

Les résolutions d'écran pertinentes pour la conception responsive d'un site web

Voici les résolutions d'écran les plus courantes chez les utilisateurs de smartphone, de tablettes et de PC dans le monde entier :

• 360 x 640 (petit portable) : 22,64%,
• 1366 x 768 (ordinateur portable moyen) : 11,98%,
• 1920 x 1080 (grand ordinateur de bureau) : 7,35%,
• 375 x 667 (mobile moyen) : 5%,
• 1440 x 900 (ordinateur de bureau moyen) : 3,17%,
• 720 x 1280 (grand mobile) : 2,74%.

Comme vous pouvez le constater, il existe un large éventail de résolutions. Cela signifie qu'à l'heure actuelle, ni les mobiles, ni les tablettes, ni les ordinateurs de bureau ne dominent le marché. Par contre, les concepteurs doivent tenir compte de toutes ces résolutions lorsqu'ils réfléchissent au responsive web design.

Les navigateurs web les plus populaires aujourd'hui

Le responsive web design consiste à offrir une expérience transparente sur n'importe quel appareil. Comme les différents navigateurs web rendent les pages web de différentes manières, les sites web doivent être testés pour s'assurer qu'ils sont compatibles avec une variété de navigateurs web mobiles et de bureau.

Certes, la mise à l'échelle d'un site web en fonction des seuils responsive adéquats relève principalement de la responsabilité d'un développeur web. Par contre, la décision finale revient au concepteur. Lui seul sait comment un site web responsive s'adaptera aux différentes tailles d'écran. Ceci, afin de créer une expérience utilisateur optimale. Voici une répartition mondiale des parts de marché des navigateurs web pour les mobiles et les ordinateurs de bureau :

• Chrome : 55,04%,
• Safari : 14,86%,
• Navigateur UC : 8,69%,
• Firefox : 5,72%,
• Opera : 4,03%,
• Internet Explorer : 3,35%,

Le responsive design consiste également à s'adapter aux capacités du matériel et du navigateur web de l'appareil, ainsi qu'à sa résolution. Par exemple, si Google Chrome prend en charge la propriété CSS overscroll-behavior, elle n'est pas compatible avec d'autres navigateurs.

Les meilleures pratiques en matière de design réactif

Pour créer un site web responsive, vous devez adopter certaines techniques.

Éliminez les frustrations

Au fur et à mesure de l'élaboration de la version pour tablette (et plus tard de la version pour PC), commencez à réfléchir aux objectifs secondaires, aux micro-interactions, aux flux d'utilisateurs et aux CTA (appels à l'action). Ces détails rendent les objectifs réalisables.

Le plus important est de vous concentrer en premier lieu sur les objectifs primaires de l'utilisateur. Ensuite, éliminez toute frustration inutile qui n'aide ni les objectifs primaires ni secondaires. L'objectif primaire pourrait être l'achat d'un produit, tandis que l'objectif secondaire se traduirait par l'inscription à une newsletter (qui pourrait conduire à un achat ultérieur). Voici un excellent exemple concernant la façon d'éliminer les freins : parce qu'il est plus difficile de naviguer sur une interface mobile, il est préférable de passer à un système de paiement de type one-page pour les boutiques de e-commerce. Pour les PC, activez le paiement en plusieurs étapes.

Privilégiez la conception pour les doigts de la main

La conception web responsive est délicate dans la mesure où les utilisateurs interagissent avec le site web pour PC par des clics. Dans la version mobile, les clics seront remplacés par des pressions ou des glissements. Il existe également des différences physiques. Les utilisateurs d'ordinateur de bureau ont généralement leur appareil sur une surface, alors que les utilisateurs de téléphone mobile le tiennent dans leur main. Ces différences modifient considérablement la façon dont les concepteurs d'interface utilisateur mobile créent les cibles de tapotement. Prenons quelques exemples :

• Les internautes s'attendent généralement à ce que la navigation principale d'un ordinateur de bureau se trouve en haut. Sur un mobile, elle devrait se trouver en bas. Les pouces n'atteignent pas confortablement le haut du site,
• Les autres éléments interactifs doivent également être faciles à atteindre. Cela signifie qu'ils doivent rester au centre de l'écran. Il est en effet plus difficile pour les pouces d'atteindre les côtés et les coins des écrans des appareils,
• Pour que l'on puisse les toucher facilement, les liens importants et les CTA doivent avoir une hauteur d'au moins 44 px (les cibles plus petites sont mauvaises pour l'ergonomie).

Voici donc comment créer un site web responsive design.