Une règle @media définit la feuille de style qui sera appelé pour répondre aux caractéristiques d’un appareil. Vous pouvez ajuster la largeur, les marges ou même cacher certains contenus.
Les appareils mobiles ont des écrans plus petits. Vous devez donc coder vos courriels pour faire en sorte que la règle @media réduise la largeur de vos message à environ 300 pixels pour éliminer le besoin d’effectuer un zoom et d’avoir à se déplacer pour voir le contenu.
Les navigateurs des appareils mobiles ajustent automatiquement la dimension du texte pour améliorer la lisibilité sur votre appareil. Si vous avez pris le soin d’appliquer tous les changements suggérées plus haut, ajouter du code pour désactiver le redimensionnement qui devient inutile. Il suffit d’ajouter le code CSS suivant à votre balise « body » :
Positionnez le contenu important au début de votre courriel si possible. Personne n’aime avoir à défiler un long courriel.
Pour améliorer la navigation de votre courriel sur les appareils mobiles, vous pouvez dissimuler des contenus secondaires par l’ajout de « class » à des images, des paragraphes ou des tableaux.
Il est plus facile et rapide de parcourir un courriel sur une colonne. Si vous ajoutez une deuxième colonne pour du contenu moins important, vous pouvez toujours décider de le cacher dans la version mobile.
Grossissez un peu vos boutons pour qu’ils soient facilement cliquables sans nécessiter un zoom.
N’oubliez pas de faire des test sur toutes les plateformes. Regardez comment ca s’affichera autant à la verticale qu’à l’horizontale.
Communiquez avec nous dès aujourd’hui pour savoir comment nous pouvons vous aider à adapter vos courriels pour le mobile.
