Designvorlagen

Entwurf und Umsetzung geeigneter HTML-Vorlagen

HTML-Vorlagen sollten immer die Dateiendung .html haben und sinnvoll benannt werden. Für den Dateinamen verwendet man am besten nur Kleinbuchstaben und Zahlen sowie Binde- und Unterstriche. Das heißt, Großbuchstaben, Umlaute sowie Leer- und Sonderzeichen sollten strikt vermieden werden.

Richtlinien für Entwürfe

Es hat sich bewährt, folgende Rahmenbedingungen bei der Gestaltung von Newsletter-Vorlagen einzuhalten.

  • harmonischer Gesamteindruck passend zur Website
  • maximale Gesamtbreite von 600 Pixeln
  • wenig verschiedene Schriften und Farben
  • gute Kontraste, leserliche Schriftgrößen, klar erkennbare Links
  • schmaler Kopf mit Unternehmenslogo (maximal 150 Pixel Höhe)
  • sparsamer Einsatz von Bildern zur Vermeidung langer Ladezeiten
  • Inhaltsverzeichnis mit Ankern bei umfangreicherem Inhalt
  • vollständiges Impressum und Abmeldelink im Fuß

HTML und CSS

Bei der Umsetzung in HTML und CSS sollten ebenfalls einige Regeln beachtet werden, um ein optimales Zusammenspiel der Vorlage mit dem WYSIWYG-Editor von sitepackage:// zu ermöglichen und um eine zuverlässige Darstellung in verschiedenen E-Mail-Clients und Webmail-System zu gewährleisten.

  • Anlegen einer geschachtelten Tabellenkonstruktion mit den folgenden Klassennamen: ausgabe, seite, service, kopf, inhalt, fuss
  • Platzierung eines div-Containers mit der ID inhalt innerhalb der gleichnamigen Tabellenzelle zur Aufnahme von HTML-Inhalten aus dem WYSIWYG-Editor.
  • Auslagern aller Stylesheets in eine CSS-Datei im Unterordner /stile. Der Dateiname sollte dabei mit dem der Vorlage identisch sein.
  • Ablegen aller Bilder in den Unterordner /bilder
  • Direkte Notierung von Stylesheets für die folgenden Tags:
    h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, hr, img, abbr, acronym
  • Kennzeichnung desjenigen Bereichs in der CSS-Datei, der für die Darstellung im WYSIWYG-Editor mit verwendet werden soll. Dies erfolgt über die Kommentare WYSIWYG Start und Ende
  • Berücksichtung eines Layouts für Impressumsangaben im Fußbereich unter Verwendung des address-Tags
  • Verwendung des title-Attributs für Hyperlinks

Beispiel HTML-Code

<html>

<head>
  <title>Ausgabentitel</title>
  <link href="CSS" rel="stylesheet" type="text/css"/>
</head>

<body>
<table class="ausgabe">
<tr><td>

  <table class="seite">
    <tr><td class="service">Servicebereich</td></tr>
    <tr><td class="kopf">Kopfbereich</td></tr>

    <tr><td class="inhalt">
      <div id="inhalt">HTML-Inhalte</div>
    </td></tr>

    <tr><td class="fuss">Fußbereich</td></tr>
  </table>

</td></tr>
</table>
</body>

</html>

Beispiel CSS-Code

body {}
table {}
td {}

.ausgabe {}
.seite {}
.service {}
.kopf {}
.inhalt {}

/* WYSIWYG Start */

#inhalt {}

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
p {}
ol {}
ul {}
li {}
a {}
hr {}
img {}
abbr {}
acroynm {}

/* WYSIWYG Ende */

.fuss {}
.fuss address {}
.fuss p {}
.fuss a {}

Anzeige von Bildern

Bedenken Sie bei der Gestaltung vor allem, dass viele E-Mail-Programme Bilder nicht sofort anzeigen oder nur dann, wenn die Absenderadresse bekannt (also im Adressbuch gespeichert) ist.

Ihr Newsletter muss also auch ohne diese Bilder funktionieren und das Interesse des Empfängers wecken. Wichtig ist dabei vor allem, dass er Vertrauen zu Ihrem Newsletter schöpft und die Anzeige der Bilder aktiviert. Außerdem darf das Layout durch das Fehlen von Bildern nicht negativ beeinflusst werden. Verwenden Sie im Bedarfsfall auch das alt-Attribut für den img-Tag.