Les thèmes WordPress réactifs pour les entreprises sont-ils le bon choix?

thèmes wordpress réactifs pour les entreprises

Depuis quelques années, lorsque Google a annoncé que la convivialité mobile est un facteur de classement, la conception de sites Web mobiles ou réactifs n'est plus une réflexion après coup pour les sites Web de petites et moyennes entreprises.

Les appareils mobiles représentent aujourd'hui une part importante du trafic web (53% en 2019).

Les entreprises qui offrent une mauvaise expérience aux utilisateurs mobiles risquent de perdre des clients et des revenus. Il existe plusieurs façons d'offrir une bonne expérience mobile, mais responsive design est le meilleur choix pour les PME utilisant WordPress.

Ce type de conception est less cher, offre une expérience unifiée et une image de marque cohérente sur tous les appareils, et c'est mieux pour le référencement - la conception mobile d'abord est la stratégie d'optimisation mobile préférée de Google. (Même leurs robots d'exploration consultent un site à partir d'un appareil mobile).

1. Qu'est-ce que le Responsive Design et comment affecte-t-il les thèmes WordPress pour les entreprises?

Si vous n'êtes pas déjà familier avec le concept, voici une explication en quelques mots: c'est une conception qui utilise des requêtes multimédias CSS et une conception de grille proportionnelle pour modifier la façon dont les pages apparaissent en fonction de la taille de l'appareil.

Par exemple, les éléments qui s'étendent horizontalement sur une page sur un navigateur de bureau seront empilés verticalement sur un navigateur de smartphone. Les images et le type sont redimensionnés pour refléter la taille de l'écran de l'appareil.

Les requêtes multimédias CSS sont au cœur du responsive design.

Les feuilles de style CSS sont utilisées pour contrôler l'apparence d'une page Web: les couleurs qu'elle utilise, la mise en page de la page, sa typographie, etc. Les requêtes multimédias permettent à un concepteur d'appliquer de manière sélective des règles CSS uniquement lorsqu'une certaine condition est remplie. (c'est-à-dire si la taille d'un écran ressemble à un écran mobile, appliquez des designs appropriés pour les téléphones mobiles, mais si c'est plus grand, appliquez des designs pour des écrans plus grands ...).

J'espère que vous pouvez voir à quel point cela est utile pour créer des conceptions variées pour différentes dispositions d'écran. Les requêtes multimédias permettent à un développeur de dire, par exemple, si la fenêtre du navigateur Web a une largeur particulière, un ensemble spécifique de règles doit être appliqué.

Une requête multimédia typique ressemble à ceci:

.mon conteneur {
largeur: 800px;
}
@media (largeur maximale: 600px) {
.mon_conteneur {
largeur: 500px;
}
}

Dans l'exemple ci-dessus, la largeur par défaut de la classe .my_container est définie sur 800px.

De toute évidence, nous ne voulons pas qu'il soit aussi large sur un appareil plus étroit, nous utilisons donc une requête multimédia.

La requête média spécifie ici une condition — si la largeur horizontale du navigateur est de 600px ou less, la largeur de .my_container doit être de 500px. S'il est déclenché par la condition vraie, les règles de la requête média sont prioritaires sur la règle "par défaut".

La conception réactive pour les thèmes d'entreprise exploite ces fonctionnalités de CSS pour modifier la présentation des pages Web en fonction de la taille de l'écran de l'appareil, de la taille de la fenêtre du navigateur, de l'orientation de l'appareil et de nombreux autres facteurs.

2. Cadres de conception adaptative

Unless vous êtes déjà familier avec CSS - et même si vous l'êtes - vous n'apprécierez peut-être pas l'idée d'écrire des requêtes multimédias pour chaque aspect de votre thème WordPress d'entreprise réactif, c'est là que les cadres de conception entrent en jeu.

Un cadre de conception réactif prend en charge une grande partie de la complexité de la création d'un site qui s'adresse aux écrans de différentes tailles.

Le cadre de conception le plus populaire est Bootstrap - les versions à partir de la v3.0 étant entièrement mobiles. Bootstrap comprend un grand nombre de fonctionnalités qui ne nous concernent pas ici, mais la clé de la mise en œuvre de la réactivité de Bootstrap est sa grille.

Lectures recommandées: Comment convertir un PSD en thème WordPress à l'aide de Bootstrap en 5 étapes: un didacticiel et Elementor vs Divi - ce qui vaut le plus?

