skip to Main Content

6 conseils pour l’optimisation du design mobile de votre blog

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

La consommation de données par le trafic mobile a augmenté de 74% en 2015, avec plus d’un milliard d’ appareils vendus au cours de cette même période, et la tendance est toujours en évolution. Cela seul devrait être suffisant pour souligner l’importance de l’optimisation de vos designs pour le trafic mobile.

Certains thèmes WordPress sont mieux optimisés pour gérer des petites résolutions, mais cela ne signifie pas une compatibilité absolue en laquelle vous aurez totalement confiance. En fait, il y a un certain nombre des correctifs à mettre en oeuvre qui vous permettront de mieux optimiser votre site web pour les appareils mobiles.

Au cours de ce tutoriel, nous allons explorer les différents conseils spécifiques aux appareils mobiles, à l’optimisation de l’image, la conception de la mise en page, et bien d’autres sujets.

Astuce 1: Ajouter des icônes iOS et des écrans Splash

ios-icons-splash-screen

Malgré les nombreux progrès faits par Android, les appareils iOS restent très populaires et profitent du soutien d’une communauté active de développeurs. Le point est, beaucoup de vos visiteurs seront probablement en possession d’un appareil Apple, et s’ils souhaiteront probablement profiter encore plus de votre site web, par l’enregistrement de votre icône dans leur écran d’accueil.

Pour vous préparer à cette éventualité, nous allons vous montrer comment vous pouvez ajouter des icônes iOS de blog WordPress.

Tout d’ abord, vous aurez à trouver le fichier header.php de votre thème (ou thème enfant), puisque nous aurons à ajouter un peu de code dans la balise <head>.

Voici le code que vous devez ajouter :

 <link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />

Comme vous pouvez le voir, le code mentionne des icônes spécifiques pour iPhones, iPads et appareils Retina, qui doivent tous être précédés de l’attribut rel avec pour valeur « appel-touch-icon ».

Démarrez la promotion de votre blog

Téléchargez des dizaines de Logos, bannières, modèles de sites web et de nombreux autres outils marketing pour faire connaître votre Blog WordPress. [Recommandé]

Pendant que vous y êtes, vous pouvez également concevoir une nouvelle marque pour l’écran splash iOS pour votre site Web avec le code suivant :

<linkrel="apple-touch-startup-image"href="splash-screen.png"/>

Remarque : L’écran splash c’est celui qui s’affiche au moment où vous lancez une application. C’est en quelque sorte l’écran de chargement d’une application.

Astuce 2: Utilisez plusieurs tailles d’image en association avec les « media-queries »

multiple-image-sizes-media-queries

Vous êtes, bien sûr, déjà familié avec la notion des « media-queries« . Pensez aux règles de conception spécifiques incorporés dans votre CSS lorsqu’un scénario spécifique se présente. Dans le cas de la conception mobile, ces scénarios sont les différentes résolutions, orientations de l’appareil, et les dimensions du navigateur. Le problème avec les « media-queries » est qu’aujourd’hui, beaucoup de designers et développeurs créent des sites Web avec une approche mobile en second plan, pourtant l’inverse devrait être.

Cette approche mobile secondaire peut être repéré dans les « media-queries » quand vous voyez les dimensions des dispositifs populaires (ie 320px, 480px, 768px) utilisés comme lignes directrices. Bien qu’en théorie cela peut sembler une bonne approche, puisque pour être efficace l’on ne peut pas prétendre utiliser les dimensions des tous les appareils qui varient aussi souvent qu’ils ne sont crées.

Donc, la prochaine fois que vous travaillez sur une conception, ayez la compatibilité mobile comme priorité :

  • Concevez vos « queries » de sorte à travailler sur de petites résolutions.
  • Évitez d’utiliser des pixels pour déclarer vos points d’arrêt. Au lieu de cela, essayer de travailler avec « ems » et des pourcentages aussi souvent que possible pour que vos créations puissent s’ajuster en fonction du zoom.
  • Rappelez-vous de régler vos « media-queries » afin qu’ils s’adaptent aux appareils Retina (résolution-minimale: 192dpi ).

Astuce n ° 3: Optimisez vos images

optimize-your-images

