En tant que concepteurs et développeurs Web, nous vivons dans l'ère mobile depuis quelques années maintenant. Dans ce tutoriel, nous allons passer en revue sept plug-ins qui aident à rendre votre site Web beau et performant pour les visiteurs mobiles..
Les visiteurs mobiles désignent généralement ceux qui visitent le site via une tablette ou un smartphone. Naturellement, nous devons créer des sites Web qui répondent et s’adaptent aux appareils mobiles, sinon nous ne pourrons pas toucher beaucoup de ceux qui visitent nos sites et / ou nos applications..
Mais comment pouvons-nous rattraper En rendant nos sites Web mobiles prêts, bien sûr. Dans ce didacticiel, nous allons passer en revue sept plug-ins pour vous aider à rendre votre site Web beau et performant pour les utilisateurs mobiles..
Il est peu probable que vous n'ayez jamais entendu parler des termes «conception Web adaptative» ou «conception Web adaptative» au cours des deux dernières années. Le but de cette approche en conception Web est d’adapter les pages Web aux contraintes des écrans d’appareils mobiles..
Les quatre plugins WordPress ci-dessous peuvent vous aider à présenter des pages prêtes pour mobile dans votre site Web..
Hammy est un plugin pratique qui redimensionne les images de votre site Web pour les appareils mobiles. Il remplace le balises avec
balises et utilise le code d'image WordPress 3.5 pour redimensionner les images.
Pour utiliser le plug-in, vous devez définir des points d'arrêt et choisir un élément HTML conteneur. Avec les points d'arrêt que vous spécifiez, le plug-in peut redimensionner les images lorsque la largeur de l'écran atteint un point d'arrêt. Vous pouvez également définir certains noms de classe pour empêcher certaines images d'être ignorées.
Responsive Widgets est un plugin qui introduit de nouveaux widgets texte / HTML WordPress qui n'apparaissent que sur des appareils particuliers tels que les iPads, Nooks, PlayStation Vitas et autres appareils génériques tels que des tablettes ou des smartphones..
Pour utiliser le plugin, vous avez juste besoin d'une compréhension de base des widgets WordPress. Ouvrez la page Widgets et vous verrez de nombreux nouveaux widgets pour les périphériques et types d'écran suivants:
Beaucoup de widgets ont des cases à cocher qui vous permettent de faire des exceptions. Par exemple, si vous souhaitez afficher un widget sur des tablettes mais pas sur des iPad, vous pouvez cocher une case et vous êtes prêt à partir..
WP Lightbox 2 est un plugin très populaire "lightbox" qui vous permet d’utiliser des images et des galeries contextuelles insérées dans la page avec des effets de superposition. Ce n'est pas un plugin pour vous aider à concevoir des sites Web réactifs, mais il est réactif et prêt à l'emploi pour que vous puissiez l'utiliser avec vos sites Web..
Pour utiliser le plugin, vous n'avez rien d'autre à faire que l'activer. Certaines options peuvent être activées, telles que l'activation de Lightbox dans la section commentaires ou la modification de la durée de l'animation, mais cela fonctionne généralement lors de l'activation sans configuration supplémentaire..
Responsable est un plugin WordPress extrêmement utile pour tester vos conceptions réactives à la volée dans votre navigateur. Il utilise le bookmarklet Viewport Resizer pour placer une barre fixe en haut de votre page dans laquelle vous pouvez redimensionner la page en fonction de dimensions spécifiques telles que les smartphones, les tablettes ou les écrans de bureau, et de dimensions personnalisées que vous pouvez définir..
Pour utiliser le plugin, activez-le et visitez l'une de vos pages. La barre apparaîtra sur chaque page afin que vous puissiez tester vos conceptions, sans tracas.
Ces plugins fonctionnent de manière plus spécialisée: ils vous aident à montrer un thème WordPress différent si l'utilisateur se connecte à votre site Web avec un appareil mobile. Ceci est particulièrement utile si vous avez un thème qui n'est pas prêt pour le mobile. Si vous n'avez ni le temps ni l'énergie de préparer votre thème pour la mobilité, vous pouvez profiter de ces plugins fantastiques pour faire le travail..
Avec plus de cinq millions de téléchargements et une cote de 3.9 sur 5 étoiles, WPTouch est probablement le plugin de thème mobile le plus populaire aujourd'hui. Il offre l'un des moyens les plus simples de créer une version mobile de votre site Web, complètement prête à l'emploi..
Pour utiliser le plugin, il vous suffit d'installer et d'activer le plugin. Bien que ses paramètres par défaut soient suffisants pour de nombreux utilisateurs, vous pouvez ajuster une tonne de paramètres dans ses pages de configuration..
Un mot d’avertissement cependant: avec un grand pouvoir vient une grande responsabilité, et avec plus de cinq millions de téléchargements viennent encore plus. En juillet 2014, il a été annoncé que les versions de WPTouch 3.x présentaient une vulnérabilité mortelle qui a été corrigée immédiatement, mais qui pourrait avoir causé d'énormes problèmes aux utilisateurs du plug-in. C'est toujours une bonne idée de rechercher des mises à jour et cela s'applique au noyau et à tous vos plugins et thèmes..
WordPress Mobile Pack est un autre acteur important qui propose des thèmes mobiles pour les sites Web WordPress. Pour l'instant, il a plus de 600 000 téléchargements et une cote de 3,8 sur 5 étoiles. WordPress Mobile Pack propose un thème mobile tout à fait unique pour vous et vos visiteurs - une interface semblable à une application mobile au lieu d'un design mobile classique.
Comme WPTouch, WordPress Mobile Pack est prêt à être utilisé lors de l’installation et de l’activation du plug-in. Si vous le souhaitez, vous pouvez effectuer quelques ajustements sur la page de configuration..
Jetpack n'est pas seulement l'un des plugins WordPress les plus populaires déjà, mais il est également pris en charge et géré par WordPress.com et Automattic. Et ce gros plugin a aussi une fonctionnalité "Mobile Theme" dont nous pouvons bénéficier.
Pour utiliser la fonctionnalité "Thème mobile", vous devez accéder à la "Jetpack" page de configuration après avoir installé et activé Jetpack. Dans la liste des modules Jetpack, recherchez "Mobile Theme" et activez-le. Ce n'est pas beaucoup, vraiment, mais il offre un design rapide et propre pour les appareils mobiles. Une note d’expérience personnelle: cela ne fonctionne pas bien avec le plugin officiel Disqus.
Sur le Web, il est toujours important de suivre les tendances et d'offrir aux utilisateurs ce qu'ils veulent, surtout si vous attendez quelque chose en retour (que ce soit de l'argent ou des éloges). De nos jours, le «prêt pour le mobile» est en train de devenir la norme et il serait insensé de rebuter vos utilisateurs avec un site Web qui ne correspond pas bien aux appareils mobiles..
Connaissez-vous d'autres bons plugins qui rendent les sites Web plus accessibles aux mobiles? S'il vous plaît partagez vos pensées et connaissances avec nous en commentant ci-dessous. Et si vous avez aimé cet article, n'oubliez pas de le partager avec vos amis!