Je suis le gendre idéal, mais j’ai quand même un défaut : je surfe très peu sur mobile et tablette. Ma belle-mère me le reproche assez souvent d’ailleurs.

Par contre, en surfant sur PC, cela m’arrive régulièrement de tomber sur de jolis sites, blogs ou portails qui semblent être optimisés pour mobiles à 200%. Je veux dire qu’on retrouve tous les codes de l’ergonomie mobile, même sur la version Web du site. Et je ne vous parle pas de responsive design !

Voici un exemple sur lequel je suis tombé récemment : time.com.

Observez le menu mobile situé dans le coin supérieur gauche.

Ce diaporama nécessite JavaScript.

Et bien sûr, via mobile, c’est nickel !

wordpress-mobile-time-com

 

Personnellement, je trouve ces sites « UX mobile » très modernes et agréables à consulter sur grands écrans.

Si vous en connaissez d’autres dans ce genre, partagez-les en commentaires !

L’idée du siècle : partir d’un thème WordPress 100% optimisé mobile !

Pour faire en sorte que son contenu soit plus agréable à consulter sur mobile, pourquoi ne pas tout simplement concevoir sa mise en page pour mobiles en priorité ?

Il est plus facile de consulter un site optimisé « mobile first » sur grand écran, qu’un site « mal optimisé mobile » sur smartphones et tablettes.

Et dans le cas où notre trafic est à 80% mobile ?

C’est l’idée que Loran750 a évoquée avant-hier soir dans l’un de ses célèbres tweets multiples. 😉 

Je suis à la recherche de templates « mobile-first, desktop last » originaux, pour des sites dont les visiteurs sont à 80% sur smartphone.

Souvent les templates WordPress au format smartphone sont d’une banalité affligeante.

Il faut arrêter d’adapter pour les smartphones et avoir des templates d’abord travaillés pour les smartphones et ensuite adaptés (+ facilement) au desktop.

Lire la conversation complète sur Twitter ^

Merci Laurent 😉

On s’y met tout de suite !?

Je réagis aujourd’hui à cette bonne idée en vous proposant une sélection de thèmes WordPress optimisés en priorité pour mobiles.

À vous ensuite d’adapter la version Web grâce au responsive design.

html-css

En gros, il s’agirait de faire le travail inverse du webdesigner lambda.

Généralement, on se base en premier sur une version PC de son site Internet et ensuite, on adapte ses contenus aux mobiles pour faire une version à peu près lisible de son site Web sur smartphones et tablettes.

Avec cette technique, à moins d’y passer beaucoup de temps, souvent le résultat n’est pas terrible (CSS un peu foireux dans certaines résolutions petits écrans…).

L’approche inverse proposée par Laurent vaut largement celle communément acceptée par les webdesigners !

Je suis sûr que d’ici quelque temps, on adaptera d’abord les webdesigns pour mobiles avant de les optimiser ensuite pour écrans classiques.

D’ailleurs, on remarque que pas mal d’interfaces Web se comportent maintenant comme des applications. C’est le cas par exemple du tableau de bord de WordPress.com où l’on retrouve WordPress Reader.

On ne boit pas au-dessus de son clavier, madame !

On ne boit pas au-dessus de son clavier, madame !

Place à la sélection de thèmes « mobile friendly » !

top-themes-wordpress

Top 10 de thèmes WordPress « mobile first »

Pour plus de facilité, j’ai regroupé les thèmes que j’ai trouvé par « auteur ».

Si vous appréciez le travail d’un développeur en particulier, je vous conseille de consulter son portfolio. Au moment où vous lirez cet article, il est probable qu’il existe d’autres thèmes sympas présentés dans ses réalisations.

En effet, les webdesigners WordPress sensibles au design mobile restent souvent dans ce registre, vous verrez. 😉

Webbu Design

Aura Premium Mobile Theme

Le thème Aura propose un système complet de personnalisation. Les développeurs ont tâché de proposer une meilleure expérience sur mobile. Le système de blog y est parfait. Les articles se lisent bien. Il existe la possibilité de présenter un portfolio, une galerie, de la vidéo ou des intégrations Sound Cloud. Le thème gère bien un nombre illimité de catégories et de menus. Le thème intègre aussi des icônes (format image ou police d’écriture retina ready) avec couleurs illimitées.

Voir le thème : Aura

Dans un tout autre genre, voici un autre thème de Webbu Design : le thème Metro Mobile.

Metro Mobile Premium WordPress Mobile Template

Le thème Metro n’a de limite que votre imagination. À vous de créer vos propres cases dynamiques. À vous de créer votre propre style.

Le thème a été testé sous WordPress 4.x.

  • 13 différentes tailles de cases disponibles
  • 24 couleurs originales & personnalisation illimitée via l’outil de personnalisation
  • galeries photos
  • bien documenté en particulier au sujet du template

Voir le thème : Metro

Découvrez aussi les thèmes Point, Mobit et Bean :

Bonfire Themes

ROWE Mobile Theme for WordPress

