Das Auge liest mit! Wer sich viel Mühe mit einem schicken Newsletter gibt, möchte auch, dass die Infoseiten dazu im Netz attraktiv aussehen. Auf dieser Seite erfährst du, wie du das Drumherum deines Newsletters aufpolierst. Außerdem gibt es ein paar Tipps, wie du Menschen von einem Abo überzeugen kannst.
Gestaltung der Listen-Infoseiten (Abo-Seite)
Listserv/Mailman bietet an, die nach außen gehenden Listen-Seiten mit HTML zu bearbeiten. Damit ergeben sich alle Möglichkeiten zur Gestaltung, wie sie für andere Webseiten auch gelten. Mit etwas HTML- und CSS-Kenntnissen können so die Texte, individuelle Styles und sogar Bilder angepasst werden.
Zu beachten ist: Es ist kein Web-Baukasten. Bilder und alle eingebundenen Resourcen müssen woanders, z. B. in OpenCms, hochgeladen sein.
Bearbeiten lassen sich die Seiten über den Menüpunkt „Texte und öffentliche HTML-Seiten anpassen“; die Seite mit Abo-Info und Abo-Anmeldung ist unter „Allgemeine Informationsseite der Liste“.
Hier kommen Beispiele zu Listen-Infoseiten, die mit HTML und Style-Angaben näher ans Corporate Design der Uni Stuttgart herangeführt wurden. Sie können zum Ausprobieren und Anpassen kopiert werden:
Diese Bearbeitung teilt die vorgesehenen Texte den Containern wie auf den Uni-Webseiten zu. Dank Listserv-Variablen ist der Quelltext für alle Listen möglich.
Beispiele für den Einsatz:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- updated from Revision 1.1 --> <HTML> <HEAD> <TITLE><MM-List-Name> Infoseite</TITLE> <style> body { font-family: Arial, sans-serif; color: #323232; background-color: #DDD; margin: 0; } header { max-width: 1200px; margin: 0 auto 0 auto; display: block; position: relative; top: 0; background-color: #004191; height: 30px; color: #FFF; text-align: right; } .mainidentity { display: inline-block; position: relative; width: calc(100% - 150px); right: 20px; font-size: 12px; padding: 8px; } @media (max-width: 450px) { .mainidentity .hideonmobile { display: none; } } main { max-width: 1200px; margin: 0 auto 0 auto; background-color: #FFF; padding-bottom: 30px; } .intro-container { height: 320px; background-color: #00BEFF; } .intro-inner { margin: 0 60px 0 60px; padding-top: 80px; padding-bottom: 40px; } section { margin: 0 60px 0 60px; } footer { display: block; max-width: 1200px; margin: 0 auto 0 auto; background-color: #323232; color: #FFF; } footer a:link, footer a:visited, footer a:active, header a:link, header a:visited, header a:active { color: #FFF; } .footer-container { max-width: 1200px; margin: 0 60px 0 60px; padding-top: 30px; padding-bottom: 60px; } h1 { margin: 0 auto 0 0; } p { font-size: 16px; } .reverse-order { display: flex; flex-direction: column-reverse; } th, td { text-align: left; font-weight: normal; } .btn-default, input[name="email-button"] { color: #fff; background-color: #004191; border-color: none; } .btn, input[name="email-button"] { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; display: inline-block; margin-bottom: 0; font-weight: normal; font-family: "Univers LT W01 65 Bold", arial, sans-serif; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 16px 35px; font-size: 13px; line-height: 130%; border-radius: 0; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn:hover, input[name="email-button"]:hover { background-color: #323232; } </style> </HEAD> <BODY BGCOLOR="#ffffff"> <header> <div class="mainidentity"> <div class="container-inner"> <a href="https://www.uni-stuttgart.de/">Uni<span class="hideonmobile">versität Stuttgart </span></a> </div> </div> </header> <main> <div class="intro-container"> <div class="intro-inner"> <div class="reverse-order"> <h1><MM-List-Name></h1> <span class="kicker" style="margin-bottom: 0;"><MM-List-Description></span> </div> <p><MM-List-Info></p> </div> </div> <section> <!--<h2>Über <MM-List-Name></h2>--> <p> <MM-lang-form-start><MM-displang-box>Sprache: <MM-list-langs> <MM-form-end> </p> <p> Um frühere Nachrichten an diese Liste zu sehen, besuchen Sie bitte das <MM-Archive>Archiv der Liste <MM-List-Name></MM-Archive>. <MM-Restricted-List-Message> <h2>Abonnieren von <MM-List-Name></h2> <p> Abonnieren Sie <MM-List-Name>, indem Sie das folgende Formular ausfüllen:<br /> <MM-List-Subscription-Msg> <MM-Subscribe-Form-Start> <TABLE BORDER="0" CELLSPACING="2" CELLPADDING="2" style="max-width: 600px;"> <TR> <th WIDTH="40%">Ihre E-Mail-Adresse:</TD> <TD WIDTH="60%"><MM-Subscribe-Box> </TD></TR> <tr> <th>Ihr Name (optional):</th> <td><mm-fullname-box></td> <tr> <td colspan="2"><h3 style="margin-top: 30px;">Passwort</h3><p>Sie können weiter unten ein Passwort eingeben. Dieses Passwort bietet nur eine geringe Sicherheit, sollte aber verhindern, dass andere Ihr Abonnement manipulieren. <b>Verwenden Sie kein wertvolles Passwort</b>, da es ab und zu im Klartext an Sie geschickt wird! <br><br>Wenn Sie kein Passwort eingeben, wird für Sie ein Zufallspasswort generiert und Ihnen zugeschickt, sobald Sie Ihr Abonnement bestätigt haben. Sie können sich Ihr Passwort jederzeit per E-Mail zuschicken lassen, wenn Sie weiter unten die Seite zum Ändern Ihrer persönlichen Einstellungen aufrufen. <MM-Reminder> </p></td> </tr> <TR> <th>Wählen Sie ein Passwort:</th> <TD><MM-New-Password-Box></TD></TR> <TR> <th>Erneute Eingabe zur Bestätigung:</th> <TD><MM-Confirm-Password></TD></TR> <!--<tr> <th>Welche Sprache bevorzugen Sie zur Benutzerführung?</th> <TD> <MM-list-langs></TD></TR>--> <mm-digest-question-start> <tr> <td>Möchten Sie die Listenmails gebündelt in Form einer täglichen Zusammenfassung (digest) erhalten? </td> <td><MM-Undigest-Radio-Button>Nein <MM-Digest-Radio-Button>Ja </TD> </tr> <mm-digest-question-end> <mm-recaptcha-ui> <mm-captcha-ui> <tr> <th><span style="opacity: 0;">Abonnieren</span></th> <td> <MM-Subscribe-Button> </td> </tr> </TABLE> <MM-Form-End> <h2>Austragen / Ändern einer Mailadresse</h2> <p> <MM-Options-Form-Start> <br> <MM-Editing-Options> <br> <MM-Form-End> </p> </section> </main> <footer> <div class="footer-container"> <MM-Mailman-Footer> </div> </footer> </BODY> </HTML>
Wie viel möglich ist, zeigen wir auf der Listeninfoseite vom AgileUS-Newsletter aus dem Agility Lab. Wir haben hier Grafiken von den Lab-Webseiten eingebunden, zusätzliche Links gesetzt und die Containerbreite komplett aufs Uni-Webdesign angepasst.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!-- updated from Revision 1.1 --> <HTML lang="de"> <HEAD> <TITLE><MM-List-Name> Infoseite</TITLE> <style> body { font-family: Arial, sans-serif; color: #323232; background-color: #DDD; margin: 0; } header { max-width: 1170px; margin: 0 auto 0 auto; display: block; position: relative; top: 0; background-color: #004191; height: 30px; color: #FFF; text-align: right; } .mainidentity { display: inline-block; position: relative; width: calc(100% - 150px); right: 20px; font-size: 12px; padding: 8px; } @media (max-width: 450px) { .mainidentity .hideonmobile { display: none; } } main { max-width: 1170px; margin: 0 auto 0 auto; background-color: #FFF; padding-bottom: 30px; } .intro-container { height: 320px; background-color: #00BEFF; } .intro-inner { display: table; position: relative; max-width: 960px; margin: 0 auto; } .c-figure--intro-teaser { display: table-cell; width: 25%; } .c-figure--intro-teaser img { max-width: 220px; float: left; border-radius: 50%; border: 1px solid #FFFFFF; } .intro-container .intro-teaser__wrapper { padding-top: 40px; padding-bottom: 40px; display: table; table-layout: fixed; width: 100%; } .intro-teaser__content { display: table-cell; width: 75%; padding-left: 15px; margin: 40px 10px 0 10px; height: 200px; vertical-align: middle; } section { margin: 0 60px 0 60px; } .ausreisser.rechts { margin: 0 0 30px 30px; width: 268px; float: right; } .logobox { text-align: center; background-color: #EEEEEE; padding: 20px 1px 40px 10px; border: 4px solid #004191; } .logobox a { color: #323232; text-decoration: none; } footer { display: block; max-width: 1170px; margin: 0 auto 0 auto; background-color: #323232; color: #FFF; } footer a:link, footer a:visited, footer a:active, header a:link, header a:visited, header a:active { color: #FFF; } .footer-container { max-width: 1200px; margin: 0 60px 0 60px; padding-top: 30px; padding-bottom: 60px; } h1 { margin: 0 auto 0 0; } p { font-size: 16px; } .reverse-order { display: flex; flex-direction: column-reverse; } th, td { text-align: left; font-weight: normal; } .btn-default, input[name="email-button"] { color: #fff; background-color: #004191; border-color: none; } .btn, input[name="email-button"] { -webkit-transition: all 0.2s ease; transition: all 0.2s ease; display: inline-block; margin-bottom: 0; font-weight: normal; font-family: "Univers LT W01 65 Bold", arial, sans-serif; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 16px 35px; font-size: 13px; line-height: 130%; border-radius: 0; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .btn:hover, input[name="email-button"]:hover { background-color: #323232; } </style> </HEAD> <BODY BGCOLOR="#ffffff"> <header> <div class="mainidentity"> <div class="container-inner"> <a href="https://www.uni-stuttgart.de/">Uni<span class="hideonmobile">versität Stuttgart </span></a> </div> </div> </header> <main> <div class="intro-container"> <div class="intro-inner"> <div class="intro-teaser__wrapper"> <figure class="c-figure--intro-teaser" data-css="c-figure"> <div class="figure__wrapper"> <picture class="c-picture" data-css="c-picture"> <img src="https://www.project.uni-stuttgart.de/agility-lab/img/website-bilder/AgileUS-Kosmos/AgileUS_Icon_Newsletter.png?__scale=w:240,h:240,cx:0,cy:0,cw:350,ch:350" alt="" /> </picture> </div> </figure> <div class="intro-teaser__content"> <div class="reverse-order"> <h1><MM-List-Name></h1> <span class="kicker" style="margin-bottom: 0;"><MM-List-Description></span> </div> <p><MM-List-Info></p> </div> </div> </div> </div> <section> <!--<h2>Über <MM-List-Name></h2>--> <div class="ausreisser rechts logobox"> <a href="https://uni-stuttgart.de/agilitylab" target="_blank"><img src="https://www.project.uni-stuttgart.de/agility-lab/img/website-bilder/Agility-Lab-Logo_CMYK_transparent.png" alt="" style="width: 240px;" /><br /><br /> Agility Lab</a> </div> <div> <p> <MM-lang-form-start><MM-displang-box>Sprache: <MM-list-langs> <MM-form-end> </p> <p> Um frühere Nachrichten an diese Liste zu sehen, besuchen Sie bitte das <!--<MM-Archive>Archiv der Liste <MM-List-Name></MM-Archive>--><a href="https://www.project.uni-stuttgart.de/agility-lab/news/newsletter/">Newsletter-Archiv</a>.<!-- <MM-Restricted-List-Message>--></p> <h2>Abonnieren von <MM-List-Name></h2> <p> Abonnieren Sie <MM-List-Name>, indem Sie das folgende Formular ausfüllen:<br /> <MM-List-Subscription-Msg> <MM-Subscribe-Form-Start> <TABLE BORDER="0" CELLSPACING="2" CELLPADDING="2" style="max-width: 600px;"> <TR> <th WIDTH="40%">Ihre E-Mail-Adresse:</TD> <TD WIDTH="60%"><MM-Subscribe-Box> </TD></TR> <tr> <th>Ihr Name (optional):</th> <td><mm-fullname-box></td> <tr> <td colspan="2"><h3 style="margin-top: 30px;">Passwort</h3><p>Sie können weiter unten ein Passwort eingeben. Dieses Passwort bietet nur eine geringe Sicherheit, sollte aber verhindern, dass andere Ihr Abonnement manipulieren. <b>Verwenden Sie kein wertvolles Passwort</b>, da es ab und zu im Klartext an Sie geschickt wird! <br><br>Wenn Sie kein Passwort eingeben, wird für Sie ein Zufallspasswort generiert und Ihnen zugeschickt, sobald Sie Ihr Abonnement bestätigt haben. Sie können sich Ihr Passwort jederzeit per E-Mail zuschicken lassen, wenn Sie weiter unten die Seite zum Ändern Ihrer persönlichen Einstellungen aufrufen. <MM-Reminder> </p></td> </tr> <TR> <th>Wählen Sie ein Passwort:</th> <TD><MM-New-Password-Box></TD></TR> <TR> <th>Erneute Eingabe zur Bestätigung:</th> <TD><MM-Confirm-Password></TD></TR> <!--<tr> <th>Welche Sprache bevorzugen Sie zur Benutzerführung?</th> <TD> <MM-list-langs></TD></TR>--> <mm-digest-question-start> <tr> <td>Möchten Sie die Listenmails gebündelt in Form einer täglichen Zusammenfassung (digest) erhalten? </td> <td><MM-Undigest-Radio-Button>Nein <MM-Digest-Radio-Button>Ja </TD> </tr> <mm-digest-question-end> <mm-recaptcha-ui> <mm-captcha-ui> <tr> <th><span style="opacity: 0;">Abonnieren</span></th> <td> <MM-Subscribe-Button> </td> </tr> </TABLE> <MM-Form-End> </div> </section> <section> <h2>Austragen / Ändern einer Mailadresse</h2> <p> <MM-Options-Form-Start> <br> <MM-Editing-Options> <br> <MM-Form-End> </p> </section> </main> <footer> <div class="footer-container"> <MM-Mailman-Footer> </div> </footer> </BODY> </HTML>
Fürs Agility Lab haben wir außerdem die Bestätigungsseite für ein erfolgreiches Abonnement angepasst:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- $Revision: 4107 $ -->
<HTML>
<HEAD>
<title><MM-List-Name> Resultate des Abonnierens</title>
<style>
body {
font-family: Arial, sans-serif;
color: #323232;
background-color: #DDD;
margin: 0;
}
header {
max-width: 1170px;
margin: 0 auto 0 auto;
display: block;
position: relative;
top: 0;
background-color: #004191;
height: 30px;
color: #FFF;
text-align: right;
}
.mainidentity {
display: inline-block;
position: relative;
width: calc(100% - 150px);
right: 20px;
font-size: 12px;
padding: 8px;
}
@media (max-width: 450px) {
.mainidentity .hideonmobile {
display: none;
}
}
main {
max-width: 1170px;
margin: 0 auto 0 auto;
background-color: #FFF;
padding-bottom: 30px;
}
.intro-container {
height: 320px;
background-color: #00BEFF;
}
.intro-inner {
display: table;
position: relative;
max-width: 960px;
margin: 0 auto;
}
.c-figure--intro-teaser {
display: table-cell;
width: 25%;
}
.c-figure--intro-teaser img {
max-width: 220px;
float: left;
border-radius: 50%;
border: 1px solid #FFFFFF;
}
.intro-container .intro-teaser__wrapper {
padding-top: 40px;
padding-bottom: 40px;
display: table;
table-layout: fixed;
width: 100%;
}
.intro-teaser__content {
display: table-cell;
width: 75%;
padding-left: 15px;
margin: 40px 10px 0 10px;
height: 200px;
vertical-align: middle;
}
section {
margin: 0 60px 0 60px;
}
footer {
display: block;
max-width: 1170px;
margin: 0 auto 0 auto;
background-color: #323232;
color: #FFF;
}
footer a:link, footer a:visited, footer a:active, header a:link, header a:visited, header a:active {
color: #FFF;
}
.footer-container {
max-width: 1200px;
margin: 0 60px 0 60px;
padding-top: 30px;
padding-bottom: 60px;
}
h1 {
margin: 0 auto 0 0;
}
p {
font-size: 16px;
}
.reverse-order {
display: flex;
flex-direction: column-reverse;
}
th, td {
text-align: left;
font-weight: normal;
}
.btn-default, input[name="email-button"] {
color: #fff;
background-color: #004191;
border-color: none;
}
.btn, input[name="email-button"] {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
display: inline-block;
margin-bottom: 0;
font-weight: normal;
font-family: "Univers LT W01 65 Bold", arial, sans-serif;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 16px 35px;
font-size: 13px;
line-height: 130%;
border-radius: 0;
text-transform: uppercase;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.btn:hover, input[name="email-button"]:hover {
background-color: #323232;
}
</style>
</HEAD>
<BODY BGCOLOR="#ffffff">
<header>
<div class="mainidentity">
<div class="container-inner">
<a href="https://www.uni-stuttgart.de/">Uni<span class="hideonmobile">versität Stuttgart </span></a>
</div>
</div>
</header>
<main>
<div class="intro-container">
<div class="intro-inner">
<div class="intro-teaser__wrapper">
<figure class="c-figure--intro-teaser" data-css="c-figure">
<div class="figure__wrapper">
<picture class="c-picture" data-css="c-picture">
<img src="https://www.project.uni-stuttgart.de/agility-lab/img/website-bilder/Agility-Lab-Logo-Kugel.png?__scale=w:240,h:240,cx:0,cy:0,cw:350,ch:350" alt="" />
</picture>
</div>
</figure>
<div class="intro-teaser__content">
<div class="reverse-order">
<h1><MM-List-Name></h1>
<span class="kicker" style="margin-bottom: 0;"><MM-List-Description></span>
</div>
<p><MM-List-Info></p>
</div>
</div>
</div>
</div>
<section>
<h2><MM-List-Name> Resultate des Abonnierens</h2>
<p><MM-Results></p>
</section>
</main>
<footer>
<div class="footer-container">
<MM-Mailman-Footer>
</div>
</footer>
</BODY>
</HTML>
Abo-Formular für OpenCms-Webseiten
Viele Unternehmensseiten bieten eine einfache Möglichkeit an, mit einem kleinen Webformular die Mailadresse beim Newsletter zu hinterlegen. Bei Mailman geht das nicht ohne weiteres. Das System hat einen Spamschutz, der verhindert, dass von anderen Seiten aus das Bestätigungsformular aufgerufen wird.
Mit etwas Tricksen können wir dennoch das Mini-Formular für Uni-Webseiten einrichten.
Für unser Formular nutzen wir die Option, dass eine Mail mit dem Betreff subscribe
an LISTENNAME-request@listserv.uni-stuttgart.de
(LISTENNAME
durch den Namen der Liste ersetzen) erfolgreich ein Abonnement der Absenderadresse erzeugt.
Wir legen ein OpenCms-Formular an. Folgende Angaben empfehlen sich, dargestellt je nach Tab im Bearbeitungsmodus. In GROSSBUCHSTABEN
stehen jeweils Variablen, die durch die eigenen Werte ersetzt werden müssen.
Folgende Angaben im Reiter „Grundkonfiguration“ des OpenCms-Formulars eintragen:
- Datentransport:
-
- Ziel:
E-Mail
- Formular-Id:
LISTENNAME-newsletter
- Ziel:
- E-Mail-Absender:
FUNKTIONSADRESSE
- E-Mail-Empfänger:
LISTENNAME-request@listserv.uni-stuttgart.de
- Mail-Betreff:
subscribe
- Bestätigungstext:
- Empfehlung für folgende Einstellung (über Quelltext eintragen):
<p>Vielen Dank, die Mailadresse %(mail) wurde eingetragen!</p> <p><a class="btn btn-default" href="https://listserv.uni-stuttgart.de/mailman/listinfo/LISTENNAME">Abo verwalten</a></p>
Wir benötigen ein einziges Eingabefeld für die Mailadresse.
- Typ:
E-Mail-Feld
- Beschreibungstext:
E-Mail eintragen zum Abonnieren|mail
- Pflichtfeld:
- Haken setzen
In dem Reiter die „Erweiterte Konfiguration“ öffnen. Hier stellen wir ein, dass die eingetragene E-Mail-Adresse als Absender an die Abo-Adresse läuft.
- E-Mail-Absender aus Eingabefeld:
E-Mail eintragen zum Abonnieren|mail
Aus optischen Gründen können wir noch die Haken entfernen von:
- Aktiviere Pflichtfeldkennzeichnung
- Aktiviere Zurücksetzen-Button
Haken bei „Unterdrücke die Ausgabe der Formulardaten“ setzen.
Aufhübschen von Listen-Links
Fürs Marketing und die bessere Lesbarkeit in Abbindern (Anhang-Text unter Mails) empfiehlt sich, Short-URLs für die Listinfo-Seite zu nutzen. Die Short-URL läuft nach dem Muster https://uni-stuttgart.de/kurzname
.
- Mehr Informationen zu Short-URL an der Uni Stuttgart
- Antragsformular für Short-URL
Antrag läuft über HKOM, wird einmal wöchentlich vom TIK eingerichtet.
Aufmerksamkeit für den Newsletter
Basis-Kommunikation
Alle, mit denen deine Einrichtung kommuniziert, sollten vom Newsletter erfahren. Darum gehe am besten die Orte durch, an denen Informationen zu deiner Einrichtung stehen:
- Die E-Mail-Signatur ist ein klassischer Ort für einen Link zum Newsletter.
- Die Startseite deiner Einrichtung braucht einen gut sichtbaren Hinweis auf den Newsletter (oder sogar das Mini-Formular).
- Bei der Kontakt-Seite deiner Einrichtung kann auch der Newsletter stehen.
- Wie sieht es mit Profilseiten bei sozialen Medien aus? Oft lässt sich auch dort ein Link für den Newsletter platzieren.
- Immer, wenn du von deiner Einrichtung berichtest, kannst du einen Block mit zentralen Informationen, unter anderem zum Newsletter, hinzufügen. Diesen Block nennen Medienleute „Abbinder“. Du kannst eine Vorlage dazu an zentralem Ort deiner Einrichtung etablieren.
- Flyer, Visitenkarten, Plakate können eine Short-URL zum Newsletter enthalten.
- Erzähle von deinem Newsletter!
Werbeaktionen
Die Dauerkommunikation motiviert nur wenige Menschen zu einem Abonnement. Daher überlege gezielt Kampagnen, um an die ersten Leute heranzukommen.
Nächster Schritt zum Newsletter
Kontakt

Ulrich Fries
Wissenschaftsmanager