Même si vous avez un design fantastique et responsive, les visiteurs potentiels pourront vous échapper s’ils se rendent compte que votre site web prend du temps pour charger, et les images jouent un grand rôle dans cet aspect. Les utilisateurs souhaitent voir de belles images, qui chargent cependant très rapidement, d’où la nécessité d’optimiser vos images.

Même si cela peut sembler une énigme, il y a beaucoup d’outils qui peuvent vous aider à atteindre ces résultats. Tout en haut de la liste, nous avons EWWW Image Optimizer et WP Meuch , qui une fois installé, appliqueront automatiquement les techniques de compression sans perte en qualité pour chaque image téléchargée sur votre site WordPress et ce dernier peut même passer par votre médiathèque pour optimiser les images téléchargées avant.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Si vous préférez ne pas ajouter encore un autre plugin à votre site Web, il y a toujours des outils autonomes tels que TinyJPG et TinyPNG, qui accomplissent essentiellement le même travail que EWWW Image Optimizer en réduisant sélectivement le nombre de couleurs dans vos images, ainsi que le décapage sur les méta (suppression des données inutiles). Cela se traduit par une taille des fichiers considérablement plus petite avec beaucoup de changements quasiment indétectables, ce qui est un compromis idéal.

Astuce n ° 4: Pensez à utiliser les SVG

animated-svg-logo-with-css-thumbnail

Scalable Vector Graphics (SVG) sont un outil astucieux que vous devez prendre en considération. Malgré ce que le nom impliquerait, ils utilisent une forme de langage de balisage XML au lieu d’un format d’image, et ils sont particulièrement utiles pour les graphiques simples tels que des logos, des icônes, des infographies, et autres applications.

« Pourquoi le SVG si utile ?« , Vous pourrez raisonnablement vous interroger. Eh bien, pour commencer ils sont extensibles, ce qui signifie que vous n’aurez pas à vous soucier de l’adaptation aux différentes fenêtres. En plus de cela, ils peuvent également être facilement animés en utilisant le CSS.

Vous devriez être familier avec des outils tels que Adobe Illustrator , Inkscape  et Sketch , qui incluent un support pour ce format, alors essayez-les !

Astuce 5: choisir de bonnes polices

pick-right-font

Le design mobile ne concerne pas uniquement les images. Choisir les polices à utiliser peut avoir autant (sinon plus) d’impact sur vos créations comme le font les graphiques, puisque la plupart des sites utilisent le texte comme leur principale méthode pour transmettre des informations.

Du point de vue d’un concepteur, cela signifie choisir les bonnes polices, ce qui implique :

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

  • Ne pas utiliser des polices trop minces ou compliquées. Votre police doit facilement être visible sur les appareils mobiles, si vous ne souhaitez pas que les utilisateurs ajustent le zoom pour mieux vous lire.
  • Évitez les polices avec trop peu espacement entre les lettres pour une meilleure lisibilité.
  • Si vous utilisez les « media-query » pour votre texte, utilisez ems pour les tailles au lieu de pixels.
  • Pensez à utiliser les polices sans empattement, car ils ont tendance à mieux s’adapter à la plupart des résolutions.

Astuce 6: Traiter texte en tant que partie de l’interface utilisateur

text-part-interface

Puisque nous sommes sur la typographie, vous devez savoir que la police n’est pas la seule chose a prendre en considération, et elle seule ne concerne pas la lisibilité. Étant donné que nous allons travailler avec une grande variété de fenêtres, vous souhaitez que vous design prenne en considération le  texte comme partie intégrante de l’expérience utilisateur afin de maximiser la lisibilité, cela signifie :

  • L’utilisation de « media-queries » pour maintenir une limite gérable de caractères par ligne (pensez à utiliser ems au lieu des pixels!). Le montant généralement accepté est fixé à quelque part entre 45-75 caractères .
  • Pensez à utiliser le vw , vh , et vhmin (ceux-ci sont tous liés au pourcentage du viewport) des valeurs de CSS3 afin de garder la taille de police par rapport à la taille de l’afficheur ou sur ​​des fenêtres spécifiques.

Résumé

Nous avons vu tout au long de cet article que le trafic mobile est de moins en moins négligeable, ce qui devrait pour chaque développeur être une priorité dans la conception de site web. Vous avez donc quelques astuce que vous pouvez appliquer sur votre blog pour rentre votre actuel site web « mobile-friendly« .

Cet article comporte 0 commentaires

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
1 Partages
Partagez1
Tweetez
Enregistrer