Rowe est un thème léger et rapidement adaptable à vos besoins mobiles. Comme pour leurs précédents thèmes, le développeur (Bonfire) a souhaité réaliser quelque chose de mémorable dès la première visite, cette fois avec des couleurs pastels moins chaudes. Plus de 1.500 blogueurs ont déjà opté pour leurs thèmes mobiles.

Vous retrouverez la liste des fonctionnalités en suivant le lien ci-dessous.

Voir le thème : Rowe

TOUCH: A Lighter-than-air WordPress Mobile Theme

Touch est le 4e thème mobile de Bonfire. Même s’il est 100% optimisé pour les smartphones, il conviendra aussi aux visiteurs navigants sur PC, surtout si vous y appliquez en plus quelques optimisations. Il semble léger et aéré, mais comme vous pourrez le voir dans leur liste de fonctionnalités,  c’est un thème mobile avec beaucoup d’options embarquées et qui peut être utilisé à plusieurs fins : mettre en place un blog simple, une page d’accueil statique, une galerie tactile, ou même un portfolio.

Inclus également : des formats uniques pour les commentaires et formulaires de contact, ainsi que des diaporamas, shortcodes, une fonctionnalité « installer comme application web », et ainsi de suite.

Voir le thème : Touch

Découvrez aussi les thèmes Rogue, Brave, Mynt, Monolith, Hunter, Spartan, Breezy, Vibrant et Hero :

Attention, beaucoup des thèmes de cet auteur n’ont plus été mis à jour depuis longtemps. Jetez toujours un oeil aux dates de mise à jour des thèmes que vous choisissez afin de savoir s’ils sont toujours maintenus par leur développeur.

xRicrdx

Now – Extensive WP Theme For Bloggers & Developers

Now est un thème à priori très sobre qui s’adaptera à beaucoup de types de projets. Il propose un joli formulaire de contact très fonctionnel. 400 combinaisons de couleurs. Il est très bien optimisé pour iOS, Android et Windows Phone. Il propose différents formats de posts (y compris intégration Sound Cloud). Quelques shortcodes personnalisés sont aussi présents. De plus, il est d’ores et déjà compatible avec les grands écrans d’ordinateur malgré sa compatibilité évidente avec les périphériques mobiles.

Voir le thème : Now

Découvrez aussi les thèmes Ultimate et Breathe :

Lukepostulka

Nightly Mobile | The Ultimate Mobile Theme

Nightly Mobile est un thème WordPress multi-usage au pixel parfait basé sur jQuery Mobile !

Il a été développé avec un grand soin du détail. Il offre un panel d’options qui boostera votre capacité de personnalisation.

C’est sans aucun doute l’un des plus puissants thèmes WordPress optimisé mobile. Quelques styles complètement personnalisés sont inclus (voir capture). Une large gamme de périphériques sont pris en charge. Ses interfaces professionnelles et modernes sont parfaites pour tous les types de sites Web : agence, blog, site de freelance, site personnel, portfolio, galeries ou boutique e-commerce professionnelle !

Avec ce thème, les visiteurs pourraient bien revenir chez vous uniquement pour sentir à nouveau l’expérience d’un site lisse.

Voir le thème : Nightly

Mobius Studio

Sweipe – Responsive WordPress Mobile Theme

Sweipe est un thème mobile multi-usage plein de fonctionnalités. Toutes les pages construites avec VisualComposer et WordPress customizer vous aident à styliser le thème comme vous voulez.

Vous aurez une meilleure expérience en navigant sur ce thème avec votre mobile. Testez-le.

Il a été testé sur tous les smartphones et tablettes populaires. Le code est simple à comprendre et bien documenté/commenté. De même, vous disposerez d’un fichier de documentation détaillé. Tous les visuels sont « pixel parfait », c’est-à-dire compatible avec les périphériques Retina Display. Personnalisation facile de toutes les couleurs, afin de coller facilement à votre image de marque. Le support premium promet une assistance en 24 heures.

Voir le thème : Sweipe

FlatMobile – Responsive WordPress Mobile Theme

FlatMobile est très similaire à Sweipe dans ses fonctionnalités. Je vous laisse vous faire une idée en visualisant leur démo.

Ne vous arrêtez pas à la couleur violette criarde choisie pour cette démo. N’oubliez pas que toutes les couleurs sont paramétrables facilement dans les Themes Options.

Naviguez sur leur démo, vous apprécierez sans doute l’effet de flou unique visible lorsqu’on active leur menu.

Voir le thème : FlatMobile

Theme-Studio

Mobile Friendly WordPress Blog Theme

C’est un thème Responsive Design optimisé pour les blogs, à la base, mais qui conviendra à beaucoup d’autres types de projets, comme les sites marchands par exemple.

Il a été créé avec comme objectif d’être élégant, lisse, fluide et 100% optimisé mobile. Les développeurs du thème ont veillé à lui faire passer le test de compatibilité mobile de Google afin de vous garantir le meilleur référencement qui soi.

Voir le thème : Memory

Playnethemes

Apley – A Mobile Application Landing Page

