Endlich geschafft – 80% zufrieden

Endlich ist es geschafft. Das neue mobilgerätetaugliche absolit-Template ist programmiert. Gestalterisch ist es nicht ganz so geworden, wie wir uns das vorgestellt hatten, aber das Template erleichtert uns die monatliche Newsletter-Befüllung deutlich.

Vielleicht erst einmal „aus dem Nähkästchen geplaudert“: Aller Anstrengung zum Trotz ist es unseren Grafikern nicht gelungen, ein Design zu gestalten, das Torsten Schwarz 100% gefiel. Darauf wurde die Hausgrafikerin eingeschaltet und unser Designvorschlag ist einigen Änderungen unterworfen worden. Ich werde im Folgenden unsere Gestaltungsansätze mit einfließen lassen, auch wenn diese nicht in sämtlichen Bereichen übernommen wurden.

Hier einige Entwicklungsschritte (Screenshots dswg etwas pixelig):

1. Erster grober Designvorschlag :
E-Mail Version | Mobile Version

2. Letzte Stufe Designüberarbeitung postina.net:
E-Mail Version | Mobile Version

3. Von Hausgrafikerin überarbeitete finale Version:
E-Mail Version | Mobile Version

Vorab: Schnellkurs responsive Design für Newsletter
Beim sogenannten responsiven Design ist im E-Mail Design die mobilgerechte Version enthalten. Mittels sogenannter media queries erhalten Endgeräte mit einer geringeren Bildschirmbreite als 480px eine Newsletter-Version, die 320px breit ist. Die gestalterischen Möglichkeiten sind dabei recht eingeschränkt, da die E-Mail Version immer noch mit klassischem Tabellenlayout (für Outlook 2007/2010) gestaltet werden muss.
Was kann angepasst werden? Zeilen und Tabellen können schmaler gemacht oder ausgeblendet werden. Das gleiche gilt für Bilder, wobei hier Höhe und Breite fix definiert sein muss. Schriften können vergrößert oder verkleinert werden.

Zweispaltig vs einspaltig
Gewöhnlich versucht man für Smartphones mit einspaltigen Designs zu arbeiten. Ob der Fülle der Inhalte des absolit-Newsletters haben wir uns aber für ein zweispaltiges Design entschieden. Es war einfach zu unübersichtlich, alle Artikel untereinander zu haben. Bei der Befüllung des Templates muss man nun darauf achten, dass keine zu langen, mit Bindestrichen verbundenen Wörter enthalten sind, die die Tabellenspalten nach außen drücken/verreißen können. Wir haben eine 12px Schriftgröße statt der für Smartphones optimalen 13px Schrift gewählt, um kompakter zu sein und überhaupt zweispaltig arbeiten zu können.

Websichere Farben
In den von postina.net gestalteten Designversionen arbeiten wir vorwiegend mit websicheren Farben. Ein und derselbe Newsletter kann auf einem (recht „farbechten“) Macintosh- und einem PC-Bildschirm älteren Datums eklatant unterschiedlich aussehen und einen ungewünschten Eindruck hinterlassen. Hellgrau wird zu rosa, ein sattes goldgelb wird neon – Sogenannte websichere Farben sind in der Darstellung auf unterschiedlichen Bildschirmen relativ einheitlich.

Preheader
Der Newsletter enthält einen kompakten Preheader über eine Spalte. Hier werden die drei Hauptartikel des Newsletters benannt, damit die Vorschauzeile im Smartphone und die Vorschau-Outlook-Blase aussagekräftig gefüllt sind. Torsten Schwarz wollte den Preheader direkt mit den Homepage-Artikeln verlinken. Ihm liegt an einer guten Klickrate des absolit-Newsletters. Zudem spart er sich so das Inhaltsverzeichnis.

Header
Der Bild-Header ist schlank und wird für die mobile Version einfach verkleinert. Er nimmt so im Vorschaufenster nicht viel wichtigen Platz weg, gibt dem Design aber Halt.
Im postina.net Designvorschlag sollte lediglich das Logo links als Bild enthalten sein und der rechte Teil in HTML programmiert, damit bereits in der Vorschau (ohne Bilder zu laden), Farbe und Online-Shop auftauchten. Die drei Links auf die Hauptprodukte (Bücher, Studien, Workshops) von Torsten Schwarz waren prominent im Header eingebunden, um den Abverkauf dezent und gleichzeitig benutzerfreundlich zu fördern.

Links
Im jetztigen Newsletter sind die Links klar als Links zu erkennen. Entweder sie sind als „mehr“-Button oder im typischen Linkblau gelöst und rechtsbündig ausgerichtet. Das ist insbesondere für Touchscreens vorteilhaft, da man nicht beim „Wischen“ versehentlich Links erwischt. Allerdings wollte Torsten Schwarz dann doch auch weiterhin die Überschriften verlinken. Ursprünglich waren wir übereingekommen, dies aus Usability-Gründen nicht zu tun. Ihm liegt an einem klickstarken Newsletter, auch für den Anzeigenverkauf ein wichtiges Argument.

SWYN-Links
Bei den Share with your Network Links hatten wir eine Zwischengröße von 24px angedacht. Die Größe ist mit dem Finger noch halbwegs klickbar, gleichzeitig passen die Netzwerk-Icons in der schmalen rechten Spalte noch in eine Zeile. Unsere Vorschlag war, nur Artikel mit großem Leser-Mehrwert zum SWYNNEN anzubieten. Torsten Schwarz möchte allerdings künftig das Teilen mit Sozialen Netzwerken gar nicht mehr anbieten. Schade eigentlich, es wäre ein spannendes Thema für unseren „Hinter den Kulissen“-Blog gewesen, die mobile Sharerate zu untersuchen.

WIR WÜNSCHEN IHNEN VIEL FREUDE MIT DEM NEUGESTALTETEN NEWSLETTER UND STEHEN IHNEN GERNE FÜR FRAGEN ZUR VERFÜGUNG!