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

• Verwenden Sie eine kleinere Schriftgröße, um den Inhalt an kleinere Bildschirme anzupassen;
• Verwenden Sie eine sichere Schriftart, um die Lesbarkeit zu verbessern; und
• Passen Sie 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, müssen Sie die Schriftstile sowohl für Handys als auch für Desktop-PCs festlegen: 

1. Entwerfen Ihrer E-Mail. 
2. Rufen Sie den Entwicklermodus auf. 
3. Suchen Sie nach dem Inhalt, für den Sie die Schriftarten ändern möchten. Ihre Einstellungen für Inhalte befinden sich direkt darüber im Code. 
4. Kopieren Sie die Codes, die dem Stil entsprechen, den Sie auf mobilen Geräten ändern möchten: 
   • Textschriftart: font-family: 'font family name'
   • Textgröße: font-size: SIZEpx
   • Textfarbe: color: 'HEX' 
5. Unter dem layout-String und dem 320px-Wert fügen Sie die oben kopierten Codes ein, um die Schriftarten für Mobilgeräte zu bearbeiten, und ersetzen deren Wert mit dem, den Sie benötigen:
   
   • 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 Sie Ihrem Inhalt in px zuweisen möchten. 
   • color: 'HEX' dabei ist HEX der HEX-Code, der der Farbe entspricht, die Sie Ihrem Inhalt geben möchten. 
     
6. Entfernen Sie aus der Zeichenfolge in unserem Beispiel 3 tips to practice safe yoga (3 Tipps für sicheres Yoga) alle Stil- oder Klassenattribute zwischen den '', um nur Ihren Inhalt zu behalten.
   ➡️  Beispiel

   Wenn Ihr Inhalt wie folgt lautet: 

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

   Entfernen Sie alle Stil- oder Klassenattribute, um nur Ihren Inhalt zu behalten, wie z. B.: 

   Inhalt: 'Our 3 tips to practice safe yoga 🧘' (Unsere 3 Tipps, um sicheres Yoga 🧘 zu praktizieren)
7. Wechseln Sie zwischen dem Desktop  (⇧ + D) und dem mobilen  Modus (⇧ + M) mithilfe der entsprechenden Symbole oben rechts in Ihrem E-Mail-Editor. So können Sie sicherstellen, dass sich Ihre Schriftarten je nach Gerätetyp, auf dem sie gelesen werden, ändern:
   
8. Nehmen Sie bei Bedarf weitere Änderungen im Entwicklermodus vor.  
9. Klicken Sie auf das Kreuz-Symbol , um den Entwicklermodus zu schließen.

Herzlichen Glückwunsch! Ihre 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 Ihre 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 zeigen Sie Ihrem Empfänger:innen Gmail-Anmerkungen an: 

1. Entwerfen Ihrer E-Mail. 
2. Rufen Sie den Entwicklermodus auf. 
3. Kopieren Sie den Code aus der Registerkarte unten, der der Art der Anmerkung entspricht, die Sie Ihren Gmail-Empfänger:innen anzeigen möchten:
   
   Anmerkungen zum Deal Produktkarussells Einzelbildvorschau

   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ügen Sie für jedes Bild in Ihrem 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 Ihrem 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. 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 USD 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 Ihrem 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 USD ist, wird der angepasste Preis als 75 $ angezeigt.

4. Fügen Sie oben im Entwicklermodus unter dem Wert für Schriftarten und auf der ersten Ebene den Code ein, den Sie aus einem der obigen Registerkarten kopiert haben.
5. Nehmen Sie bei Bedarf weitere Änderungen im Entwicklermodus vor.
6. Klicken Sie auf das Kreuzsymbol , um den Entwicklermodus zu schließen.
7. (Optional) Versenden Sie eine Test-E-Mail an eine Test-E-Mail-Adresse über Gmail und mit aktivierter Registerkarte „Promotions“ (Werbung), um sicherzustellen, dass die Anmerkung von Gmail korrekt angezeigt wird.

Alternativ können Sie unseren HTML-Editor verwenden, um Anmerkungen in Gmail anzuzeigen. Weitere Informationen finden Sie in der offiziellen Dokumentation von Google. 

Die Farbe Ihrer Aufzählungszeichen oder Zahlen zu ändern, kann nützlich sein, um wichtige Punkte hervorzuheben, Ideen zu gruppieren oder diese an Ihr Branding anzupassen. Unten sehen Sie ein Beispiel dafür, wie eine farbige Aufzählung mit Aufzählungszeichen aussieht: 

So ändern Sie die Farbe Ihrer Aufzählungszeichen und nummerierten Listen:

1. Erstellen Sie eine Liste mit Aufzählungszeichen oder Nummern. 
2. Rufen Sie den Entwicklermodus auf. 
3. Suchen Sie im Entwicklermodus nach der Liste, die Sie gerade erstellt haben, und suchen Sie den entsprechenden Wert für den Inhalt. Ihre Einstellungen für Inhalte befinden sich direkt darüber im Code. 
4. Fügen Sie unter dem Standardwert den folgenden Code ein, wobei HEX der HEX-Code ist, welcher der Farbe entspricht, die Sie Ihrer Liste zuweisen möchten: color: '#HEX'