En plus d’être une belle façon de présenter votre application mobile avec élégance, c’est aussi un thème WordPress hautement compatible avec n’importe quel périphérique mobile. Il a de la classe et vous pourrez apprécier de le personnaliser facilement en quelques minutes à peine. Il dispose d’une page d’accueil personnalisable avec plus de 8 options de mise en page prédéfinies dans lesquelles vous pourrez piocher selon vos besoins.

Ces captures ne sont pas très représentatives. Je vous conseille de visiter directement la démo en suivant le lien ci-dessous.

Voir le thème : Apley

BeantownThemes

Mobilize – jQuery Mobile WordPress Theme

Il s’agit d’une version WordPress qui fut très attendue car, basée sur le célèbre template HTML mobile Mobilize (un best seller).

Il s’agit d’un template particulièrement bien optimisé pour la navigation tactile, basé sur jQuery Mobile et avec beaucoup de fonctionnalités. La page d’accueil propose un diaporama à navigation tactile avec 24 transitions (swipe / glissement de votre doigt), légendes optionnelles, icônes sociales et plus encore.

Pour les pages internes, vous pourrez entre autres publier une galerie optimisée tactile, un formulaire de contact, un blog avec images à la une, des vidéos, des tonnes de shortcodes, etc.

Quatre gammes de couleurs sont incluses de base et leur personnalisation sans limites est un jeu d’enfant grâce aux options du thème. Vous pourrez aussi y choisir votre style d’écriture, parmi le choix des 150 polices Web de Google.

Référez-vous à la présentation complète pour un détail de toutes les fonctionnalités.

Voir le thème : Mobilize

Edit 14 février 2017, thème WordsMatter

Je n’ai pas testé, car il n’était pas encore sorti le jour où j’ai écrit cet article, mais sur Twitter, @geekeriesfr nous conseille ce tout jeune thème : WordsMatter. Allez jeter un œil 😉 à première vue, il est super léger, très sobre. Tout ce dont le Web mobile a besoin !

L’avenir du Webdesign ?

Innovez ! Optimisez d’abord vos sites pour mobiles et tablettes.
Seulement ensuite, pensez aux grands écrans.
Après tout, sur PC, c’est plus facile de naviguer.

Pourquoi ThemeForest ?

J’ai volontairement sélectionné des thèmes ThemeForest car, déjà, ils sont bien, ils ne sont pas chers et leur système de licence vous permet de recevoir les mises à jour « à vie ».

Ensuite, j’ai voulu protester contre un de leurs concurrents qui m’a bien fait perdre mon temps ces jours-ci en me démarchant pour rien.

En bref, il s’est bien moqué de moi.

Je voulais profiter de cet article pour vous expliquer toute l’histoire, mais puisque c’était un peu long, je viens de rédiger un article à part à ce sujet.

Si vous aimez les coups de gueule bien saignants, c’est à lire ici : j’ai été approché par le concurrent d’Envato Market (ThemeForest, CodeCanyon…). 😉 

Jetpack mobile

Si vous êtes vraiment en galère avec un site préexistant, en attendant une refonte complète, vous pouvez tester l’extension Jetpack que je décris ici au point n° 22 : Jetpack mobile.

Conclusion sur le webdesign orienté mobile

Que pensez-vous de cette approche ? Est-ce l’avenir du Webdesign ?

Si vous avez réalisé un site Web très « mobile-friendly », n’hésitez pas à nous le présenter en commentaires. Pareil si vous connaissez d’autres thèmes WordPress sympas pour démarrer une création purement optimisée mobile, et optimisée PC ensuite.

Pour ma part, j’y songerais sérieusement pour mes prochaines réalisations. Et j’essayerais de faire plaisir à belle-maman en utilisant un peu plus mon smartphone. 🙂

À votre bon cœur, ma bonne dame

Tous les liens proposés ci-dessus sont des liens d’affiliation. Aidez-moi à mettre du parmesan sur mes raviolis.

Ça me fait marrer, que veux-tu ? :)

Vos commentaires sont très appréciés ci-dessous !

Veuillez cependant respecter les bonnes pratiques de commentaires sur les blogs, sinon votre message s'autodétruira après 10 secondes entre mes mains.

  • Vous devez avoir lu l'article, sinon je m'en rendrais compte, et boom !
  • Vous ne pouvez renseigner aucun mot clé SEO dans le champ "nom" (pseudo, nom de société, pas de souci).
  • Vous pouvez renseigner votre "Site Web", vous aurez un lien dofollow, je suis gentil. Par contre, gardez à l'esprit qu'il s'agit d'un lien qui sert à vous identifier en tant qu'individu (site de votre société, votre blog perso, votre chef d'œuvre WordPress...). Je refuse donc : les sites de vos clients, les pages internes que vous peinez à booster, les MFAs sans intérêt, les serruriers, rachats de crédits et autres saloperies.
  • Vous devez avoir un avis sur le sujet abordé (même contradictoire) ou au moins poser une question pertinente. Si vous souhaitez juste me montrer votre gratitude éternelle, faites-le avec un retweet ou un partage Facebook. Donc pas de "merci très bel article" qui n'apporte rien.

À vos plumes !