E-Mail-Design zu HTMLLayout in HTML umsetzen

Ihr E-Mail-Design in HTML umgesetzt: ein Tabellenlayout für Newsletter-Dienste, nah an Ihrem Mock-up, mit Mobilversion

Meist in 15 Minuten fertigÜberarbeitungen inklusiveQualitätsprüfung
ZahlungsschutzMehr dazu
  • Überarbeitungen im Rahmen des Pakets sind kostenlos.
  • Reagieren Sie nicht innerhalb von 3 Tagen nach der Lieferung, gilt die Arbeit automatisch als abgenommen.
Bestellen · 28 €

Das Geld wird bei der Zahlung reserviert und erst freigegeben, wenn Sie die Arbeit abnehmen.

Ihr E-Mail-Design in HTML umgesetzt: ein Tabellenlayout für Newsletter-Dienste, nah an Ihrem Mock-up, mit Mobilversion

Beispielergebnis

Beispiel für das Standard-Paket

E-Mails zur Begrüßung und zum Frühjahrs-Sale für einen Keramikshop

Die beiden E-Mails

Die Willkommens-E-Mail Die E-Mail zum Frühjahrs-Sale

Die Willkommens-E-Mail auf dem Handy

Die Willkommens-E-Mail auf dem Handy

Dateien: ein ZIP-Archiv mit 2 für E-Mail-Programme gebauten HTML-E-Mails mit Inline-Styles und Abmeldelink sowie 3 dafür gezeichneten Bildern, bereit zum Import in den Newsletter-Dienst des Kunden. Die Bilder hier sind Screenshots der E-Mails.

Kunde: Juniper & Oak, ein kleiner Onlineshop für handgemachte Keramik und Wohnaccessoires. Aufgabe: zwei E-Mails für ihren Newsletter-Dienst: eine Willkommens-E-Mail mit 10 % Rabatt auf die erste Bestellung und eine E-Mail zum Frühjahrs-Sale mit 20 % Rabatt auf Vasen und Pflanztöpfe – in Sand, Terrakotta und Oliv.

Kunde und alle Angaben sind erfunden.

Über diese Leistung

Sie haben ein E-Mail-Design und brauchen es als Code, den E-Mail-Programme richtig anzeigen. Laden Sie Screenshots oder PNG-Exporte Ihres Mock-ups hoch, und wir setzen es als HTML-E-Mail um: dieselben Blöcke in derselben Reihenfolge, Farben, Größen und Buttons, mit echtem Text statt einem Bild von Text. Der Code ist das, was E-Mail-Programme brauchen: Tabellen mit 600 px Breite, Styles an jedem Element, ähnliche Systemschriften und eine Spalte auf Handys, auch wenn Ihr Design nur eine Desktop-Version hat. Fotos und Illustrationen des Mock-ups werden im gleichen Geist neu gezeichnet, oder Ihre werden verwendet, wenn Sie sie hochladen. Wir können keine Figma-, PSD- oder Sketch-Dateien öffnen: Exportieren Sie die Screens als Bilder. Wir versenden die E-Mails nicht.

Was enthalten ist

  • Was Sie erhaltenEin ZIP-Archiv mit dem HTML jeder E-Mail und ihren Bildern, bereit für Ihren Newsletter-Dienst, und eine Vorschau auf der Bestellseite.
  • Nah an Ihrem DesignBlöcke, Farben, Größen und Buttons wie in Ihrem Mock-up
  • Echter TextÜberschriften und Absätze als Text, nicht als Bild von Text
  • MobilversionAus dem Desktop-Design erstellt, wenn Sie kein mobiles haben
  • Bilder an ihrem PlatzIm Geist des Mock-ups neu gezeichnet, oder Ihre
  • AbmeldelinkEin Platzhalter im Footer, den Sie durch den eigenen Link Ihres Dienstes ersetzen

So funktioniert es

  1. 1
    HochladenSie laden die Screens Ihres E-Mail-Designs hoch und sagen, welcher welcher ist
  2. 2
    Umsetzung und VorschauWir bauen jede E-Mail mit Tabellen und Inline-Styles, und Sie vergleichen sie auf Computer und Handy mit Ihrem Design
  3. 3
    ArchivSie laden das Archiv herunter und bitten im Rahmen Ihres Pakets um Änderungen

Was wir von Ihnen brauchen

