RWD pas que du design - WordPress peut vous aider

En tant que développeurs Web, presque tous les clients avec lesquels nous travaillons s'attendent à ce que leur site dispose d'une version mobile de son site Web. Et avec le nombre croissant de variations de tailles et de résolutions d'écran, il sera impossible ou du moins peu pratique de créer un site Web pour chaque appareil et résolution d'écran existant..

Dans cet article, nous commencerons par définir les concepts de Webdesign responsive, pourquoi ils sont importants, et quelques brèves considérations à prendre en compte lors du brainstorming d’un site web WordPress réactif..

Qu'est-ce qu'un web design réactif??

Wikipedia définit RWD comme:

Approche de conception Web visant à concevoir des sites pour offrir une expérience de visionnement optimale - lecture et navigation faciles avec un minimum de redimensionnement, de panoramique et de défilement sur une large gamme de périphériques (des téléphones mobiles aux écrans d'ordinateur de bureau).

Une conception Web réactive implique l’application de requêtes de médias CSS avec un mélange de grilles et de dispositions souples. Je suis sûr que vous avez entendu parler de frameworks CSS tels que Bootstrap, Foundation, etc. Ils utilisent tous des requêtes multimédia combinant différentes dispositions pour rendre une page en fonction de la taille de l'écran, de la plate-forme et de l'orientation..

Par exemple, lorsque vous utilisez Bootstrap, vous pouvez simplement activer la réactivité de votre projet en insérant la ligne de code suivante dans le dossier. étiquette

 

Dans Bootstrap, les requêtes multimédia permettent de personnaliser le CSS en fonction d’un certain nombre de rapports de conditions, de largeurs et de types d’affichage, mais se concentrent généralement sur largeur min et largeur maximale à

  • redimensionner les en-têtes et le texte pour qu'ils soient plus appropriés pour les appareils
  • empiler des éléments au lieu de flotter si nécessaire
  • modifier la largeur de la grille

Surveillez toute une série de travaux pratiques consacrés à l'enseignement sur la création d'une conception Web réactive utilisant ce cadre particulier.

Pourquoi RWD est-il important??

Jusqu'ici, dans notre discussion, nous avons identifié que l'un des aspects importants d'un site Web réactif est la capacité du site à s'adapter à toutes les tailles d'écran ou à toutes les orientations lorsqu'un utilisateur consulte le site Web. En dehors de cela, il existe d'autres raisons importantes pour lesquelles vous devriez passer à un site Web réactif.

Augmentation de l'utilisation mobile

Aujourd'hui, un nombre important de personnes ont accès aux téléphones mobiles. Cela se traduit par un nombre de personnes accédant à Internet via des téléphones. Les statistiques montrent qu’aujourd’hui, près de 20% des recherches sur Google proviennent de téléphones mobiles. Cela devrait vous montrer à quel point il est important pour les utilisateurs d’être en mesure d’accéder à votre site Web et d’interagir facilement avec celui-ci.. 

Étant donné que l'utilisation de l'Internet mobile dépasse les statistiques d'utilisation des ordinateurs de bureau, nous devons nous assurer que les utilisateurs sont en mesure de s'identifier avec nos sites Web, quels que soient les appareils qu'ils utilisent, sans avoir le sentiment d'accéder à une version différente ou limitée du site principal..

Augmenter considérablement le taux de conversion 

Le taux de conversion est un terme principalement utilisé dans les sites de commerce électronique. Il désigne le lieu où un visiteur régulier devient un client payant. Dans le cas typique d'une solution de commerce électronique, pensez au nombre de personnes qui font leurs achats sur leur téléphone portable..

Si un internaute habituel est obligé d'utiliser une version de bureau de votre site pour effectuer un paiement simple, il y a de fortes chances qu'il choisisse définitivement d'utiliser d'autres moyens pour acheter le même produit. Avec un site responsive bien conçu, les utilisateurs ne devraient pas remarquer la différence lorsqu'ils effectuent des transactions sur votre site, mis à part le fait qu'ils utilisent un écran plus petit..

Classement amélioré dans les moteurs de recherche

Un moteur de recherche tel que Google préconise ouvertement la conception Web réactive pour un certain nombre de raisons:

  1. Il est beaucoup plus facile d'explorer un site Web réactif, de l'indexer et d'organiser le contenu du site de manière plus simple. Ceci est rendu possible par le fait qu'un site Web réactif utilise une seule URL sur toutes les plateformes, contrairement à un scénario dans lequel il existe différentes versions du même site sur différentes URL..
  2. L'expérience utilisateur peut facilement être évaluée en examinant le taux de rebond d'un site. Un site qui a un faible taux de rebond signifie que les utilisateurs restent sur celui-ci pendant un certain temps, d'où un meilleur classement dans les recherches..

Rentable

L'exécution de plusieurs sites pour le même contenu peut être coûteuse, vous avez besoin du double des ressources pour pouvoir gérer les deux sites. Il est beaucoup plus facile d'avoir un site Web réactif, car vous pourrez consacrer toutes vos ressources et tout votre temps à donner aux utilisateurs ce qu'ils attendent vraiment..

Considérations pour un site WordPress réactif

Avant de concevoir une conception Web réactive dans WordPress, vous devez tenir compte de nombreuses considérations. Le fait est que WordPress est maintenant utilisé pour créer des blogs, des sites et même des applications nécessitant toutes une implémentation réactive..

Dans le prochain article, nous examinerons une stratégie d'implémentation pour savoir comment y parvenir dans le développement WordPress. Plus précisément, nous couvrirons

  1. Performance
  2. Le contexte
  3. Améliorations progressives

L'analyse de ces trois facteurs critiques nécessite une analyse approfondie afin de démontrer pourquoi une conception réactive ne concerne pas uniquement la conception et la place exacte de WordPress dans l'équation..

Résumé

Dans cet article, nous avons brièvement introduit le concept de conception de site Web adaptatif, défini ce que c'est, pourquoi il est important et pourquoi nous devrions en tenir compte dans nos projets futurs..

N'hésitez pas à laisser des questions ou des commentaires ci-dessous!