skip to Main Content

Comment utiliser la conception mobile-first pour des thèmes WordPress

PEARL : le meilleur thème WordPress de tous les temps

Les sites responsives et les thèmes responsives sont plus qu’une mode passagère. Avec de plus en plus de personnes qui utilisent des appareils mobiles pour accéder à Internet, le caractère responsive est maintenant une caractéristique essentielle de tout bon site ou thème WordPress.

Si vous consultez le répertoire de thèmes WordPress, vous trouverez que la majorité ou des thèmes récents sont responsives, ce qui signifie qu’ils s’affichent et fonctionnent très bien sur tout appareil.

Mais le design responsive a évolué depuis 7 ans qu’il a été développé par Ethan Marcotte. Maintenant, un design pour une variété de tailles d’écran est bien plus que l’identification des points d’arrêt pour les appareils populaires qui doivent être ajouté à votre feuille de style.

Il faudrait fait en sorte que votre travail de conception s’adapte à tout type d’écran, de sorte que vos points d’arrêt soient basés sur votre mise en page et non sur la taille de l’écran prévu. C’est une question de performance, qui vous permettra de vous assurer que votre site soit rapide sur tous les appareils selon toutes les connexions. Et, surtout, cela porte aussi sur le contenu. Car la conception de votre design doit fonctionner non seulement sur tout type d’appareil, mais aussi fonctionner correctement avec votre contenu, de sorte que l’expérience utilisateur soit aussi bonne que possible lors de la consommation de ce contenu.

Ma méthode préférée pour relever ces défis consiste à adopter une première approche mobile, qui transforme une conception de site web traditionnelle. Au lieu de concevoir un design qui s’adapte aux grands écrans et de l’ajuster pour les plus petits écrans, vous devez commencer par concevoir pour les petits écrans d’abord, puis adapter cela pour les grand écrans. Cela vous donne un certain nombre d’avantages en ce qui concerne la planification du contenu, la conception et la performance, et cela rendra votre manière de coder plus efficace.

Dans ce tutoriel, je vais décrire quelques-uns des avantages d’une approche approche mobile et expliquer en quoi cela consiste en détails. Ensuite, je vais vous montrer comment s’y prendre pour convertir votre thème WordPress en thème mobile.

C’est quoi une conception avec une approche mobile ?

« Mobile First » est une approche de conception et de développement web développé par Luke Wroblewski dans son livre « mobile-first ». Il a deux objectifs principaux:

Voici la liste secrète des meilleurs plugins WordPress

Repenser votre approche de la conception et du développement web pour travailler en premier sur les appareils mobiles.

Vous permettre de rédiger des requêtes des médias qui fonctionnent d’abord sur des petits ensuite sur les grands et non l’inverse.

Comment pouvons-nous vous aider aujourd'hui ?

Cliquez sur une option pour choisir l'assistance dont vous avez besoin

Alors qu’est-ce que cela signifie en termes de la façon dont vous travaillez ? Eh bien, repenser votre manière de concevoir les sites Web pour mettre l’intérêt sur les appareils mobiles en premier implique un certain nombre de choses:

  • De se concentrer sur le contenu et les interactions non pas sur les détails, les images et les éléments qui rendent votre site joli et remplissent l’espace.
  • Se débarrasser des éléments à l’écran qui sont juste là parce qu’il y a un espace pour eux, non pas parce qu’ils ont un but.
  • Une conception centrée sur l’expérience utilisateur. Le design doit simplifier la navigation pour les utilisateurs.
  • Considérer les nécessités en termes de contenu – maintenant que vous avez un petit écran sur lequel travailler, qu’est-ce que vous avez réellement envie de mettre en ligne ?
  • Structurez votre contenu, c’est facile d’interagir avec sur un petit écran.
  • Être efficace.

Je ne dis pas cela signifie que votre site ou thème ne devraient être beau, un design moderne et attrayant est important pour UX et pour créer une impression. Mais je dis que la conception doit d’abord être centrée sur le mobile est non seulement sur l’apparence.

Comment faire transformer votre thème en thème « mobile-first »

La meilleure façon d’aborder la première conception et le développement mobile est à partir d’une ardoise vierge. Avec un nouveau projet, vous aurez tous les avantages de la téléphonie mobile en premier lieu, y compris la nouvelle approche de la conception, ainsi que les avantages de codage.

