[Résolu] À propos de la mise en page tableau dans une newsletter

Hello tout le monde,

Je ne sais pas si c'est au bon endroit que je dois poser cette question (html ou bar) ? Désolé de ce désagrément si je me suis trompé. Bref, je suis en train de réaliser une petite « newsletter ». Je sais qu'il ne faut pas trop imbriquer les éléments tables ensembles. Bien que j'ai lu pas mal de choses à ce sujet (plusieurs liens sur le net : pompage ^^, email project, etc.), je me pose diverses questions :

* S'il y a trop d'éléments table dans la « newsletter », que va t'il se passer à l'affichage ?
* Quel type de bug pourrait rencontrer le client mail ?
* Là, la page fait un peu plus de 7 ko. Je pense qu'une fois terminé, elle devrait dépasser à peine 8/9 ko. Si une page est trop lourde, comment réagira le client mail ?
* Quelle est à peu près la limite de poids ? (s'il y a bien sûr)
* Le contenu principal est dans une table de 800px de large et centré. Est ce trop large ? Je ne crois pas. Cependant, en regardant les « newsletters » de Sun System ou autres, je remarque que le gabarit principal est plus petit.

Merci de me donner quelques précisions sur le sujet.

Bon code.
Modifié par Nolem (26 Nov 2009 - 23:11)

Les principaux bugs qu'on peut rencontrer chez les clients mail se résument à l'absence de prise en charge des CSS, que ce soit au niveau d'une feuille de style externe, de l'élément style ou de l'attribut style. Pour y remédier, il faut doubler les styles CSS de leurs équivalents en HTML de présentation (élément font, attributs bgcolor, color, face, size, etc.). De plus, les images d'arrière-plan sont à éviter : beaucoup de clients mail ne les afficheront pas ; donc, utiliser l'élément img avec un alt vide.

Pour la largeur maximale, si tu peux ne pas dépasser les 750 pixels hors tout, ce sera idéal.

Autre élément de réponse : pour ne pas se casser la tête, envoyer la newsletter au format texte.

Je ne suis pas tout à fait d'accord avec Victor : les styles inline fonctionnent. On se servira des tableaux pour créer des colonnes et les zones principales. On peut donc tout à fait faire une mise en page sémantique correcte, pas besoin de revenir aux horreurs des années 90 pour faire du bon boulot.

Il y a 2 ou 3 articles intéressant sur pompage.net.

Salut,

Il y a aussi pas mal d'articles intéressants sur Campaign Monitor.
Et surtout, Campaign Monitor propose 30 templates prêts à l'emploi, adaptables à toutes les situations.

Pour ma part, je ne cherche pas à réinventer la roue. Une newsletter à faire ? Merci Campaign Monitor
Modifié par Ericf (26 Nov 2009 - 22:05)

Hello,

Victor BRITO a écrit :

[...]
Pour la largeur maximale, si tu peux ne pas dépasser les 750 pixels hors tout, ce sera idéal.
[...]

Je me doutais bien qu'il devait y avoir une petite recommandation à ce sujet. Merci ^^

Patidou a écrit :
Je ne suis pas tout à fait d'accord avec Victor : les styles inline fonctionnent.[...]

Pour ma part, je déclare dans la css interne les propriétés basiques. Le reste se passe sur les styles en ligne. C'est vrai que le margin-left ou le float ou display... faut peut être oublier. Ça fait bizarre de travailler à la old school.

Patidou a écrit :

[...]
On peut donc tout à fait faire une mise en page sémantique correcte, pas besoin de revenir aux horreurs des années 90 pour faire du bon boulot.
[...]

Oui c'est évident. Sur pompage il y a des bons articles sur le sujet en effet.

Ericf a écrit :

Il y a aussi pas mal d'articles intéressants sur Campaign Monitor.
Et surtout, Campaign Monitor propose 30 templates prêts à l'emploi, adaptables à toutes les situations.

Pour ma part, je ne cherche pas à réinventer la roue. Une newsletter à faire ? Merci Campaign Monitor biggrin

Exact, il y a même un récapitulatif des propriétés css qui sont supportées ou pas suivant les clients mail ( thunderbird). En revanche j'ai remarqué par rapport au tableau comparatif de Campaign Monitor et à mes précédents envois qu'hotmail, google non pas tout à fait le comportement attendu.

Merci en tout cas de vos conseils et bonne soirée à vous.
Modifié par Nolem (26 Nov 2009 - 23:13)

Patidou a écrit :
On peut donc tout à fait faire une mise en page sémantique correcte, pas besoin de revenir aux horreurs des années 90 pour faire du bon boulot.

Je ne dis pas le contraire. Mais, il faut alors accepter une énorme dégradation élégante de la newsletter, chose que les clients ont du mal à admettre...

Victor BRITO a écrit :

Je ne dis pas le contraire. Mais, il faut alors accepter une énorme dégradation élégante de la newsletter, chose que les clients ont du mal à admettre...

Je ne sais pas : je fais pas mal de newsletters (mise à jour, un peu d'intégration, je ne suis pas graphiste) et la mise en page reste correcte, juste des petites différences dans Outlook 2007 mais ce n'est pas trop grave, le design reste sensiblement le même.
Modifié par Patidou (27 Nov 2009 - 09:52)

Salut,

Pour une vue plus complète de la compatibilité CSS des logiciels de messageries ainsi que des webmails, un article était paru sur Developpez :
http://a-pellegrini.developpez.com/tutoriels/css/email/
Modifié par Agylus (27 Nov 2009 - 09:58)

Hello,

Pour ma part, c'est largeur 600 px, que des styles en lignes, que des images d'illustration et pas plus de 3 niveaux d'imbrications au niveaux des tableaux (le dernier point pas testé mais lu sur campagn monitor).

Concernant les styles en lignes chaque client mails supportent des règles css différentes, mais on trouve des listes référençant les "safe style" .

Faire une newsletter prend du temps si on veut qu'elle soit interprétée de la même manière avec tous les clients mails car il y aura toujours quelques gags au niveau des marges, il faut donc testé, beaucoup testé, donc plus on reste simple et moins on s'arrache les cheveux...

Il ne faut pas oublier aussi que certains clients mails possèdent une fenêtre de prévisualisation d'où on a aucun contrôle sur la taille et après essai et comparaison la taille de 600 px est un bon compromis. Cette même fenêtre empêche également le chargement des images donc mettre le texte en html et pas en jpg... mais je suis sur que ce dernier point est évident pour tout le monde

Voilou

Hello,

AspiGeek a écrit :
Hello,

Pour ma part, c'est largeur 600 px, que des styles en lignes, que des images d'illustration et pas plus de 3 niveaux d'imbrications au niveaux des tableaux (le dernier point pas testé mais lu sur campagn monitor).
[...]

Là, j'ai une table au 4e niveau d'imbrication. Je vais faire pas mal de tests avant d'envoyer en masse. En relisant un article, certains clients mail peuvent poser problème (Lotus note). Cependant, les machines sont de plus en plus performantes et l'article date de 2008. Je pense qu'il y a eu du nouveau depuis et il doit y avoir plus de possibilités.

AspiGeek a écrit :

Il ne faut pas oublier aussi que certains clients mails possèdent une fenêtre de prévisualisation d'où on a aucun contrôle sur la taille et après essai et comparaison la taille de 600 px est un bon compromis.
[...]

600 px de large, ça fait peu. Là, pour cette page en préparation, j'ai un table large de 810 px avec un cell-padding de 10px. Je suis sur une mise en page de trois colonnes, j'ai pris une largeur divisible par 3 avec valeurs rondes (270px).

Agylus a écrit :

Pour une vue plus complète de la compatibilité CSS des logiciels de messageries ainsi que des webmails, un article était paru sur Developpez : http://a-pellegrini.developpez.com/tutoriels/css/email/

Un grand merci . Je ne connaissais pas ce lien. Cet article date de deux ans mais il y a des données très intéressantes puisque certains clients mails sont mis en exergue (la poste par exemple).

Pour ma part et suivant mes précédents envois, j'ai remarqué que quelques propriétés telles que font-size sont prises en compte mais partiellement. Les valeurs décimales peuvent posées problèmes.

element{
	font-size:0.8em; /* de mémoire sortie sur gmail 1em */
}

bon code
Modifié par Nolem (27 Nov 2009 - 13:24)