HPCO   HTML,
  PHP,
    CSS – ORGANISIERT 		  Beta3 – April 2006

Design

Über Geschmack lässt sich bekanntlich streiten - dies gilt insbesondere für das Webdesign, da hier viele Möglichkeiten der Gestaltung existieren. Die HPCO-Sites sind generell eingeschränkt, was das Design angeht, können jedoch

Bildschirmaufteilungen

Die Website sollte die am gebräuchlichsten Auflösungen unterstützen. Dies sind derzeit 1024x768 Pixel und ggf. darunter (800x600 Pixel). Dabei ist zu beachten, dass der frei verfügbare Bereich noch durch zusätzliche "Elemente" eingeschränkt wird. Einschränkungen erfolgen zum Beispiel durch:

Minimale Design-Angaben

Farbangaben und Farbvorgaben

Generell sind alle Farbangaben im Web auf RGB-Basis: hier werden Farben entsprechend im Format RRGGBB in hexadezimaler Schreibweise angegeben. So wird beispielsweise schwarz mit #000000 und weiß mit #FFFFFF codiert. Transparenzen werden auf Websites nicht immer richtig dargestellt und sollten daher vermieden werden.

Nachfolgende Tabelle gibt die Farbvorgaben für die Website Wibbeler (www.wibbeler.de - Stand: 30.01.2006) wider:

Navigation (= Menü) Inhalt (= Links)

#99-BB-BB: Hintergrundfarbe

#00-00-00: Unbesuchter Menüpunkt ("link")

#00-00-00: Bereits besucht, aber nicht aktiv ("visited")

    #EE-FF-FF (Schrift), #FF-EE-33 (Rahmen links), #99-BB-BB (Hintergund): Mit der Maus drauf ("hover")

#FF-FF-FF: Hintergrundfarbe

#00-00-00: Unbesuchter Link ("link")

#CC-66-00: Bereits besucht, aber nicht aktiv ("visited")

#99-99-99: Mit der Maus drauf ("hover")

#99-99-99: Aktiv, also auch besucht ("active")

#CC-CC-CC: Fokus mit Tab-Taste ("focus")

Die Minimalvorgaben zum Loslegen

Was Beschreibung Typisches Format / Beispiel
Logo Ein Logo gehört auf jede Website. Hierüber ist zumindest auch eine Farbe festlegt – dies wäre eine Basisfarbe. Typischerweise ist die Logofarbe auch die Farbe des Navigations- und Bannerbereichs. Die meisten Logos haben einen annähernd quadratischen Zuschnitt. GIF oder JPG mit bis zu 150x150px
Schriftzug Wenn man im Logo selbst nicht die "Bezeichnung" der Firma oder des Vereins untergebracht hat, so kann eine der Name hinzugefügt werden - dies ist dann der Schriftzug. GIF oder JPG mit bis zu 150px Höhe
Schriftarten und -größen Die Anzahl unterschiedlicher Schriftarten für den Webauftritt sollte von vorneherein eingeschränkt werden; um sicher zu gehen, dass die eigene Website auch möglichst überall gelesen werden kann, sollten nur die Standardschriften gewählt werden. In Grafiken jedoch können alle beliebigen Schriftarten und Zeichen verwendet werden - Grafiken werden immer korrekt angezeigt. Die Standardschriftgrößen sind sicherlich überall lesbar, sollten aber bei Sites mit viel Inhalt reduziert werden (typischerweise auf 80-90% der Standardschriftgröße). Arial, Verdana
font-size: 0.9em
Basisfarben Generell braucht man einige Basisfarben, um einzelne Bereiche des Weblayouts voneinander zu trennen. Problematisch ist die Abstimmung der einzelnen Farben aufeinander, insbesondere im Menübereich. Zur Definition einer harmonischen Farbpalette gibt es aber unterstützende Tools, die im Internet direkt aufgerufen werden können (siehe Menüpunkt "Links"). Banner-Hintergrundfarbe, Banner-Schriftfarbe, Navigationsbereich-Hintergrundfarbe, Navigationsbereich-Schriftfarbe, Navigations-Hintergrundfarben, Navigations-Schriftfarben, Navigations-Rahmenfarben, Inhaltsbereich-Hintergrundfarbe, Inhaltsbereich-Schriftfarbe
Bereiche Durch die Aufteilung des Bildschirms in Bereiche erfolgt die logische und inhaltliche Trennung der Website. mindestens zweigeteilt (Menü und Inhalt), maximal fünfgeteilt (Banner, Hauptmenü, Neben-Menü, Inhaltsbereich, Fussbereich)
Ränder Zur Auflockerung der Website bietet sich die Verwendung von Rändern an, die entweder mit einer Farbe oder mit Grafiken aufgefüllt werden. Die Ränder sollen typischerweise nur links und rechts gewählt werden - Ränder oben und unten bieten sich nicht an. links und rechts 100px freilassen
Buttons (Knöpfe, Schalter) Bei einer optisch top-ausgelegten Site werden auch alle Schalter selbst gestaltet. Schriftart und Farben.

