Mobile Optimierung – Mail Designer – Create and send HTML email newsletters

März 19 2025

Ein Layout-Block für die mobile Version anpassen

By Team equinux Mobile Optimierung

Um dein Design besser für mobile Nutzer anzupassen, kannst du Änderungen am Layout vornehmen. Diese Änderungen kannst du in der Smartphone-Ansicht durchführen, ohne das Hauptdesign zu beeinflussen.

So geht’s:

1. Zur Smartphone-Ansicht wechseln:

Öffne die Smartphone-Ansicht, um mit der Anpassung zu beginnen.

Auswahlmenü zur Ansichtseinstellung in Mail Designer 365. Die Option „SMARTPHONES Retina“ ist hervorgehoben, um zur mobilen Ansicht zu wechseln. Weitere Optionen sind „DESKTOP“ (Mac, PC & Tablets), „TEXT“ (Klartext Variante) und „INBOX“ (Vorschautext).

2. Erste Änderungen vornehmen:

Sobald du dein mobiles Design in der Smartphone-Ansicht anpasst (z. B. indem du einen Layout-Block in der Größe veränderst), erscheint ein Pop-up-Fenster.

Pop-up-Fenster in Mail Designer 365 mit der Meldung, dass Mobil- und Desktopinhalte getrennt werden, um eine flexiblere Anpassung zu ermöglichen. Zwei Schaltflächen: „Trennen“ (blau hinterlegt) zum Entkoppeln der mobilen Version und „Abbrechen“ zum Verwerfen der Aktion. Zusätzlich eine Option „Nicht erneut fragen“ zur Deaktivierung zukünftiger Pop-ups. 3. Mobile Version vom Desktop-Design trennen:

Klicke auf „Trennen“, um die mobile Version von der Desktop-Version zu lösen. Ab diesem Moment wirken sich alle Änderungen nur noch auf die mobile Version aus. Dies wird durch das Label „Mobil angepasst“ auf den Layout-Blöcken gekennzeichnet.

Bearbeitungsansicht in Mail Designer 365 mit einem hervorgehobenen Layout-Block, der den Text „Hallo Mobil User“ enthält. Der Block ist mit einem orangefarbenen Rahmen markiert, und das Label „MOBIL GEÄNDERT“ zeigt an, dass Anpassungen nur in der mobilen Version vorgenommen wurden. 4. Änderungen rückgängig machen:

Falls du die Trennung wieder aufheben möchtest, kannst du das mobile Design auf die ursprüngliche Desktop-Version zurücksetzen. Wähle dazu „Bearbeiten“ > „Design auf Desktop-Version zurücksetzen“. Dadurch werden alle Änderungen in der mobilen Version rückgängig gemacht.

Geöffnetes „Bearbeiten“-Menü in Mail Designer 365 mit hervorgehobener Option „Auf Desktop-Version zurücksetzen“. Diese Funktion stellt die mobile Version eines Layout-Blocks auf die ursprüngliche Desktop-Version zurück. Weitere Menüoptionen umfassen Bearbeitungs-, Formatierungs- und Bildoptimierungsfunktionen.

Jan. 30 2019

Textstile für die mobile Version anpassen

By Mobile Optimierung, Textstile

Mobile Textstile bieten dir einen einfacheren Weg, euren Smartphone-Inhalt zu bearbeiten, ohne dass du mobile Blöcke von dem Desktop Design entkoppeln musst.

Gehe zu der Smartphone-Ansicht und passe einen Textblock ein. In diesem Beispiel haben wir die Zeilenhöhe reduziert, um Platz für Smartphone User zu sparen:

Deine Änderung wird nun in einer blauen Kiste unter dem Stil-Menü erscheinen:

Weitere Änderungen werden auch hier aufgelistet:

Wechsele zurück zu der Desktop Ansicht. Die blaue Kiste ist immer noch unter dem Stil-Menü zu finden, damit du und andere Kollegen an diesen Änderungen erinnert werden.

Um die Text-Anpassungen zurückzusetzen, kannst du oben rechts auf das Pfeil klicken. So setzt du den Textstil auf den von der Desktop-Version zurück.

Wichtig: Für mobile Apps, wie Gmail für IMAP, die die neuen Stilanpassungen nicht unterstützen, kann eine entsprechende Vorschau eingeblendet werden. Du kannst dein Design prüfen, indem du "Vorschau" anklickst, um die Gmail-Vorschau zu öffnen.