Mais parfois, vous avez un thème responsive que vous souhaitez mettre à jour et de convertir en thème « mobile-first ». Comment allez-vous faire?

Prenons un thème imaginaire et considérons qu’il dispose déjà d’une mise en page. Voici à quoi ressemble nouveau notre disposition de bureau:

Découvrez les meilleurs thèmes WordPress pour créer votre Blog

Les principaux éléments de cette disposition seront similaire à ceci :

  • Header (en-tête)
  • nav.main (navigation principale)
  • section.main (section principale)
  • section.content (section du contenu)
  • aside.sidebar (sidebar)
  • footer (pied de page)

Le style de mise en page pour cela est susceptible d’être quelque chose comme ceci:

header,
.main,
footer {
 width: 96%;
 max-width: 1000px;
 margin: 10px auto;
 clear: both;
}
.content {
 width: 60%;
 margin-right: 5%;
 float: left;
}
.sidebar {
 width: 35%;
 float: right;
}

Comme le thème est « responsive », vous aurez également besoin de certaines requêtes des médias pour la version plus petite de l’écran. Il pourrait y avoir quelques-uns d’entre eux, mais concentrons-nous sur l’une pour les plus petits écrans. Cela est susceptible d’être quelque chose de similaire à ceci:

@media screen and ( max-width: 500px ) {

 header,
 .main,
 footer,
 .content,
 .sidebar {
 width: 98%;
 }
 
 .content,
 .sidebar {
 float: none;
 margin: 0 auto;
 }

}

Vous pouvez choisir de structurer votre CSS différemment (ou utilisez un préprocesseur), mais essentiellement c’est ce que vous aurez. Deux blocs de code: l’un pour le bureau et un pour mobile.

Maintenant, nous allons jeter un œil à la façon de convertir cela pour une première mise en page mobile. Tout d’abord, supprimez les deux blocs de code.

Maintenant, en haut de votre feuille de calcul, vous pouvez définir la mise en page pour les petites tailles d’écran:

89 thèmes et 3 plugins WordPress en téléchargement illimité

header,
.main,
footer {
 margin: 10px 1%;
}

Vous remarquerez qu’il est plus court que le style original pour les petits écrans. C’est parce que vous n’êtes pas obligé de refaire tout ce que vous avez déjà créé pour les écrans plus grands.

Maintenant, créez la requête des médias (media query), en utilisant cette fois au min-width au lieu de max-width:

@media screen and ( min-width: 500px ) {

 header,
 .main,
 footer {
 width: 96%;
 max-width: 1000px;
 margin: 10px auto;
 clear: both;
 }
 
 .content {
 width: 60%;
 margin-right: 5%;
 float: left;
 }
 .sidebar {
 width: 35%;
 float: right;
 }
 
}

Cela vous semble familier ? C’est le même style que vous avez utilisé comme valeur par défaut dans votre stylesheet responsive. Donc, il n’y a aucun gain ici en termes de quantité de code, mais il y a un en termes de performance: les appareils dotés d’écrans plus petits ignoreront cela au lieu de parcourir toute la feuille de style, pour la remplacer par des éléments ajoutés dans « media query » pour le mode responsive. Ce qui vous donnera une petite amélioration de la performance sur les appareils mobiles.

Vous avez peut-être remarqué que la valeur « max-width » est beaucoup plus élevé pour les éléments de pleine largeur que la valeur « min-width » pour la requête des médias (media queries), ce qui rend cette ligne de code redondante pour des écrans de tailles de moins de 1000px de large. Voici un défi pour vous: essayez de supprimer cette partie du code et ajoutez s’y une deuxième requête de médias qui vise les grands écrans.

Voilà donc comment vous convertissez votre mise en page de responsive vers « mobile-first ». Il y a deux étapes:

Ecrire le style par défaut pour les petits écrans, qui prend une très petite quantité de code.

Votre site Web est-il lent, piraté, non sécurisé, vulnérable ?

Ajouter dans une requête multimédia à l’aide au « min-width » lieu de « max-width » et copier le style par défaut de votre thème responsive sur cela.

C’est tout pour ce tutoriel, si vous avez des questions, n’hésitez pas à les poser.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Partagez
Enregistrer
Tweetez
Partagez
Back To Top