1485 sujets

Web Mobile et responsive web design

Bonjour,

Je souhaite créer une newsletter compatible à la fois sur format web et sur format mobile.
Grâce à la balise dans le head
<meta name="viewport" content="width=device-width">
la newsletter s'adapte aux 2 formats.

Mais je souhaite mettre certains éléments en display:none pour ma version mobile.
J'ai essayé de mettre dans le head
<style type="text/css">
@media (max-width: 320px){
table img {
display:none;
}
}
</style>
mais ça n'a pas marché.
Ma difficulté vient du fait qu'avec une newsletter il faut mettre les styles en ligne, donc je ne peux rien gérer d'un fichier css extérieur.

Mercii de votre aide Smiley cligne
Le fait d'avoir une newsletter «traditionnelle» sur mobile ne gêne pas du tout: on zoome et dézoome facilement. Smiley cligne

Maintenant si c'est juste pour le fun, tu peux essayer avec le doctype html5 et l'élément style dans le body sans style inline. Il faut utiliser aussi un wrapper.

Dans les css, il ne faudra jamais commencer une déclaration par .class ou #id mais élément.class ou élément#id.

Évidemment, il faudra tout tester car je n'ai jamais fait ce genre de choses (média queries dans une newsletter). J'ai jadis fait une newsletter full css qui ne passait pas trop mal en tenant bien compte des limites de ce genre de mise en page :

* pas d'image de fond ou prévoir une couleur de remplacement en fond.
* attribut alt partout sur toutes les images.
* utiliser la sémantique html pour les titres, les listes, etc: si le client mail ne comprend vraiment rien aux css, il affichera les styles par défaut.
* etc.

Bonne chance Smiley cligne