Au lieu de vous demander d'écrire vos propres requêtes multimédias, Bootstrap implémente un système qui divise une page HTML en une grille de lignes et de colonnes. Plutôt que d'écrire des requêtes multimédias, les utilisateurs attachent des classes au HTML de leur thème WordPress pour diviser la page en fonction de la grille.

Pour prendre un exemple trivial, pensez à une page Web à deux colonnes.

Sur les grands écrans, nous voulons que les colonnes s'affichent les unes à côté des autres. Sur les petits écrans, nous voulons qu'ils s'empilent les uns sur les autres.

conception d'entreprise réactive à deux colonnes

 

Notre HTML ressemblerait à ceci:

  C'est la première colonne


Ceci est la deuxième colonne

Avec le CSS Bootstrap Grid inclus sur la page, ce HTML créerait la mise en page que nous recherchons.

Lorsque la page est chargée dans une fenêtre plus petite que celle spécifiée pour les requêtes multimédias intégrées de Bootstrap pour les colonnes moyennes, elles s'empilent les unes sur les autres plutôt que de s'étendre sur la page.

Vous pouvez voir des exemples plus complexes de la façon dont cela fonctionne dans le Documentation Bootstrap.

Bootstrap n'est pas le seul framework qui fournit une grille de ce type; en fait, il y en a des dizaines, allant de cadres de conception Web complets tels que Bootstrap et Fonds de teint, aux frameworks de grille légers comme Simple Grid qui ne contiennent rien d'autre que la grille.

Une approche alternative est devenue de plus en plus populaire au cours des dernières années, une approche qui contient toutes les modifications de balisage apportées au CSS (ou SASS), plutôt que de salir les pages HTML avec un balisage non sémantique.

SASS des systèmes de grille de conception réactifs comme Susy et Bourbon pur tirer parti de la puissance de SASS pour créer des frameworks qui conservent le code de mise en page là où il est censé être - dans les fichiers CSS, permettant un HTML plus propre.

Le choix des développeurs est une question de goût et d'expérience, mais nous préférons personnellement SASS- des systèmes de grille basés sur qui me permettent d'écrire des pages Web sémantiques qui ne sont pas pleines de noms de classes non sémantiques et d'imbrication excessive de div.

3. Cadres de thèmes de conception adaptative

Les cadres tels que Bootstrap et Foundation sont parfaits pour les concepteurs Web, mais ils ne font pas grand-chose pour aider les développeurs WordPress à chercher une longueur d'avance lors de la création de nouveaux modèles.

Heureusement, il existe de nombreux cadres de thèmes WordPress réactifs qui fournissent une base pré-construite.

1. Genèse

genesis framework pour les thèmes wordpress d'entreprise

Genesis est un framework de thème extrêmement populaire de StudioPress (que nous avons entièrement revu ici). Bien qu'il s'adresse davantage aux développeurs WordPress expérimentés qu'aux débutants, il n'est pas trop difficile à maîtriser si vous avez quelques connaissances en PHP et CSS.

Genesis est une conception parent à partir de laquelle il est possible de créer n'importe quel nombre de thèmes enfants. Si vous préférez acheter un thème enfant standard et le personnaliser, StudioPress propose de nombreux thèmes enfants différents adaptés à tous les types de sites.

Outre ce thème, nous proposons souvent des thèmes WordPress très bien notés afin que vous puissiez prendre une bonne décision d'acheter ou non.

2. Themify Builder

thème d'entreprise simple par themify

Si vous n'êtes pas un expert en PHP et CSS, vous voudrez peut-être envisager un plugin de création de modèles comme Themify.

Plutôt que de vous faire retrousser vos manches et plonger dans le code, Themify Builder propose une interface intuitive de glisser-déposer pour créer des thèmes WordPress entièrement réactifs. Avec Themify, vous pouvez choisir parmi une gamme de thèmes prédéfinis ou concevoir le vôtre à partir de zéro.

Themify fait abstraction de tous les détails de mise en œuvre qui sous-tendent la conception Web pour différentes tailles d'écran, ce qui facilite la mise en service rapide de votre site Web.

3. Composants

générateur de thème de composants

Components était une excellente solution pour créer des thèmes WordPress réactifs personnalisables d'Automattic, la société derrière WordPress.com.

Pour utiliser les composants, vous choisissez simplement une mise en page dans la liste - blog classique, site d'entreprise, portefeuille, entre autres - et le site des composants crache un SASSmodèle basé sur des mises en page mobiles et des menus de bureau et mobiles.

