Schöne E-Mail-Newsletter ganz einfach gestalten mit Topol.io

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Die kostenlose Web-App Topol.io macht das Newsletter-Design so einfach wie das Schreiben eines Briefes mit Word.

Topol.io: Newsletter wie mit Word

E-Mail-Newsletter-Design ist nicht einfach. Es gibt Lösungen, den Vorgang zu vereinfachen, aber gering wird der Aufwand nie. Das liegt vornehmlich an der der Vielfalt verschiedener technischer Implementationen in den diversen Mail-Clients. Anders als bei Browsern kocht hier gerne jeder sein eigenes Süppchen. Einen ausführlichen, aktuellen Beitrag zum Thema findet ihr hier.

Nicht zuletzt aus diesem Grunde ist es wichtig, sich auf eine technisch stabile und kompatible Lösung verlassen zu können. Wenn es euch also vornehmlich darum geht, eure Inhalte an den Mann zu bringen und nicht darauf, mit einem vollkommen unübersehbaren Newsletter-Design zu punkten, sollte das kostenlose Tool Topol.io aus dem Hause Sendmark eurer Aufmerksamkeit nicht entgehen.

Topol.io ist als Editor Teil des Sendmark-Featureset, steht jedoch auch als separate Web-App zur Verfügung. Entwickler, die wiederum in ihre eigenen Angebote einen E-Mail-Editor einbauen wollen, können Topol.io beim Hersteller lizenzieren. Der Editor zeichnet sich durch eine fast schon intuitive Bedienbarkeit aus und ist um Längen einfacher verständlich als etwa der Editor aus Mailchimp.

So baut ihr Newsletter mit Topol.io

Der Start mit Topol.io ist einfach. Zunächst gilt es, eines der Templates auszuwählen. Derer sieben stehen bereit. Das erscheint auf den ersten Blick wenig, ist aber insofern kein Problem, als es sich ja ohnehin nur um Rohfassungen handelt, die ihr vollkommen individuell anpassen könnt. So betrachtet sind die Templates nicht mehr als Strukturmuster.

Habt ihr ein Template gewählt, öffnet sich direkt der Editor. Rechts findet ihr das gewählte Template in WYSIWYG-Ansicht, links auf dunklem Hintergrund findet sich der Werkzeugkasten. Dieser teilt sich in die Bereiche Content, Structure und Settings auf.

In den Settings stellt ihr Optionen ein, die die gesamte E-Mail betreffen, nämlich das Farbschema, die Zeilenabstände und die Schriftarten und -größen für die verschiedenen Textelemente.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Unter Structure findet ihr sechs Basistrukturen, die unterschiedliche Spaltenlayouts repräsentieren. Zieht die jeweilige Struktur mit der Maus aus der Toolbox in den Editor und dort an die Stelle, an der die Struktur bereitgestellt werden soll. Ihr erhaltet einen Streifen über die gesamte Breite des Editorfensters. Darin befinden sich blau unterlegte Quader mit einem Icon, das herkömmlich verwendet wird, um Downloads zu signalisieren.

Auf eben diese blauen Felder zieht ihr nun Inhaltselemente aus dem Bereich Content. Dabei kann es sich um Text, Bilder, animierte GIFs, Buttons, Trennlinien, Abstandhalter, Social Media Integration, Videos oder HTML-Sourcecode handeln. Der Inhaltsblock GIF ist mit einer Giphy-Integration ausgestattet, so dass du direkt daraus nach passenden Animationen suchen und diese einfügen kannst. Der Inhaltsblock HTML stellt einen HTML-Editor innerhalb der Toolbox bereit. Etwaige Änderungen am Sourcecode werden in der rechten WYSIWYG-Ansicht direkt dargestellt.

Inpage-Editing bei Text-Elementen. (Screenshot: Dr. Web)

Dabei müsst ihr nicht Schritt für Schritt nach einem vorgegebenen Schema vorgehen. Es ist jederzeit möglich, eine weitere Strukturschablone an beliebiger Stelle einzufügen und mit Inhalt zu bestücken. Ebenso können die einzelnen Strukturelemente per Drag & Drop in der E-Mail an neue Positionen geschoben werden. Sowohl einzelne Inhaltselemente als auch ganze Strukturschablonen lassen sich unkompliziert duplizieren oder löschen.

Das Inhaltselement Spacer dient als Abstandhalter zwischen den Strukturschablonen. Der gewünschte Abstand wird bequem per Maus angepasst. Jedes Element gibt beim Hovern mit der Maus preis, welche Aktionen unmittelbar am Element ausgelöst werden können. Im Normalfall handelt es sich um das Verschieben, Duplizieren und Löschen. Nach einem Klick auf das jeweilige Element ändert sich kontextsensitiv die linke Toolbox-Auswahl und präsentiert weitere Bearbeitugsmöglichkeiten, die für die entsprechende Selektion geeignet sind.

Seid ihr unsicher, ob euer Design nach allzu vielen Änderungen noch funktioniert, solltet ihr euch nicht scheuen, links oben über der WYSIWYG-Ansicht auf „Preview & Testing” zu klicken. Hier habt ihr dann zusätzlich die Möglichkeit, zwischen der Desktop-Ansicht und der Darstellung auf mobilen Geräten zu wechseln.

Bilder, die ihr in das Layout einfügt, werden zur Laufzeit in die AWS-Cloud des Herstellers geladen, damit die WYSIWYG-Ansicht funktioniert. Wenn ihr fertig und zufrieden mit eurem Newsletter seid, klickt ihr auf „Save & Download”. Topol.io schnürt ein Zip zusammen, das den Newsletter als index.html enthält und alle verwendeten Bilder in einen Unterordner namens Images verpackt hat.

Fazit: Einfacher kann man funktionierende E-Mail-Newsletter nicht bauen

Topol.io ist ein modernes, einfach zu bedienendes Werkzeug, mit dessen Hilfe die Erstellung von E-Mail-Newslettern wirklich eine Kleinigkeit ist. Das kann sogar die Müller aus dem Marketing unfallfrei verwenden. Und kostenlos ist es auch noch.

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

2 Kommentare auf "Schöne E-Mail-Newsletter ganz einfach gestalten mit Topol.io"

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
achim grafe
Gast

Nicht schlecht, aber ohne Registrierung bei Sendmark funktioniert da kein download.