Lege verschiedene Schriftarten für Handys fest, um die Lesbarkeit und die visuelle Attraktivität zu gewährleisten:

• Verwende eine kleinere Schriftgröße, um den Inhalt an kleinere Bildschirme anzupassen;
• Verwende eine sichere Schriftart, um die Lesbarkeit zu verbessern; und
• Passe die Schriftfarbe an, um einen guten Kontrast bei unterschiedlichen Lichtverhältnissen oder für Einstellungen im Dark Mode zu gewährleisten.

E-Mail auf dem Desktop	E-Mail auf Mobilgeräten

Um die Schriftgröße, Farbe oder Schriftfamilie für Handys zu ändern, musst du die Schriftstile sowohl für Handys als auch für Desktop-PCs festlegen: 

1. Entwerfen deiner E-Mail. 
2. Rufe den Entwicklermodus auf. 
3. Suche nach dem Inhalt, dessen Schriftart du ändern möchtest. Deine Inhaltseinstellungen findest du im Code direkt darüber. 
4. Kopiere die Codes, die dem Stil entsprechen, den du auf mobilen Geräten ändern möchtest: 
   • Schriftart:font-family: ‚Name der Schriftart‘
   • Textgröße:font-size: GRÖSSEpx
   • Textfarbe: color: 'HEX' 
5. Füge unter dem layout-String und dem Wert 320px die oben kopierten Codes ein, um die Schriftstile für Mobilgeräte anzupassen, und ersetze deren Wert durch den gewünschten:
   • font-family: 'font family name', dabei ist der Name der Schriftfamilie der Name der Schriftart, wie er in der Liste der verfügbaren Schriftarten im Editor angezeigt wird. 
   • font-size: SIZEpx, dabei ist SIZE die Größe, die du deinem Inhalt in px zuweisen möchtest. 
   • color: 'HEX' dabei ist HEX der HEX-Code, der der Farbe entspricht, die du deinem Inhalt geben möchtest. 
     
6. Entferne aus der Inhaltszeichenfolge – beispielsweise Warm-up with Sun Salutations – alle Style-, Span- oder Klassenattribute zwischen den einfachen Anführungszeichen '', damit nur dein Inhalt übrig bleibt.
   ➡️  Beispiel

   Wenn dein Inhalt wie folgt lautet: 

   content: '<h2 class="default-heading2"><span style="color:#116b6b;">Our 3 tips to practice safe yoga 🧘</span></h2>'

   Entferne alle Stil- oder Klassenattribute, um nur deinen Inhalt beizubehalten, zum Beispiel: 

   Inhalt: 'Our 3 tips to practice safe yoga 🧘' (Unsere 3 Tipps, um sicheres Yoga 🧘 zu praktizieren)
7. Wechsle mithilfe der entsprechenden Symbole oben rechts in deinem E-Mail-Editor zwischen dem Desktop-Modus (⇧ + D) und dem Mobil-Modus (⇧ + M). So kannst du sicherstellen, dass sich deine Schriftstile je nach Gerätetyp, auf dem sie angezeigt werden, anpassen.
8. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor.  
9. Klicke auf das Kreuz-Symbol , um den Entwicklermodus zu schließen.

Herzlichen Glückwunsch! Deine Schriftarten werden jetzt je nach Gerät, auf dem sie gelesen werden, geändert. 

Mit den Anmerkungen in Gmail können Benutzer:innen von Gmail deine Werbeaktionen direkt in ihrem Postfach anzeigen und darauf reagieren, indem sie auf das mit Anmerkungen versehene Bild oder den Text klicken, ohne die E-Mail öffnen zu müssen. Diese Anmerkungen ermöglichen es, Nachrichten, die in der Registerkarte „Promotions“ (Werbung) von Gmail eingehen, hervorzuheben, indem Funktionen wie die folgenden hinzugefügt werden:

So zeigst du deinen Empfänger:innen Gmail-Anmerkungen an: 

