28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous et toutes,

d'habitude je trouve la réponse à ma question dans les sujets du forum mais là, ça bloque...

j'espère donc que ladite réponse ne m'a pas crevé les yeux et m'excuse d'avance auprès des modos si c'est le cas.

Donc, voici mon problème :

il s'agit de créer un mail des plus simples dans lequel s'affiche une image. Lorsqu'on clic sur cette image, une autre apparait à la place et ainsi de suite jusqu'à la dernière ou un clic envoi sur un site.

la contrainte ici est donc de faire les choses en CSS et HTML sans javascript et autres php.

J'ai biensûr essayé de bricoler avec les générateurs de diaporama proposé par fireworks et bridge, mais ils génèrent du flash et du .js... Pour ce qui est du CSS je ne vois pas par quel bout le prendre, avec les Z-index ?, le positionnement des images dans une div ?

ma question n'EST PAS
"pouvez-vous me donner le code tout fait"
(soit-dit en passant, s'il existe déjà, je crache pas dessus !)

mais plutôt
"auriez-vous une/des pistes vers lesquelles me tourner pour créer ce code que je me ferait un plaisir de partager une fois réalisé..." en espérant que c'est bel et bien réalisable mais j'ai tendance à croire que tout est possible dans le monde merveilleux du CSS !

merci pour vos réponses
Modifié par SeB_59 (02 Feb 2010 - 15:02)
SeB_59 a écrit :
la contrainte ici est donc de faire les choses en CSS et HTML sans javascript et autres php.

Bonjour Smiley smile

Je t'arrête tout de suite : les CSS dans les clients et applications mail sont encore à l'heure actuelle relativement mal implémentés et supportés de manière très hétérogène.

De deux choses l'une :
- soit tu en seras conscient et tu feras fi de ceux qui ne le supporterons pas.
- soit tu revois tes objectifs à la baisse et tu optes pour quelque chose qui passe partout.
merci pour ta réponse Corinne,

Il est évident que les possibilités d'utilisations du CSS sont limitées pour un mail, ceci dit je l'utilise déjà un minimum pour les mise en formes, même s'il faut pour cela définir chaque balise...

a écrit :

De deux choses l'une :
- soit tu en seras conscient et tu feras fi de ceux qui ne le supporterons pas.
- soit tu revois tes objectifs à la baisse et tu optes pour quelque chose qui passe partout.


dans les deux cas, y a-t'il un espoir ?

même pour créer un genre de diaporama dans l'esprit "clic sur l'image affiche l'image suivante" pour une page web classique, je ne trouve pas de solution CSS...

cela te semble-t'il faisable ?
connecté
Modérateur
Hello, Smiley smile

Corinne S. a écrit :
Je t'arrête tout de suite : les CSS dans les clients et applications mail sont encore à l'heure actuelle relativement mal implémentés et supportés de manière très hétérogène.


+1000...
Le soucis des css dans les mails, c'est qu'il ne sont toujours reconnus dans les clients mails. Ce qu'atteste par exemple ce lien : email project. Donc, tu vas devoir éditer tes pages à la old-school (mise en page tableau, styles en ligne). Les styles importés ou liés, c'est pas vraiment préconiser. Également, les style en internes factorisés ne sont pas toujours compris. En revanche, je pense que les clients mails vont vers les « standards » désormais. Des propriétés incomprises hier sont maintenant acceptées dans la majorité (en exemple gmail). Et là encore, Microsoft ne nous aide vraiment pas. Outlook 2007, c'est une cata. Au lieu de s'améliorer, il a régressé (2003 -> 2007). Donc styles en ligne. Bonjour le code (écriture/lecture) Smiley sweatdrop . Là, le wysiwyg avec un contrôle sur le code peut être d'un grand secour (web 1.0 pour web 1.0).

Le javascript tout comme flash sont mal supportés par les clients mails. Cependant, tu peux faire des essaies. Par exemple, dans ton mail, tu ajoutes :

<script type="text/javascript" src="http://domain.com/js/diapo_web_mail.js"></scrypt>


Est ce que ça va fonctionner ? Je ne sais pas du moins je ne crois pas dans la plupart des clients mail chasseur de SPAM. Ton script de départ pour tes tests en js pourait être un alert() ou plus bourrin document.write(). Il ne faut pas oublier que les images ne s'affichent pas automatiquement à la lecture d'un mail. Il faut au préalable que l'utilisateur acceptent la réception des images. Comme je JS est synonyme de langage potentiellement dangereux, il se peut que le client mail n'accepte pas le courriel sans même avertir l'utilisateur de l'incident.

Question : Pourquoi ne fais tu pas un panel de ta galerie dans ton courriel ? Il me semble que si ta mise en page est sympa, cela peut être tout aussi efficace. En faisant simple et classe, tu augmentes automatiquement les chances d'être lu par un grand nombre (compatibilité) et tu travailles plus vite. Mieux vaut appréhender en détail ta charte et ta mise en page que les paillettes.

L'important n'est pas de donner des effets (!) Si le mail a une charte pourrie, une ergonomie désastreuse, que ça clignote partout, etc. Il y a de grandes chances que ton lecteur jette à la poubelle ce courrier sans même lire le contenu (qui lui est primordial). Ce qui me fait rebondir sur :

a écrit :

Une présentation,

Un lecteur, même s’il est intéressé, peut abandonner la lecture si la présentation n’est pas agréable. Inversement une présentation soignée peut décider un lecteur réticent à prendre connaissance d’un document.

Les lecteurs, même s’ils s’en défendent, jugent tout d’abord un texte par sa présentation, ensuite seulement ils jugeront de la qualité de son contenu. La présentation est donc le premier obstacle que le lecteur rencontre. Le franchira-t-il ? C’est ici que se situe l’enjeu de la présentation et le rôle du maquettiste qui doît connaître le public qu’il vise et lui faire correspondre son travail.

Mais il ne peut savoir comment sera disposé le lecteur au moment où il aura le document sous les yeux. Sera-t-il disponible, pressé, énervé... ? Une présentation peut plaire un jour et déplaire un autre jour suivant l’état d’esprit du lecteur ! Il peut tout juste imaginer que certains documents intéresseront à priori plus que d’autres le public qu’il souhaite atteindre. Il sait aussi d’avance si le document apparaîtra seul (bien que cela de plus en plus rare avec la multiplication des imprimés de tous genres) ou noyé au milieu d’autres documents qui lui ressemblent.

Dans le premier cas, il peut se limiter à rendre le texte agréable, lisible en cherchant à trouver la présentation qui lui paraît parfaitement adaptée. Dans le second cas, il doit intégrer un paramètre qui a alors une très grande importance : attirer l’attention pour que le lecteur choisisse son document plutôt qu’un autre. Il faut remarquer que la plupart des documents sont aujourd’hui régis par ce facteur et s’y limitent trop souvent. Les couleurs, la taille des titres, la multplication des « astuces » pour étonner ou se différencier, tout va dans ce sens. Mais souvent cette démarche nuit au document lorsque le lecteur est enfin décidé à le lire. Ce qui a tout d’abord servi à attirer son attention risque de le lasser rapidement car il cherche maintenant à ce que la lecture lui soit facilitée.



Bonne soirée Smiley smile
Modifié par Nolem (18 Dec 2009 - 00:18)
Merci beaucoup pour toutes ces précisions.

Je ne sais pas encore comment je vais m'en sortir, mais au moins j'y vois déjà plus clair !
Plus brièvement:

1. Ce type de comportement se gère en JavaScript ou en ActionScript (Flash). Pas en CSS.
2. Pas de JS dans les mails.
3. Pour Flash dans les mails, je n'en suis pas aussi sûr, mais ça me semble mal barré aussi.
4. Utiliser CSS pour cela serait un hack à coup de pseudo-classes pas faites pour ça, ce qui est pas terrible.
5. Et de toute façon ce n'est pas possible, le support de CSS étant trop faible dans les clients mails pour autoriser ce type de fantaisie.

Donc: c'est juste pas possible (sauf éventuellement piste Flash?).

Solution: inviter l'utilisateur à se rendre sur un site, qui contiendra le diaporama et les contenus supplémentaires...
connecté
Modérateur
Hello,

Florent V. a écrit :

[...]
Solution: inviter l'utilisateur à se rendre sur un site, qui contiendra le diaporama et les contenus supplémentaires...


+1
Je ne pense pas que les problèmes d'intégration d'un swf dans un mail aient changés depuis. J'en serai agréablement surpris. Ce post et la réponse de Ekameleon d'un autre forum résume bien la situation. À noter que le sujet le plus récent date de 2007.

<edit>
conseils supplémentaires : (erf, c'est Noël, passe moi des clefs stp) Smiley smile ,

le contenu :
Concentre toi sur le contenu et après la mise en forme. Que le courriel donne une conclusion optimiste et valorisante pour le destinataire et pour toi. Si tu as du temps devant toi, fais d'abords un brouillon de ton contenu (le texte !). Dans un premier temps, relie toi pendant quelques jours (ex : pendant la mise en forme de ton contenu et le ciblage de tes destinataires) avant le grand envoi afin de :
* déceler les éventuelles erreurs de syntaxe ou fautes d'or taux grafff(ffff...), (pourquoi plusieurs fffff ? on est sûr que ça fait fffffeeeeeeu) Smiley lol
* d'optimiser la portée de tes propos (vocabulaire fort/faible). ex : Si je dis ceci, le destinataire aura des chances de me répondre cela.
* aller au plus juste de tes pensées
* de rester cohérent et réaliste.
* de mettre des accroches qui incitent à lire plus ou apprendre plus. Smiley cligne
* de déterminer les attentes de ton/tes destinataire(s)
* que le contenu ne soit pas banal ou obsolète. (pas facile)
* que tu évites de parler du fromage alors que tu t'adresses à des plombiers, (À noter que beaucoup de plombiers aiment le fromage le midi et le soir) Smiley lol
* de demander à tes proches d'avoir un œil critique
Par la suite, je t'invite à ce que tu te poses des questions par toi même et que ta propre réponse reste impartiale (pas facile, j'en conviens). Si besoin, le couché sur papier afin de relire même ton analyse. (La réponse d'aujourd'hui n'est pas obligatoirement celle de demain) Smiley cligne Ex : Si je reçois un tel mail d'un expéditeur, est ce que je le contacte pour apprendre plus ? Est ce que ce courriel est clair, net et concis ? Est ce que cette phrase est hors sujet ? etc. D'ailleurs, tu peux également poser la même question à tes proches et analyser leurs réponses (spontanées) qu'ils te donneront s'ils étaient la cible de ton/tes destinataire(s).

la forme :
Tout le monde n'est pas le super graphiste de la mort qui tue ou est bon dans tous les styles/tendances. En revanche, il y a des principes utils. Est ce que la composition de ma page :
* est cohérente ? (!)
* agresse l'oeil ou le repose ?
* donne l'impression d'énergie/réactivitée/d'homogénéité/robustesse/aérée/clarté/etc.
* n'a pas d'incidents de lecture ? (plisser les yeux afin de déceler un bon gris typographique aéré) Smiley cligne (en html/css, gggggrrrrrr.....)
* à un bon niveau de lecture ? (la sémantique html t'aidera beaucoup) Smiley cligne
* exploite bien la largeur et la hauteur de la mise en page ? (ex : 800x600)
* attire l'oeil à plusieurs endroits par une grille de mise en page non linéaire. (s'éloigner de sa machine/écran ou zoom négatif afin d'avoir une vue plus généraliste de la composition) Smiley cligne
* est comprise en moins de 3 sec par l'idée générale du contenu. Smiley cligne
* est en corrélation avec le contenu même si elle est simpliste ?
Est ce que les images qui sont dans ma composition sont biens préparées ?

Conclusion : les effets bip bip ou clignotants ou ... sont purement optionnels.
</edit>

Bonne soirée. Smiley smile
Modifié par Nolem (19 Dec 2009 - 19:37)
bonjour,

malgrès cette longue absence, je vous invite comme promis à visionner la "solution" adoptée pour mon problème...

une demi-solution donc puisque comme les differents post l'indiquent, l'usage du flash dans les mail est "prohibé" voici donc comment j'ai contourné le problème :

e-mailing

merci encore à tous pour votre aide !