Tout ce que vous devez savoir sur la conception réactive de WordPress

Google a annoncé qu’il enregistre maintenant plus de recherches sur les appareils mobiles que sur les ordinateurs de bureau. Peu de temps après, le géant de la recherche a publié une mise à jour de la compatibilité mobile qui pénalise efficacement les sites Web qui n’ont pas d’optimisation mobile (également connue sous le nom de mobilegedon). La conception de pages Web optimisées pour les appareils mobiles est presque devenue une exigence obligatoire. Au fil du temps, les gens ont trouvé différentes façons de rendre leurs sites mobiles compatibles. Deux approches populaires sont de créer une version de site mobile sur un sous – domaine séparé (généralement m.yoursite.com), ou de créer une version de site optimisée pour les appareils mobiles en utilisant un plug – in WordPress dédié.
Cependant, la conception réactive est rapidement devenue une solution de référence et est maintenant le moyen le plus courant de rendre les sites Web compatibles avec les téléphones cellulaires et les tablettes. Pas étonnant que c’est aussi ce que Google recommande. Mais qu’est – ce qu’un design réactif? Le mot lui – même a été créé par Ethan Marcotte en 2010. Décrit une méthode de conception Web conçue pour rendre le contenu visible sur n’importe quel appareil, avec un minimum de zoom, de redimensionnement et de défilement. Pour ce faire, on ajuste la taille et l’emplacement des éléments du site afin qu’ils puissent être modifiés en fonction de la taille de la fenêtre.
(pour ceux qui ne le savent pas, viewport décrit la zone visible du site et dépend de la taille de l’écran et de la fenêtre du navigateur.) Avantages de cette approche par rapport à d’autres approches, l’avantage de la conception réactive est que vous n’avez qu’à créer et à mettre à jour des sites individuels. Qu’il s’agisse d’un ordinateur de bureau, d’un téléphone, d’une tablette ou d’une tablette (c’est un mauvais mot si vous me demandez), n’importe qui peut accéder à votre contenu en utilisant le même domaine. – moi.
Ou s’adapter à l’environnement de visualisation et à l’écran. Comme vous le verrez dans la deuxième partie, il est en fait très simple de l’obtenir via CSS. Cependant, ces images doivent tenir compte d’autres facteurs, notamment de leur taille. Les images représentent généralement la plus grande partie du poids de la page et de nombreux appareils mobiles, en particulier les téléphones cellulaires, sont confrontés à des vitesses de téléchargement plus faibles. Par conséquent, la conception réactive doit non seulement adapter l’image à la taille de l’écran, mais aussi s’assurer que la page reste disponible sur des connexions plus lentes.
WordPress a récemment introduit quelques changements dans ce secteur. Si vous utilisez la dernière version, la plateforme traitera automatiquement la plupart des problèmes. Cependant, pour le référencement de page, il s’agit souvent d’un sujet important à garder à l’esprit et d’une étape vers l’accélération de WordPress. Les grilles de fluides et les images flexibles constituent la base de la conception réactive, mais il y en a beaucoup plus. Dans l’ensemble, l’approche de conception consiste à répondre aux besoins des utilisateurs mobiles qui interagissent avec des sites Web d’une manière différente de celle des utilisateurs d’ordinateurs de bureau.
Par exemple, presque tous ces appareils sont gérés au toucher. Cela signifie que les utilisateurs ne peuvent pas passer le curseur sur un projet et ont des besoins différents lorsqu’il s’agit de la forme, de la taille et de la fonctionnalité des boutons, des modules et, surtout, des menus. Nous verrons dans le deuxième article comment les propriétaires de sites Web répondent à cela. Passons maintenant aux techniques qui font fonctionner la conception réactive. La technologie derrière la conception adaptative est au cœur du problème. Bien que les sites WordPress soient généralement un mélange de HTML, css et occasionnellement Javascript, le pilier de la conception réactive est les requêtes multimédias CSS. Tu ne connais pas ce mot? Ne t’inquiète pas, tu vas tout apprendre maintenant. Qu’est – ce que je suis?
Les concepteurs devraient tenir compte des différentes pensions pour la conception spécifique de l’équipement. Comme nous ne pouvons jamais créer une solution personnalisée pour tout le monde, il est préférable de définir des points d’arrêt indépendants, et les requêtes multimédias vous permettent de le faire. En plus de cela, ils peuvent tester d’autres conditions que la taille de l’écran, ce qui, cependant, est suffisant à nos fins. Si vous souhaitez en savoir plus, consultez cette ressource. Tout est saisi par la conception réactive? Le design réactif est une fonctionnalité indispensable pour tous les thèmes WordPress modernes. Comme le trafic mobile est tout aussi important, les sites Web ne peuvent pas être optimisés sans les téléphones cellulaires et les tablettes. Bien qu’il existe d’autres façons de rendre les sites Web compatibles avec les appareils mobiles, la conception réactive, soutenue par des entreprises lourdes comme Google, est devenue la norme de fait pour atteindre cet objectif. Comme on l’a vu plus haut, les principes qui sous – tendent ses travaux sont très simples. Essentiellement, il s’agit d’utiliser l’échelle des éléments de page plutôt que de les dimensionner pour créer un maillage fluide et adapter l’image. Le principal avantage de cette approche est que les utilisateurs n’ont pas besoin de mettre à jour leur statut mobile individuel, mais peuvent se concentrer sur un seul site Web. En outre, la technologie qui a permis son travail est bien soutenue et facilement disponible. Cela laisse la question de savoir comment tout se passe, n’est – ce pas? Ne vous inquiétez pas, vous apprendrez tout ça dans le prochain article. Que pensez – vous de la conception réactive? Tu aimes une autre solution? Veuillez nous le faire savoir dans les commentaires ci – dessous.