Bis zu 5 Bilder als PNG, JPEG oder WebP: die Screens Ihres E-Mail-Designs, eine E-Mail pro Bild, scharf genug, um den Text zu lesen, und auf Wunsch Ihr Logo und Fotos zur unveränderten Verwendung. Geben Sie an, welche Datei welche E-Mail ist, die Texte, falls sie vom Mock-up abweichen, wohin jeder Button führen soll und die Absenderangaben für den Footer. Keine Figma-, PSD- oder Sketch-Dateien: Exportieren Sie jeden E-Mail-Frame als Bild.

Wir fragen Sie:

  • Welche Datei ist welche E-Mail?
  • Weichen die Texte vom Mock-up ab?
  • Wohin sollen die Buttons führen?
  • Absenderangaben für den Footer

Pakete vergleichen

Basis1 E-Mail aus Ihrem Design16 €Standard2 E-Mails aus Ihren Designs28 €Premium4 E-Mails aus Ihren Designs47 €
Lieferzeit1 Tag2 Tage2 Tage
Überarbeitungen123
E-Mails124
Für die E-Mails gezeichnete Bilder234
MobilversionJaJaJa
AbmeldelinkJaJaJa
Aus Ihrem Design umgesetztJaJaJa
BestellenBestellenBestellen

Zahlungsschutz

Sie bezahlen bei der Bestellung, aber das Geld wird nur für abgenommene Arbeit freigegeben.

  • FestpreisDer Paketpreis ändert sich nach der Zahlung nicht mehr.
  • Das Geld wird reserviertBei der Zahlung wird der Betrag nur reserviert. Freigegeben wird er erst, wenn Sie die Arbeit abnehmen.
  • Vor der Lieferung geprüftJedes Ergebnis durchläuft eine Qualitätsprüfung, bevor es Sie erreicht, und Sie sehen es auf der Bestellseite, bevor Sie es abnehmen.
  • Kostenlose ÜberarbeitungenFordern Sie Überarbeitungen im Rahmen Ihres Briefings so oft an, wie das Paket es erlaubt.
  • Abnahme nach 3 TagenWenn Sie die Arbeit innerhalb von 3 Tagen nach der Lieferung weder abnehmen noch eine Überarbeitung anfordern, gilt sie automatisch als abgenommen. Schreiben Sie nach der Lieferung im Bestell-Chat, wartet die Bestellung; sobald wir antworten, können wir die 3 Tage neu starten und teilen das im Chat mit.
  • Neuanfertigung oder volle RückerstattungWenn das Ergebnis nicht Ihrem Briefing entspricht und die Überarbeitungen das nicht behoben haben oder die Arbeit mehr als doppelt so lange dauert wie die Frist, schreiben Sie im Bestell-Chat: Wir erstellen die Arbeit neu oder erstatten die Zahlung vollständig.
So funktioniert es →

Fragen und Antworten

Können Sie meine Figma- oder PSD-Datei öffnen?

Nein, wir arbeiten mit Bildern der Screens. Wählen Sie in Figma den E-Mail-Frame aus und exportieren Sie ihn als PNG in 2x; in Photoshop nutzen Sie Exportieren als. Eine hohe E-Mail kann ein langes Bild sein.

Entspricht es meinem Design pixelgenau?

Sie wird in Layout, Farben, Größen und Reihenfolge der Blöcke nah dran sein, aber nicht pixelgenau: E-Mail-Programme zeigen E-Mails leicht unterschiedlich an, die Schriften sind ähnliche Systemschriften, und Fotos werden neu gezeichnet, sofern Sie keine eigenen hochladen. Senden Sie vor dem Versand einen Test an einige Postfächer und ein Handy.

Mein Design hat eine besondere Schrift und ein Video. Was dann?

Die meisten E-Mail-Programme zeigen weder Webfonts noch Videos, daher wird Text in einer ähnlichen Systemschrift gesetzt, und das Video wird zu einem Bild mit Play-Symbol, das dorthin führt.

Können Sie eine E-Mail bauen, die von einem anderen Unternehmen kopiert ist?

Wir setzen Designs um, die Ihnen gehören oder die Sie verwenden dürfen. Wir kopieren keine E-Mail eines anderen Unternehmens eins zu eins; eine E-Mail, die Ihnen gefällt, kann nur ein Hinweis für den Stil sein.

Passt sie in den Drag-and-Drop-Editor meines Newsletter-Dienstes?

Sie erhalten reines HTML zum Importieren oder Einfügen als eigenen Code. Es ist nicht in die Blöcke des Editors aufgeteilt, daher werden spätere Änderungen im Code-Editor vorgenommen. Der Footer hat einen Platzhalter für den Abmeldelink Ihres Dienstes.

Keine Antwort gefunden?

Alle Leistungen in Entwicklung & IT

Mehr in Entwicklung & IT

Bestellen · 28 €· ~15 Min.