Das Kodieren von HTML-E-Mails ist scheiße. In einer Zeit, in der wir uns mit Webstandards und CSS-basierten Layouts so tief verwurzelt haben, fühlt sich das Springen in der Zeit und das Codieren von Tabellenlayouts mit Inline-Styling geradezu icky an. In der Tat gibt es unzählige Webdesigner, die noch nicht lange genug herumgekommen sind, um sich mit dem Code auf diese Weise vertraut zu machen.
Heute werfen wir einen Blick auf ein neues Tool, das HTML-E-Mail-Designern das Leben erleichtern soll. Mit Mailrox laden Sie Ihr Design hoch, schneiden es in mehrere Teile und wandeln es leicht in eine funktionierende HTML-E-Mail um.
Treffen Sie Mailrox
Mailrox verspricht einen einfachen Workflow: Laden Sie ein Design hoch (jpg, gif oder png), definieren Sie Ihr Layout, fügen Sie Text und benutzerdefiniertes HTML hinzu und exportieren Sie. Klingt einfach richtig? Aber kann das Erstellen von HTML-E-Mails wirklich ein einfacher Prozess sein?
Ich bin skeptisch, also geben wir diesem Sauger heute eine Probefahrt. Ich begleite Sie durch den gesamten Prozess, indem Sie mit einem Design beginnen, es auf die Website hochladen und es in eine Live-E-Mail konvertieren.
Die Vorlage
Um Mailrox zu testen, benötigen wir ein HTML-E-Mail-Design. Ich könnte aufhören zu schreiben und mir die Zeit nehmen, meine eigenen zu bauen, aber ich bin faul und es gibt eine Menge an tollen kostenlosen Vorlagen online, also könnten wir uns einfach eine davon holen. Hier ist eine solche Vorlage von PSD Freebies.
Schritt 1. Erstellen Sie eine neue E-Mail
Mailrox befindet sich derzeit in der Beta-Phase und kann daher vorerst kostenlos verwendet werden. Sie werfen in Ihre E-Mail, um eine Einladung zu erhalten, ich habe meine innerhalb von zehn Minuten erhalten, daher sollte es nicht zu lange dauern, bis Sie hineinkommen.
Sobald Sie sich angemeldet haben, werden Sie zu dieser Seite weitergeleitet:
Sie haben Ihnen bereits eine Vorlage zum Spielen gegeben, aber wir möchten von vorne anfangen, also klicken Sie auf die Schaltfläche "Neue E-Mail erstellen". Dies gibt uns einen einfachen Dialog, in dem wir unser Flat-JPG hochladen können.
Tracking-Fortschritt
Während des gesamten Vorgangs hilft Mailrox Ihnen dabei, mit einer hilfreichen kleinen Grafik oben links auf dem Bildschirm den Überblick zu behalten. Ich liebe es, wenn Apps dies tun, und ich bekomme eine klare Vorstellung davon, wo ich mich befunden habe und wohin ich gehe. Außerdem kann ich schnell klicken und zu verschiedenen Schritten springen.
Schritt 2. In Würfel schneiden
Sobald wir unser Bild hochgeladen haben, gelangen wir zum untenstehenden Bildschirm. Hier sehen Sie das hochgeladene JPG zusammen mit einem einfachen Werkzeugstreifen und ein paar kleinen Tipps und Hinweisen für den Einstieg.
Grundsätzlich konzentriert sich Ihr Toolset und Workflow vollständig auf Schneidwerkzeuge. Es gibt zwei vertikale Schneidewerkzeuge, zwei horizontale Schneidewerkzeuge, ein Slice-Move-Werkzeug und ein Slice-Löschwerkzeug.
Wie Sie sehen können, sind blaue Schneidwerkzeuge "einfach". und grün sind Werkzeuge? komplex.? Das hört sich gut an, aber was soll das heißen? Es gibt wirklich nichts, was mehr darüber aussagt, wie diese funktionieren. Nach einigem Experimentieren stellt sich heraus, dass blaue Slices den ganzen Weg über die Seite ziehen und grüne sich der anderen Slices auf der Seite bewusst sind.
Blaue Segmente werden den ganzen Weg über die Seite ziehen, und grüne Segmente sind sich der anderen Segmente auf der Seite bewusst.Um ein Slice zu erstellen, greifen Sie einfach zu einem Werkzeug und bewegen Sie den Mauszeiger über die Leinwand. Eine Vorschau des Slice wird angezeigt, sodass Sie es genau dort positionieren können, wo Sie es möchten. Sie können es mit einem Klick befestigen.
Klicken Sie auf Klicken Sie auf
Sie bekommen die Idee hier. Gehen Sie einfach mit Ihrer Datei in Scheiben und achten Sie darauf, jedes Objekt, das Sie anpassen möchten, in Scheiben zu schneiden, sei es durch das Auslagern einer Grafik, das Einwerfen von Text oder das Hinzufügen eines Links.
Alles in allem ist es ein ziemlich schneller und einfacher Prozess. Wenn Sie jemals eine PSD in Photoshop aufgeschnitten haben, werden Sie sich hier wie zu Hause fühlen.
Schritt 3. Inhalt anpassen
Während Sie Ihr Design in Scheiben geschnitten haben, definieren Sie verschiedene Inhaltsbereiche, die Sie anpassen möchten. Während wir uns dem Inhalt nähern? In jedem dieser Bereiche können Sie den Mauszeiger darüber bewegen und auf klicken, um ihn zu ändern.
Nehmen wir beispielsweise an, wir möchten das Hauptbild beibehalten, aber einen Link hinzufügen, so dass Sie beim Klicken auf das Bild zu einer bestimmten URL gelangen. Klicken Sie dazu auf diesen Abschnitt und verwenden Sie dann das kleine Formular, um Ihren Link hinzuzufügen.
Ganz einfach richtig? Lassen Sie uns in etwas etwas schwierigeres eintauchen, wo wir benutzerdefinierten Code hinzufügen müssen.
Benutzerdefinierten Code hinzufügen
Ganz oben in unserer E-Mail-Vorlage befindet sich eine Leiste, die den Leser darüber informiert, warum er die E-Mail erhält, und diese mit einer Website verknüpft. Natürlich möchten wir hier unseren eigenen Text einfügen.
Der Prozess dafür ist, wo die WYSIWYG-Idee zusammenbricht. Sie sehen, Mailrox ist nicht für Nicht-Codierer gedacht. Wenn Sie nicht mit grundlegendem HTML und CSS vertraut sind, werden Sie nicht weit kommen.
Mailrox ist nicht für Nicht-Codierer gedacht. Wenn Sie nicht mit einfachen HTML- und CSS-Kenntnissen vertraut sind, werden Sie nicht sehr weit kommen.Stattdessen wurde es für Designer entwickelt, die sich mit grundlegendem Webcode auskennen und einfach nicht die Mühe machen müssen, eine E-Mail zu codieren. Dies ist ein sehr spezifisches Tier, das genau richtig codiert werden muss, damit es richtig funktioniert. Es mag sich wie eine kleine Nische anhören, aber ich wette, das beschreibt einige Webdesigner. Inklusive mir!
Beim Klicken auf den oberen Bereich und das Einfügen von benutzerdefiniertem HTML-Code wird der unten abgebildete Bildschirm angezeigt. Das Textfeld wird automatisch mit dem Code für Tabellen und Zellen umgeben, sodass wir uns dankbarerweise nie damit beschäftigen müssen. Stattdessen müssen wir einen Textabschnitt einfügen und das Inline-Styling ist erforderlich, damit alles schön aussieht. Dafür sind Sie völlig auf sich allein gestellt, so dass Sie sich hoffentlich mit CSS auskennen.
Wenn Sie hier fertig sind, wiederholen Sie diesen Vorgang in der gesamten Vorlage, bis alle Inhaltsbereiche Ihren Wünschen angepasst wurden.
Schritt 4. Extras
Bevor wir das zusammenfassen, lohnt es sich, sich die verschiedenen Extras und Extras anzusehen, die Ihnen in den "Inhalten" zur Verfügung stehen. Sektion. Oben rechts im Fenster sollten Sie die folgenden Schaltflächen sehen:
Hier können Sie eine Live-Vorschau Ihrer fertigen, verschlüsselten Vorlage im Browser anzeigen oder sogar eine Test-E-Mail senden, um zu sehen, wie sie in verschiedenen Clients aussieht. Es gibt auch einen Download-Button, über den wir im nächsten Schritt sprechen werden.
Gegenüber diesen Schaltflächen befindet sich oben links auf dem Bildschirm der folgende Werkzeugstreifen:
Damit können Sie die grundlegenden Seitenmerkmale anpassen: Hintergrundfarbe, oberer Rand und Titel. Es gibt auch einen Link zu einem "Kompatibilitätsbericht". Dies ist ein fantastisches kleines Tool, mit dem Sie sicherstellen können, dass Ihr Design in verschiedenen E-Mail-Clients funktioniert.
Wie Sie sehen, hat unser Design den Test für 19 E-Mail-Clients einschließlich Apple Mail, Gmail und Yahoo bestanden. Wir haben jedoch in einem Bereich versagt: Lotus Notes 6.5-7. Ich bin mir nicht sicher, was das ist oder ob es wichtig ist, aber Mailrox ist da, um meine Hand zu halten und mir zu helfen, eine Entscheidung zu treffen.
Die App informiert mich darüber, dass ich einige winzige Tabellenzellen habe, die Lotus Notes nicht mögen, aber dass dies wahrscheinlich weniger als 1% der potenziellen E-Mail-Benutzer betrifft. Das klingt für mich akzeptabel, aber falls ich das Problem beheben möchte, geben sie mir sogar Anweisungen, wie der Fehler behoben werden kann.
Schritt 5 Herunterladen
Wenn Sie fertig sind, klicken Sie auf den Download-Button, den Sie zuvor gesehen haben, um zum untenstehenden Bildschirm zu gelangen. Ich begrüße die Entwickler für diese drei Optionen, weil ich denke, dass sie perfekt sind:
Hier können wir unsere Vorlage herunterladen, sodass sie speziell für Mailchimp oder Campaign Monitor optimiert ist. Dies ist erstaunlich, da beide Dienste sehr beliebt sind und beide über sehr spezifische benutzerdefinierte Codeausschnitte verfügen, die erforderlich sind, um eine Vorlage für ihren Dienst vorzubereiten.
Die dritte Option ist genauso cool. Wenn Sie nur einfaches HTML-Format und Bilder herunterladen möchten, die auf Ihren Server hochgeladen werden sollen, wird die Anwendung den Pfad zu dem Verzeichnis angeben, in das Sie die Bilder einfügen möchten. Dies ist eine wirklich durchdachte Option und ich schätze die Bemühungen hier.
Was denke ich?
Ich war zuerst skeptisch gegenüber diesem Tool, einfach weil ich ein Programmierer bin, der normalerweise Dinge von Hand baut und WYSIWYGs wie die Pest vermeidet. Ich hasse es jedoch, HTML-E-Mails zu programmieren. Sie sind wirklich schmerzhaft und alles, was mit dem Layout-Prozess zusammenhängt, fühlt sich unbeholfen an, wenn Sie das CSS-Layout genauso lieben wie ich.
Mailrox scheint genau zu wissen, wer ich bin und was ich davon will.Mailrox scheint genau zu wissen, wer ich bin und was ich davon will. Es weiß, dass ich ein Design mit sehr wenig Anweisungen schneiden kann und dass ich mehr als kompetent genug bin, um meinen eigenen Code für die verschiedenen Inhaltsstücke zu schreiben. Am wichtigsten ist jedoch, dass er weiß, dass ich mich zwar nicht mit all dem beschäftigen kann, mich aber nicht mit dem Tabellenlayout und der Komplexität der HTML-E-Mail-Kompatibilität beschäftigen möchte.
Es konzentriert sich speziell auf die Teile des HTML-E-Mail-Erstellungsprozesses, die am störendsten sind, und behandelt sie für mich. Ich finde es toll, dass die Entwickler so einfallsreich genug sind und die App wirklich genossen hat.
Ich bin mir nicht sicher, was sie nach der Beta verlangen werden, aber solange es sinnvoll ist, kann ich mich definitiv an Mailrox wenden, wenn ich das nächste Mal eine E-Mail schreiben muss.
? Es konzentriert sich speziell auf die Teile des HTML-E-Mail-Erstellungsprozesses, die am meisten störend sind, und behandelt sie für mich.?Wie man es besser macht
Natürlich habe ich großes Lob für dieses Werkzeug. Es ist einfach, einfach zu bedienen und scheint genau auf meine Talente und Bedürfnisse ausgerichtet zu sein. Davon abgesehen habe ich einige Beschwerden, die ich gerne in zukünftigen Versionen ansprechen würde.
Gib mir ein Zoom-Tool
Die erste Beschwerde ist die Aufnahme eines Zoom-Tools in den Slicing-Workflow (oder, wenn es bereits eines gibt, das ich vermisst habe, machen Sie es offensichtlicher). Sie versuchen, diese Scheiben an sehr genauen Stellen im Layout zu platzieren, und ich habe mich oft mit meinem Gesicht auf dem Bildschirm gefunden, um es genau richtig zu machen.
Gib mir ein Zoom-Tool
Meine zweite Beschwerde ist, dass ich Mailrox verwenden muss, um überhaupt zu schneiden. Die Photoshop-Slicing-Tools sind robuster und die Designer sind mit ihnen vertraut. Warum lassen Sie uns das Dokument nicht in Photoshop aufteilen und dann unsere PSD hochladen, um direkt zum Inhaltsschritt zu gelangen.
? Die Photoshop-Slicing-Tools sind robuster und Designer sind mit ihnen vertraut. Warum lassen Sie uns das Dokument nicht in Photoshop aufteilen?Eine vordefinierte PSD-Upload-Funktion würde dies definitiv zu einer Killer-App machen, da es die Umwandlung meines Entwurfs in eine verschlüsselte E-Mail zu einem fast schmerzlosen Prozess machen würde, der sehr schnell durchgeführt werden kann. Die Slicing-Tools auf Mailrox sind in Ordnung und sollten erhalten bleiben, aber diejenigen von uns, die Photoshop bevorzugen, sollten diese Option erhalten.
Was denkst du?
Nachdem Sie nun meine Komplettlösung und Meinungen zu Mailrox gesehen haben, ist es an der Zeit, dass Sie mitspielen und mir mitteilen, was Sie denken. Hassen Sie das Kodieren von HTML-E-Mails genauso wie ich? Möchten Sie ein Tool wie Mailrox verwenden, um den Prozess zu unterstützen?
Wenn Sie es in die Beta aufgenommen haben und Mailrox testen konnten, hinterlassen Sie einen Kommentar und lassen Sie mich wissen, was Sie lieben und was Sie ändern würden.