Wie können wir helfen?

Auf einen Blick

Hintergründe

Layoutblöcke

Mit Text arbeiten

Links und Buttons

Textstile

Tabellen

Bildbereiche

Bilder

Retina-Bilder

Grafiken und mehr

Kreative Tools

Erweiterte Design-Techniken

Mobile Optimierung

Klartext-Darstellung

Inbox-Vorschau

Vorschau

Vorbereitung vor dem Senden

E-Mail-Versand

HTML Export

Teilen

Anhang: Designelemente ausrichten

Anhang: Tastaturbefehle

Die Sprache ändern

Ein neues Design erstellen

Grundlegende Tipps

Mail Designer 365 Best Practice Anleitung

Mail Designer 365 Beta-Versionen testen

Den inneren Hintergrund bearbeiten

Einen Hintergrund für einen Textbereich anwenden

Muster im Hintergrund nutzen

Abstände zwischen Layoutblöcken hinzufügen

Arbeiten mit Text- und Bildbereichen

Benutzerdefinierte Layoutblöcke speichern

Die Größe von Elementen in einem Layoutblock anpassen

Layoutblöcke duplizieren

Layoutblöcke hinzufügen

My Instant Blocks löschen

Automatische Worttrennung

Links hinzufügen

Listen in Textbereichen verwenden

Mit Text arbeiten

Sonderzeichen

Text in einem Bildbereich bearbeiten

Verschachtelte Listen erstellen

Webschriften in Mail Designer 365 verwenden

Platzhalter für den Versand mit Mail Designer einfügen

Text-Buttons erstellen

CTA Buttons hinzufügen

Einen Link für Grafiken hinterlegen

Einen Link für Text hinterlegen

Linkstile formatieren

Mehrere Buttons mit mehreren Links erstellen

Ersatzschriften verwenden

Laufweite für Textstile anpassen

Schriftstile verwenden

Text kopieren und Schriftstil beibehalten

Textstile für die mobile Version anpassen

Wortweise Hervorhebung bei Texten anwenden

Den Stil deiner Tabelle anpassen

Die Tabellen-Tools finden

Eine Tabelle aufbauen

Rahmen hinzufügen

Tabellen-Inhalte einfügen

Alt-Texte verwenden

Animierte Objekte hinzufügen

Bildbereiche optimieren

Designelemente in einem Bildbereich fixieren

Mit Bildbereichen arbeiten

Objekte duplizieren

Video-Platzhalter hinzufügen

Bilder in der App zuschneiden

Eigene Logos und Unterschriften einfügen

Eine Maske befüllen

Fotos

Masken verwenden

Retina-Bilder

Unsplash-Integration

Retina Bilder für deine Vorlage deaktivieren

Retina-Bilder in deinem Design verwenden

Eine Trennlinie einfügen

Objekte bearbeiten

Objekte drehen

Objekte mit Text verwenden

Pixel-präzise Bearbeitung

Überblend-Modi anwenden

Überblend-Modi bei Textobjekten anwenden

Bildbearbeitung in Mail Designer 365

Den Schatten-Tool verwenden

Designelemente ausrichten und verteilen

Eine Design-Border erstellen

Ränder für Designelemente

Abgerundete Ecken erstellen

Bilder in Programmen von Drittanbietern bearbeiten

Design-Elemente gruppieren

Design-Elemente kombinieren

Ein Vieleck oder Polygramm erstellen

Objekte ausrichten

Objekte nach vorne oder hinten bewegen

Einen Layoutblock nur für die mobile Version hinzufügen

Layoutblöcke für die mobile Version ausblenden

Layoutblöcke von der Desktop Version trennen

Text und Links verwenden

Textstile für die mobile Version anpassen

Vorschau für mobile Geräte öffnen

Ein Layout-Block für die mobile Version anpassen

Klartext optimieren

Inbox Optimierung – Optimiere den E-Mail-Vorschautext

TextScout AI für E-Mail-Betreffzeilen verwenden

Das Vorschaufenster aktualisieren

Ein eigenes Vorschaugerät hinterlegen

Dein Dokument auf Probleme überprüfen

Ein Design speichern

Inbox Optimierung – Optimiere den E-Mail-Vorschautext

Rechtschreibung und Grammatik

Anmeldeformulare erstellen

Design in der TeamCloud speichern

Design-Feedback im Team anfragen

E-Mail Kampagne versenden

E-Mail-Kontakte aus Campaign Monitor in Mail Designer 365 Campaigns importieren

