RWD : WordPress peut faire plus que simplement concevoir

En tant que développeurs Web, presque tous les clients avec lesquels nous travaillons souhaitent que leur site Web ait une version mobile de leur site Web. Comme les tailles et les résolutions d’écran varient de plus en plus, il sera impossible, ou du moins peu pratique, de concevoir un site Web pour chaque appareil et chaque résolution d’écran.

Dans cet article, nous commencerons par un niveau de base en définissant d'abord ce qu'est la conception Web réactive, pourquoi elle est importante et quelques brèves considérations qui doivent être prises en compte lors de la réflexion sur un site Web WordPress réactif.

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

Wikipédia définit RWD comme :

L'approche de conception Web vise à créer des sites Web qui offrent la meilleure expérience de visualisation sur une variété d'appareils, des téléphones mobiles aux écrans d'ordinateur de bureau, et qui sont faciles à lire et à naviguer avec un minimum de redimensionnement, de panoramique et de défilement.

La conception Web réactive implique l'application de requêtes multimédias CSS et une combinaison de grilles et de mises en page flexibles. Je suis sûr que vous avez entendu parler des frameworks CSS comme Bootstrap, Foundation, etc. Ils utilisent tous des requêtes multimédias pour des mises en page mixtes afin d'afficher les pages en fonction de la taille de l'écran, de la plate-forme et de l'orientation.

Par exemple, lorsque vous utilisez Bootstrap, vous pouvez rendre votre projet responsive en insérant simplement les lignes de code suivantes sur la balise

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Dans Bootstrap, les media queries permettent de personnaliser le CSS en fonction de divers critères (rapport, largeur, type d'affichage), mais se concentrent généralement sur min-width 和 max-width à

• Redimensionnez le titre et le texte pour mieux les adapter à l'appareil
• Empilez les éléments au lieu de flotter si nécessaire
• Modifier la largeur de la grille

Méfiez-vous de toute une série pratique dédiée à l'enseignement de la création de conceptions Web réactives à l'aide de ce framework spécifique

Pourquoi le RWD est-il important ?

Jusqu'à présent dans notre discussion, nous avons établi qu'une caractéristique importante d'un site Web réactif est la capacité du site Web à s'adapter à n'importe quelle taille ou orientation d'écran lorsqu'un utilisateur le consulte. En dehors de cela, il existe d’autres bonnes raisons pour lesquelles vous devriez passer à un site Web réactif

L'utilisation des appareils mobiles augmente

De nos jours, de nombreuses personnes ont accès aux téléphones portables. Cela signifie que beaucoup d’entre eux accèdent à Internet via leur téléphone. Les statistiques montrent que près de 20 % des recherches Google proviennent aujourd'hui de téléphones mobiles, ce qui devrait vous dire à quel point il est important que les utilisateurs puissent accéder et interagir facilement avec votre site Web.

L'utilisation de l'Internet mobile dépassant les statistiques d'utilisation des ordinateurs de bureau, nous devons nous assurer que les utilisateurs peuvent identifier notre site Web quel que soit l'appareil qu'ils utilisent sans avoir l'impression d'accéder à une version différente ou restreinte du site Web principal.

Augmenter considérablement le taux de conversion

Le taux de conversion est l'un des termes les plus couramment utilisés sur les sites Web de commerce électronique et fait référence à la façon dont vous convertissez les visiteurs Web réguliers en clients payants. Dans le cas classique des solutions de commerce électronique, pensez au nombre de personnes qui effectuent leurs achats sur leur téléphone mobile.

Si l'internaute moyen est obligé d'utiliser la version de bureau de votre site Web pour un simple paiement, il choisira très probablement d'acheter le même produit en utilisant d'autres méthodes. Avec un site Web réactif bien conçu, les utilisateurs ne devraient remarquer aucune différence autre que l’utilisation d’un écran plus petit lorsqu’ils effectuent des transactions sur votre site Web.

Améliorer le classement des moteurs de recherche

Les moteurs de recherche comme Google promeuvent ouvertement la conception Web réactive pour de nombreuses raisons :

1. Il est beaucoup plus facile d'explorer des sites Web réactifs, de les indexer et d'organiser le contenu d'un site Web de manière plus simple. En effet, les sites Web réactifs n'utilisent qu'une seule URL sur toutes les plates-formes, plutôt que d'avoir différentes versions du même site Web sur différentes URL.
2. L'expérience utilisateur peut être facilement évaluée en examinant le taux de rebond de votre site Web. Un site Web avec un faible taux de rebond signifie que les utilisateurs resteront sur le site pendant un certain temps, ce qui entraînera un meilleur classement dans les recherches.

Rentable

Gérer plusieurs sites Web pour le même contenu peut être coûteux, vous obligeant à doubler les ressources pour maintenir les deux sites. Avoir un site Web réactif est beaucoup plus simple car vous pourrez investir toutes vos ressources et votre temps pour répondre aux véritables attentes de vos utilisateurs.

Remarques sur les sites Web WordPress réactifs

De nombreux facteurs doivent être pris en compte avant de proposer une conception Web réactive dans WordPress. En fait, WordPress est désormais utilisé pour créer des blogs, des sites Web et même des applications, qui peuvent tous nécessiter une implémentation réactive.

Dans le prochain article, nous examinerons les stratégies de mise en œuvre pour y parvenir dans le développement WordPress. Plus précisément, nous présenterons

1. Performances
2. Contexte
3. Améliorez progressivement

Comprendre ces trois facteurs clés nécessite une analyse approfondie pour montrer pourquoi le responsive design est plus qu'un simple design, et quel rôle exact WordPress y joue.

Résumé

Dans cet article, nous présentons brièvement le concept de conception Web réactive, définissant ce que c'est, pourquoi c'est important et pourquoi nous devrions l'envisager dans les projets futurs.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!