Publié par le 21 juillet 2014 • 59 Commentaires

Saviez-vous que plus de 20 millions de français possèdent une tablette tactile ?

Sur 65 millions d’habitants, cela fait presque un tiers de la population. Ce n’est tout de même pas rien !

Et n’oublions pas que 39% des français possèdent un smartphone. Le pourcentage monte même à 75% pour les 18-24 ans.

Autant vous dire que si vous voulez toucher ces personnes, votre site doit absolument être équipé d’un thème WordPress responsive.

Là vous êtes probablement en train de vous dire : « Oh, pas si vite ! Arrête de jargonner Alex. C’est quoi le responsive ?« .

Justement, parlons-en.

Qu’est-ce qu’un thème WordPress responsive ?

Devant la prolifération des tablettes, smartphones, netbooks, etc. les webdesigners font face à un véritable casse-tête :

Comment bien afficher mon site sur tous ces supports ?

Effectivement, de plus en plus d’appareils sont proposés à la vente et chacun possède une taille d’écran et une résolution qui leur est propre.

À titre d’exemple, le site Digital Disciple a fait une comparaison des différentes tailles d’écrans pour quelques smartphones et tablettes :

Comparaison de différentes tailles d'écrans

Bien sûr, le nombre de tailles est doublé lorsque l’on passe ces appareils en mode paysage… Sans oublier les ordinateurs portables et de bureaux qui possèdent aussi différentes tailles d’écrans et résolutions.

Votre site web doit s’afficher correctement sur la plupart de ces écrans sinon vous perdrez des lecteurs, des clients et des opportunités.

C’est ici que le responsive entre en action.

En effet, un thème WordPress responsive et plus globalement, un site responsive (25% des sites dans le monde utilisent WordPress) est armé pour affronter tous ces appareils.

Concrètement, les contenus d’un site responsive sauront se réorganiser en fonction de l’espace disponible.

Voyez plutôt :

Exemple de site responsive

Comme vous pouvez le voir, les différentes parties du site changent d’emplacement et d’apparence suivant la taille de la fenêtre du navigateur.

Vous pouvez aussi tester sur cet article en redimensionnant la fenêtre de votre navigateur 🙂

Pour que votre site WordPress soit responsive, vous allez devoir utiliser un thème (je vous le donne en mille…) responsive.

Ce thème devra donc être capable de réorganiser ses contenus afin qu’ils s’affichent le mieux possible sur tous les types d’appareils.

En tout cas, je tiens à vous rassurer. Le responsive n’est plus une fonctionnalité optionnelle au sein des thèmes WordPress. C’est devenu une norme.

Tout bon thème WordPress qui se respecte se doit d’être responsive.

Là où le bât blesse, c’est que certains thèmes WordPress sont plus responsives que d’autres… Cela signifie que des thèmes peuvent être optimisés pour beaucoup d’appareils alors que d’autres assurent un service minimum.

Il faut donc bien mener l’enquête avant de se décider d’en acheter un.

Maintenant que vous savez ce qu’est un thème responsive, la question qui parait légitime de se poser est :

Pourquoi utiliser un thème WordPress responsive ?

Nous en avons vaguement parlé en introduction, un thème responsive sert à adapter son contenu à un maximum d’appareils. Mais ce n’est pas la seule raison.

En voici 3 autres. La première raison est que…

Vous n’aurez qu’un seul site à gérer

Pour faire les yeux doux aux visiteurs provenant de tous types d’appareils sans thème responsive, vous n’avez pas beaucoup de choix.

Le premier est de créer un site dédié à tous les appareils mobiles. C’est notamment le cas du journal Le Monde :

Le Monde sur iPhone

L’inconvénient de cette solution est que vous allez devoir gérer un nouveau site. Cela va donc vous demander pas mal de travail afin de bien garder les sites synchronisés, faire des redirections pour basculer du site mobile au site classique, etc.

Une autre solution est d’utiliser un plugin WordPress afin d’avoir une version mobile de votre site.

Pour cela, il existe des plugins gratuits comme WP Touch qui font un excellent travail. Toutefois, l’inconvénient majeur de ce genre de solution est que le style de votre site mobile sera différent de votre site principal.

Même si les auteurs du plugin ont fait beaucoup d’efforts concernant la personnalisation, une version mobile réalisée avec un tel plugin ne pourra pas rivaliser avec un thème responsive (même s’il dispose du minimum syndical).

Google recommande le responsive

Depuis le La compatibilité mobile est désormais un facteur utilisé par Google pour classer ses résultats de recherche (sur mobile).

Si vous ne voulez pas perdre le trafic que Google vous envoie en provenance des appareils mobiles, il faut vous équiper au plus vite). Vous pouvez tester si votre site est bien responsive ici.

Vous ne le savez peut-être pas mais Google représente plus de 93% des parts de marché des moteurs de recherche en France.

Il ne faut donc pas blaguer et suivre les recommandations de Google si vous voulez vous placer dans les premiers résultats de recherche pour les mots-clés que vous visez.

