Styleguide:Berlin.de

Aus Imperia Support Wiki

ENGLISH VERSION

Aufteilung der Seite

Das Layout der Seite wird vom sog. Layoutserver erzeugt. Der Vorgang wird in dem Styleguide:Techn._Integration_via_Durchschleifung beschrieben.

Die Seite wird dabei grundsätzlich in die Bereiche Header, Mainbar, Sidebar, Footer und Partner unterteilt (siehe Grafik Seitenaufteilung). Header, Footer sowie der Partnerbereich können nicht verändert werden. Mainbar und Sidebar sind auf den verschiedenen Seiten unterschiedlich aufgeteilt. Die Landesseiten besitzen eine Breite von 1036px. Alle anderen sind 980px breit.

Die Startseite von Berlin.de und die der Rubriken werden im neuen Layout ausgeliefert (siehe Grafik Seite mit neuem Layout). Dort wird die Mainbar in eine Bühne von 620px und darunter 2 Container mit jeweils 300px geteilt. Die Sidebar enthält die Topbox und einen weitern Container mit jeweils 300px breite. Diese Seiten sind nicht bestandteil des Verwaltungsauftritts des Landes Berlin.

Das Layout der Landesseite wird hier nur der Vollständigkeit halber gezeigt. Ausführliche Informationen finden Sie im Styleguide der Landesseiten.

Die Unterseiten in den Bereichen außerhalb des Landesauftritts sind wie in der Grafik Themenseiten gestaltet. Die Navigation besitzt eine Breite von 180px, der Inhalt kann auf 420px verteilt werden und die Servicespalte ist 300px breit. Auf diesen Seiten ist Werbung in Form von einem Superbanner (über der Seite), einem Skyscraper (neben der Seite) und einem Content-Ad (ganz oben in der Servicespalte) geschaltet.

Für die Themenseiten stellt der Layoutserver von vorne herein eine bestimmte Auswahl von Layouts zur Verfügung:

  • Layout mit Werbemitteln, Header und Footer
  • Layout wie vorhergehendes, plus Navigation
  • Layout wie vorhergehendes, plus Servicespalte

Als Erzeuger einer Seite hat man damit die Möglichkeit, die Inhalte der Navigation und Servicespalte zu verändern - oder aber diese Bereiche automatisch vom Layoutserver erzeugen zu lassen.

Der Bereich, der Main & Servicespalte einschließt, kann in zwei Ausgestaltungen verwendet werden:

  • Contenspalte (Nutzbreite: 420px) und Servicespalte (Nutzbreite: 300px)
  • Contentspalte ohne Servicespalte (Nutzbreite: 730px)

Die linke Navigationsspalte (Navi) ist obligatorisch bis auf wenige Ausnahmen.

Die Spaltenbreiten sind verbindlich und werden aufgrund der Positionierung von Werbemitteln auf der Seite auch nicht verändert.

Seitenaufteilung
Seite mit neuem Layout
Landesseite
Themenseite

Farben und Schriftarten

Generell muss der Autor eines Angebots sich nicht um die Farben und Schriftarten auf der Seite kümmern. Statt dessen wird ein Stylesheet durch den Layoutserver bereit gestellt, dass alle regulären HTML-Tags von vorne herein mit sinnvollen Layouts versieht. Statt also einen großen Text mit roter Farbe zu versehen, reicht die Verwendung des <h1>-Tags vollkommen aus.

Für eine Übersicht über alle möglichen HTML-Konstrukte, die ohne weiteres Layout auf der Seite verwendet werden können, schauen Sie bitte auf die Demoseite.

Schriftdefinition:

  • Schriftart - Arial Helvetica Sans-Serif
  • Textgröße - 13px

