Studieren der Master für Responsive Design in E-Mail-Marketing und Landing Pages

Responsives Design

El Responsive Design ist heute aufgrund der unterschiedlichen Formate von entscheidender Bedeutung dem ein Benutzer von seinem Tablet, Handy und sogar Computer gegenübersteht. Dieses reaktionsschnelle Design im E-Mail-Marketing und auf Zielseiten ist für die Omnichannel-Kommunikation mit unseren Kunden mehr als wichtig.

Man muss es also ernst nehmen, um verschiedene Vorlagen mitzunehmen verschiedene Breiten, um mit dem besten Design anzukommen Möglicherweise landen die Newsletter oder die Zielseite, auf der zukünftige Kunden, die von unseren Anzeigen auf Google oder Facebook konvertiert werden sollen, landen.

Responsive Design im E-Mail-Marketing

E-Mail-Marketing ist eine der Möglichkeiten, Produktangebote oder neue Beiträge, die in unserem Blog erstellt wurden, anzukündigen also tiefer verengen mit all unseren Anhängern.

Dass diese Newsletter ansprechen, bedeutet dies Sie können perfekt von einem Handy aus gesehen werden, ein Tablet oder ein Computer. Wir müssen also versuchen, die notwendigen Werkzeuge zu haben, damit alle visuellen Elemente harmonisch genug sind, um den Newsletter leicht lesen zu können.

IKEA

IKEA Newsletter

Responsive bedeutet das Die Anzeige einer Seite auf verschiedenen Geräten ist immer korrekt. Dafür haben wir Werkzeuge von E-Mail Marketing Dies hilft uns, den in verschiedenen Formaten erstellten Newsletter zu testen und so Werte wie Abstand oder Rand so zu ändern, dass sie perfekt positioniert werden, wenn wir die Breite unseres Browsers verringern.

Im Webdesign mit CSS "Media Queries" werden verwendet eine Website nach dem Format zu gestalten. Bis zu 360px wären für ein Mobiltelefon, und von 360px bis 650px könnten wir Änderungen für alle Benutzer vornehmen, die unsere Website von einem Tablet aus anzeigen.

Einige der Grundsätze für unsere E-Mail-Marketing-Newsletter sind:

  • Eine saubere visuelle Hierarchie: Ein Titel in H2, um den Text im Absatzformat zu belassen.
  • Zwei verschiedene Quellen: Eine für den Titel und eine für den Text macht unseren Newsletter besser lesbar.
  • El Verwendung von Farbe zur Unterscheidung von Titel, Text und anderen Elementen: Wir können allmählich von einem dunkelgrauen zu einem helleren wechseln.
  • Un CTA (Call to Action) klar und unterscheidbar: Wenn das Logo unseres Unternehmens in Rot ist, könnte der CTA in dieser Farbe sein, während der Rest in einer Komplementärfarbe ist.

Wir geben Ihnen ein klares Beispiel für eine große Responsive Design in einem Newsletter von Filmin und das können Sie in dem bereitgestellten Bild sehen. Klare Typografie in Weiß und der Text in einem sehr hellen Grau, mit dem Sie schnell die verschiedenen Bereiche visualisieren können, in denen wir zum Lesen eingeladen sind, wenn wir möchten. Der CTA ist nicht, dass er aus einer anderen Welt stammt, aber er hilft bei dieser Spielikone und lässt uns sehen, was uns erwartet.

Responsive in Filmin

Ausreichende Leerzeichen am Rand, Weiß als Hauptfarbe für Text und das passt perfekt zum logo Von der Marke; umgeben von dem Grau, das es auszeichnet. Ein auffälliges Bild, das den Punkt für einen Newsletter setzt, der vom ersten Moment an aktiv ist. An den Seiten bleiben auch Leerzeichen, damit die gesamte Bildschirmbreite nicht "aufgefressen" wird.

Im Die Desktop-Version behält diese Prinzipien bei, sogar mehr Platz in den Texten lassen und auf jeder Seite einen großen Rand lassen:

ansprechbar

Responsive Design auf einer Landing Page

die Dieselben Prinzipien können beim Responsive Design verwendet werden einer Landing Page. Es ist äußerst wichtig, sich weltweit die Zeit zu nehmen, um die Vorlage richtig auszuwählen und einige Regeln im Design zu befolgen:

  • Visuelle Einfachheit: Wir sprechen davon, Leerzeichen zu lassen, um den Fokus auf CTAs zu legen.
  • Schöne und ansprechende Bilder für den Leser, ohne die Auflösung zu vergessen und dass sie perfekt aussehen.
  • Die Bedeutung der Farbe und das betonen wir noch einmal.

Wir müssen am reaktionsschnellen Design einer Zielseite für ein Handy, ein Tablet und einen Desktop arbeiten. Nehmen Sie die Zeit benötigt, um es bei jeder Änderung immer wieder zu versuchen Dies zeigt sich in diesen drei Formaten, da wir uns selbst vertrauen und vergessen können, dass die in CSS vorgenommenen Änderungen auf Mobilgeräten schrecklich aussehen werden.

Hotjar

Hotjar Landing Page

Es ist ein Job, der mühsam sein kann, aber es ist wichtig, dass wir uns die Zeit nehmen, jede Änderung zu testen. Das Verwendung von Seitenrändern und versuchen Sie so weit wie möglich, die Regeln in den CTAs oder Aktionsschaltflächen nicht zu verpassen:

  • Dass Der Abstand in Bezug auf den Text und den Schaltflächenrand ist progressiv in allen drei Formaten. Weder ist es klein noch groß und es ist auf der gleichen Höhe.
  • La Verhältnis in CTA-Tastengröße mit dem Rest der Elemente, wo es sich befindet, muss bereitgestellt werden.

Ein klares Beispiel dafür ist die Arbeit von Shopify auf Ihrer Zielseite auf dem Desktop und in dem Sie in der mobilen Version sehen können. Aufmerksamkeit für die Verwendung von Farben, Leerzeichen und Texten mit den entsprechenden Größen und Typografien:

Responsive in Shopify

Eine Reihe von Tipps zu haben Eine bessere Zielseite für Ihr Unternehmen oder Ihren Online-Shop und diese Newsletter, die so wichtig sind, um die Updates und Promos für Ihre Benutzer zu erhalten.


Der Inhalt des Artikels entspricht unseren Grundsätzen von redaktionelle Ethik. Um einen Fehler zu melden, klicken Sie auf hier.

Schreiben Sie den ersten Kommentar

Hinterlasse einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * gekennzeichnet

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.