Google aime le responsive

Dans ce cas précis, Google conseille d’opter pour un site responsive plutôt que pour une version mobile.

En faisant ce choix, vous conserverez des urls uniques pour votre site et vos contenus.

Cela signifie que vous n’aurez pas mobile.votresite.com/mon-super-article et votresite.com/mon-super-article qui essayeront individuellement de se hisser dans les résultats de recherche.

Il sera donc plus simple de référencer un site responsive.

On retrouve cela au niveau du partage sur les réseaux sociaux. Vos compteurs monteront plus rapidement si vous n’avez qu’un seul type d’url à partager.

Sachant que Google prend en compte le nombre de partage sur les réseaux sociaux dans son algorithme, il n’est pas négligeable de n’avoir qu’une seule adresse quelque soit le support.

Conserver une expérience utilisateur homogène

Dernier point et non des moindres, l’expérience utilisateur.

Comme nous l’expliquait déjà Camille Jourdain en 2009 (déjà !) l’expérience utilisateur correspond à « l’émotion ressentie par un utilisateur lorsqu’il utilise un service (Web ou humain) dans l’atteinte d’un objectif ».

Cela repose sur 4 principes :

  1. L’utilité
  2. Le confort d’utilisation
  3. La confiance
  4. La qualité de service

Je vous recommande chaudement de lire l’article de Camille en entier pour bien cerner ce qu’est l’expérience utilisateur.

Pour revenir au choix d’un thème WordPress responsive, on peut dire que son utilisation permet de conserver une image homogène de votre site et plus largement de votre marque.

Les visiteurs vous accorderont une plus grande confiance et seront plus à même de revenir voire d’aller plus loin avec vous (en tout bien tout honneur, cela va de soi :)).

Cela peut aller de laisser un simple commentaire, en allant jusqu’à acheter un de vos produits ou services en passant par une inscription à votre newsletter.

Alors, êtes-vous convaincu ?

Pour vous donner une idée de ce que cela peut donner « grandeur nature », voici…

10 Thèmes WordPress responsive

Comme vous pourrez le constater, les thèmes listés ci-dessous sont tous responsives. Ils présentent donc les avantages cités auparavant.

Cette sélection est assez variée, vous y trouverez des thèmes optimisés pour le ecommerce, pour des magazine en ligne ou encore des portfolios.

En tout cas, vous pourrez créer des sites vitrines ou des blogs avec chacun d’entre eux. Regardez ce qu’ils permettent de faire et listez bien les fonctionnalités dont vous avez besoin afin de faire le bon choix.

Il va de soi que ces thèmes ne sont pas les seuls à être responsives. Je les ai sélectionné car ils permettent de se faire une idée des agencements possibles pour différents types de projets.

Note : Sachez que certain des liens présentant ces thèmes sont des liens affiliés, cela signifie que je gagnerai une petite commission si vous décidez d’utiliser un de ces thèmes. Cela permet de récompenser le travail de recherche et de rédaction mis en oeuvre pour cet article.

Flatsome

Flatsome est un thème WordPress conçu à la base pour les ecommerçants. Cela dit, l’auteur du thème a inclus plusieurs agencements pour le blog et le portfolio. Au niveau des shortcodes, la palette est assez large, il y a de quoi faire pas mal de choses.

Découvrez le thème WordPress Responsive Flatsome

Aperçu Téléchargement

Port

Port est un thème polyvalent créé par la boutique ThemeTrust. Son design minimaliste vous permettra de l’adapter à un bon nombre de projet comme par exemple des sites vitrines (la page d’accueil sera idéale pour présenter votre activité).

Découvrez le thème WordPress Responsive Port

Aperçu Téléchargement

Total

Total est un thème WordPress créé par AJ Clarke, l’auteur du blog WP Explorer. Il embarque vraiment beaucoup de fonctionnalités qu’on s’y perdrait presque. Petite confidence, vous entendrez parler de Total dans un futur article 😉

Découvrez le thème WordPress Responsive Total

Aperçu Téléchargement

Photogenic

Photogenic est un thème WordPress responsive destiné aux photographes. La page d’accueil permet d’embarquer une belle photo sur laquelle vous décrirez ce que vous faites ainsi que des albums présentant vos meilleurs clichés.

Découvrez le thème WordPress Responsive Photogenic

Aperçu Téléchargement

Watson

Watson est un thème WordPress magazine / blog au design minimaliste. Il provient de la boutique The Theme Foundry. Pour l’avoir utilisé pour une cliente, je le recommande vivement. Comme le disait Léonard de Vinci : « La simplicité est la sophistication ultime ».

Découvrez le thème WordPress Responsive Watson

Aperçu Téléchargement

 

Besoin d'un hébergeur pour votre site ?

Faites comme la Marmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Et si vous n\êtes pas satisfait au bout de 30 jours, ils vous remboursent !

ESSAYEZ O2SWITCH

