html

  • Les caractères HTML

    La structure de base d'un document au format HTML

    Un exemple de document au format HTML

    Voici un descriptif des balises HTML de base qui structurent un document standardisé nommé page web...

    <html>  
    <head>
    <title> </title>
    </head>
    <body>
    <p>Votre contenu...<p>
    </body>
    </html>

    A NOTER : toutes les balises <> se referment avec un "/"


    !-- Le document HTML commence ici --!

    <html>

    On complète désormais cette première déclaration par la langue et son format générique qui est en html 5 :

    <html lang="fr">

    !-- Ici, une déclaration de titre pour la page --!

    <head> 
    <title>Votre titre de page ici</title>
    </head>

    On complète désormais cette première déclaration par le type d'encodage des caractères de la page qui est en utf-8 :

    <meta charset="utf-8">

    !-- Et le début du corps de la page --!

    <body>

    Tous les éléments constituant le contenu visible de la page se situent à l'intérieur de la balise <body> (le corps du document) : le texte, les images, les animations...


    !-- Pour insérer les titres, sous-titres... <H1>,<H2>,<H3>,<H4>,<H5>,<H6> --!

    <h1>niveau one header </h1>

    <h2>niveau two header </h2>

    <h3>niveau three header </h3>

    <h4>niveau four header </h4>

    <h5>niveau five header </h5>

    <h6>niveau six header </h6>

    <h1> et le plus grand format et <H6> le plus petit, ce qui donne ceci pour ce site :

    Premier niveau - l'en-tête

    Second niveau - Un sous-titre

    Troisième niveau - Une rubrique

    Quatrième niveau - Une sous-rubrique

    Cinquième niveau - Une section
    Sixième niveau - Une sous-section

    !-- Pour mettre du texte en gras --!

    un texte normal...

    <b>les balises requises</b>

    Voici le texte en gras

    Elle est de plus en plus substituée par la balise <strong> (fort) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement le terme au-delà de la mettre simplement en gras

    <strong>les balises requises</strong>

    !-- Pour mettre du texte en italique--!

    un texte normal...

    <i>les balises requises</i>

    Voici le texte en en italique

    Elle est de plus en plus substituée par la balise <em> (emphase) qui donnent le même résultat d'affichage mais permet de mettre en avant sémantiquement (avec emphase donc) le terme au-delà de la mettre simplement en italique

    <em>les balises requises</em>

    !-- Pour centrer le texte ou une image --!

    <center><h1>Le texte que vous souhaitez centrer</h1></center>

    Ce qui donne ceci :

    Le texte que vous souhaitez centrer



    !-- Insertion d'une image dans la page --!

    Ce qui donne ceci :

    <img src="/mon-logo.jpg">

    Mon logo

    Il est très conseillé de rajouter l'attribut "alt" qui permet d'afficher un texte alternatif pendant que votre image se charge lorsqu'elle est d'un poids important :

    <img src="/images/mon-logo.jpg" alt="Mon logo : Webmaster Bretagne" />


    !-- Pour ajouter un lien hypertexte--!

    <a href="/index.html">Retour à la page d'accueil</a>

    Ce qui donne ceci :

    Retour à la page d'accueil


    !-- Une ligne de séparation --!

    Pour faire des séparation entre vos paragraphes, vous pouvez utiliser le balise <HR> qui génère une ligne horizontale sur toute la largeur de la page. Attention, elle s'insère seul, sans balise de fermeture.

    <hr />

    Ce qui donne ceci :


    Vous pouvez l'agrémenter de divers attributs :

    <hr size=10 align=left noshade width=50%>

    Ce qui donne ceci :


     


    !-- Les listes à puce --!

    Vous pouvez créer des listes précédées de puce avec les balises <ul> et <li>.

    <ul>
    <li>Texte 1</li>
    <li>Texte 2</li>
    <li>Texte 3</li>
    </ul>  
    

    Ce qui donne ceci :

    • Texte 1
    • Texte 2
    • Texte 3

    !-- Listes numérotées --!

    Vous pouvez créer des listes numérotées avec les balises <ol> et <li>..

    <ol>
    <li>Texte 1</li>
    <li>Texte 2</li>
    <li>Texte 3</li>
    </ol>
    

    Ce qui donne ceci :

    1. Texte 1
    2. Texte 2
    3. Texte 3

    !-- A la fin de votre page, vous devez refermer les balises de pages --!

    </body>
    </html>


    Des infos complémentaires :

    Les différents codages des caractères html : ISO-8859-1 ou UTF-8 ?

    Allez plus loin :

    La liste complète des balises HTML5...


  • Les différents codages des caractères html : ISO-8859-1 ou UTF-8 ?

    Un nouveau langage pour une nouveau monde...

    Un exemple de document au format HTML

    Pour écrire une page web, plusieurs langages peuvent être utilisés mais le HTML reste fondamental car il est universel.

    Cependant, dans ses déclinaisons, sont formatage ou encodage, certaines tendances apparaissent et se confirment...

    Tel qu'il a été formalisé par le W3C, le HTML ne sert pas à décrire le rendu final des pages web.
    En particulier, contrairement à la publication assistée par ordinateur, HTML n'est pas conçu pour
    spécifier l'apparence visuelle exacte des documents. HTML est plutôt conçu pour donner du sens aux différentes parties du texte : titre, liste, passage important, citation, etc.

    Article de "HTML" (Hypertext_Markup_Language) Wikipedia


    Les différents codages des caractères HTML : ISO-8859-1 ou UTF-8 ?

    Le codage de la page est déclaré dans l'en-tête de la page, dans le "code source", en bonne place dans les "balises méta".

    Cette déclaration va régir le comportement du navigateur pour la lecture des pages et notamment pour l'affichage des tables de caractères.

    Auparavant, le plus courant, celui déclaré par défaut dans le célèbre Dreamweaver® par exemple, était l'ISO ISO-8859-1 qui intègre l'essentiel des caractères "latins" mais aussi cyrilliques, orientaux, arabes...

    Aujourd'hui, c'est l'UTF-8 qui s'est généralisé... pour sa souplesse et sa transparence.


    1 - LES BASES

    Exemple de page ISO

    Texte

    Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

    Codage ISO-8859-1

    G&eacute;n&eacute;ralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a &eacute;t&eacute; modifi&eacute;), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'op&eacute;rateur sait au premier coup d'&oelig;il que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas d&eacute;rang&eacute;e par le contenu, il demeure concentr&eacute; seulement sur l'aspect graphique.
     

     

    On remarque que certains caractères sont codés (commençant par un "&"), ce sont typiquement les caractères accentués.

    Exemples de caractères accentués

    Texte

    & é à ç " Ê â ù

    Codage ISO-8859-1

    &amp; &eacute; &agrave; &ccedil; &quot;& Ecirc;& acirc;& ugrave;
     

    Exemple de page UTF-8

    Texte

    Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.

    Codage UTF-8

    Généralement, on utilise un texte en faux latin (le texte ne veut rien dire, il a été modifié), le Lorem ipsum ou Lipsum qui permet donc de faire office de texte d'attente. L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'œil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
     

     

    Eh hop, pas de différence ! Vous pourrez le vérifier dans le code source de cette page. Mine de rien, ce choix de l'utilisation de l'UTF-8 se révèle très pratique, par sa simplicité et son évidence.

    C'est aujourd'hui devenu la norme...

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">


    2 - LES USAGES

    Sachez que depuis plusieurs années, le format UTF-8 prend l'avantage... et cela tombe bien car il ne nécessite aucun codage spécifique.

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    Exemples de caractères accentués

    Texte

    &éàç"Êâù

    Codage UTF-8

    &éàç"Êâù
     

     

      espace Alt+ 0160 &#160; &nbsp; Espace insécable
      ¡ Alt+ 0161 &#161; &iexcl; Exclamation inversée
      ¢ Alt+ 0162 &#162; &cent; Symbole centime
      £ Alt+ 0163 &#163; &pound; Symbole livre
      ¤ Alt+ 0164 &#164; &curren; Symbole monétaire
      ¥ Alt+ 0165 &#165; &yen; Signe Yen
      ¦ Alt+ 0166 &#166; &brvbar; ou &brkbar; Barre verticale interrompue
      § Alt+ 0167 &#167; &sect; Signe section
      ¨ Alt+ 0168 &#168; &uml; ou &die; Tréma
      © Alt+ 0169 &#169; &copy; Copyright
      ª Alt+ 0170 &#170; &ordf; Ordinal féminin
      « Alt+ 0171 &#171; &laquo; Chevron gauche ou guillemet gauche
      ¬ Alt+ 0172 &#172; &not; Signe non
      ­ Alt+ 0173 &#173; &shy; Tiret conditionnel
      ® Alt+ 0174 &#174; &reg; Marque déposée
      ¯ Alt+ 0175 &#175; &macr; ou &hibar; Macron
      ° Alt+ 0176 &#176; &deg; Signe degrés
      ± Alt+ 0177 &#177; &plusmn; Plus ou moins
      ² Alt+ 0178 &#178; &sup2; Deux exposant
      ³ Alt+ 0179 &#179; &sup3; Trois exposant
      ´ Alt+ 0180 &#180; &acute; Accent aigu
      µ Alt+ 0181 &#181; &micro; Signe micro
      Alt+ 0182 &#182; &para; Signe paragraphe
      · Alt+ 0183 &#183; &middot; Point milieu
      ¸ Alt+ 0184 &#184; &cedil; Cédille
      ¹ Alt+ 0185 &#185; &sup1; Un exposant
      º Alt+ 0186 &#186; &ordm; Ordinal masculin
      » Alt+ 0187 &#187; &raquo; Chevron droit ou guillemet droit
      ¼ Alt+ 0188 &#188; &frac14; Fraction un quart
      ½ Alt+ 0189 &#189; &frac12; Fraction un demi
      ¾ Alt+ 0190 &#190; &frac34; Fraction trois-quarts
      ¿ Alt+ 0191 &#191; &iquest; Point d'interrogation inversé
      À Alt+ 0192 &#192; &Agrave; A accent grave majuscule
      Á Alt+ 0193 &#193; &Aacute; A accent aigu majuscule
      Â Alt+ 0194 &#194; &Acirc; A accent circonflexe majuscule
      Ã Alt+ 0195 &#195; &Atilde; A tilde majuscule
      Ä Alt+ 0196 &#196; &Auml; A tréma majuscule
      Å Alt+ 0197 &#197; &Aring; A anneau majuscule
      Æ Alt+ 0198 &#198; &AElig; AE majuscule (digramme soudé ae, lettre)
      Ç Alt+ 0199 &#199; &Ccedil; C cédille majuscule
      È Alt+ 0200 &#200; &Egrave; E accent grave majuscule
      É Alt+ 0201 &#201; &Eacute; E accent aigu majuscule
      Ê Alt+ 0202 &#202; &Ecirc; E accent circonflexe majuscule
      Ë Alt+ 0203 &#203; &Euml; E tréma majuscule
      Ì Alt+ 0204 &#204; &Igrave; I accent grave majuscule
      Í Alt+ 0205 &#205; &Iacute; I accent aigu majuscule
      Î Alt+ 0206 &#206; &Icirc; I accent circonflexe majuscule
      Ï Alt+ 0207 &#207; &Iuml; I tréma majuscule
      Ð Alt+ 0208 &#208; &ETH; ou &Dstrok; Eth islandais
      Ñ Alt+ 0209 &#209; &Ntilde; N tilde majuscule
      Ò Alt+ 0210 &#210; &Ograve; O accent grave majuscule
      Ó Alt+ 0211 &#211; &Oacute; O accent aigu majuscule
      Ô Alt+ 0212 &#212; &Ocirc; O accent circonflexe majuscule
      Õ Alt+ 0213 &#213; &Otilde; O tilde majuscule
      Ö Alt+ 0214 &#214; &Ouml; O tréma majuscule
      × Alt+ 0215 &#215; &times; Signe infini
      Ø Alt+ 0216 &#216; &Oslash; O barré majuscule
      Ù Alt+ 0217 &#217; &Ugrave; U accent grave majuscule
      Ú Alt+ 0218 &#218; &Uacute; U accent aigu majuscule
      Û Alt+ 0219 &#219; &Ucirc; U accent circonflexe majuscule
      Ü Alt+ 0220 &#220; &Uuml; U tréma majuscule
      Ý Alt+ 0221 &#221; &Yacute; Y accent aigu majuscule
      Þ Alt+ 0222 &#222; &THORN; Thorn islandais majuscule
      ß Alt+ 0223 &#223; &szlig; s dur allemand (szet)
      à Alt+ 0224 &#224; &agrave; a accent grave minuscule
      á Alt+ 0225 &#225; &aacute; a accent aigu minuscule
      â Alt+ 0226 &#226; &acirc; a accent circonflexe minuscule
      ã Alt+ 0227 &#227; &atilde; a tilde minuscule
      ä Alt+ 0228 &#228; &auml; a tréma minuscule
      å Alt+ 0229 &#229; &aring; a rond minuscule
      æ Alt+ 0230 &#230; &aelig; e dans l'a minuscule
      ç Alt+ 0231 &#231; &ccedil; c cédille minuscule
      è Alt+ 0232 &#232; &egrave; e accent grave minuscule
      é Alt+ 0233 &#233; &eacute; e accent aigu minuscule
      ê Alt+ 0234 &#234; &ecirc; e accent circonflexe minuscule
      ë Alt+ 0235 &#235; &euml; e tréma minuscule
      ì Alt+ 0236 &#236; &igrave; i accent grave minuscule
      í Alt+ 0237 &#237; &iacute; i accent aigu minuscule
      î Alt+ 0238 &#238; &icirc; i accent circonflexe minuscule
      ï Alt+ 0239 &#239; &iuml; i tréma minuscule
      ð Alt+ 0240 &#240; &eth; eth islandais minuscule
      ñ Alt+ 0241 &#241; &ntilde; n tilde minuscule
      ò Alt+ 0242 &#242; &ograve; o accent grave minuscule
      ó Alt+ 0243 &#243; &oacute; o accent aigu minuscule
      ô Alt+ 0244 &#244; &ocirc; o accent circonflexe minuscule
      õ Alt+ 0245 &#245; &otilde; o tilde minuscule
      ö Alt+ 0246 &#246; &ouml; o tréma minuscule
      ÷ Alt+ 0247 &#247; &divide; Signe division
      ø Alt+ 0248 &#248; &oslash; o barré minuscule
      ù Alt+ 0249 &#249; &ugrave; u accent grave minuscule
      ú Alt+ 0250 &#250; &uacute; u accent aigu minuscule
      û Alt+ 0251 &#251; &ucirc; u accent circonflexe minuscule
      ü Alt+ 0252 &#252; &uuml; u tréma minuscule
      ý Alt+ 0253 &#253; &yacute; y accent aigu minuscule
      þ Alt+ 0254 &#254; &thorn; Thorn islandais minuscule
      ÿ Alt+ 0255 &#255; &yuml; y tréma minuscule
        &#8471;   Copyright des enregistrements sonores
               
      ! Alt+ 033 &#33;    
      " Alt+ 034 &#34; &quot; Guillemet double
      # Alt+ 035 &#35;   # (carré ou dièse)
      $ Alt+ 036 &#36;   symbole Dollar
      % Alt+ 037 &#37;    
      & Alt+ 038 &#38; &amp; Et commercial
      ' Alt+ 039 &#39;    
      ( Alt+ 040 &#40;    
      ) Alt+ 041 &#41;    
      * Alt+ 042 &#42;    
      + Alt+ 043 &#43;    
      , Alt+ 044 &#44;    
      - Alt+ 045 &#45;    
      . Alt+ 046 &#46;    
      / Alt+ 047 &#47;   / (barre oblique) ou "slash"
      0 Alt+ 048 &#48;    
      1 Alt+ 049 &#49;    
      2 Alt+ 050 &#50;    
      3 Alt+ 051 &#51;    
      4 Alt+ 052 &#52;    
      5 Alt+ 053 &#53;    
      6 Alt+ 054 &#54;    
      7 Alt+ 055 &#55;    
      8 Alt+ 056 &#56;    
      9 Alt+ 057 &#57;    
      : Alt+ 058 &#58;   Deux points
      ; Alt+ 059 &#59;   Virgule
      < Alt+ 060 &#60; &lt; Signe "inférieur à"
      = Alt+ 061 &#61;   Signe "égal"
      > Alt+ 062 &#62; &gt; Supérieur à
      ? Alt+ 063 &#63;   Point d'interrogation
      @ Alt+ 064 &#64;   "a" commercial ou "arobase"
      A Alt+ 065 &#65;    
      B Alt+ 066 &#66;    
      C Alt+ 067 &#67;    
      D Alt+ 068 &#68;    
      E Alt+ 069 &#69;    
      F Alt+ 070 &#70;    
      G Alt+ 071 &#71;    
      H Alt+ 072 &#72;    
      I Alt+ 073 &#73;    
      J Alt+ 074 &#74;    
      K Alt+ 075 &#75;    
      L Alt+ 076 &#76;    
      M Alt+ 077 &#77;    
      N Alt+ 078 &#78;    
      O Alt+ 079 &#79;    
      P Alt+ 080 &#80;    
      Q Alt+ 081 &#81;    
      R Alt+ 082 &#82;    
      S Alt+ 083 &#83;    
      T Alt+ 084 &#84;    
      U Alt+ 085 &#85;    
      V Alt+ 086 &#86;    
      W Alt+ 087 &#87;    
      X Alt+ 088 &#88;    
      Y Alt+ 089 &#89;    
      Z Alt+ 090 &#90;    
      [ Alt+ 091 &#91;   Crochet fermant
      \ Alt+ 092 &#92;   \ (barre oblique inversée)
    ou "anti-slash"
      ] Alt+ 093 &#93;   Crochet fermant
      ^ Alt+ 094 &#94;   Accent circonflexe
      _ Alt+ 095 &#95;   Tiret (signe "moins")
      ` Alt+ 096 &#96;    
      a Alt+ 097 &#97;    
      b Alt+ 098 &#98;    
      c Alt+ 099 &#99;    
      d Alt+ 100 &#100;    
      e Alt+ 101 &#101;    
      f Alt+ 102 &#102;    
      g Alt+ 103 &#103;    
      h Alt+ 104 &#104;    
      i Alt+ 105 &#105;    
      j Alt+ 106 &#106;    
      k Alt+ 107 &#107;    
      l Alt+ 108 &#108;    
      m Alt+ 0109 &#109;    
      n Alt+ 0110 &#110;    
      o Alt+ 0111 &#111;    
      p Alt+ 0112 &#112;    
      q Alt+ 0113 &#113;    
      r Alt+ 0114 &#114;    
      s Alt+ 0115 &#115;    
      t Alt+ 0116 &#116;    
      u Alt+ 0117 &#117;    
      v Alt+ 0118 &#118;    
      w Alt+ 0119 &#119;    
      x Alt+ 0120 &#120;    
      y Alt+ 0121 &#121;    
      z Alt+ 0122 &#122;    
      { Alt+ 0123 &#123;   Parenthèse ouvrante
      | Alt+ 0124 &#124;   Barre droite
      } Alt+ 0125 &#125;   Parenthèse fermante
      ~ Alt+ 0126 &#126;   ~ (tilde)
       Alt+ 0127      
      Alt+ 0128 &#128; ou &#8364; &euro; Symbole Euro
       Alt+ 0129      
      Alt+ 0130 &#130;   Apostrophe
      ƒ Alt+ 0131 &#131;    
      " Alt+ 0132 &#132;   Guillemet fermant
      Alt+ 0133 &#133;   Trois petits points
      Alt+ 0134 &#134;   Signe de croix
      Alt+ 0135 &#135;    
      ˆ Alt+ 0136 &#136;    
      Alt+ 0137 &#137;    
      Š Alt+ 0138 &#138;    
      Alt+ 0139 &#139; &lt;  
      Œ Alt+ 0140 &#140;    
      Ž Alt+ 0142 &#142;    
      Ž Alt+ 0142 &#142;    
       Alt+ 0143      
       Alt+ 0144      
      ' Alt+ 0145 &#145; &nbsp;  
      ' Alt+ 0146 &#146; !  
      " Alt+ 0147 &#147;    
      " Alt+ 0148 &#148;    
      Alt+ 0149 &#149;    
      Alt+ 0150 &#150;    
      Alt+ 0151 &#151;    
      ˜ Alt+ 0152 &#152;    
      Alt+ 0153 &#153;   Marque déposée
      š Alt+ 0154 &#154;    
      Alt+ 0155 &#155; &gt;  
      œ Alt+ 0156 &#156; &oelig;  
       Alt+ 0157      
      ž Alt+ 0158 &#158;    

     


    En savoir plus :

    L'article de Wikipedia : "HTML" (Hypertext_Markup_Language)

    Sur le site d'Alsacreations.com : Comment bien déclarer l'encodage des caractères d'une page ?

    Et d'autres ressources :

    Les caractères HTML

    La table complète des caractères ASCII

    Un convertisseur universel en ligne


  • Les emails responsive

    Mettre en œuvre et exercices pratiques

    On se posait la question depuis quelques temps mais là c'est fait : je fais des emails responsive ! Ah bon ! Mais comment ?

    Avec les Media Queries !...


    Depuis 2014, on y est...

    Avec désormais l'utilisation massive du téléphone portable pour surfer sur le web et donc sur sa messagerie - hors appli spécifique bien sûr - la question du changement de méthode quant à la réalisation technique de vos messages - comme décrite largement si-dessus - se pose désormais sérieusement.

    Aujourd'hui, plus que jamais, la campagne de mailing reste une approche marketing efficace et rentable si bien sûr on sait la maîtriser. Sur une période de six mois en 2012, Litmus a rapporté une augmentation de 80% d'ouverture de courrier électronique sur des appareils mobiles. Cette même année, Campaign Monitor a révélé que, pour la première fois, leur taux d'ouverture de la messagerie mobile a même dépassé ceux sur desktop et webmail. 30,4 millions de Français ont un smartphone et on considère qu'ils sont près de 40% à consulter leur mails sur leur mobile. En 2016, cette tendance s'est largement confirmée (Lire l'article de du Blog du Modérateur)... Cela pour vous convaincre de la nécessité de réaliser des message qui passent sur ce support très contraignant du fait de la petite taille des écrans de smartphone même si leur taille a tendance à augmenter...

    Au-delà de son aspect commercial, nous devons aussi réfléchir maintenant que le marché et le terrain sont mûrs aux nouvelles possibilités techniques que l'on peut mettre en œuvre sans risque de se tromper et bien sûr en se lançant dans la création de mail au format vraiment "responsive". Plusieurs solutions s'offrent à nous, dans des perspective bien balisées, valident aussi bien pour desktop, tablette ou mobile, même si, finalement, mais c'est une tendance générale, la fantaisie graphique devient inutile voire dangereuse (cf. la percée du "flatdesign" dans le webdesign mais aussi les interfaces graphiques des systèmes Apple et Windows).

    On sait qu'il est désagréable de regarder un page web "à largeur fixe" sur son écran de portable, même si l'on peut zoomer facilement sur son contenu, la navigation et la bonne lecture du contenu deviennent hasardeuses. En cause, la navigation avec ses doigts (le "multi-touch") et non plus avec une souris :

    Un message non-responsive de taille et largeur fixe

    Voici donc ce que l'on peut faire en reprenant l'exemple de l'excellent article de Jack Filose...

    La conception d'un email responsive est toujours une affaire de compromis.

    Jack Filose


    Le contenus

    Alors, comment obtenir le meilleure résultat, soit, en réalité, le meilleur compromis entre mail "à l'ancienne" et mail "new-look" ?

    En gros, il faut se débarrasser de l'épineuse question de la taille de l'écran de consultation du message et revenir à l'essentiel.

    Pour cela :

    1. Un contenu qui se déroule sur une seule colonne suffit, et une largeur de 640px (un peu moins, c'est encore mieux...), permettent de bien présenter le sujet...
    2. Un objet de mail accrocheur, bien évidemment, mais qui ne fait pas plus de 50 caractères pour éviter qu'il ne s'affiche sur plusieurs lignes une fois reçu...
    3. Des zones sensibles (boutons, pictos, vignette... qui renvoient vers une page extérieure) d'une taille minimale de 44x44px/pt pour que justement le doigt puisse bien le viser et cliquer dessus facilement...
    4. Une taille de police de caractère assez grande pour une lecture confortable (en police standard, non-exotique, "3" en html simple - font-size - ou 14-16- voire 18px/pt - en CSS - qui correspondent à une taille moyenne... 12px/pt étant vraiment la valeur minimale)
    5. Conserver un alignement du texte justifié à gauche... Sur un grand écran, cela ne semble pas être une évidence, mais sur un mobile...
    6. Hiérarchiser vos contenus et faire apparaître la(es) zone(s) importante(s), celle qui invite à l'action (et donc un clic sur un lien ou un bouton), le plus haut possible dans le corps du message pour qu'il soit rapidement visible et surtout compris par votre lecteur...
    7. Soignez vos visuels, surtout si finalement vous n'en mettez qu'un seul... La plupart du temps, les images ne s'affichent pas pour limiter le débit requis... Renseigner vos attributs "Alt" de manière précise et significative, quitte à reprendre une partie de votre argumentaire ("Votre voyage en Amérique grâce à ma compagnie" sur une photo de New-York... "Des économies importantes avec notre nouveau programme..." pour une photo de tirelire...). Pour votre logotype, éviter bien sûr de l'insérer dans une image globale qui ferait toute la largeur de votre en-tête...

    La mis en forme

    Comme on l'a vu, les mailers (logiciels de messagerie comme Outlook ou Thunderbird) et les webmail (Gmail, Yahoo!) ne respectent pas aussi bien les standards que les navigateurs web. D'ailleurs, il n'y a pas beaucoup de normes et encore moins d'accord sur leur mise en œuvre... C'est pour cela que l'on va devoir quand même utiliser les vieilles méthodes tout en rajoutant quelques nouvelles...

    Le Doctype de votre message HTML

    L'astuce consiste à tester votre message avec et sans DocType. Le "Doctype" est la description normalisée de votre fichier html, et donc cela indique au navigateur comment il doit le lire pour qu'il soit bien affiché sur votre écran (aussi le texte que les contenus enrichis...) :

    En Html 4 :

    <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    En Html 5 :

    <!doctype html>

    Par exemple, Outlook et Gmail vont automatiquement remplacer votre Doctype Transitional comme celui ci-dessus en un doctype Strict. Ce n'est pas anodin... Cela peut compromettre votre mise en page initiale... Dans ce cas, tester votre message avec puis sans DocType pour voir si votre construction n'est pas abusivement dégradée...

    Encodez vos caractères en entités HTML

    En conséquence de ce que nous venons de voir, il faut bien comprendre que le type de contenu sera souvent ignoré, il est donc conseillé de coder tous les caractères spéciaux dans votre e-mail comme des entités HTML. "é" › "&eacute;" "à" › " &agrave;"...

    Utiliser les Media queries

    Les Media queries issus des nouvelles propriétés du CSS 3 couplées au HTML 5 (mais elles marchent aussi avec le HTML 4) vous permettent de mieux gérer l'affichage de vos contenus en fonction des propriétés "physiques" des supports de visualisation : un écran de mobile offre une surface très restreinte par rapport à un écran 21 pouces... Grâce à eux, vous gérer avec souplesse la manière de faire apparaître vos contenus : une image d'en-tête de grand format sur un desktop devient une vignette sur un mobile... voire disparaît directement du champ d'affichage ! Tout cela repose sur différentes propriétés CSS qui ne s'affichent que selon des plages définies par vos Media queries... Bon, cela, on commence bien l'utiliser car on en comprend l'utilité...

    Seconde chose : il faut mettre en place deux niveaux de déclaration pour les styles CSS employés : dans l'en-tête mais aussi "inline" dans le corps même du fichier html... L'un répondant à l'autre... Attention, c'est une méthode mais ce n'est pas la seule possible.

    Et voilà donc une grande partie de la recette magique !

    <head>
    <meta name="viewport" content="width=device-width, initial scale=1.0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Et les mails "responsive" ?</title>
    <style type="text/css">
    .ExternalClass {width:100%;}
    img {display: block;}

    </style>

    Une fois ces déclarations insérées en en-tête de votre page (à l'intérieur de la balise head) vous pouvez aller plus loin en choisissant le niveau de spécificité que vous souhaitez délivrer à chaque matériel... En gros :

    Grand écran : on affiche tout plein pot !
    Petit écran : on ne garde que l'essentiel de l'essentiel

    La version vue sur un desktop


    La version mail vue sur un desktop

    La version vue sur un mobile


    La version mail vue sur un mobile

     

     

    Ici, dans cet exemple simple, nous allons en utiliser seulement un seul, sachant que la plupart des matériels offrent la possibilité de visualiser des contenus de 600px de large maximum, aussi bien mobile (tenu horizontalement), écran tactile et bien sûr ordinateur portable et de bureau.

    @media only screen and (max-width: 600px)
    {
    table[class="hide"], img[class="hide"], td[class="hide"]
    {
    display:none!important;
    }
    }

    Ici, nous demandons à ce que quelques éléments soient cachés si le support d'affichage - la largeur de l'écran - est inférieure à 600px : "display: none"... On y rajoute la déclaration "!important;" pour forcer - en quelque sorte - la bonne prise en compte de l'application de ce style (sauf notamment pour Gmail qui ne prend pas en compte les styles CSS déclaré en en-tête... mais bon, ça passe quand même !).

    On ajoute alors par exemple :

    @media only screen and (max-width: 600px)
    {
    table[class="content_wrap"]
    {
    width: 94%!important;
    }
    }

    On peut alors manipuler à sa guise les propriétés des différents éléments comme ici ou l'on demande d'afficher le contenu dans un tableau qui s'étendra sur 94% de l'espace d'affichage de l'écran utilisé...

    Pour le dire simplement, le mail garde une structure html simple (tableaux, caractère en italique, caractère diacritique encodé, largeur des tableaux en taille fixe déclarée en pixels... lorsque qu'il est visualisé sur un grand écran... et bascule vers un affichage spécifique via le déclenchement du Media Queries lorsque la taille d'affichage de l'écran est inférieur à 600px, et c'est donc le CSS qui prend ici le relais pour gérer l'affichage adéquat.

    Évidemment, ce n'est pas une solution idéale mais c'est quand même une solution qui marche et qui est suffisante pour la majorité des besoins du moment. Il s'agit ici de techniques de pointe mais qui sont bien prise en compte par la majorité des usages actuels.

    Nous utilisons les demandes des médias de la même manière que nous lors de la construction d'un site Web; si la taille de la fenêtre est dans les limites fixées dans la requête de médias puis appliquer ce style.


    Et un peu de fantaisie...

    Cette fantaisie, c'est un beau bouton CSS qui invite à cliquer dessus... mais ce n'est pas que de la fantaisie...

    Cela peut paraître anodin, mais en réalité cela va grandement améliorer l'ergonomie du message...

    Dans la version normale, large, on a un lien simple... Comme pour une page web, la lecture de l'article conduit naturellement vers ce lien...

    Dans la version minimal, ce n'est pas la même chose : le lien devient central et c'est l'occasion de le mettre en valeur pour le rendre plus... sexy !

    Des boutons qui s'adaptent au support de visualisation...

    On passe le texte en majuscule, on l'englobe dans le bouton et il devient plus lisible...

    Dans cet exemple, nous avons donc la déclaration en ligne :

    <a href="#" class="button" style="color:#2e7ea6;font-size:18px;line-height:22px;">Lire la suite...</a>

    et le formatage CSS dans la balise style qui se trouve dans le <head> du fichier :

    a[class="button"]
    {
    border-radius:2px;
    -moz-border-radius:2px;
    -webkitborder-radius:2px;
    background-color:#2e7ea6;
    color:#fff!important;
    padding: 5px;
    display:block;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0 0 10px 0;

    }

    NB : on utilise bien du CSS et non pas des images pour traiter l'aspect graphique de ce bouton...


    Pour conclure, temporairement...

    Nous sommes donc prêt à créer des emails responsive.

    Ici, nous avons choisi une solution mais il y en a bien d'autres. Cependant, nous devons garder en tête un principe de précaution et limiter la complexité des entités utilisées pour ne pas échouer lamentablement (comme c'est le cas ici pour un Blackberry... eh oui !)

    Les bonnes pratiques

    Avant de commencer à créer votre mailing et d'écrire une seule ligne de code, focalisez vous sur le fait que les personnes qui consulterons votre message le ferons sur un mobile : cela vous amènera à aller à l'essentiel.

    • Des contenus concis : la taille des petits écrans signifient qu'il est important de capter l'attention de votre lecteur le plus rapidement possible.
    • Une seule colonne pour la mise en page vous amène une présentation simple et claire. Cette colonne de devra pas faire plus de 640px de large ce qui est déjà pas mal. Sur un écran à la résolution plus petite, l'apparence de votre message ne sera pas trop dégradé. Une seule colonne garantit surtout qu'aucun contenu ne sera partiellement masquée.
    • Un slogan engageant : ceci est l'une des armes les plus efficaces pour attirer l'attention dans une boîte de réception souvent chargée. Soyez bref et accrocheur.
    • L'appel à l'action (Call-To-Action) : ne pas punir les gros doigts en créant des boutons cliquables d'au moins 60 × 40 pixels.
    • Une tailles de police généreuse : assurez-vous que le texte de votre message peut être lu facilement.
    • Message d'en-tête : créez une version alternative en ligne de votre message et indiquez clairement en haut de votre page « Visualisez ce message dans votre navigateur ».
    • Du texte aligné à gauche : il y a de bonnes raisons pour aligner des éléments importants sur le côté gauche de votre message. Le parcours des yeux qui examine votre message commence naturellement en haut à gauche (pour les utilisateurs occidentaux).
    • Utiliser de belles images : une seule photo peut suffire pour accrocher votre lecteur (s'il s'agit d'un produit par exemple) mais pensez aussi que les images ne seront pas directement affichées et penser à renseigner une balise alt.

    › Accédez à un exemple : un email responsive

    › Téléchargez l'exemple au format ZIP ZIP

    Si vous ne vous sentez pas encore prêt à créer vos propres gabarits de mail responsive, sachez que la plupart des prestataires qui assurent la gestion de campagne de mailing comme Emailstrategie ou Mailchimp proposent des gabarit de page prêts à l"emploi voir même directement modifiable via des techniques de drag-and-drop qui rendent la création de vos message simple et même ludique...


    Et des infos supplémentaires :

    Quelques conseils repris plus longuement dans cet article (.en) : Comment concevoir un e-mail HTML responsive

    Une liste de ressources incontournables (.en) : http://responsiveemailresources.com

    Quelques informations essentielles sur le responsive design (.fr) : 10 petits conseils pour le responsive web design

    Et, ce qui arrive... sur le blog d'Envato (.en) : "The Future of Email Marketing"

    L'article Réussir une campagne de mailing...

    Erwan Corre - Octobre 2015


En poursuivant votre navigation sur le site, vous acceptez l'utilisation des cookies...