Früher war alles besser. Wer online kommunizieren wollte, dem genügte ein einziger Webauftritt. Aber heute, wo Kunden in der schönen neuen Multiscreen-Welt immer und überall online sind? Mit Desktop-PC, Laptop, Tablet oder Smartphone? Da braucht es theoretisch für jedes Endgerät die passende Version des Webauftritts, um eine perfekte Darstellung zu garantieren. Denn jedes Anzeigemedium hat eine andere Bildschirmgröße. Und als würde dies nicht schon ausreichen: Bei Tablets und Smartphones kann der Nutzer sogar auch noch die Bildschirmorientierung ändern.
Doch jetzt kommt die gute Nachricht: Auch heute genügt ein einziger Webauftritt. Vorausgesetzt, er folgt den Regeln des Responsive Design. Denn damit lassen sich Online-Angebote realisieren, die quasi automatisch das jeweilige Anzeigegerät erkennen und sich selbstständig daran anpassen. Die optimale Anzeige der Inhalte ist damit sichergestellt.
Responsive Design und E-Mail Marketing
Der aktuelle Trend zur Multiscreen-Nutzung von Online-Angeboten bringt auch Herausforderungen für das E-Mail Marketing mit sich. Denn
Newsletter und Landeseiten müssen so optimiert sein, dass Sie auf klassischen PC-Systemen ebenso korrekt angezeigt werden, wie auf Tablets und Smartphones. Bei den mobilen Endgeräten
kommt außerdem hinzu, dass deren Nutzer auch noch vom Hoch- in das Querformat und umgekehrt wechseln können. Ein Newsletter-Layout mit 640 Pixel Breite beispielsweise ist ideal
zur Darstellung auf Desktops. 320 Pixel Layoutbreite jedoch sind angesagt, wenn eine E-Mail im Hochformat auf einem mobilen Endgerät angezeigt werden soll.
Responsive Design ermöglicht es E-Marketern, Newsletter und E-Mailings so zu gestalten, dass sie auf den unterschiedlichsten Endgeräten perfekt angezeigt werden und ihren Lesern darüber hinaus auch noch eine vorbildliche Benutzerfreundlichkeit bieten. Und diese werden dies positiv bewerten und entsprechend honorieren.
Grundlagen des Responsive Webdesign
Damit die selbstständige Anpassung an unterschiedliche Bildschirmauflösungen und -orientierungen funktioniert, müssen Layouts reaktionsfähig
programmiert werden. Dazu bilden der neue Standard HTML5 und CSS3 die technische Basis.
CSS3 ermöglicht die für Responsive Design essenziellen Mediaqueries. Diese sorgen dafür, dass beim Aufruf einer Webseite oder eines Newsletters zunächst die Eigenschaften des aktuellen Gerätes abgefragt werden. Die ermittelten Geräteeigenschaften – etwa Breite und Höhe des Browserfensters, Breite und Höhe des Gerätes, Bildschirmorientierung oder -auflösung – entscheiden dann darüber, welches Layout angezeigt wird.
Ein flexibles Raster aus fest definierten Umbruchpunkten (diese entsprechen den gängigen Bildschirmbreiten und -orientierungen) sorgt dafür, dass sich das Layout an das Anzeigemedium anpassen kann. Alle Inhalte werden nun innerhalb des Layouts in Spalten relativer Breite geordnet. Ein lineares Layout garantiert zudem eine optimale Anzeige auf Smartphones.
Aber auch Bilder und Videos in E-Mails oder auf Websites müssen reaktionsfähig sein. Klar festgelegteBreakpoints sorgen dafür, dass Bilder oder Videos bei Bedarf in einer alternativen Darstellungsgröße geladen werden. Skalierbare Vektorgrafiken sind ebenfalls empfehlenswert.
Responsive Design für Newsletter & Co.
Für die Realisierung von HTML-Newslettern empfiehlt sich die Berücksichtigung der oben genannten Regeln. Darüber hinaus hier noch einige praktische Tipps für Newsletter & Co. im Responsive Design:
Statt ein dreispaltiges Layout zu wählen, sollten Designs für mobile Endgeräte eher einspaltig gehalten werden
Texte für mobile Versionen eventuell kürzen
Text- und Buttongrößen für mobile Endgeräte anpassen, damit Nutzer sie einfach mit einem Fingertipp „anklicken“ können
Auf „überflüssige“ Inhalte, etwa Schmuckbanner etc., in der mobilen Version verzichten
Zahl der Beiträge eines Newsletters überdenken – eine zweispaltige Desktop-Version kann in einer einspaltigen Darstellung sehr lang werden
Probleme mit Gmail-App
Einen Malus gibt es jedoch: Eine wirklich zu 100 Prozent zuverlässige Optimierung mittels Responsive Design gibt es nur für iPhones.
Einige Android-Endgeräte – etwa die Samsung Galaxy-Reihe – nutzen Gmail als Standard Client. Die Gmail App unterstützt die Optimierung jedoch nicht, sodass immer die komplette Desktop-Variante
eines E-Mailings angezeigt wird.
