Un guide pour une conception Web réactive et les meilleures pratiques

En savoir plus sur la conception Web réactive et comment utiliser les meilleures pratiques pour en tirer le meilleur parti pour votre entreprise en ligne.


Conception pour une conception Web réactive

Plus de personnes naviguent désormais sur le Web avec des appareils mobiles qu’avec des ordinateurs de bureau ou portables. Environ 51% du trafic sur le site Web provient désormais d’une personne sur un appareil mobile. Avec un si grand nombre d’utilisateurs mobiles, il est essentiel que les entreprises en ligne s’assurent que leur site Web utilise une conception Web réactive (RWD) et soient à jour avec les dernières meilleures pratiques RWD..

Qu’est-ce que la conception Web réactive?

En termes simples, RWD consiste à concevoir un site Web qui s’adapte avec fluidité à n’importe quelle taille d’écran – que ce soit la dernière Apple Watch de 272 pixels de large ou un téléviseur à écran plasma, avec des PC, des tablettes et des appareils mobiles ordinaires entre les deux.

Exemple de conception Web réactive

Pour aider à expliquer davantage, ci-dessous comme un exemple approprié de conception de sites Web réactifs sur le Pomme site Internet. Vous trouverez ci-dessous une comparaison côte à côte d’une vue du site Web sur un ordinateur de bureau et un smartphone:

Comparaison RWD d'une capture d'écran de bureau et de smartphone

Le contenu est le même dans les deux vues, mais la disposition et la conception de l’interface utilisateur sont différentes. Dans la vue de l’écran du smartphone, les sections du site Web sont empilées pour faciliter le défilement vertical et le menu de navigation est caché derrière une icône de hamburger désormais familière. Les liens cliquables au bas de la page sont également larges et suffisamment hauts pour s’adapter aux gestes du toucher du doigt.

Au cœur de RWD, se trouve une profonde préoccupation expérience utilisateur web. Aujourd’hui, la plupart des gens visitent votre site Web à partir de différents endroits en utilisant une multitude d’appareils différents – l’ordinateur de bureau au travail, le smartphone lorsqu’ils sont dans le métro et la tablette au coucher. Quel que soit l’appareil qu’ils utilisent au moment où ils sont sur votre site Web, les utilisateurs s’attendent à ce que cela fonctionne. L’utilisation correcte de RWD signifie que l’expérience utilisateur sur votre site Web reste cohérente et agréable, quel que soit l’appareil utilisé par les utilisateurs.

Utiliser le Responsive Web Design à son plein potentiel