Divi

Divi est le thème star d’Elegant Themes. Il peut littéralement se métamorphoser pour correspondre à plusieurs dizaines de projets. Je ne l’ai pas encore testé mais cela ne saurait tarder. En tout cas j’en ai entendu beaucoup de bien.

Découvrez le thème WordPress Responsive Divi

Aperçu Téléchargement

Ampersand

Ampersand est un thème WordPress qui met l’accent sur le côté portfolio. La page d’accueil embarque un superbe appel à l’action pour rediriger vos visiteurs sur la page portfolio. Le style du blog est également très propre.

Découvrez le thème WordPress Responsive Ampersand

Aperçu Téléchargement

Enfold

On peut dire que le thème Enfold vient concurrencer les thèmes Divi et Total dans le domaine des thèmes bourrés de fonctionnalités. Avec plus de 30000 ventes sur Themeforest, il semble bien remplir sa mission.

Découvrez le thème WordPress Responsive Enfold

Aperçu Téléchargement

Fullpane

Fullpane est ce que l’on appelle un thème WordPress One page, c’est à dire qu’il permet de réaliser des pages d’accueil très longues dotées de sections. Il est tout de même possible d’avoir des pages séparées comme par exemple la page blog.

Découvrez le thème WordPress Responsive Fullpane

Aperçu Téléchargement

Shop

Shop est le dernier thème de cette sélection consacrée au responsive. Comme son nom l’indique, il est plus orienté boutique en ligne. D’ailleurs, plusieurs agencements sont proposés afin d’en tirer le meilleur parti.

Découvrez le thème WordPress Responsive Shop

Aperçu Téléchargement

 

Apprenez à personnaliser n'importe quel thème WordPress

Que vous partiez de zéro ou avec quelques notions, ce livre vous aidera à créer des sites qui ne se limitent plus aux options des thèmes.

VOIR LE SOMMAIRE

Voilà pour ce bref aperçu de ce qu’il est possible de trouver comme thèmes WordPress responsive. Comme je vous l’ai dit précédemment, aujourd’hui les thèmes proposés par les différentes boutiques se doivent d’être responsive.

Toutefois, cela ne vous empêche pas de tester la « responsivité » des thèmes qui vous font de l’oeil. Cela vous évitera d’avoir de mauvaises surprises.

Pour cela je vous propose…

5 Outils pour tester un thème WordPress responsive

Si vous prévoyez qu’une bonne partie de vos visiteurs viendront d’appareils mobiles, vous avez besoin de vérifier que les thèmes que vous avez sélectionnés s’affichent correctement sur un maximum de supports.

Pour cela, voici 5 ressources pour voir comment des thèmes WordPress se comportent. Cette liste a été élaborée en collaboration avec le groupe WordPress Academy sur Facebook. Merci aux deux JB pour leurs conseils 🙂

Notez qu’il est préférable de leur donner l’adresse réelle du site de démonstration plutôt que celle avec la barre Themeforest, WooThemes, Elegant Themes ou autre.

Piresponsive

Piresponsive

Voir le site

Screenfly

Screenfly

Voir le site

Responsinator

Responsinator

Voir le site

isResponsive

isResponsive

Voir le site

Am I Responsive

Am I responsive

Voir le site

Note : Vous pouvez déplacez les appareils par simple glissé déposé. C’est top pour partager une capture d’écran. Il va falloir que je m’en serve pour Thèmes de France.

Bonus : votre navigateur

Et oui, votre navigateur peut vous aider à voir comment se comportent des thèmes WordPress sur toute une panoplie d’appareils.

Si vous êtes sous Chrome procédez de la manière suivante :

  • Ouvrez l’inspecteur de code en cliquant droit sur une page web puis sur Procéder à l’inspection de l’élément.
  • Pressez ensuite la touche Echap pour faire apparaitre une ligne en bas de l’inspecteur de code.
  • Cliquez sur Emulation et faites remonter la barre pour afficher les options.
  • Choisissez votre appareil, cliquez sur Emulate et rechargez la page.

Vous aurez quelque chose qui ressemblera à ça :

Test Responsive Chrome

Si vous êtes sur Firefox, Internet Explorer ou un autre navigateur, jetez un oeil à l’article d’Alsacréation dédié aux tests de sites responsives.

Conclusion

Aujourd’hui, avoir un site doté d’un thème responsive est quasi obligatoire pour pouvoir atteindre le maximum de personnes.

Même si la majorité des thèmes sont responsives, certains sont moins optimisés que d’autres. Il est donc recommandé de voir comment ils se comportent sur un maximum de supports.

Ce travail peut s’avérer fastidieux mais le choix d’un thème n’est pas quelque chose à la légère car on n’en change pas tous les 15 jours…

Alors, est-ce que le design de votre site est responsive ? Si ce n’est pas le cas, quand comptez-vous sauter le pas ?

Sources statistiques: Tablette-Tactile.net – ZDNet.fr
Images : Google Bot