Malheureusement, les composants ont été abandonnés.

4. Divi

Divi, que nous mentionnerons également ci-dessous comme l'un des meilleurs thèmes WordPress à utiliser pour les entreprises, a commencé comme un thème.

Finalement, il a évolué pour devenir un thème, un constructeur de page par glisser-déposer et maintenant, avec ses dernières versions, également un constructeur de thème complet. À ce stade, Divi est un cadre de thème WordPress complet qui peut être utilisé pour créer tout type de thème dont vous avez besoin, avec son large éventail d'outils.

4. Thèmes WordPress réactifs pour les entreprises

Si vous préférez simplement acheter quelque chose de prêt pour votre entreprise, vous avez le choix parmi des milliers, certains meilleurs que d'autres. La réactivité est considérée comme une fonctionnalité "incontournable" sur le marché des thèmes WordPress, et presque tous les développeurs affirmeront que leur produit est réactif. Cependant, cette fonctionnalité peut être délicate et même les développeurs expérimentés peuvent avoir des problèmes avec sa bonne implémentation.

Avant d'aller plus loin, vous voudrez peut-être consulter notre tour d'horizon complet de Thèmes WordPress pour les sites professionnels et d'entreprise.

Cela dit, si vous choisissez l'un de ces modèles populaires, qui peuvent tous être personnalisés pour répondre aux besoins de votre entreprise, vous ne vous tromperez pas beaucoup.

Divi

divi elegant themes

Divi est un thème WordPress réactif extrêmement populaire pour les entreprises (ou n'importe quoi d'autre vraiment), un constructeur de pages (Divi Builder), et aussi un générateur de thème.

Le produit provient de Elegant Themes – une entreprise établie qui a créé plusieurs de mes produits WordPress préférés. Divi est un thème « piles incluses » – il est livré avec toutes les fonctionnalités que vous pourriez souhaiter.

Parmi les faits saillants se trouvent les Divi builder, qui permet aux utilisateurs de créer des mises en page sans codage, de choisir parmi dix-huit mises en page prédéfinies et de les mettre en œuvre intelligemment à la température Cela signifie que votre site aura fière allure, qu'il soit visualisé sur un ordinateur de bureau avec un énorme moniteur ou un smartphone à petit écran.

Essayez Divi maintenant et obtenez 10% de réduction jusqu'au Octobre 2021

Recommander la lecture: si vous êtes enclin à utiliser Divi consulter CollectiveRay's Revue complète de Divi.

Avada

Thème d'entreprise WordPress Avada

Avada est un autre article très populaire.

Avada est un outil riche en fonctionnalités comme Divi, et est parfaitement adapté à la construction de sites professionnels pouvant s'adapter à différentes tailles d'écran. Comme Divi, Avada permet aux utilisateurs sans effort de codage de créer des sites uniques.

Le constructeur de pages visuelles Avada (Fusion) est un plaisir à utiliser, et le produit contient un certain nombre de touches réfléchies qui en font un excellent choix pour le less propriétaire de site WordPress techniquement incliné.

lecture recommandée: Encore une fois, pour les thèmes majeurs, nous avons créé un excellente revue du thème WordPress Avada afin que vous puissiez pleinement comprendre comment cela peut vous aider.

Découvrez Avada maintenant

X

thème réactif x wp business

X est encore un autre thème WordPress réactif pour les entreprises qui vise à faciliter la mise en service avec un design magnifique et unique qui a fière allure sur n'importe quel appareil.

L'une des caractéristiques les plus remarquables de X est son système d'extension.

Plutôt que d'implémenter des fonctionnalités au cœur du modèle, X fournit de nombreuses extensions de fonctionnalités, notamment une grille, une intégration TypeKit, un curseur et des plugins de galerie. Le fractionnement des fonctionnalités en extensions permet aux utilisateurs de choisir les fonctionnalités dont ils ont besoin et d'éviter de charger leur site avec du code superflu qui pourrait entraîner des problèmes de performances et de sécurité.

Découvrez la démo X maintenant

Autres modèles pour les entreprises sur Themeforest