5. Überprüfen Sie das Design Ihrer E-Mail auf der rechten Seite Ihres Bildschirms, um zu sehen, ob die Farbe Ihrer Liste der Elemente geändert wurde. Ihre Aufzählungszeichen oder Zahlen und der dazugehörige Text sollten in der Farbe erscheinen, die dem HEX-Code entspricht, den Sie im Entwicklermodus eingegeben haben. 
6. Nehmen Sie bei Bedarf weitere Änderungen im Entwicklermodus vor. 
7. Klicken Sie auf das Kreuzsymbol , um den Entwicklermodus zu schließen.
8. So ändern Sie die Farbe Ihres Textes, während die Farbe Ihrer Aufzählungszeichen oder Zahlen unverändert bleibt:
   1. Wählen Sie den Text aus, dessen Farbe Sie ändern möchten. 
   2. Klicken Sie in der Symbolleiste über Ihrem Text auf das Symbol Schriftfarbe .
      
   3. Fügen Sie in das HEX-Feld den HEX-Farbcode ein, den Sie Ihrem Text geben möchten. In unserem Beispiel ist das #
      3B3F44. 

Herzlichen Glückwunsch! Sie haben die Farbe Ihrer 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üfen Sie unser Beispiel unten, um die Bedeutung von geschützten Leerzeichen und Bindestrichen zu verstehen:

Ohne geschützte Zeichen	Mit geschützten Zeichen

So fügen Sie geschützte Leerzeichen und Bindestriche in Ihr E-Mail-Design ein: 

1. Entwerfen Ihrer E-Mail. 
2. Rufen Sie den Entwicklermodus auf. 
3. Suchen Sie nach dem Inhalt, zu dem Sie ein geschütztes Leerzeichen oder einen Bindestrich hinzufügen möchten. Ihre Einstellungen für Inhalte befinden sich direkt darüber im Code. 
4. Kopieren Sie den Code, der dem Typ des geschützten Zeichens entspricht, das Sie einfügen möchten:
   • Geschütztes Leerzeichen:  
   • Geschützter Bindestrich: –
5. Fügen Sie den oben kopierten Code anstelle des Leerzeichens oder Bindestrichs ein, den Sie als „geschützt“ verwenden möchten.
   
6. Überprüfen Sie Ihr E-Mail-Design auf der rechten Seite des Bildschirms, um festzustellen, ob sich die Farbe Ihrer Elementliste geändert hat. 
7. Nehmen Sie bei Bedarf weitere Änderungen im Entwicklermodus vor. 
8. Klicken Sie auf das Kreuzsymbol , um den Entwicklermodus zu schließen.

Herzlichen Glückwunsch! Sie haben Ihrem 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, verwenden Sie die folgende Problemumgehung:

1. Entwerfen Ihrer E-Mail. 
2. Ermitteln Sie die Höhe Ihres Hintergrundbildes in px. In unserem Beispiel sind das 265px. 
3. Rufen Sie den Entwicklermodus auf. 
4. Klicken Sie auf die Registerkarte, die dem Rendering-Problem entspricht, das Sie lösen möchten:
   
   Hintergrundbild Textblock

   ❗️ Wichtig

   Diese Umgehungslösung funktioniert nur für Hintergrundbilder, die auf die Breite des Textkörpers und nicht auf die volle Breite angewendet werden, und unter einem grid-row-Wert. Beachten Sie, dass ein grid-row-Wert keine Schaltfläche enthalten sollte.

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

   1. Suchen Sie nach dem Inhalt, für den Sie Anzeigeprobleme beheben möchten. Suchen Sie nach dem Wert für line-height, der der Stelle entspricht, an der Ihr Text angezeigt wird. Wenn es keinen line-height Wert für diesen Inhalt gibt, fügen Sie einen hinzu.
   2. Ersetzen Sie die Standardgröße Ihres Werts für line-height oder geben Sie eine Größe 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. Nehmen Sie bei Bedarf weitere Änderungen im Entwicklermodus vor. 
6. Klicken Sie auf das Kreuzsymbol , um den Entwicklermodus zu schließen.
7. (Optional) Versenden Sie eine Test-E-Mail an eine Test-E-Mail-Adresse, indem Sie eine der Outlook-Versionen verwenden, die keine Hintergrundbilder unterstützt, um sicherzustellen, dass sie korrekt angezeigt wird.

Fügen Sie Ihren Social-Media-Symbolen in Ihren E-Mail-Designs Alt-Text hinzu, um die Zugänglichkeit für sehbehinderte Menschen, die Bildschirmlesegeräte verwenden, zu verbessern, die Benutzererfahrung zu optimieren und sicherzustellen, dass der Kontext klar ist, wenn Bilder nicht geladen werden.

So fügen Sie Alt-Text in Ihr E-Mail-Design ein: 

1. Gestalten Sie Ihre E-Mail und fügen Sie Ihre Social-Media-Symbole hinzu.
2. Rufen Sie den Entwicklermodus auf. 
3. Suchen Sie nach Werten type: social-media. Es sollte für jedes Symbol aus den Social Media eines geben. Ihre Einstellungen für Inhalte befinden sich direkt darüber im Code. 
4. Suchen Sie unter jedem Wert für typ: social-media nach dem Wert alt: null.
5. Ersetzen Sie null durch Ihren 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. Nehmen Sie bei Bedarf weitere Änderungen im Entwicklermodus vor.  
7. Klicken Sie 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 Ihrer Mediensymbole korrekt angezeigt wird.

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

Mit dieser Sprache verwenden Sie 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 Sie vielleicht wissen, 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 Ihre E-Mails überall wie erwartet funktionieren, und zwar mit minimalem Aufwand für Sie. Wir haben eine abstrakte Methode entwickelt, mit der Sie Ihren HTML-Code definieren können. Die Arbeit hinter den Kulissen übernehmen wir. 

Für 99 % der Anwendungsfälle werden Sie 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. Entdecken Sie unsere häufigsten Anwendungsfälle für den Entwicklermodus für erweiterte E-Mail-Anpassungen!