Ciblez les appareils mobiles avec une règle @media
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.
Réduisez la grosseur
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.
Désactivez le redimensionage du texte
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 » :
Mettez ce qui est important en priorité
Positionnez le contenu important au début de votre courriel si possible. Personne n’aime avoir à défiler un long courriel.
Cacher ce qui est moins important
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.
Favorisez un design sur une colonne
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.
Pensez aux écrans tactiles
Grossissez un peu vos boutons pour qu’ils soient facilement cliquables sans nécessiter un zoom.
Testez, testez et, testez encore
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.