$30 off During Our Annual Pro Sale. View Details »

L'intégration d'e-mails responsive

L'intégration d'e-mails responsive

Conférence à la Kiwi Party 2013

HTeuMeuLeu

June 28, 2013
Tweet

More Decks by HTeuMeuLeu

Other Decks in Programming

Transcript

  1. Kiwi Party 2013

    View Slide

  2. Rémi Parmentier
    Intégrateur
    @HTeuMeuLeu

    View Slide

  3. View Slide

  4. L’intégration d’e-mails
    responsive
    L’année dernière, j’ai
    commencé à faire des
    intégrations d’e-mails
    responsive.
    Voici certains trucs que
    j’ai appris au passage.

    View Slide

  5. L’intégration d’e-mails
    tout court
    D’abord, commençons par
    faire un petit point sur
    l’intégration d’e-mails en
    général.

    View Slide

  6. Une page web Un e-mail
    HTTP
    HTML
    CSS
    IE6
    Universel Personnel
    Modifiable Fixe
    Ouvert Propriétaire
    L’intégration d’e-mails, ce
    n’est pas du web. Il y a
    quelques ressemblances
    et points communs. Mais
    un e-mail ne répond pas
    aux mêmes contraintes
    qu’une page web.

    View Slide

  7. •Outlook 2003, 2007, 2010, 2013
    •Lotus Notes 6.5, 7, 8, 8.5
    •Apple Mail OS X, iOS
    •Thunderbird Windows, OS X, Linux
    •Sparrow iOS
    •Mailbox iOS
    •...
    Logiciels mail
    •Gmail
    •Outlook.com
    •Yahoo!
    •Orange
    •SFR
    •Zimbra
    •...
    Webmails
    •Internet Explorer
    •Firefox
    •Chrome
    •Safari
    •Opera
    •...
    Navigateurs
    Appareils
    •Ordinateurs
    •Téléphones
    •Tablettes
    •Liseuses
    •Consoles de jeux
    •... On va devoir tester sur
    un paquet de combinaison
    d’appareils et de logiciels.

    View Slide

  8. Heureusement pour ça il y
    a des outils de screenshots
    de rendus, comme par
    exemple Litmus...
    http:/
    /www.litmus.com

    View Slide

  9. ... GetInbox (un français
    qui teste aussi sur des
    webmails français) ...
    http:/
    /www.getinbox.com

    View Slide

  10. ... et mon préféré, Email On
    Acid.
    http:/
    /emailonacid.com

    View Slide

  11. Avec une si grande variété de
    logiciels et d’appareils à
    supporter, ça donne un support de
    CSS très inégal. Par exemple,
    Gmail supprime toute balise
    ou toute CSS externe.<br/>http:/<br/>/<br/>www.campaignmonitor.com/css<br/>

    View Slide

  12. Du coup, l’intégration d’e-mails,
    c’est comme le tout premier
    intégrateur égyptien.
    * badumtss *

    View Slide

  13. La plupart du temps, votre code
    ressemble donc à de la soupe de
    tableaux.
    Et ça donne parfois lieu à des bugs
    assez particuliers...

    View Slide

  14. #01
    CODE À LA CON QUI DONNE ENVIE DE VOMIR
    Sur Outlook 2007 et 2010,
    un
    est inséré
    tous les 1800px environ.
    Découpez votre e-mail
    en plusieurs .
    À lire : http:/
    /www.emailonacid.com/blog/details/C13/horizontal_spacing_issues_in_outlook_2007_and_2010

    View Slide

  15. « Si tu vomis, vomis là dedans... »
    http:/
    /www.youtube.com/
    watch?v=3WrfLY0Z7Yo

    View Slide

  16. 3 types
    d’optimisations
    pour mobile
    Avec l’essor du mobile et de l’optimisation
    de sites pour mobile, c’est dans la logique
    des choses que de proposer à ses
    utilisateurs des e-mails adaptés.
    Voyons comment faire...

    View Slide

  17. Mobile friendly
    1.
    La première méthode
    consiste à faire du
    «mobile friendly», ou
    comme certains
    l’appellent, du...

    View Slide

  18. Mobile aware

    View Slide

  19. Mobile aware
    •Grands visuels
    •Grandes tailles de texte
    •Grandes zones cliquables
    Pour être aware, il faut
    prévoir tout en grand.

    View Slide

  20. Voici un exemple chez
    Threadless. Sur iPhone, l’e-
    mail est simplement mis à
    l’échelle et reste lisible et
    utilisable.
    Et la bonne nouvelle, c’est
    que...

    View Slide

  21. Rien à faire
    en intégration
    Mobile aware
    ... il n’y a rien à faire en
    intégration ! Le mobile
    friendly, c’est avant tout
    un travail de design.

    View Slide

  22. Responsive
    2.
    Maintenant voyons
    comment faire du
    «responsive» (mot un peu
    fourre-tout) dans un e-
    mail...

    View Slide

  23. Voici un exemple d’un tuto
    publié chez Net Magazine
    http:/
    /
    www.netmagazine.com/
    tutorials/build-
    responsive-emails

    View Slide

  24. Dans le code, ça donne
    quelque chose comme ça.
    Des td avec une classe,
    qu’on passe en display:block
    dans une media query.
    Vous remarquerez qu’on
    utilise pas de point pour une
    classe mais un sélecteur
    d’attributs...

    View Slide

  25. #02
    CODE À LA CON QUI DONNE ENVIE DE VOMIR
    Yahoo! Mail interprète
    toutes les règles CSS même
    dans une media query.
    .mobileBlock
    td[class="mobileBlock"]

    View Slide

  26. http:/
    /www.youtube.com/
    watch?v=SLXnBI4ykVs

    View Slide

  27. Responsive
    mais pas trop
    Certains e-mails adoptent
    une méthode que j’appelle du
    «responsive mais pas trop».

    View Slide

  28. Ici, l’e-mail est totalement différent
    en version desktop et mobile.

    View Slide

  29. Ça signifie que dans le code aussi, on a
    deux intégrations totalement
    différentes, qu’on affiche ou masque
    avec des styles et media query.
    C’est un peu bourrin comme technique,
    surtout si on s’y prend mal...

    View Slide

  30. En l’occurrence ici, l’e-mail était
    tronqué sur iOS car seul le début
    du mail (avec la version desktop
    masquée) était téléchargé.
    Pour éviter ça...

    View Slide

  31. #03
    CODE À LA CON QUI DONNE ENVIE DE VOMIR
    Sur iOS,
    le doit contenir
    au moins 1000 caractères
    pour qu’un e-mail soit
    téléchargé totalement.

    View Slide

  32. http:/
    /www.youtube.com/
    watch?v=PN0XRkSyhwM

    View Slide

  33. x
    Cette technique ne fonctionne pas
    sur Lotus Notes 6.5 et 7, ou sur
    Gmail sur Android 2 avec autre
    chose que des .
    Les deux versions seront alors
    affichées.

    View Slide

  34. x
    La technique présentée
    auparavant ne
    fonctionne pas non plus
    sur les apps tierces sur
    iOS (comme Sparrow ou
    Mailbox).

    View Slide

  35. ~
    Pour éviter ça, on peut utiliser
    des tableaux flottants. Ça
    marche bien sur iOS, mais ça
    peut causer des bugs étranges
    sur Outlook.

    View Slide

  36. #04
    CODE À LA CON QUI DONNE ENVIE DE VOMIR
    Outlook 2007, 2010 et
    2013 interprètent parfois
    mal les tableaux flottants.
    Vos tableaux peuvent alors se
    retrouver les uns en dessous
    des autres.

    View Slide

  37. CODE À LA CON QUI DONNE ENVIE DE VOMIR
    #04
    Pour corriger ça, il y a une
    manipulation claire à suivre en
    4 étapes...

    View Slide

  38. CODE À LA CON QUI DONNE ENVIE DE VOMIR
    #04
    1) Ajoutez un bgcolor sur chaque
    de vos tableaux flottants.

    View Slide

  39. View Slide

  40. CODE À LA CON QUI DONNE ENVIE DE VOMIR
    #04
    2) Ajoutez une bordure sur
    chaque tableau flottant.

    View Slide

  41. View Slide

  42. CODE À LA CON QUI DONNE ENVIE DE VOMIR
    #04
    3) Ajustez la taille de vos
    tableaux flottants

    View Slide

  43. View Slide

  44. CODE À LA CON QUI DONNE ENVIE DE VOMIR
    #04
    4) Ajoutez un paragraphe dans
    chaque premier td de vos
    tableaux flottants avec ces
    styles propriétaires.

    View Slide

  45. http:/
    /www.youtube.com/
    watch?v=4eYSpIz2FjU

    View Slide

  46. x
    CODE À LA CON QUI DONNE ENVIE DE VOMIR
    #04
    Tout ça c’est bien, mais ça
    ne marche pas sur Gmail
    puisque Gmail ne supporte
    pas de balise .<br/>

    View Slide

  47. Fluide
    3.
    Du coup, on va faire des
    e-mails fluides.

    View Slide

  48. Ici un exemple chez Peepcode. La
    bannière principale et le corps du
    texte sont fluides, mais le logo reste
    à la même taille.

    View Slide

  49. Dans le code, il suffit de jouer avec
    des tailles en pourcentage et des
    min-width / max-width bien placés.

    View Slide

  50. responsive
    aware fluide
    + +
    aware, responsive et fluide ne sont
    pas trois techniques distinctes,
    mais bien complémentaires.
    Pour arriver à faire des e-mails
    adaptés pour mobile, vous devrez
    jongler entre les trois.

    View Slide

  51. et après ?
    On n’est pas à l’abri de
    changement de la part des
    webmails et logiciels mails. Alors il
    est important de faire de la veille
    pour l’intégration d’e-mails.

    View Slide

  52. Par exemple, dans iOS7, la largeur
    d’affichage d’un e-mail est réduite.
    http:/
    /
    www.campaignmonitor.com/blog/
    post/4011/a-first-look-at-ios-7-
    mail-for-email-designers

    View Slide

  53. Gmail introduit des «Quick
    actions» pour faciliter les
    interactions de vos e-mails.
    https:/
    /litmus.com/blog/quick-
    actions-allow-gmail-users-to-
    convert-before-opening

    View Slide

  54. amusez-vous
    L’intégration d’e-mails est souvent
    perçue comme une tâche pénible et
    ingrate. Mais c’est en partie de
    notre faute à nous intégrateurs.
    Rendons ça plus amusant.

    View Slide

  55. Par exemple en travaillant sur
    l’affichage de nos e-mails sans les
    images (qui sont bloquées sur pas
    mal de logiciels et webmails).
    Ici un exemple chez Nintendo pour
    le jeu Lego City Undercover...

    View Slide

  56. ... et ici chez Sony pour un jeu
    Transformers.

    View Slide

  57. À défaut de rendre ça vraiment
    amusant, essayons au moins de
    rendre ça moins pénible. Dans ma
    boîte on développe nos propres
    outils pour gagner du temps et
    automatiser certaines tâches
    répétitives d’intégration d’e-mails.

    View Slide

  58. Soyez content de votre travail.
    Voire même hyper content.

    View Slide

  59. Rémi
    @HTeuMeuLeu
    [email protected]
    http://www.hteumeuleu.fr
    merci

    View Slide