Damit der Internet-Auftritt für den Betrachter immer gleich zu bedienen ist und nicht verwirrend wirkt, müssen alle beteiligten Redaktoren sich an die hier vorliegenden Design-Richtlinien halten. Ein Teil der Richtlinien ist zwingend und ein Teil ist als Empfehlung zu verstehen.
Navigation
Die Navigation enthält JavaScripts und muss auf jeder Seite enthalten sein, damit der Surfer nie die Orientierung verliert. Das heisst für uns, dass wir kein Bild in der Navigation ändern dürfen. Für jedes der Foren "News", "FAQ", "Food Chain", "About us", "Cooking", "x-plainmefood" und "Contact" existiert i.d.R. eine Vorlage ("vorlage.html"). Alle neuen Seiten entstehen aus diesen Vorlagen, damit die ausgelagerte Navigationsstruktur und -darstellung gewährleistet ist. Der zu bearbeitende redaktionelle Teil befindet sich immer nur in der dargestellten Tabellenzelle. Sie ist 565 Pixel breit und kann so lang sein wie nötig. In der Regel ist es vorteilhaft die Seiten nicht zu lange werden zu lassen. Ein Artikel sollte deshalb thematisch sinnvoll gegliedert und auf mehrere Seiten verteilt werden.
Besteht aufgrund der Artikelgliederung das Bedürfnis für eine weitere Ebene in der Navigation, so ist auf der linken Seite im Kopfbereich ein Platz vorgesehen, um eine Textnavigation einzubauen. Bitte kontaktieren Sie die Redaktion, um ein Muster zu erhalten.
Bei längeren Seiten ist darauf zu achten, dass es immer einen Knopf (images/toppfeil.gif) gibt, mit welchem man zum Anfang der Seite springen kann. Dieser Knopf ist immer nach oben ausgerichtet. Zusätzlich sollte im Fussbereich von mehrseitigen Artikeln mit besagten Pfeilen eine lokale Navigation zu den relevanten Seiten eingebunden werden (vor, zurück). Auf jeder Seite wird automatisch das Dateidatum als "Last update" eingesetzt.
Dateinamen (Titel)
Dateinamen werden immer klein geschrieben und dürfen keine Sonderzeichen (Umlaute) und Leerzeichen enthalten. Braucht man trotzdem einen Abstandhalter, so setzt man "-" oder "_" ein. Die Länge sollte 32 Zeichen nicht übersteigen und den Seiteninhalt möglichst genau charakterisieren (=> Titelfunktion!). Damit die Bezeichnungen einheitlich sind, lautet die Endung der Dateinamen für Text immer auf ".html" (Beispiel: "beitrag_zum_thema_essen.html"). In besonderen Fällen können aber auch PDF-Dateien eingebunden werden, um besondere Formatierungsanforderungen zu erfüllen. Der Eintrag in das Inhaltsverzeichnis erfolgt automatisch (Site-Map).
Beschreibung der Seiten für Suchmaschinen
Der Titel jeder Seite erscheint im Browser. Er wird auch benutzt, wenn mit der in der Navigation eingebauten Suchmaschine nach Inhalten gesucht wird. Zusätzlich sind aber in Html-Dateien noch weitere Elemente nötig, damit die Suchmaschinen optimal funktionieren können. Diese Elemente werden als in den Code der HTML-Seiten eingearbeitet. Je nach verwentetem HTML-Editor müssen sie die Elemente geeiget eingeben. Hilfe erhalten sie von der Redaktion.
Mindestens erforderliche Tags für die Inhaltsbeschreibung von HTML-Seiten:
- <title>: Titel für die erweiterte Bennenung des Seiteninhaltes (kurz und prägnant).
- <description>: Text für eine genauere Beschreibung des Seiteninhaltes.
- <keywords>: Eine Auflistung von wesentlichen Schlüsselbegriffen
Grundsätzlich dürfen keine Seiten ohne den Tag <title> erstellt werden. Im Tag <description> kann eine kurze Beschreibung über den Inhalt der Seite angebracht werden. Die Beschreibung des Seiteninhaltes sollte dabei möglichst content-typischen Begriffen enthalten und sie muss auch wirklich zum effektiven Seiteninhalt passen. Eine sorgfälltige Inhaltserstellung ist unbedingt zu empfehlen um bei Suchmaschinen gute Trefferresultate zu erreichen. Der Tag <keywords> sollte die wirklich relevanten Begriffe enthalten und die wichtigen Begriffe sollten dabei möglichst am Anfang stehen. Die Auswahl der Begriffe muss genau überlegt sein. Zu viele Begriffe sind kontraproduktiv.
Schriften
Bei grösseren Texten empfiehlt es sich Blocksatz einzusetzen. Leider unterstützt nur Netscape/Mozilla diese Funktion. Beim Internet Explorer kann sich die Verwendung von Blocksatz negativ auswirken. Problematisch ist im Zusammenjang mit Blocksatz insbesondere die Verwendung von Trennstrichen, weil verschiedene Browser eine unterschiedliche Darstellung erzeugen, so dass der beim Leser resultierende Zeilenumbruch nicht so ausfallen muss, wie im Erstellungseditor ursprünglich dargestellt. Die Regel für HTML-Textdateien wird deshalb der Flattersatz sein.
Die Titel in den Artikeln sind gemäss folgender Tabelle zu wählen. Die effektiven Formatierungen sind per CSS Style Sheet vordefiniert und müssen deshalb nur entsprechend zugeordnet werden.
Klasse
(CSS) |
Bezeichnung
(und Ansicht)
|
Parameter
|
Beschreibung
|
|
t1
|
Thema
|
Verdana
Grösse = 16 Punkt
Fett
Farbe = 999999 (grau) |
Dieser Titel wird für Hausptthemen verwendet (z.B. Landwirtschaft). |
|
t2
|
1. Untertitel
|
Comic Sans MS
Grösse = 14 Punkt
Farbe = CC3300 (orange) |
Zum Beispiel Schlagzeilen dürfen in dieser Schrift gestaltet sein. |
|
t3
|
Tabellentitel
(gross)
|
Comic Sans MS Fett
Grösse = 14 Punkt
Farbe = FFFFFF (Weiss)
Hintergrundfarbe = CC3300 (orange) |
Grosse Tabellentitel werden über die gesamte Tabelle durchgezogen. So sieht man schnell, was zur Tabelle gehört. Für Spaltenbeschriftungen wird das Format "white" / fett auf rotem Untergrund (CC3300) verwendet.
Der Zellinnenrand für Tabellen ist i.d.R. gleich 2.
|
|
white
|
Spaltentitel |
Verdana
Grösse = 10 Punkt
Hintergrundfarbe = CC3300 (orange) |
Spaltentitel werden auf rotem Untergrund in der Farbe white / fett dargestellt. |
|
t4
|
2. Untertitel
|
Comic Sans MS
Grösse = 12 Punkt
Farbe = CC3300 (orange) |
Alle weiteren Titel sind in dieser Grösse. |
|
t5
|
3. Untertitel
|
Comic Sans MS
Grösse = 12 Punkt
Farbe = 666666 (grau) |
|
|
Text (norm) |
Verdana
Grösse = 10 Punkt |
Unter Text verstehen wir den ganz normalen Fliesstext für den redaktionellen Inhalt. |
|
gross
|
Text (gross) |
Verdana
Grösse = 12 Punkt |
Für bessere Lesbarkeit von Arbeitstexten (z.B. Rezepte) |
Bildmaterial
Bilder sollten hinsichtlich Bildgrösse und Bildqualität so optimiert wie möglich abgelegt werden. Das heisst für Webzwecke sind die Dateien grundsätzlich möglichst klein zu halten. Die Dateien werden immer in das Verzeichnis "images" in der jeweiligen Rubrik (z.B. "faq/images/bild.gif") abgelegt. Als Formate sind GIF- und JPEG-Dateien (Endung "JPG") vorgesehen. "PNG" ist in Ausnahmefällen erlaubt.
Die Bilder sollten für die Darstellung im Web optimiert sein. Das heisst auf den Textseiten selbst sollten nur relativ kleinformatige Bilder eingebaut werden, damit die Ladezeiten der Seiten nicht zu lange werden. Die Bilddateien sollten ausserdem in der effektiven Darstellungsgrösse abgelegt werden, so dass für die Darstellung im Browser keine Skalierung notwendig ist (Verkleinern führt zu unnötigen Datenmengen, Vergrössern zu schlechter Bildqualität). Die kleinen Bilder können mit einem Link auf grösserformatige Darstellungen versehen werden. Als Auflösung für die Bilddarstellung werden 96 DPI empfohlen (Bildformate ca. bis 300x250 Pixel ). Grossformatigere Darstellungen, die für den Ausdruck bestimmt sind, sollten mit 144 DPI oder mehr abgelegt werden (z.B. 1280x1024 Pixel).
Es versteht sich von selbst, dass die verwendeten Bilder hinsichtlich Bildqualität höheren Anforderungen genügen sollten. Das heisst, dass die Bilder bezüglich Mofiv, Schärfe und Helligkeit optimiert sein sollten. Nach dem Scannen von Bildmaterial müssen die resultierenden Dateien unbedingt nachbearbeitet und optimiert werden. Das Scannen selbst sollte deshalb mit einer Auflösung von mindestens 300 DPI erfolgen. Wenn Sie sich bei der Erstellung von Bildmaterial nicht sicher sind, dann nehmen sie mit der Redaktion Kontakt auf und schicken sie nach deren Anweisung Rohdaten, die dann von uns optimiert werden.
Beachten sie bei der Verwendung von Bildmaterial die einschlägigen Copyright-Bestimmungen. Freies Bildmaterial finden sie z.B. über die von uns hauptsächlich verwendeten Quellen (Bildquellen).
Tabellen
Die erste Zeile einer Tabelle ist rot (CC3300) mit weisser Schrift. Der Tabellenkörper ist gelb (FFFFCC) eingefärbt. Bei grösseren Tabellen kann die Spalten- resp. Zeilenfarbe alterniert werden. (gelb [FFFFCC] - orange [FFCC99]). Dieses Schema ist lediglich als Empfehlung für den Normfall zu sehen. Je nach Zielsetzung kann auch ein anderes Format verwendet werden.
Links
Jeder Redaktor darf zu allen bestehenden internen Seiten Links herstellen. Auch externe Links sind zulässig, sofern diese nicht gegen die Grundsätze der Redaktion verstossen (siehe hier). Das effektive Einbinden in die übergeordnete Struktur übernimmt aber grundsätzlich ein Chefredaktor. Er berücksichtigt dabei die Vorschläge der Autoren.
Bei externen links ist grundsätzlich eher Zurückhaltung angesagt. Einerseits können externe Referenzen ändern, was allenfalls eine spätere Anpassung der Seiteninhalte nötig macht und andererseits sind innerhalb des redaktionellen Teils nur seriöse Datenlinks erwünscht, die auch keinesfalls Werbecharakter haben dürfen. Für Werbeinhalte gelten andere Vorgaben. Es muss in diesem Fall aber klar deklariert werden, dass es sich um Werbung handelt.
Seitenlänge
Für die ersten zwei Ebenen sollte eine Seite nicht länger als zwei Bildschirmlängen sein (ca. 1200 Pixel resp. entsprechend der meist verwendeten Bildschirmgrösse). Bei allen weiteren Ebenen ist die Seitenlänge nicht mehr so wichtig. Artikel sollten aber in jedem Fall thematisch sinnvoll strukturiert werden, damit sie möglichst webgerecht sind. Daraus resultiert allenfalls auch ein Inhaltsverzeichnis innerhalb eines grösseren Artikels, das in die lokale Navigation eingebunden werden kann. Damit entschärft sich das Problem langer Texte automatisch.
Grundsätzlich gilt, dass eine gute Lesbarkeit am Bildschirm erreicht werden sollte. Viele Benutzer drucken lange Texte auch aus. Eine zu starke Artikelaufteilung wirkt in diesem Fall kontraproduktiv. Sehr lange Artikel werden deshalb vorzugsweise oder in Ergänzung zu den normalen Seiten auch als PDF-Datei angeboten.
Werbung
Werbung ist grundsätzlich von den redaktionellen Inhalten zu trennen. Die Positionen für Werbung sind genau definiert (=> Werbepositionen).
a) Banner
Banner in verschiedenen standardisierten Formaten werden über eine Datenbank bewirtschaftet. Hinsichtlich Bannergestaltung ist zu beachten, dass der Layout nicht zu nervös wirkt. Zu rasche und nervöse Banner sind nicht beliebt. Auch sollten sich die Banner bez. Layout und angebotenen Inhalten einigermassen mit den Inhalten von foodnews vertragen. Unseriöse Inhalte haben auf foodews keinen Platz.
Beispiele für Banner sind hier zu finden. Die Platzierung von Werbebannern auf foodnews kann über diesen Link erfolgen.
b) Werbung innerhalb des redaktionellen Teils (Werbeboxen)
Grundsätzlich ist auch die Platzierung von Werbung innerhalb von Artikeln möglich, wenn diese zum Thema passt. Die Redaktion achtet aber darauf, dass diese Werbung zum jeweiligen Thema passt und entsprechend gekennzeichnet wird. Die Werbung in diesem Bereich muss in einem vertretbaren Rahmen bleiben.
Vorgehen / Ablauf
a) Autoren ohne HTML-Erfahrung
Erstellen Sie ihren Artikel in einer gebräuchlichen EDV-Format (Word, WordPerfect o.a.) und schicken Sie Ihren Artikel zusammen mit dem Bildmaterial an die Redaktion von foodnews. Die Redaktion ist dann bemüht den Artikel in Rücksprache mit dem Autor Webgerecht umzusetzen.
b) Redaktoren mit HTML-Erfahrung
