Vous ne l’aviez sûrement pas remarqué, mais le thème de ce blog a été entièrement réécrit en HTML5. Le but de cette refonte n’était pas de revoir la charte graphique (qui me convient bien), mais de se livrer à un exercice de remise à niveau du code. J’ai donc demandé à mes anciens collègues de Mahi-Mahi (et notamment Alex) de se pencher sur la question et vous avez le résultat sous les yeux : un thème graphique identique au précédent, mais avec un temps de chargement divisé par deux (on passe d’une page d’accueil de 2 Mo à 880 Ko) et une mise en page en responsive design qui s’adapte automatiquement à l’écran du terminal que vous utilisez (cf. Le responsive design à l’assaut des terminaux mobiles).

Donc concrètement ce blog est beaucoup plus rapide à charger (moins de 7 secondes au lieu de 14), et sa mise en page s’adapte à la largeur de la fenêtre ou du terminal utilisé. Ici vous avez les deux versions smartphone et tablette :

Nous avons également travaillé sur une version « grand large » (notamment avec un test sur deux colonnes, mais qui n’était pas concluant) :

L’adaptation de la mise en page à la taille de la fenêtre est très ludique, mais je peux vous assurer que c’est un véritable casse-tête à faire fonctionner correctement.

Pour rentrer dans les détails, voici les tâches réalisées sur la structure HTML :

• Utilisation de HTML5 et des rôles ARIA (Passer son blog WordPress à la sémantique HTML5 et ARIA) ;
• Ajout de la microdata Article ;
• Utilisation des media queries pour adaptation aux différentes tailles d’écrans (avec une adaptation des déclarations du Less Framework) ;
• Adaptation des tailles de vidéo à la taille du contenu parent (la largeur des vidéos s’adapte en fonction de l’espace disponible dans la colonne de gauche du site grâce à FitVidsJS) ;
• Pour la gestion des images, il y a une détection des plateformes mobile (Android, iPhone, Windows 7 mobile…) pour retailler les images à 320 pixels de large (utilisation de Sencha IO, mais qui pouvait aussi être faite avec le plugin jQuery Doubletake) ;
• Création d’un media print pour l’impression de l’article ;
• Les dégradés et autres effets graphiques sont réalisés en CSS3 (Fading au chargement du logo et de la baseline sur la page d’accueil, légère animation sur les liens au survol de la souris ;
• Une seule image est utilisée (le logo), ce dernier est appelé en data-uri dans la feuille de style (aucun appel d’image du thème pour les navigateurs modernes) ;
• Création d’une webapp pour distribuer le blog sur le webstore de Chrome.

Voici également les travaux effectués sur la version mobile :

• La page d’accueil « version mobile » ne présente que l’excerpt des 10 derniers articles et non l’intégralité des 10 derniers articles (la page « normale » pèse 1,6 Mo alors que la page « mobile » pèse 158 Ko) ;
• Les liens vers les autres blogs en haut de page sont remplacés par un menu déroulant (Convert a Menu to a Dropdown for Small Screens) ;
• Utilisation du appcache permettant de consulter le blog en mode hors-ligne ;
• Gestion de l’orientation pour les tablettes (en mode portrait, le barre latérale passe sous la zone centrale) ;
• Masquage par défaut du moteur de recherche sur les smartphones ;

Concernant Internet Explorer, voici les astuces utilisées :

• Pour IE 10, utilisation basique des dégradés et media query ;
• Pour IE 9, reprise des linear brackground en filter et utilisation de Pinned Site ;
• Pour IE 8 et inférieur, Utilisation du respond.js pour assurer l’adaptation de la mise en page.

Vous remarquerez que la mise en page se dégrade de très belle manière dans IE 6 :

Comme vous pouvez le constater, le résultat est donc à la fois performant et robuste. Je tire donc mon chapeau à Alexandre qui s’est réellement arraché les cheveux pour me proposer les solutions les plus élégantes. Si vous souhaitez plus d’explications, vous pouvez directement lui poser des questions sur @BrettSinclair, sinon vous pouvez également consulter des ressources en ligne sur Mobile Boilerplate ou Stuff and Nonsense. Si vous avez des remarques sur les choix retenus pour cette refonte du code, n’hésitez pas à vous exprimer dans les commentaires, par contre soyez constructifs.

Encore bravo à l’équipe de Mahi-Mahi qui devrait dans les prochaines semaines s’attaquer également à la ré-écriture en HTML5 de RichCommerce.fr, un thème graphique plus complexe…

Communiquer auprès de ses clients c’est bien, mais communiquer efficacement c’est encore mieux.

Les emaillings marketing de fidélisation ou de conquêtes demeurent pour la plupart des fichiers HTML. Les envois de messages marketing en texte pur ou en multipart alternative (envoie HTML + txt) restent très peu utilisés. Pourtant, si vous désirez être certain de toucher chacun des destinataires, l’envoi en multipart alternative reste encore la meilleure solution : le webmail du destinataire affichera la version texte ou HTML selon les préférences de l’utilisateur.

Une communication par mail efficace, qui donnera des résultats taux d’ouverture + taux clic importants, doit passer par l’utilisation de certaines règles essentielles. La première étant la suivante : Plus vos créa. sont simple, plus vos chances d’être efficace / d’avoir des bons taux d’ouverture seront fortes.

Outre les règles marketing à connaître pour faire passer un message, la touche technique que vous allez employer reste l’opération la plus délicate mais aussi la plus importante.

Pour vos créations HTML, je recommande de créer des fichiers HTML simples démunis de code exotique afin qu’ils soient facilement lisibles par l’ensemble des webmails utilisés.

Évitez donc :

• les feuille de style (CSS), qui ne sont pas forcément interprétées par les webmail ;
• le flash, dont les balises peuvent être supprimées par certains webmail ;
• le javascript qui est purement banni des webmails ;
• les formulaires, dont les balises sont bannies pour cause de sécurité ;
• le XML ;
• les balises MAP sur vos images, dont l’utilisation doit être bannie tout simplement ;
• les balises HTML exotiques pas forcément reconnus par tous les navigateurs web les plus courants (blink, …) ;
• les underscore (_) dans la dénomination des répertoires, de la page HTML ou des fichiers d’images. Ces caractères posent encore des soucis chez certains webmails.

Enfin, vous savez que la plupart des clients de messagerie et webmails n’affichent pas les images d’un mail par défaut pour éviter les virus. Si vous envoyez un message HTML dont le corps est une image, vous aurez encore moins de chance de toucher le destinataire pour la raison citée précédemment. En revanche, si vous remplacez les images par du texte pur dans vos créa HTML, ou si vous placez un attribut « alt » dans vos balises « img », le message aura encore plus de chance d’être lu.

exemple email Ebay : avant l’affichage des images, aucun texte n’est disponible

exemple email MySpace : avant l’affichage des images, il est déjà possible de visualiser le texte.

Pour résumé, vos créations HTML peuvent rester sexy, mais doivent être simples tant par l’utilisation du code HTML que dans la façon de présenter le message. Préférez donc l’utilisation :

• des images pour « les visuels » ;
• des attributs « alt » dans vos balises « img » ;
• du texte pur pour tout l’ensemble des messages à faire passer ;
• des tableaux HTML pour la structure de la création.

La règle fonctionne également pour les pages HTML / XHMTL que vous concevez sur votre site web : plus vos créa seront simples, mieux elle fonctionneront dans le navigateur de votre lecteur.