Ein Design zu Crew Chat hinzufügen

Ein Team einrichten

Eine Absenderadresse für den Versand hinzufügen

Eine Testmail versenden

Einzelversand an einzelne Empfänger über Direktversand

Fallstudie: Zielgruppen-Operatoren für Segmentierung verwenden

Ihren Kontakten Attribute zuweisen in Mail Designer Kampagnen

Kontakte aus Apple Kontakte zu Mail Designer Campaigns importieren

Kontakte aus MailChimp in Mail Designer Kampagnen importieren

Newsletter Empfänger hinzufügen

Zielgruppen erstellen

Fallstudie: Zielgruppen-Operatoren für Segmentierung verwenden

Versand an einzelne Empfänger

Das Mail Designer 365 Anmeldeformular-Plugin für WordPress verwenden

Bilder für HTML E-Mails hosten

Deinen Newsletter im Internet zur Verfügung stellen

E-Mail zu anderen Newsletter-Diensten exportieren

Export als HTML Datei

Dein Dokument ausdrucken

Designs als PNG oder JPG exportieren

Ein Design für Mailchimp exportieren

Einen eigenen Mail-Account für den Versand konfigurieren

Platzhalter mit MailChimp verwenden

Vorlagen bei Mailchimp bearbeiten

Beliebte Beiträge

Einen Link für Grafiken hinterlegen

Eine Testmail versenden

Versand an einzelne Empfänger

Mehrere Buttons mit mehreren Links erstellen

CTA Buttons hinzufügen

Neueste Beiträge

Ein Layout-Block für die mobile Version anpassen

Text-Buttons erstellen

Platzhalter für den Versand mit Mail Designer einfügen

Das Mail Designer 365 Anmeldeformular-Plugin für WordPress verwenden

Versand an einzelne Empfänger

Zuletzt aktualisiert

Mit Bildbereichen arbeiten

Ein Layout-Block für die mobile Version anpassen

Text-Buttons erstellen

Anmeldeformulare erstellen

Platzhalter für den Versand mit Mail Designer einfügen

Jan. 30 2019

Layoutblöcke von der Desktop Version trennen

By Mobile Optimierung

Wenn gewünscht, kannst du dein mobiles Design separat für Smartphone User anpassen, ohne dass die Desktop Version betroffen wird.

Gehe zu der Smartphone Ansicht, um loszulegen:

Wenn du einen Layoutblock trennen willst, ziehe an der Rahmenlinie eines Bildbereichs oder eines Textbereichs. Das folgende Fenster wird nun erscheinen:

Der Block wird nun von der Desktop Version entkoppelt, indem du auf "Entkoppeln" klickst. Dieser Layoutblock erhält nach der Trennung den Vermerk „Mobil Geändert“. So erkennst du, dass Änderungen an diesem Layoutblock nicht in die Desktop Version übernommen werden.

Wenn du diese Änderungen widerrufen willst, kannst du dein mobiles Design auf die Desktop-Version zurücksetzten, indem du "Bearbeiten" > "Auf Desktop-Version zurücksetzen" anklickst:

Feb. 15 2018

Vorschau für mobile Geräte öffnen

By Mobile Optimierung

Nachdem nun die Vorlage für mobile Geräte optimiert wurde, können wir uns eine Vorschau der E-Mail für verschiedene Geräte anzeigen lassen.

Ein Vorschaufenster öffnen

Klicke auf "Vorschau anzeigen" in dem App-Menü. Der Button sieht so aus:

Du wirst nun eine Liste verschiedener mobilen Geräte für die Vorschau sehen:

Hier kannst du auch ein- und auszoomen:

Bewege den Cursor auf das Display des dargestellten iPhones und scrolle, um die E-Mail komplett zu sehen. Auch in der Apple Watch Vorschau, kannst du durch die E-Mail scrollen. Die Klartext-Ansicht deiner Vorlage kannst du separat erstellen.

Klicke auf den kleinen Button mit dem Pfeil, um das Gerät in die Horizontale zu drehen.

Feb. 15 2018

Text und Links verwenden

By Mobile Optimierung

In der mobilen Version deiner Vorlage kannst du Text und Links genauso verwenden wie in der Desktop Version. Ist ein mobiler Layoutblock nicht von der Desktop Version getrennt, werden alle Änderungen, die du in der mobilen Version vornimmst in die Desktop Version des Layoutblocks übertragen.