1. Entwerfen deiner E-Mail. 
2. Rufe den Entwicklermodus auf. 
3. Kopiere den Code aus der Registerkarte unten, der der Art der Anmerkung entspricht, die du deinen Gmail-Empfänger:innen anzeigen möchtest:
   
   Deal-BeschreibungenProduktkarussellsEinzelbild-Vorschau

   Zu kopierender Code

   Zu ersetzende Werte

   promo: - @context: 'http://schema.org/' @type: DiscountOffer description: DESCRIPTION discountCode: DISCOUNT_CODE availabilityStarts: START_DATE_TIME availabilityEnds: END_DATE_TIME

   (Optional) DESCRIPTION: Dies ist der Text, der zusammen mit dem Deal-Abzeichen angezeigt wird, z. B. 20 % Rabatt.  (Optional) DISCOUNT_CODE ist der Rabatt- oder Aktionscode für das Angebot, z. B. 20TODAY.  (Optional) START_DATE_TIME ist das Datum und die Uhrzeit, zu der das Angebot beginnt, im ISO 8601-Format, z. B. 2023-09-25T18:44:37-07:00. (Optional) END_DATE_TIME ist das Enddatum und die Endzeit der Aktion im ISO 8601-Format, z. B. 2023-09-25T18:44:37-07:00.

   ❗️ Wichtig

   Füge für jedes Bild in deinem Produktkarussell einen PromotionCard-Typ hinzu. 

   Zu kopierender Code

   Zu ersetzende Werte

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1 position: POSITION - context: 'http://schema.org/' type: PromotionCard image: IMAGE_URL2 url: PROMO_URL2 headline: HEADLINE2 price: PRICE2 priceCurrency: PRICE_CURRENCY2 discountValue: DISCOUNT_VALUE2 position: POSITION

   IMAGE_URL ist die URL zu deinem Bild im PNG- oder JPEG-Format, z. B. https://www.example.com/image.png. Die unterstützten Seitenverhältnisse sind 4:5, 1:1, 1,91:1. In Produktkarussells muss jedes Bild eine eindeutige URL haben und dasselbe Seitenverhältnis aufweisen. PROMO_URL ist die URL für die Werbeaktion. Wenn Benutzer:innen auf der Registerkarte „Promotions“ (Werbung) auf das Bild klicken, wird diese URL aufgerufen. (Optional) „HEADLINE“ ist eine ein- bis zweizeilige Beschreibung der Aktion, die unter dem Vorschaubild angezeigt wird. (Optional) PRICE ist der Preis der Werbeaktion. (Optional) PRICE_CURRENCY ist die Währung des Preises im 3-Letter-Format ISO 4217 wie z. B. EUR. Legt das Währungssymbol fest, das zusammen mit dem Preis angezeigt wird. (Optional) DISCOUNT_VALUE ist der Betrag, der vom Preis abgezogen wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem ursprünglichen Preis angezeigt. Wenn beispielsweise der discountValue 25 beträgt, der Preis 100 beträgt und die priceCurrency EUR ist, wird der angepasste Preis als 75 € angezeigt. (Optional) POSITION ist die Position der Card im Karussell.

   Zu kopierender Code

   Zu ersetzende Werte

   promo: - @context: 'http://schema.org/' @type: PromotionCard image: IMAGE_URL1 url: PROMO_URL1 headline: HEADLINE1 price: PRICE1 priceCurrency: PRICE_CURRENCY1 discountValue: DISCOUNT_VALUE1

   IMAGE_URL ist die URL zu deinem Bild im PNG- oder JPEG-Format, z. B. https://www.example.com/image.png. Die unterstützten Seitenverhältnisse sind 4:5, 1:1, 1,91:1. In Produktkarussells muss jedes Bild eine eindeutige URL haben und dasselbe Seitenverhältnis aufweisen. PROMO_URL ist die URL für die Werbeaktion. Wenn Benutzer:innen auf der Registerkarte „Promotions“ (Werbung) auf das Bild klicken, wird diese URL aufgerufen. (Optional) HEADLINE ist eine ein- bis zweizeilige Beschreibung der Aktion, die unter dem Vorschaubild angezeigt wird. (Optional) PRICE ist der Preis der Werbeaktion. (Optional) PRICE_CURRENCY ist die Währung des Preises im 3-Buchstaben-Format ISO 4217 wie z. B. USD. Legt das Währungssymbol fest, das zusammen mit dem Preis angezeigt wird. (Optional) DISCOUNT_VALUE ist der Betrag, der vom Preis abgezogen wird, um einen angepassten Preis anzuzeigen. Der angepasste Preis wird neben dem ursprünglichen Preis angezeigt. Wenn beispielsweise der discountValue 25 beträgt, der Preis 100 beträgt und die priceCurrency EUR ist, wird der angepasste Preis als 75 € angezeigt.

4. Füge ganz oben im Entwicklermodus, unter dem Wert „Fonts“ und auf der ersten Ebene, den Code ein, den du aus einem der obigen Registerkarten kopiert hast.
5. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor.
6. Klicke auf das Kreuzsymbol , um den Entwicklermodus zu schließen.
7. (Optional) Versende eine Test-E-Mail an eine Test-E-Mail-Adresse über Gmail, wobei die Registerkarte „Promotions (Werbung)“ aktiv sein sollte, um sicherzustellen, dass die Gmail-Anmerkung korrekt angezeigt wird.

Alternativ kannst du unseren HTML-Editor verwenden, um Anmerkungen in Gmail anzuzeigen. Weitere Informationen findest du in der offiziellen Dokumentation von Google. 