Si les thèmes que nous avons examinés ici ne vous excitent pas, ne vous inquiétez pas, il y en a des centaines Thèmes réactifs WordPress (pour toutes sortes d'entreprises, organisations et dans toutes sortes de niches spécifiques) à choisir sur Themeforest.

Lorsque vous choisissez un produit parmi la sélection disponible sur Themeforest, assurez-vous de porter une attention particulière aux évaluations des utilisateurs - elles vous aideront à trier le bon grain de l'ivraie. Vous devez également prendre note de la dernière mise à jour de l'élément.

S'il n'a pas été mis à jour depuis plusieurs mois, vous devriez envisager de chercher ailleurs; Les thèmes obsolètes peuvent entraîner des problèmes de compatibilité et de sécurité.

5. Pourquoi la réactivité est-elle le meilleur choix pour votre site professionnel?

La réactivité n'est pas le seul moyen de gérer le trafic Web mobile.

Les alternatives incluent des sites mobiles dédiés et des applications natives et des PWA (un hybride entre les sites mobiles et les applications). Le problème avec chaque approche est qu'elles nécessitent plus de travail qu'un site réactif.

Si votre entreprise choisit une application mobile ou une PWA, elle doit investir dans sa conception, son développement, sa maintenance et sa promotion. L'argent et le temps sont répartis entre un site Web et une application - ou plusieurs applications pour s'adapter aux plates-formes mobiles populaires.

Cependant, cette conception permet aux PME de conserver une base de code et de consacrer des ressources à la création du meilleur site Web possible. Dans certaines circonstances, les applications natives sont le meilleur choix, mais pour la plupart des PME, la réactivité est une meilleure utilisation des ressources.

Imaginez qu'un client potentiel recherche un service offert par votre entreprise tout en utilisant son iPhone. Elle trouve ce qu'elle veut et l'ajoute à ses favoris pour plus tard.

Ce soir-là, elle ouvre le signet sur son ordinateur de bureau, et le site a l'air terrible car elle a mis en signet la version mobile. Ce scénario n'est pas aussi mauvais que si le site n'avait pas du tout de version mobile, et elle a été obligée de gérer la version de bureau non modifiée sur son téléphone - personne n'aime pincer et faire un panoramique pour trouver ce qu'il veut - mais ce design le ferait. permettre au même site Web et aux mêmes liens de fonctionner comme prévu sur les deux appareils.

Avoir un site qui répond à l'appareil de l'utilisateur permet également aux entreprises de fournir une image de marque cohérente à travers tous les points de contact.

Le site aura le même aspect, bien qu'adapté, et il offrira la même navigation, le même aspect et la même sensation, et la même expérience. Les petites entreprises aux budgets limités n'ont souvent pas les ressources nécessaires pour maintenir une qualité constante sur plusieurs versions de site et applications.

La réactivité signifie qu'ils n'ont pas à le faire.

Tout comme les utilisateurs ne devraient pas se voir offrir une expérience fragmentée, il est préférable pour le trafic de recherche s'il existe un emplacement en ligne canonique pour une entreprise. Selon Google, les avantages de la conception réactive comprennent:

  • Conserver votre contenu de bureau et mobile sur une seule URL, ce qui est plus facile pour vos utilisateurs d'interagir avec, de partager et de créer des liens vers et pour les algorithmes de Google d'attribuer les propriétés d'indexation à votre contenu.

  • Google peut découvrir votre contenu plus efficacement car nous n'avons pas besoin d'explorer une page avec les différents agents utilisateurs Googlebot pour récupérer et indexer tout le contenu.

Google est en mesure de dire si les utilisateurs ont une bonne expérience sur votre site. Si vous ne proposez pas de site adapté aux mobiles, les taux de rebond pour les utilisateurs mobiles monteront en flèche. La plupart d'entre eux rebondiront vers le moteur de recherche. Google sait quand un utilisateur revient immédiatement aux SERP après avoir cliqué sur un résultat et utilise les taux de rebond comme signal de classement.

Enfin, pour les utilisateurs de WordPress, la réactivité est la méthode la plus simple et la moins coûteuse pour offrir une bonne expérience aux utilisateurs mobiles. Bon nombre des meilleurs thèmes premium sont conçus pour être réactifs et le coût d'adaptation d'un thème existant pour la réactivité peut être considérablement less que le coût de développement d'une application native.

Compte tenu de ces avantages, pour les propriétaires de petites et moyennes entreprises qui utilisent des thèmes WordPress, la conception réactive est de loin la meilleure voie à suivre dans un monde où l'utilisation du Web mobile ne fera que croître.


A propos de l'auteur
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...