Avisota & Contao: Teil 2 - das Vorspiel ist ein HTML-Template

Dabei ist Tabellenlayout angesagt, HTML 3, und eine relativ kleine Menge an HTML-Tags und CSS-Definitionen. Mailprogramme sind wesentlich schlechter in der Darstellung als die großen Browser-Geschwister, und dazu kommt, dass es durchaus noch Menschen gibt, die mit eigentlich komplett veralteten Mailclients wie Outlook Express, Lotus Mail oder ähnlichen arbeiten. Da ist der kleinste gemeinsame Nenner gefragt – und der ist in diesem Fall sehr klein, wie ein ernüchternder  Blick auf http://www.campaignmonitor.com/css/ klar macht.

Auch wenn man mit einem CMS arbeitet: Zunächst ist also Handarbeit angesagt, um ein stabiles Grundgerüst zu erstellen, in das dann hinterher die dynamischen Passagen eingebaut werden können.

Schnell entworfen ist eine Skizze mit ein paar häufig verwendeten Elementen:

• Ein größeres Kopfbild transportiert das Corporate Design und sorgt sowohl für Wiedererkennbarkeit als auch für einen emotionalen Einstieg in den Inhalt
• darunter findet sich ein personalisierter Begrüßungstext für die Empfänger_innen
• daneben, ebenfalls im oberen Bereich eine knappe Information zum Versender und ein paar Kontaktmöglichkeiten
• als nächstes kommen die eigentlichen Newsletter-Artikel, die in Kurzform ein Thema anreißen und dann auf die Webseite verlinken sollen
• unter den Hauptinhalten finden sich Servicelinks
• den Abschluss bildet das Impressum

Einschränkend kommt hinzu, dass die meisten Newsletter in Mailprogrammen gelesen werden – Links ist die Nachrichtenliste, rechts werden einzelne Nachrichten dargestellt – was dann zu einer optimistisch angenommenen Breite von 600 Pixeln führt. Nicht viel Platz also.

Tabellenlayout – das hatten wir schon. Kein Inline-CSS, keine angehängten Stylesheets – Mailprogramme sind wählerisch.

Das fertige Mailtemplate sieht dann ungefähr so aus wie auf dem Screenshot.

Was darin ganz klar fehlt sind dynamische Inhalte – die uns die Kombination von Contao und Avisota zur Verfügung stellen soll. Wie das geht (und welche Möglichkeiten Avisota hat) erklärt Teil 3.