Bilder

Die Bilder sind bei viele Websites der Hauptanziehungspunkt. Aber die passende Bereitstellung der Bilder für das Web macht gerade bei Anfängern viele Probleme - daher werden hier die wichtigsten Dinge zur den Bildern beschrieben.

Bildformate

Die Grafiken, Bilder und Logos sollten bevorzugt in den Formaten JPEG oder PNG (alternativ auch GIF-Format) erstellt und weitergereicht werden; klassische Printformate wie PDF gehen nicht. Die GIF-Formate haben den Vorteil/die Besonderheit, dass hiermit Transparenz möglich ist, um so beispielsweise die Hintergrundfarbe um das Logo herum anzeigen zu lassen. Das PNG-Format wird inzwischen von allen Browsern korrekt dargestellt (insofern keine Transparenz benutzt wird) und findet insbesondere bei Skizzen und Zeichnungen Anwendung, während JPG bei Bildern (Fotos) zu bevorzugen ist.

Nachfolgende Tabelle gibt wider, welches Bildformat sie für welchen Anwendungsfall verwenden sollten:

Was Dateiformat, -typ Besonderheiten
Bilder, Fotos JPG Das JPG-Format verkleinert ("komprimiert") Bilder mit vielen Farbinformationen am besten. Schriften werden allerdings leicht unscharf - hier hat das PNG-Format Vorteile.
Grafiken PNG Mit Grafiken sind hier alle Zeichnungen oder Skizzen gemeint, die aus Linien (Strichen) bestehen, wenig Farbinformationen enthalten und ggf. noch Schrift beinhalten. PNG bringt gegenüber JPG mehr Schärfe.
Grafiken oder Bilder mit Transparenz GIF Auch PNGs können Transparenz erzeugen - leider unterstützen dies die meisten Browser nicht korrekt.
Buttons (Knöpfe, Schalter) GIF Dort ist immer noch GIF am verbreitesten.

Längerfristig soll das PNG-Format das GIF-Format vollständig ablösen (können); derzeit ist GIF aber in der Praxis bei der Darstellung der Transparenz nicht zu ersetzen.

Bildgrößen

Die Bildgrößen sollten "möglichst groß" gewählt werden, da das Verkleinern oder Reduzieren dann noch immer möglich ist, das Vergrößern jedoch nicht (ohne Qualitätsverlust). Die Größenangaben erfolgen immer in Pixeln. Typischerweise hat ein Bildschirm die Auflösung von 1024x768 Pixeln - dass wäre dann eine Maximalgröße. Auf der Website werden dann "geschwindigkeitsoptimierte" Grafiken untergebracht, in dem die Größen auf das Maß reduziert werden, welches benötigt wird: soll das Logo mit 100x100 Pixel angezeigt werden, so wird es auch in dieser Größe abgespeichert. Eine Dichte (dots per inch - dpi) von 96dpi ist für den Bildschirm ausreichend (für den Druck wären 300dpi besser geeignet).

