Coder des emails HTML est nul. À une époque où nous sommes tellement enracinés dans les standards Web et la disposition basée sur CSS, remonter dans le temps et coder des mises en page basées sur des tables avec un style en ligne semble carrément fastidieux. En fait, il y a des tonnes de concepteurs de sites Web qui ne sont même pas présents depuis assez longtemps pour savoir comment coder de cette façon.
Aujourd'hui, nous allons jeter un coup d'œil sur un nouvel outil qui facilitera grandement la vie des concepteurs de courrier électronique HTML. Avec Mailrox, vous téléchargez votre dessin, le découpez et le transformez facilement en un courrier électronique HTML fonctionnel.
Rencontrez Mailrox
Mailrox promet un flux de travail simple: téléchargez un motif (jpg, gif ou png), définissez votre mise en page, ajoutez du texte et du code HTML personnalisé, puis exportez. Cela semble facile, non? Mais la création d’e-mails HTML peut-elle vraiment être un processus facile?
Je suis sceptique, alors nous allons faire un essai routier avec cette ventouse. Je vous guiderai tout au long du processus de création d'un concept, de son téléchargement sur le site et de sa conversion en un e-mail en direct.
Le gabarit
Afin de tester Mailrox, nous allons avoir besoin d'une conception de courrier électronique HTML. Je pourrais arrêter d'écrire et prendre le temps de créer le mien, mais je suis paresseux et il y a une tonne de modèles gratuits impressionnants en ligne, alors nous pourrions tout aussi bien en saisir un. Voici un tel modèle de PSD Freebies.
Étape 1. Créer un nouvel email
Mailrox est actuellement en version bêta, son utilisation est donc gratuite. Vous lancez dans votre email pour marquer une invitation, j'ai le mien dans les dix minutes, donc ça ne devrait pas prendre trop de temps pour que vous puissiez entrer.
Une fois que vous êtes tous inscrits, vous serez redirigé vers cette page:
Ils vous ont déjà donné un modèle à utiliser, mais nous voulons tout recommencer, alors appuyons sur le bouton "Créer un nouveau courrier électronique". ce qui nous donne un dialogue simple où nous pouvons télécharger notre jpg plat.
Suivi des progrès
Tout au long du processus, Mailrox vous aide à garder un œil sur vos progrès avec un petit graphique utile en haut à gauche de l'écran. J'adore quand les applications le font, cela me donne une idée claire de l'endroit où je suis allé et de celui où je vais, en plus de me permettre de cliquer rapidement et de sauter à différentes étapes.
Étape 2. Émincer
Une fois que nous avons téléchargé notre image, nous sommes dirigés vers l'écran ci-dessous. Nous voyons ici le fichier jpg téléchargé avec une simple bande d’outils et quelques astuces et conseils utiles pour bien démarrer.
Fondamentalement, votre ensemble d'outils et votre flux de travail sont entièrement centrés sur les outils de découpage. Il existe deux outils de découpage verticaux, deux outils de découpage horizontaux, un outil de déplacement de découpe et un outil de suppression de découpe.
Comme vous pouvez le constater, les outils de découpage en bleu sont «simples». et vert sont des outils "complexes". Ça a l'air bien, mais qu'est-ce que ça veut dire? Il n'y a vraiment rien qui vous en dit plus sur la façon dont ceux-ci fonctionnent. Après quelques expériences, il s'avère que les tranches bleues traversent toute la page et que les vertes sont conscientes et liées par d'autres tranches de la page.
"Les tranches bleues traversent toute la page et les vertes sont identifiées et liées par d'autres tranches de la page."Pour faire une tranche, il suffit de saisir un outil et de passer votre souris sur la toile. Un aperçu de la tranche apparaît, vous permettant de le positionner exactement où vous le souhaitez. Vous pouvez le coller en place avec un clic.
Cliquez Cliquez Cliquez
Vous avez l'idée ici. Continuez simplement à découper votre fichier, en prenant soin de bien découper chaque objet que vous aurez besoin de personnaliser de quelque manière que ce soit, en échangeant un graphique, en ajoutant du texte ou en ajoutant simplement un lien.
Dans l’ensemble, c’est en fait un processus assez rapide et facile. Si vous avez déjà découpé un fichier PSD dans Photoshop, vous vous sentirez comme à la maison.
Étape 3. Personnaliser le contenu
Pendant que vous découpiez votre conception, vous définissiez différents domaines de contenu à personnaliser. Au fur et à mesure que nous progressons vers le? Contenu? étape, chacun de ces domaines sera quelque chose que vous pouvez survoler et cliquez sur pour changer.
Par exemple, supposons que nous voulions conserver cette image principale, mais ajouter un lien pour que lorsque vous cliquez sur l'image, vous accédez à une URL spécifique. Pour ce faire, cliquez sur cette section, puis utilisez le petit formulaire pour ajouter votre lien.
Assez facile non? Passons à quelque chose d'un peu plus délicat où nous devons ajouter du code personnalisé.
Ajout de code personnalisé
Tout en haut de notre modèle de courrier électronique se trouve une barre qui informe le lecteur de la raison pour laquelle il reçoit le courrier électronique et les renvoie vers un site. De toute évidence, nous voudrons ajouter notre propre texte ici.
Le processus pour cela est où l’idée WYSIWYG tombe en panne. Vous voyez, Mailrox n'est pas conçu pour les non-codeurs. Si vous ne connaissez pas HTML et CSS de base, vous n'irez pas très loin.
? Mailrox n'est pas conçu pour les non-codeurs. Si vous ne connaissez pas HTML et CSS de base, vous n'irez pas très loin.Il a été conçu pour les concepteurs ayant une bonne compréhension du code Web de base et ne voulant tout simplement pas coder un courrier électronique, une bête très spécifique qui doit être correctement codée pour fonctionner correctement. Cela peut sembler une petite niche, mais je parie que cela décrit pas mal de concepteurs de sites Web. Moi y compris!
Lorsque je clique sur la partie supérieure de l'écran et que je choisis d'insérer du code HTML personnalisé, l'écran ci-dessous s'affiche. Le champ de texte est automatiquement entouré du code des tables et des cellules. Heureusement, nous n'avons donc jamais à nous soucier de cela. Au lieu de cela, nous devons insérer un paragraphe de texte et le style en ligne nécessaire pour que tout soit beau. Vous êtes complètement autonome pour cela, alors espérons que vous êtes à l'aise avec CSS.
Une fois que vous avez terminé, il vous suffit de répéter ce processus dans l’ensemble de votre modèle jusqu’à ce que tous les domaines de contenu aient été personnalisés à votre convenance.
Étape 4. Extras
Avant de conclure, il vaut la peine de regarder autour de vous les divers extras et goodies disponibles pour vous dans le? Contenu? section. En haut à droite de la fenêtre, vous devriez voir le jeu de boutons suivant:
Ici, vous pouvez visualiser un aperçu en direct de votre modèle codé terminé dans le navigateur ou même envoyer un e-mail de test pour voir à quoi il ressemble dans différents clients. Il existe également un bouton de téléchargement, dont nous parlerons dans la prochaine étape.
En regard de ces boutons, en haut à gauche de votre écran, se trouve la bande d’outils suivante:
Celles-ci vous permettent de personnaliser les caractéristiques de base de la page: couleur d'arrière-plan, marge supérieure et titre. Il existe également un lien vers un "rapport de compatibilité". C'est un petit outil fantastique qui vous permet de vous assurer que votre conception fonctionnera dans divers clients de messagerie.
Comme vous pouvez le constater, notre conception a réussi le test pour 19 clients de messagerie, notamment Apple Mail, Gmail et Yahoo. Nous avons toutefois échoué dans un domaine: Lotus Notes 6.5-7. Je ne suis même pas sûr de savoir ce que c'est ou si c'est important, mais Mailrox est là pour me tenir la main et m'aider à prendre une décision.
L'application m'informe que j'ai quelques minuscules cellules de tableau que Lotus Notes n'appréciera pas, mais que cela affectera probablement moins de 1% des utilisateurs de messagerie potentiels. Cela me semble acceptable, mais si je veux résoudre le problème, ils me donnent même des instructions pour corriger l’erreur.
Étape 5. Télécharger
Une fois que vous avez terminé, cliquez sur le bouton de téléchargement que nous avons vu auparavant pour afficher l'écran ci-dessous. Je félicite les développeurs pour ces trois options, car je pense qu'elles sont parfaites:
Ici, nous pouvons télécharger notre modèle afin qu’il soit optimisé spécifiquement pour Mailchimp ou Campaign Monitor. C’est formidable, car ces deux services sont extrêmement populaires et contiennent des extraits de code personnalisés très spécifiques qui sont nécessaires pour préparer un modèle pour leur service.
La troisième option est tout aussi cool. Si vous souhaitez simplement télécharger le code HTML simple et les images à télécharger sur votre serveur, l'application va y insérer et préfixer tous les liens d'image avec le chemin du répertoire dans lequel vous allez placer les images. C'est une option vraiment bien pensée et j'apprécie les efforts déployés ici.
Qu'est-ce que je pense?
Au début, j'étais sceptique à propos de cet outil, tout simplement parce que je suis un codeur qui préfère généralement construire des choses à la main et qui évite les WYSIWYG comme la peste. Cela étant dit, je déteste coder les courriels HTML. Ils sont vraiment pénibles et tout ce qui concerne le processus de mise en page se sent maladroit et faux si vous aimez la mise en page CSS autant que moi.
«Mailrox semble savoir exactement qui je suis et ce que je veux en tirer.Mailrox semble savoir exactement qui je suis et ce que je veux en tirer. Il sait que je peux découper un dessin avec très peu d'instructions et que je suis suffisamment compétent pour écrire mon propre code pour les différents morceaux de contenu. Plus important encore, il sait que, même si je peux faire tout cela, je ne veux pas me soucier de la disposition basée sur des tableaux et de la complexité de la compatibilité des courriers électroniques HTML.
Il se concentre spécifiquement sur les parties du processus de création de courrier électronique HTML qui sont les plus ennuyeuses et les gère pour moi. J'adore le fait que les développeurs soient suffisamment perspicaces pour réaliser un tel exploit et j'ai vraiment apprécié l'utilisation de l'application.
Je ne sais pas ce qu'ils vont demander après la version bêta, mais tant que c'est raisonnable, je me verrai certainement me tourner vers Mailrox la prochaine fois que je devrai coder un e-mail.
"Il se concentre spécifiquement sur les parties du processus de création de courrier électronique HTML qui sont les plus ennuyeuses et les gère pour moi."Comment le rendre meilleur
De toute évidence, je loue cet outil. C'est simple, facile à utiliser et semble cibler précisément mes talents et mes besoins. Cela étant dit, j'ai quelques plaintes que j'aimerais voir traitées dans les versions futures.
Donnez-moi un outil de zoom
La première plainte est l'inclusion d'un outil de zoom dans le flux de travail de découpage (ou s'il y en a déjà un que j'ai manqué, rendez-le plus évident). Vous essayez de placer ces tranches à des points très précis de la mise en page et je me suis souvent retrouvé face à l'écran en essayant de bien le faire.
Donnez-moi un outil de zoom
Ma deuxième plainte est que je dois utiliser Mailrox pour trancher du tout. Les outils de découpage de Photoshop sont plus robustes et les concepteurs les connaissent mieux. Alors, laissez-nous découper le document dans Photoshop, puis envoyez notre PSD pour passer directement à l'étape du contenu.
"Les outils de découpage de Photoshop sont plus robustes et les concepteurs les connaissent mieux, alors pourquoi ne pas découper le document dans Photoshop?"Une fonctionnalité de téléchargement PSD prédécoupée en ferait une application de choix, car la conversion de ma conception en un courrier électronique codé deviendrait un processus presque indolore pouvant être exécuté très rapidement. Les outils de découpage sur Mailrox sont corrects et devraient rester, mais ceux d’entre nous qui préfèrent Photoshop devraient avoir cette option.
Qu'est-ce que tu penses?
Maintenant que vous avez vu mon parcours et mes opinions sur Mailrox, il est temps pour vous de parler et de me dire ce que vous en pensez. Détestez-vous autant que moi le codage des emails HTML? Envisageriez-vous d'utiliser un outil tel que Mailrox pour faciliter le processus?
Si vous avez atteint la version bêta et eu l'occasion de tester Mailrox, laissez un commentaire ci-dessous et dites-moi ce que vous aimez et ce que vous changeriez.