Webdesign

Grundsätze

Skalierbares Layout, für alle Bildschirmauflösungen geeignet, keine starre Breite. Druck der Seiten und Übernahme in "Compiled HTML" (keine Navigation) muss ebenfalls möglich sein.
Keine Frames, kein Flash, JavaScript höchstens für Zusatzfunktionen.
Unterstützung aller "modernen" Browser.
Layout mit purem HTML 4.01 und CSS 2.0. Layout basiert auf CSS Layern, nicht mehr auf Tabellen und "Blind GIFs". Daher keine Unterstützung für Netscape 4.x. Aber: Die Seiten sollen auch ohne Stylesheet lesbar bleiben.
Skalierbare Schrift für den Inhalt.
Neu: Wegen der besseren Lesbarkeit auf 16:9 Bildschirmen habe ich die Seitenbreite auf 1024 Pixel begrenzt (06.10.2009).
Neu: Ein bischen "responsive design" eingebaut (01.08.2015)

Layout 1

Logo	Überschrift
	Navigation

Navigation

Inhalt

Fußzeile

(TOP)

Layout 2

Logo	Überschrift
	Navigation


		Bilder
Navigation		Inhalt

Fußzeile

(TOP)

Drucklayout

Überschrift

Bilder

Inhalt

Fußzeile

(TOP)

Blockbeschreibungen

Head

Der Kopf hat feste Größen (in Pixel)

Logo: 80px * 134px
Überschrift: Höhe 60px, Schriftgröße 24px
Navigation: Höhe 20px, Schriftgröße 12px, Schriftart "Verdana" fett
beinhaltet die Umschaltung zwischen den Themenbereichen Uhren - Urlaub

Main

Der Navigationsbereich und die Bildleiste haben feste Größen (in Pixel), der Inhaltsbereich hat (bis auf den Rand) relative Größen (in em)

Navigation: Breite 154px (breiter als Logo!), Schriftgröße 12px
Bildleiste: Höhe i.d.R. 90px, 36px vom linken Rand und oberer Navigationszeile, 36px Abstand zum Inhalt.
Inhalt: Außenrand 36px

Die Navigation im linken Rand dient zur Navigation in dem gewählten Bereich (Uhren - Urlaub). Sie ist 4stufig: Oberster Punkt ist immer der Bereich (Uhren/Urlaub, fett, ohne vorgestelltes Bullet "•"), danach die Hauptseite (fett, mit vorgestelltem "Bullet") und danach die Unterseiten (nicht fett, eingerückt, 4. Stufe mit vorgestelltem Gedankenstrich (— = — = "—"). Die gerade aktive Seite ist auf weißem Hintergrund.

Footer

Die Fußzeile ist wieder mit festen Größen

Fußzeile: Höhe 20px Schriftgröße 10px, Schriftart "Verdana" fett

Realisierung

Es sind im Wesentlichen 3 Layern (<div>) relativ positioniert untereinander angeordnet:

ID="head": Kopfbereich mit fester Höhe
ID="main": Inhaltsbereich mit festem linken Rand (Navigationsbereich) und festem Innenabstand zum eigentlichen Inhalt.
ID="footer": Fußzeile

Darauf liegt, absolut positioniert der Navigationslayer (<div id="clink">). Die obere Position des Navigationslayers stimmt mit der ersten Zeile des Inhalts überein.

Die Bildzeile ist relativ positioniert, Teil des Inhaltsbereichs. Sie kann dadurch auch mehrfach im Inhalt vorkommen.

Testseite Testseite neu

(TOP)

verwendete Farbpalette

Hintergrundfarbe	Schriftfarbe	Verwendung
#FFFFFF	#000000	Inhalt (schwarz auf weiß)
#FFFFCC	#0080FF	Navigationsflächen (hover)
#D8D8E0	#00008B	Überschrift und Navigation links
#FFFF00	#000000	"Textmarker"
#0080FF	#000000	Logo
#00008B	#D8D8E0	Navigation oben und Fußzeile

Kompatibilitätshinweise

Netscape 6.x interpretiert border-collapse:collapse (CSS) nicht. Daher muß das Attribut cellspacing="0" (HTML) gesetzt werden.
IE (nur 5.x?) verrechnet sich bei mehreren relativ positionierten <div>. Symptom: der linke Rand ist bei der Fußzeile außerhalb des Bildschirms. Daher muß der Link (TOP) am Ende der Seite stehen.
Opera 5 versteht kein width (CSS) auf <a> Elemente. Daher ist ein zusätzliches display:block bei diesem Element erforderlich.
Für Browser, die keine in HTML 4 benannten Zeichen kennen, werden diese in ihrem Unicodewert angegeben. Beispiel: • (HTML 4) = • (HTML 3.2).

(TOP)

Responsive Design

Die Zunahme von Smartphones (ich habe jetzt auch eins) und Tabletts erfordert eine gewisse Anpassung der Seiten, damit sie überhaupt les- und bedienbar bleiben. Dazu gibt es zwei verschiedene Ansätze: Eigene Seiten für Mobiles (wie z.B. bei Spiegel-Online mit m.spiegel.de) oder anpassungsfähige Seiten. Ohne CMS ist eigentlich nur der zweite Ansatz möglich, sonst müsste man ja immer zwei Seiten (für Smartphones und Desktop) pflegen. Also Umstellung der Seiten auf "responsive webdesign".

Als ersten und wichtigsten Punkt ist dabei die Berücksichtigung des tatsächlichen Viewports, also der tatsächlichen Bildschirmauflösung und nicht einer vom Gerät vorgegaukelten. Dazu muss im Kopf jeder Seite ein

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

eingefügt werden.

Als nächstes sollten die Bilder vernünftig skalieren. Dazu ist im Stylesheet ein

img { max-width:100%; height:auto }

einzubauen. Damit ist die Seite auf Smartphones schon wesentlich besser lesbar.

Besonders im Potrait Modus nimmt aber das Menü in der linken Spalte viel Platz weg und im Landscape Modus ist es dann aufgrund seiner Länge nicht mehr bedienbar. Um dies zu verbessern wird auf kleinen Anzeigen ("Desktop first" Ansatz) diese Navigation mittels Media Queries unterhalb der Seite angezeigt und am linken Rand dafür ausgeblendet. In diesem Fall erscheint unterhalb des Seitenkopfs eine Zeile mit einem Menü-Symbol ≡, welches direkt die Navigation am Seitenende anspringt. Der (einzige) Breakpoint für diese Umschaltung liegt zur Zeit bei 480 Pixel (horizontal und vertikal).

Mit diesem minimalistischen Ansatz, hält sich die Änderung an den (allen) Webseiten in Grenzen, denn die wesenlichen Änderungen finden im Stylesheet statt. Außerdem bleibt das Paradigma "kein JavaScript nötig" erhalten. Jede weitere Verbesserung hätte wahrscheinlich ein Redesign der Site zur Folge. Aber in absehbarer Zeit wird auch dies notwendig werden. Schließlich ist die Optik 15 Jahre alt und die Technik dahinter (HTML 4.01 und CSS 2.0 ) auch schon über 10 Jahr unverändert. (Stand August 2015)

(TOP)