Bei allen HPCO-Sites werden die Bilder in den passenden Formaten und Größen abgespeichert. Um ein einheitliches Layout der gesamten Site zu unterstützen, werden einige Standardgrößen festgelegt und alle Bilder daraufhin angepasst. Auf einer typischen HPCO-Site könnten folgende Formatgrößen eine Anwendung finden:

Typ (Endung)Größe Verwendung
-s 80px kleines Bild im Fließtext oder auf der Site; oftmals klickbar.
-m 200px mittelgroßes Bild, welches auf Site bereits so gut zu erkennen ist - ggf. auch klickbar. Es können bis zu drei Bilder nebeneinander untergebracht werden können (dann hat man 600 Pixel + Rand).
-l 400px großes Bild, welches die zur Verfügung stehende Breite bereits ausfüllt. Neben dem Bild könnten noch Texte stehen.
-xl 800px sehr großes Bild, welches zur Darstellung ein eigenes Fenster benötigt.

Die Unterteilung der Bilder in s-, m-, l- und xl-Größen sollte immer erfolgen, jedoch variiert die letztlich gewählte Größenzuordnung (wie "s = 80px") dann noch immer, da die Sites ja nicht immer im gleichen Layout erscheinen: so macht es z.B. Sinn, auf einer breiten Site mit vielen Informationen, das Bildformat "l" etwas größer zu wählen, wie etwa 500 oder 600px.

Bilddateien

Alle Namen der Bilddateien (einer HPCO-Site) haben das gleiche Kürzel vorweg (Prefix - dies ist das Website-Kürzel) und werden dann entsprechend der Inhalte und Größe ergänzt. Generell werden alle Dateinamen klein geschrieben und auf Umlaute und Sonderzeichen wird verzichtet.

Damit sollten Dateinamen für Bilder folgenden Aufbau besitzen:

  grob-{fein-}typ-aufl.ext

Hierbei bedeuten:

ElementBeschreibungBeispiele
grobGrobe Klassifizierung der Datei hpco = alle, was zu dieser Seite gehört
feinFeinere Unterteilung (optional) design - gehört zu den Designbildern
typbeschreibt weiteres Detail skizze = ist eine Skizze, schriftzug = das ist ein Schriftzug
auflAuflösung; diese ist codiert wie die internationalen Kleiderangaben: xl, l, m und s
.Der Punkt sollte schon dabei sein.
extExtension; Dateinamenerweiterungen Entsprechend der Grafik-Dateitypen: gif, jpg, png, ico

Einige Beispiele für komplette Dateinamen:

DateinameVermutlicher Inhalt
hpco-uebersicht-design-l.jpg Bild der HPCO-Website, welches eine Übersicht des Designs liefert und in einem großen Format (600px) abgelegt ist. Kann im Text untergebracht sein oder auch separat aufgerufen werden.
wiho-ww-detail-m.jpg Bild der Wibbeler-Hochwasserschutz-Website. Es werden Details der WasserWand (Kürzel ww) dargestellt, die im Text untergebracht sind. Die Bildgröße ist etwa 200px.

Einbinden von Bildern

Alle Bilder sollten exakt, d.h. pixelgenau, in der Größe vorliegen, in der sie eingebunden werden. Die Größenangaben werden ebenso untergebracht wie das alt-Tag.

Beispiel:

<img src="_images/hpco-uebersicht-m.png"
     width="200" height="140" 
     alt="Übersicht des HPCO-Systems, (c) HPCO 2006>"

Die Angabe der Größe bewirkt einen schnelleren Aufbau der Seite, da der Browser die Größeninformationen dann nicht aus den Bilddateien ermitteln muss, sondern direkt den passenden Platz freihalten kann.

Generelle Design-Aspekte

Besonderheiten des Webdesigns

... kommt noch ...

Letzte Aktualisierung: 12.03.2006 © HPCO, 2006-2018