Folgende Farben stehen zur Verfügung:

  • #000000 (Schwarz) als Textfarbe
  • #FFFFFF (Weiß) als allgemeine Hintergrundfarbe, Links und Text in den Containern
  • #2D509A (Dunkelblau) als Linkfarbe, in der Metanavi & Navi, als Rahmen
  • #B60033 (Dunkelweinrot) für Überschriften, aktiver Inhalt etc.
  • #E50033 (Mittelweinrot) als Iconfarbe & bei Rahmen
  • #95ACE7 (Hellblau) als Rahmenfarbe
  • #E6EDFF (Lichtblau) als Hintergrundfarbe für Verwaltungsinhalte, Trennlinien und Rahmen
  • #EEEEEE (Hellgrau) Hintergrundfarbe für besondere Elemente wie Servicespalte, Suchmasken, Spezialnavigation
    • #DDDDDD (Mittel-Hellgrau) Hintergrundfarbe für Überschriften in hellgrauem Bereich
    • #CCCCCC (Dunkel-Hellgrau) Rahmenfarbe im hellgrauen Bereich

Unter keinen Umständen soll die Schriftgröße oder -art verändert werden.

Bildformate

Bei Berlin.de gibt es i.d.R. nur wenige Bildformate:

  • 170 x 128 für Teaserbilder
  • 170 x 96 für kleine Teaserbilder

HTML & CSS-Integration

Um eine möglichst einfache Integration der Seite in das Portal zu gewährleisten, sollten alle Seiten in XHTML 1.0 Transitional erstellt werden. Bitte überprüfen Sie die Validität einer jeden Seite, da nicht-valides XHTML u.U. zu Layoutfehlern führen kann. Eine sehr gute Zusammenstellung von Tools zum Debuggen von Seiten finden Sie unter WebDeveloper:Firefox Einrichtung & Erweiterungen.

Ebenfalls muss vor jeder Seite der XML-Header mitgeschickt werden, um bei Validierung und Erkennung in den einzelnen Browsern ein konsistentes Ergebnis zu erzielen.

Der Beginn einer jeden Seite sollte von daher wie folgt aussehen:

 <?xml version="1.0" ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


Alle Seiten sollten in UTF-8 erzeugt werden.

Bei der Erzeugung von HTML-Schnipsel, die in andere Seiten eingebaut werden sollen, muss dagegen zwingend ASCII verwendet werden, d.h. alle Sonderzeichen müssen als Entities eingebaut werden. Damit ist es nachher egal, in welchem Zeichensatz die einbindende Seite gehalten ist.

Zu jeder selbst erstellten Seite kann ein zusätzliches, selbst definiertes Stylesheet hinzugefügt werden. Vermeiden Sie es aber, globales Verhalten überzudefinieren. Benutzen Sie statt dessen die Funktionalität von CSS, Ihre Definition an einem untergeordneten Element wie z.B. dem Contentbereich aufzuhängen.

Beispiel-CSS:

 a {color:red} /* falsch! */
 #bo_content a {color:red} /* besser! */
 #bo_content a.red {color:red} /* am Besten! */

Angaben im Head einer Seite

Im <head>-Bereich einer Seite sollten Sie folgende Angaben machen:

 <title>TITEL - Berlin.de</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="DC.Title" content="TITEL"/>
  <meta name="DC.Date" content="2007-09-27"/>
  <meta name="description" content="KURZER TEASER-TEXT" />
  <meta name="keywords" content="GGF. KEYWORDS" />

Als TITEL setzen Sie einfach die Bezeichnung Ihrer Seite. Achten Sie bitte darauf, auf jeder Seite einen möglichst aussagekräftigen Titel anzugeben, um bei Suchergebnislisten von Suchmaschinen eine möglichst hohe Relevanz und Benutzerinformation zu erreichen.

Als KURZEN TEASER-TEXT sollten Sie ebenfalls einen für diese Sete spezifischen Text erzeugen. Dieser wird bei Suchergebnislisten von Suchmaschinen als Teaser-Text angezeigt.

Die Verwendung von Keyword dagegen ist optional und sollte sowieso nicht überbewertet werden.


Javascript

Bei der Verwendung von Javascript ist zu beachten, dass einige Funktionen bereits durch das Portallayout definiert sind. Diese Funktionen dürfen nicht überdefiniert werden, da Sie ggf. für die Funktionsweise der Werbung bzw. der Portalnavigation notwendig sind.

Javascripte sollten zweckmäßigerweise in ASCII abgehalten sein, um ohne Probleme in jeder Applikation integriert werden zu können.