Das Ändern der Farbe deiner Aufzählungszeichen oder Nummern kann nützlich sein, um wichtige Punkte hervorzuheben, Ideen zu gruppieren oder sie an dein Branding anzupassen. Hier ist ein Beispiel dafür, wie eine farbige Aufzählung aussieht: 

So änderst du die Farbe deiner Aufzählungszeichen und nummerierten Listen:

1. Erstelle eine Liste mit Aufzählungszeichen oder Nummern. 
2. Rufe den Entwicklermodus auf. 
3. Suche im Entwicklermodus nach der Liste, die du gerade erstellt hast, und suche den dazugehörigen content-Wert. Deine Inhaltseinstellungen findest du im Code direkt darüber. 
4. Füge unter dem Standardwert den folgenden Code ein, wobei HEX der HEX-Code ist, welcher der Farbe entspricht, die du deiner Liste zuweisen möchtest: color: '#HEX'

5. Überprüfe das Design deiner E-Mail auf der rechten Seite deines Bildschirms, um zu sehen, ob die Farbe deiner Liste der Elemente geändert wurde. Deine Aufzählungszeichen oder Nummern und der verknüpfte Text sollten in der Farbe angezeigt werden, die dem HEX-Code entspricht, den du im Entwicklermodus eingegeben hast. 
6. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor. 
7. Klicke auf das Kreuzsymbol , um den Entwicklermodus zu schließen.
8. So änderst du die Farbe deines Textes, während die Farbe deiner Aufzählungszeichen oder Zahlen unverändert bleibt:
   1. Wähle den Text aus, dessen Farbe du ändern möchtest. 
   2. Klicke in der Symbolleiste über deinem Text auf das Symbol Schriftfarbe .
      
   3. Wähle eine Farbe aus deiner Markenpalette oder eine bereits verwendete aus, oder füge den HEX-Farbcode, den du für deinen Text verwenden möchtest, in das HEX-Feld ein. In unserem Beispiel ist das #
      3B3F44.

Herzlichen Glückwunsch! Du hast die Farbe deiner Aufzählungspunkte oder Nummern geändert. 

Geschützte Leerzeichen und Bindestriche sorgen für eine korrekte Formatierung in E-Mails, indem sie unerwünschte Zeilenumbrüche verhindern, z. B. bei zusammengesetzten Namen oder der Aufteilung von Artikelpreisen, und die Lesbarkeit auf allen Geräten gewährleisten. Überprüfe unser Beispiel unten, um zu verstehen, wie wichtig geschützte Leerzeichen und Bindestriche sind:

Ohne geschützte Zeichen	Mit geschützten Zeichen

So fügst du geschützte Leerzeichen und Bindestriche in dein E-Mail-Design ein: 

1. Entwerfen deiner E-Mail. 
2. Rufe den Entwicklermodus auf. 
3. Suche nach dem Text, dem du ein geschütztes Leerzeichen oder einen Bindestrich hinzufügen möchtest. Deine Inhaltseinstellungen findest du im Code direkt darüber. 
4. Kopiere den Code, der dem Typ des geschützten Zeichens entspricht, das du einfügen möchtest:
   • Geschütztes Leerzeichen:  
   • Geschützter Bindestrich: –
5. Füge den oben kopierten Code anstelle des Leerzeichens oder Bindestrichs ein, den du als „geschützt“ verwenden möchtest.
   
6. Überprüfe das Design deiner E-Mail auf der rechten Seite deines Bildschirms, um zu sehen, ob sich die Farbe deiner Liste geändert hat. 
7. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor. 
8. Klicke auf das Kreuzsymbol , um den Entwicklermodus zu schließen.

Herzlichen Glückwunsch! Du hast deinem E-Mail-Design geschützte Zeichen hinzugefügt. 

Outlook-Desktop-Versionen, die die Microsoft Word-Rendering-Engine verwenden, bieten nur eingeschränkte CSS-Unterstützung (z. B. Outlook 2007, 2010, 2013, 2016 und Office 365-Desktop-Versionen). Hintergrundbilder und Textformatierungen werden oft falsch angezeigt, sodass weiße Hintergründe anstelle von Bildern und falsch ausgerichteter Text aufgrund der schlechten Handhabung von Eigenschaften wie background-image und line-height angezeigt werden.

Um sicherzustellen, dass Hintergrundbilder und Textblöcke in Outlook richtig dargestellt werden, verwende die folgende Problemumgehung:

1. Entwerfen deiner E-Mail. 
2. Ermittle die Höhe deines Hintergrundbildes in px. In unserem Beispiel sind das 265px. 
3. Rufe den Entwicklermodus auf. 
4. Klicke auf die Registerkarte, die dem Rendering-Problem entspricht, das du lösen möchtest:
   
   HintergrundbildTextblock

   ❗️ Wichtig

   Diese Problemumgehung funktioniert nur bei Hintergrundbildern, die auf die Breite des Textkörpers und nicht auf die gesamte Breite angewendet werden, sowie bei einem grid-row-Wert. Beachte, dass ein grid-row-Wert keine Schaltfläche enthalten sollte.

   1. Suche nach dem grid-row-Wert, der dem Bereich entspricht, in dem dein Hintergrundbild angezeigt wird.
   2. Gib unter dem Wert background-image height: ein, gefolgt von der Höhe deines Hintergrundbildes in px. In unserem Beispiel geben wir height: 265px ein.
      

   1. Suche nach dem Inhalt, bei dem du Darstellungsprobleme beheben möchtest. Suche nach dem line-height-Wert, der der Stelle entspricht, an der dein Text angezeigt wird. Wenn es keinen line-height-Wert für diesen Inhalt gibt, füge einen hinzu.
   2. Ändere den Standardwert für line-height oder gib einen Wert in px ein, da dies die einzigen Werte sind, die von Outlook-E-Mail-Clients unterstützt werden. In unserem Beispiel geben wir 30px ein.
      
5. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor. 
6. Klicke auf das Kreuzsymbol , um den Entwicklermodus zu schließen.
7. (Optional) Versende eine Test-E-Mail an eine Test-E-Mail-Adresse mit einer der Outlook-Versionen, die keine Hintergrundbilder unterstützen, um sicherzustellen, dass sie korrekt angezeigt wird.

Füge deinen Social-Media-Symbolen in deinen E-Mail-Designs Alternativtext hinzu, um die Barrierefreiheit für sehbehinderte Menschen, die Screenreader nutzen, zu verbessern, das Nutzererlebnis zu optimieren und sicherzustellen, dass der Kontext klar bleibt, falls Bilder nicht geladen werden.

So fügst du Alt-Text in dein E-Mail-Design ein: 

1. Gestalte deine E-Mail und füge deine Social-Media-Symbole hinzu.
2. Rufe den Entwicklermodus auf. 
3. Suche nach Werten type: social-media. Es sollte für jedes Symbol aus den Social Media eines geben. Deine Einstellungen für Inhalte befinden sich direkt darüber im Code. 
4. Suche unter jedem src-Wert, der deinen Social-Media-Symbolen entspricht, nach dem Wert ‚alt: null‘ oder füge einen hinzu.
5. Ersetze null durch deinen Alt-Text. In unserem Beispiel lautet der Alt-Text unseres Website-Symbols The Green Yoga website und der Alt-Text unseres Instagram-Symbols Instagram account. 
   
6. Nimm bei Bedarf weitere Änderungen im Entwicklermodus vor.  
7. Klicke auf das Kreuzsymbol , um den Entwicklermodus zu schließen.
8. (Optional) Es kann eine Test-E-Mail versendet werden, um zu überprüfen, ob der Alt-Text für jedes deiner Mediensymbole korrekt angezeigt wird.

Anders als du vielleicht gedacht hast, ist es nicht möglich, im Entwicklermodus HTML direkt einzugeben. Stattdessen solltest du YAML verwenden, das eine einfache Darstellung für eine JSON-ähnliche Verzeichnisstruktur ist.

Mit dieser Sprache verwendest du abstrakte Definitionen, die von unserem Team erstellt wurden, um die Entwicklung von Templates zu vereinfachen und sicherzustellen, dass das HTML, das erzeugt und an die Kundinnen und Kunden versendet wird, von unseren Tools verwaltet wird. Dies ermöglicht die beste Qualität und eine breite Unterstützung für E-Mail-Clients.

Wie du vielleicht weißt, sind die E-Mail-Clients nicht alle gleich und es kann schwierig sein, professionell aussehende Newsletter zu erstellen, die überall funktionieren, auch auf Mobiltelefonen und in Outlook.

Außerdem ist dies eine Standardaufgabe, da neue E-Mail-Clients auf den Markt kommen und alte Clients die Art und Weise ändern, wie sie E-Mails darstellen.

Deshalb arbeiten wir hart daran, dass deine E-Mails überall wie erwartet funktionieren, und zwar mit minimalem Aufwand für dich. Wir haben eine abstrakte Methode entwickelt, mit der du deinen HTML-Code definieren kannst. Die Arbeit hinter den Kulissen übernehmen wir. 

Für 99 % der Anwendungsfälle wirst du nur selten auf Einschränkungen bei unserer Template-Sprache stoßen, da wir ständig daran arbeiten, sie zu aktualisieren. Aber natürlich könnte es einige Besonderheiten oder kundenspezifische Funktionen geben, die wir vielleicht übersehen haben. Dies eröffnet eine neue Welt von Möglichkeiten, die über das hinausgehen, was wir in der Benutzeroberfläche anbieten. Entdecke unsere häufigsten Anwendungsfälle für den Entwicklermodus für erweiterte E-Mail-Anpassungen!