So verwenden Sie E-Mail-Medienabfragen für verschiedene E-Mail-Clients

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps

Wäre es nicht schön, wenn jede E-Mail in jedem E-Mail-Client und auf jedem Gerät gleich aussehen würde?

Ein E-Mail-Entwickler kann träumen. Da dies jedoch nicht der Fall ist, behandeln wir eines der nützlichsten Tools in der Toolbox eines jeden Entwicklers, um Designs für verschiedene Geräte und Ansichtsfenster zu optimieren: die Medienabfrage.

Wenn Sie mit Medienabfragen für die Webcodierung vertraut sind, funktionieren sie weitgehend auf die gleiche Weise, außer dass Sie sie nicht verschachteln können. Ansonsten gibt es noch einige andere Anwendungsfälle für Medienabfragen in E-Mails, die sich als hilfreich erweisen könnten.

Springen Sie zu einem Abschnitt in diesem Artikel:

Was sind Medienabfragen?

Medienabfragen sind Teil von CSS3 und ermöglichen Entwicklern, ihre Inhalte für verschiedene Präsentationen oder Geräte anzupassen. Diese Codeblöcke werden in der platziert

/* Wenn der Browser mindestens 600 Pixel und darunter hat */ @media screen and (max-width: 600px) { .element { /* Einige Stile anwenden */ } }

Eine Medienabfrage besteht aus einem optionalen Medientyp (alle, Handheld, Print, TV usw.) und einer beliebigen Anzahl optionaler Ausdrücke, die den Zeitpunkt der Auslösung der Abfrage einschränken, z. B. Breite, Pixeldichte oder Ausrichtung.

Die Chancen stehen gut, dass Sie schon einmal gesehen haben, wie Medienabfragen in der realen Welt funktionieren. Sie sind eine der besten Möglichkeiten für Entwickler und Designer, responsive E-Mails zu erstellen, die für Mobilgeräte optimiert sind. Medienabfragen tun dies, indem sie die Geräte- oder Anzeigebreite erkennen und das Design der E-Mail entsprechend ändern.

So funktioniert das:

Verwendung von Medienabfragen für reaktionsfähige E-Mails

Responsive E-Mails sind der häufigste Grund, warum Sie eine Medienabfrage in einer E-Mail verwenden. Lassen Sie uns also Schritt für Schritt besprechen, wie das aussieht.

Angenommen, Sie programmieren einen Newsletter in einem zweispaltigen Format mit einem Bild auf der linken Seite und Text auf der rechten Seite. Das funktioniert auf den meisten mobilen Bildschirmen nicht – oder ist zumindest nicht das beste Erlebnis – daher sollten Sie eine Medienabfrage verwenden, um das Design für Mobilgeräte anzupassen. In diesem Fall würden die meisten Designer die Bilder für mobile Designs über den Text stapeln.

Festlegen der minimalen und maximalen Breite

Medienabfragen teilen dem Code mit, wann und wie dies geschehen soll, normalerweise mithilfe von zwei Attributen: min-width und max-width. Eine einfache Medienabfrage legt beides für ein bestimmtes Gerät oder eine bestimmte Ansichtsfenstergröße fest.

Hier ist ein Beispiel für eine Abfrage mit minimaler Breite:

@media only screen und (min-width: 600px) {…}

Was diese Abfrage wirklich bedeutet, ist „Wenn [device width] größer oder gleich 600 Pixel ist, dann führen Sie {…} aus.“ In diesem Fall würden Sie standardmäßig den zweispaltigen Stil verwenden.

Wenn die E-Mail also auf einem iPhone 13 Pro mit einer Ansichtsbreite von 390 Pixel geöffnet wird, wird die Medienabfrage nicht ausgelöst und die in { … } enthaltenen Stile werden nicht wirksam.

Dann würden Sie Ihre maximale Breitenabfrage festlegen:

@media only screen und (max-width: 600px) {…}

Was diese Abfrage wirklich bedeutet, ist „Wenn [device width] kleiner oder gleich 600 Pixel ist, dann führen Sie {…} aus.“ In diesem Fall würden Sie die Bilder in einer Spalte stapeln.

Wenn die E-Mail also auf einem iPhone 13 Pro mit einer Ansichtsbreite von 390 Pixel geöffnet wird, wird die Medienabfrage ausgelöst und alle in { … } enthaltenen Stile werden wirksam.