Bien que la conception d’un site Web qui semble bon sur toutes les tailles d’écran soit un grand pas dans la bonne direction, il est crucial que vous ne vous arrêtiez pas là. Pour que votre entreprise profite pleinement de RWD, vous devez placer RWD dans une stratégie plus complète avec le consommateur multi-appareils en son centre. Ça signifie:

  • N’offrez pas aux utilisateurs mobiles une version simplifiée de votre site Web pour ordinateur lorsqu’ils sont limités. Conseil: continuez de suivre les actions des utilisateurs mobiles sur votre site Web. Si vous remarquez que des utilisateurs atterrissent sur votre site mais consomment à peine votre contenu ou n’y passent pas de temps, il est probable qu’ils rencontrent une sorte de barrage routier..
  • Ne répondez pas à l’utilisateur mobile exactement de la même manière que l’utilisateur de bureau. Tirez pleinement parti du potentiel qu’offre un appareil mobile. Par exemple, si vous êtes propriétaire d’un restaurant, il est très facile pour les clients mobiles de localiser votre entreprise ou d’effectuer une réservation en tirant parti de la puissance de technologies comme Géolocalisation HTML5 et entrées de numéro de téléphone dans votre site Web.
  • Soyez conscient de vitesse de page. Selon les recherches du Nielsen Norman Group, principaux consultants en expérience utilisateur, 47% des visiteurs s’attendent à ce qu’un site Web se charge en moins de 2 secondes, et 40% des visiteurs quitteront le site Web si le processus de chargement prend plus de 3 secondes. Cela est encore plus vrai pour les utilisateurs mobiles, qui sont souvent en déplacement et qui ont souvent des limitations de bande passante..
  • Soyez conscient de contenu illisible. Certaines technologies telles que les lecteurs Flash ne bénéficient pas d’une large prise en charge sur les appareils mobiles. Par conséquent, il est conseillé de ne pas les utiliser sur votre site Web et d’éviter de créer des liens vers ces sites depuis vos pages. La vidéo et l’audio HTML5 sont certainement une bien meilleure option que les technologies propriétaires. C’est également une bonne idée d’ajouter une transcription de votre contenu vidéo. En fait, un certain nombre d’utilisateurs peuvent préférer le contenu écrit à la vidéo ou à l’audio, certaines technologies d’assistance ne peuvent fonctionner que sur du matériel écrit, et Google peut mieux acquérir des données sur le contenu de votre vidéo ou audio.
  • Évitez d’utiliser dialogues et fenêtres contextuelles qui empêchent les utilisateurs de voir ou d’interagir avec votre contenu. Celles-ci sont parfois difficiles à fermer sur les appareils mobiles où l’espace d’écran est limité, ce qui provoque de la frustration pour vos clients.
  • Payer attention au toucher! Si votre site Web s’appuie sur des événements de survol de la souris pour révéler du contenu masqué, cette fonctionnalité ne fonctionnera pas sur mobile. Les appareils mobiles ne fonctionnent pas avec une souris. Au lieu de cela, les utilisateurs interagissent avec le contenu en utilisant des gestes tactiles comme appuyer et glisser. Par conséquent, choisissez de révéler le contenu caché en cliquant plutôt qu’en survolant la souris. De plus, assurez-vous que la conception de votre site Web tient compte du fait que le bout des doigts est plus grand qu’un pointeur de souris en laissant suffisamment de place pour interagir avec les liens sur votre page confortablement et en douceur.

Avantages d’un site RWD

Pour une chose, Google recommande explicitement l’approche RWD à un site Web adapté aux mobiles. Les autres avantages de RWD sont:

  • Une URL unique facilite le partage et le lien vers votre contenu pour les utilisateurs;
  • La gestion d’un site Web unique est plus rentable que la gestion de plusieurs pages pour le même contenu;
  • Les redirections vers un site mobile affectent la vitesse de chargement des pages pour les utilisateurs d’un appareil mobile. De plus, la redirection basée sur la détection du navigateur est sujette à erreur, ce qui peut dégrader l’expérience utilisateur de votre site Web. L’adoption de RWD résout ces problèmes simplement parce qu’en utilisant le même site Web pour les vues de bureau et mobiles, vous n’aurez pas besoin de rediriger les utilisateurs vers un site Web spécifique aux mobiles;
  • Avec un paysage en évolution rapide de différents appareils, il est presque impossible de créer et de mettre à jour plusieurs versions du même site Web spécifiquement adaptées à la taille de l’écran et aux fonctionnalités de chacun.

Votre site Web est-il réactif? Essaye-le!

Utilisez le Test Google Mobile-Friendly pour tester rapidement si votre site Web est réactif. Il suffit de copier & collez l’URL de votre site Web dans la zone de texte et vérifiez le résultat.

Conclusion

Pour mieux équiper votre site Web de l’écosystème multi-appareils, la conception Web réactive est un must. Cependant, la simple installation d’un thème réactif auto-proclamé ne suffit pas pour garantir le bon fonctionnement de votre site Web et la satisfaction de vos clients. Vous devez inclure RWD dans votre stratégie commerciale en ligne avec le consommateur multi-appareils en son cœur. Cela contribuera grandement à faire de votre entreprise en ligne un favori parmi vos clients et Google.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map