Tutoriel vidéo – Comment créer un email HTML ? (HTML – 2/3)

Deuxième étape: intégration HTML d’un email

Cet article est la suite de l’article « Tutoriel vidéo – Comment créer un email HTML ? (Photoshop – 1/3) ». Dans cette vidéo, Mohammad montre en détail comment intégrer un email HTML à partir d’un modèle designé sous Photoshop. Cette vidéo est en anglais, mais bien compréhensible. Je vous invite par ailleurs à consulter le site de Mohammad : beautifulemails.com.

Source: http://beautifulemails.com/2-how-to-create-html-email-html/

2 reflexions sur “Tutoriel vidéo – Comment créer un email HTML ? (HTML – 2/3)

  1. Olivier

    Bonjour,

    J’ai tout un doc .psd à convertir en mail et je n’arrive pas du tout à comprendre la mise en page html. Je suis en train de plancher à fond sur la vidéo, mais il donne des explications assez vagues.
    Il n’y a pas assez d’exemple de donner. Dans mon documents, j’ai bandeau rouge en haut, avec deux logos ( à droite et à gauche) et une ombre interne qui porte sur 2 px en dégradé. Je n’ai aucune idée de savoir comment l’expliquer en html.

    Si vous pouvez me donner des pistes, éclaircissements, ….etc, je vous en serai très reconnaissants.

    Cordialement,

  2. jdrean Auteur de l'article

    Bonjour Olivier. En effet, l’auteur de cette vidéo est parfois un peu vague sur certain sujet et ne parle pas du tout de certains aspects.
    Pour répondre à votre question, c’est un peu difficile sans voir votre document PSD, mais je vais tout de même essayer de vous rapporter quelques briques de réponse. La première chose qu’il faut savoir c’est qu’il n’est pas possible de faire un effet d’ombre interne en HTML emailing (Nombre de clients de messagerie ne supportent pas le CSS3). La solution est donc de faire cet effet en image. Il faudra découper l’image qui réalise l’effet et l’intégrer ainsi à l’email. De même, si vous voulez faire des coins arrondis, il faut faire les arrondis en image et non uniquement en CSS. Voilà, j’espère vous avoir apporté un peu d’aide. Si vous avez d’autres questions, n’hésitez pas !
    Bonne journée. Jocelyn.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Ne manquez jamais une mise à jour. Inscrivez-vous pour recevoir un email lorsque nous publions quelque chose de nouveau dans le blog.