Inhalt
- 01. MailChimp
- 02. Toms
- 03. Smashing Magazine
- 04. Moo.com
- 05. Twitter
- 06. Vergoldet
- 07. Rdio
- 08. Größe?
- 09. Herr Porter
- 10. Stamm spätestens
- Mochte dies? Lese das!
Während das reaktionsschnelle Webdesign im letzten Jahr oder so zugenommen hat, ist das reaktionsschnelle E-Mail-Design etwas zurückgeblieben. Wenn Sie jedoch möchten, dass Ihre E-Mail gelesen wird, muss sie sicher lesbar sein.
Es gibt einige Marken, die bereits den Vorteil erkannt haben, ihren Kunden das Leben zu erleichtern. Hier sind 10 Beispiele, um Ihre eigenen Bemühungen zu inspirieren ...
- In diesem Tutorial erfahren Sie, wie Sie eine reaktionsfähige E-Mail erstellen. Lesen Sie hier alle Artikel zu reaktionsschnellem Webdesign
01. MailChimp
Wie Sie es von einem E-Mail-Marketing-Service erwarten, der monatlich mehr als 4 Milliarden E-Mails versendet, sind die E-Mails von Mailchimp auf dem Weg zur Arbeit genauso lesbar wie an Ihrem Schreibtisch. Der klügste Teil dieser E-Mail ist ihre Einfachheit. Das Design ändert sich kaum zwischen den Geräten, nur die sozialen Links ändern ihr Layout für kleinere Bildschirme.
02. Toms
Schuhgeschäft Toms 'Ansatz für das Design mobiler E-Mails besteht darin, die Kopf- und Fußzeilenbereiche zu entfernen, um sicherzustellen, dass die primäre Nachricht sofort sichtbar ist. Es werden auch verschiedene Bilder auf Mobilgeräte hochgeladen, die vermutlich eine kleinere Dateigröße haben, um die Ladezeit zu verkürzen, aber auch größere Handlungsaufforderungen und eine verkürzte Kopie für eine schnellere Konvertierung.
03. Smashing Magazine
Der Newsletter des Webdesign-Blogs Smashing Magazine bietet ein einfaches, textlastiges Design mit nur einem Bild in voller Breite für jeden Artikel. Dies spart Zeit beim Aufbau der Reaktionsfähigkeit von Mobilgeräten, da das Layout automatisch verkleinert wird und weiterhin lesbar und vollständig verwendbar ist, ohne dass vergrößert werden muss.
04. Moo.com
Der MOOsLetter bietet Lesern spezielle Angebote, Tipps und kreative Ideen zu den Druckdiensten von Moo. Auf einem Smartphone ändern sich die sekundären Artikel in der E-Mail von einem doppelten zu einem einspaltigen Layout, sodass die Textgröße vergrößert werden kann und alle Handlungsaufforderungen gestreckt werden, um die Breite des Bildschirms auszufüllen.
05. Twitter
Die reaktionsschnelle E-Mail von Twitter hat in der gesamten Branche zu Recht viel Lob erhalten. Durch die Vereinfachung der Kopfzeile, die Vergrößerung des Abstands zwischen Antwort-, Retweet- und Lieblingsaktionen und die Vergrößerung des letzten Aufrufs zum Handeln lässt sich diese E-Mail viel einfacher mit dem Daumen navigieren. Aber warum haben sie die Position der Twitter-Flagge verschoben? Form oder Funktion?
06. Vergoldet
Gilt führt zeitlich begrenzte Verkäufe von Designerlabels mit enormen Rabatten durch. Dazu müssen die Benutzer in der Lage sein, den Prozess vom Empfang einer E-Mail bis zum Kauf schnell zu durchlaufen. Durch Entfernen der Liste der Links auf der linken Seite und Verringern der Größe der Hauptnavigation für kleinere Bildschirme kann der Empfänger schnell herausfinden, was ihn interessieren könnte, und sich am Verkauf beteiligen.
07. Rdio
Rdio-E-Mails entsprechen nicht der üblichen Designkonvention mit einer festen Breite von 600 Pixel. Stattdessen sind ihre E-Mails mit einer Mindestbreite fließend. Wenn sie also auf einem Mobiltelefon angezeigt werden, wird der in Spalten angezeigte Inhalt einfach in engeren Spalten angezeigt. Normalerweise funktioniert dies nicht sehr gut, aber da der Inhalt gering ist, bleibt das Layout intakt und lesbar.
08. Größe?
E-Mails vom Bekleidungsgeschäft mit Fragezeichen Größe? Dank der Verwendung großer Bilder und Click-throughs sehen sie für den mobilen Einsatz bereits einfach genug aus. Das hat das Unternehmen jedoch nicht davon abgehalten, einige Zeit zu investieren, um das mobile Erlebnis ein bisschen besser zu machen. Die Anzahl der Links oben und unten in der E-Mail wird reduziert und zeigt nur die wichtigsten an. Alle Schaltflächen werden gedehnt, um die Breite der E-Mail zu füllen und das Drücken zu vereinfachen.
09. Herr Porter
Diese E-Mail von der Website für Kleidereinkäufe, Herr Porter, scheint nicht für Mobilgeräte geeignet oder optimiert zu sein, aber aufgrund ihres Designs ist dies nicht unbedingt ein Problem. Große Heldenbilder und Schaltflächen im oberen Bereich sind für die meisten E-Mail-Designs Standard, aber 28 Kleidungsstücke oder Accessoires danach wären normalerweise ein bisschen viel für einen winzigen Smartphone-Bildschirm. Nicht hier. Herr Porter fügt isolierten Bildern kurze und süße Beschreibungen hinzu, die sich perfekt zum Drücken mit den Fingerspitzen eignen.
10. Stamm spätestens
Dies mag für meine eigene Agentur, Tribe, wie ein schamloser Plug erscheinen, und das ist es wahrscheinlich - aber wir haben auch unsere eigene reaktionsfähige E-Mail erstellt, die von einem variablen zwei- und dreispaltigen Layout auf Desktop-Computern zu einem einspaltigen Layout wechselt mit größerem Text auf Mobilgeräten mithilfe von Medienabfragen. Es ist leicht zu lesen und die Links sind groß genug, um mit einem Daumen oder Finger gedrückt zu werden, ohne vergrößern zu müssen.
Wörter: Mat Hayward
Mat ist ein digitaler Entwickler und Designer, der in Nottingham lebt und für die Markenkommunikationsagentur Tribe arbeitet.
Mochte dies? Lese das!
- 10 hervorragend reagierende E-Commerce-Websites
- So erstellen Sie eine App
- Laden Sie die besten kostenlosen Schriftarten herunter
- Geniale Auswahl an Wordpress-Tutorials
Haben Sie ein großartiges Beispiel für ein E-Mail-Newsletter-Design gesehen? Lass es uns in den Kommentaren wissen!