Sie müssen sie jedoch nicht einzeln ausführen. So sieht es kombiniert aus:

@media only screen und (min-width: 400px) und (max-width: 600px) {…}

Sie können diese Abfragen zusammen verwenden, um einen bestimmten Bereich von Bildschirmgrößen anzusprechen.

Die obige Abfrage wird nur für Bildschirme mit einer Breite zwischen 400 und 600 Pixel ausgelöst. Sie können diese Methode verwenden, wenn Sie ein Design für ein bestimmtes Gerät mit bekannter Breite erstellen möchten.

Verwalten verschiedener Haltepunkte

Dies kann jedoch wiederholbar und umständlich werden, wenn Sie versuchen, jedes einzelne aktuelle iPhone, Android, iPad und Google Pixel in derselben Abfrage zu berücksichtigen. Insbesondere bei Android-Geräten gibt es große Unterschiede in der Bildschirmgröße, und die meisten Hersteller bringen jedes Jahr neue Telefone auf den Markt. Möglicherweise behalten noch viele Abonnenten ihr altes iPhone 8s!

Die meisten Medienabfragen sind so eingestellt, dass sie bei bestimmten Bildschirmbreiten oder Haltepunkten ausgelöst werden, um einen Bereich anzugeben, anstatt auf ein bestimmtes Gerät abzuzielen. Hier ist ein Beispiel von W3schools:

Codierung für Medienabfragen in der Praxis

Die meisten Entwickler berücksichtigen jedoch nicht jeden einzelnen Haltepunkt in ihren Abfragen. Beim Codieren einer reaktionsfähigen E-Mail mithilfe von Medienabfragen besteht eine gängige Technik darin, Tabellen mit align = „left“ und einer speziellen Klasse zu erstellen, die innerhalb der Medienabfragen gezielt angesprochen werden soll. Ein zweispaltiger Abschnitt könnte beispielsweise so aussehen:

Jeder der Tische mit einer Breite von 49 % kann in der „Desktop“-Ansicht nebeneinander platziert werden. Wir verwenden 49 % statt 50 %, da Outlook sehr wählerisch sein kann, was nebeneinander passt und was nicht. Sie können eine Breite von 50 % verwenden, wenn Sie alle Stile richtig eingestellt haben (kein Rand, Abstand usw.).

Wenn Sie mit ähnlichem Code einen dreispaltigen Abschnitt erstellen möchten, stellen Sie jede Tabelle auf eine Breite von 32 % ein.

Wenn der Responsive-Code zum Einsatz kommt, möchten wir diese Inhaltsblöcke für Telefone auf 100 % Breite einstellen, sodass sie den gesamten Bildschirm ausfüllen. Bei den meisten Telefonen wird dies mit einer einzigen Medienabfrage erledigt:

Nur @media-Bildschirm und (max-width: 414px) { .deviceWidth {width:280px!important; padding:0;} .center {text-align: center!important;} }

Sie können weiterhin Medienabfragen mit speziellen Stilen hinzufügen, um so viele verschiedene Bildschirmgrößen abzudecken, wie Sie möchten. Sie sollten Ihren Medienabfragen außerdem Code hinzufügen, um die Schriftgröße und Zeilenhöhe für jede Bildschirmgröße zu optimieren. Dies verbessert die Lesbarkeit für Ihre Empfänger und stellt sicher, dass Ihre E-Mail so aussieht:

Aber das ist nicht der einzige wichtige Anwendungsfall für Medienabfragen – wir werden im Folgenden näher darauf eingehen, wie und warum man sie verwendet.

Verwenden von Medienabfragen zur Geräteorientierung

Sie können Medienabfragen auch verwenden, um die Ausrichtung des Geräts und nicht nur die Größe des Ansichtsfensters festzulegen. Zurück zu diesem zweispaltigen Layout-Beispiel: Es könnte funktionieren, wenn sich ein Telefon oder Tablet im Querformat, aber nicht im Hochformat befindet. Hier ist ein Beispiel dafür, wie das aussieht:

@media screen und (Ausrichtung: Querformat) { … }

Bei den meisten Clients wird die Querformat-Medienabfrage unabhängig von der Ausrichtung immer ausgelöst. Wenn die E-Mail also auf einem Telefon oder Tablet im Hochformat geöffnet wird, sieht die E-Mail genauso aus wie die oben codierte responsive E-Mail, wobei die Bilder übereinander gestapelt sind. Wenn die E-Mail jedoch im Querformat geöffnet wird, wird sie in einem zweispaltigen Format angezeigt.

Leider funktioniert diese Abfrage in iOS Mail nicht richtig.

Verwenden von Medienabfragen zur gezielten Ausrichtung auf Yahoo!

Jeder Kunde ist etwas anders und Medienabfragen sind eine Möglichkeit, diese Unterschiede anzugehen.

Wenn es um Yahoo geht! Für E-Mail-Postfächer gibt es eine Medienabfrage, die Sie ausprobieren können und die speziell auf diesen E-Mail-Client abzielt. Sie könnten diese Medienabfrage verwenden und Stile hinzufügen, die nur in Yahoo! ausgelöst werden.

Dies kann verwendet werden, um Layout- oder Rendering-Probleme zu beheben, die nur in Yahoo! auftreten. Mail oder um Nachrichten einzuschließen, die nur für Yahoo! bestimmt sind. Benutzer.

Verwenden von Medienabfragen für E-Mails im Dunkelmodus

Eine weitere Anwendung von Medienabfragen, die sehr nützlich sein kann, ist die defensive Codierung für den Dunkelmodus. Einige E-Mail-Clients ändern Ihr E-Mail-Design überhaupt nicht, was zu einem wirklich schlechten E-Mail-Erlebnis führt – entweder indem sie die Farben Ihrer E-Mail vollständig invertieren, wodurch sie unzugänglich und unlesbar wird, oder indem sie sie hell halten, wenn sie den Dunkelmodus aktiviert haben, was schade ist ihre Augen.

Um dies zu verhindern, können Sie mit dieser Medienabfrage verschiedene Designs für den Dunkelmodus anzeigen:

@media (bevorzugtes Farbschema: dunkel)

E-Mail-Client-Unterstützung für Medienanfragen

Leider unterstützt nicht jeder E-Mail-Client Medienabfragen. Was wäre das Leben eines E-Mail-Entwicklers ohne die Überraschungen, die ihm bestimmte E-Mail-Clients bereiten? (Ja, es sind Outlook und Gmail … das ist immer so.)

Hier finden Sie eine Übersicht darüber, welche E-Mail-Clients Medienabfragen unterstützen und welche nicht:

(Vielen Dank an unsere Freunde von Can I Email für die Informationen. Schauen Sie sich dort die neuesten Informationen zu Medienanfragen und mehr an.)

Sie werden von Kunden, die WebKit verwenden, starken Support finden, Sie müssen jedoch Problemumgehungen für inkonsistente Unterstützung in Gmail verwenden. Beispielsweise können Sie „min-width“ und „max-width“ für die Reaktionsfähigkeit verwenden, jedoch nicht (prefers-color-scheme) für E-Mails im dunklen Modus.

Medienanfragen: Ein weiterer Grund zum Testen

Angesichts der inkonsistenten Unterstützung verschiedener E-Mail-Clients und unterschiedlicher Designs für Mobilgeräte und das Web sind Tests unerlässlich. Besonders für heikle Kunden wie Gmail, bei denen ein Fehler im CSS dazu führt, dass die E-Mail unlesbar wird. Email on Acid bietet unbegrenzte E-Mail-Tests bei den wichtigsten Postfachanbietern und den beliebtesten Geräten. Das bedeutet, dass Sie sicherstellen können, dass Ihre E-Mail gut aussieht, bevor sie im Posteingang landet. Möchten Sie es selbst sehen? Profitieren Sie von unserer kostenlosen, siebentägigen Testversion.

Dieser Artikel wurde zuletzt im November 2021 aktualisiert. Zuvor wurde er im Februar 2019 aktualisiert und erstmals im Oktober 2016 veröffentlicht.

Autor: Das E-Mail-on-Acid-Team

Das Content-Team von Email on Acid besteht aus digitalen Vermarktern, Content-Erstellern und echten E-Mail-Freaks. Vernetzen Sie sich mit uns auf LinkedIn, folgen Sie uns auf Facebook und twittern Sie unter @EmailonAcid auf Twitter, um noch mehr tolle Neuigkeiten und tolle Konvos zum Thema E-Mail-Marketing zu erhalten.

Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps