20 Tipps für professionelles Webdesign

Planung

Wenn man den Drang zum Anfangen verspürt, kommt es oft vor das man den wichtigsten Schritt überspringt: Die Planung. Sei es das Zeichen von Skizzen und Seiten-Diagrammen in OmniGraffle oder Visio oder auch auf einem Stück Papier, man spart dadurch Zeit, da man einen Überblick über das Design der Seite erhält, bevor man anfängt zu bauen. Offensichtliche Fehler können so entdeckt und verbessert werden, bevor es zu spät ist einen Schritt zurück zu machen und es hilft die eigenen Ideen den Auftraggebern und Arbeitskollegen viel einfacher zu erklären, als mit den Händen in der Luft herumzufuchteln.

Mach es von Hand

Obwohl es ein paar sehr gute Programme, wie z.B. Adobe GoLive und Adobe (früher Macromedia) Dreamweaver, zum Erstellen von Webseiten gibt, bevorzugen professionelle Webdesigner den Code von Hand zu schreiben. Sind das verrückte Masochisten? Gut möglich.

Es gibt nur einen Weg HTML zu lernen, und dieser beginnt damit, die Ärmel hochzukrempeln und sich die Hände mit etwas gutem Code schmutzig zu machen. Aber keine Angst: HTML hat eine der steilsten Lernkurven die einem begegnen werden und man kann eine einfache Webseite mit nur ein paar wenigen Zeilen erstellen. Von Hand schreiben garantiert auch, das man einen möglichst schlanken Code hat, was das ultimative Ziel für alle Geeks ist.

Man braucht jetzt nicht seine Kopie von GoLive oder Dreamweaver wegzuwerfen. Beide Programme haben ausgezeichnete Programmeditoren und zudem nützliche Features wie z.B. die Faltung von Code-Blöcken und geteilte Fenster so das man den Code und das Ergebnis zur gleichen Zeit sehen kann. Wenn man versuchen will, den Code komplett von Hand zu schreiben, tut es jeder Texteditor der Texte im .txt-Format abspeichern kann, aber Mac-Benutzer sollten sich BBEdit von Bare Bones Software einmal ausprobieren und Windows-Benutzer sollten der Freeware AceHTML von Visicome Media einen Blick gönnen.

Stylesheets: Importieren vs. Verlinken

Es gibt zwei Wege, um externe Stylesheets in die HTML-Seite einzubinden, und nicht alle Browser unterstützen beide Varianten. Dies kann man sich zum Vorteil machen, indem man ein Stylesheet den modernen Browsern gibt und ein anderes für Netscape 4.x. Alles andere würde zu viel komplexerem CSS-Code führen.

Cascading Stylesheets sind so konzipiert, das sie sich gegenseitig ergänzen können. Das Geheimnis ist ein einfaches Stylesheet das unter Netscape 4.x funktioniert zu erstellen und den komplexeren CSS-Code in einem zusätzlichen Stylesheet zu verbannen, das dann mit @import eingebunden wird, welches Netscape 4.x ignoriert:

<link rel="stylesheet" href="simple.css"
    type="text/css" media="screen">
<style type="text/css" media="screen">
    @import url(simple.css);
</style>

Schönere Farbverläufe für den Hintergrund

CSS gibt dem Programmierer eine Menge Kontrolle und Flexibilität für das kacheln von Hintergrundbildern. Und das großartige daran ist das gekachelte Bilder nicht auf den Body-Hintergrund beschränkt sind, sondern auch auf jedes DIV, Block oder inline-Element angewandt werden kann.

Bilder die normal oder an der X- bzw. Y-Achse gekachelt werden, können so gesetzt werden, das sie entweder mit der Seite mitscrollen oder fest an einer Position bleiben, während man durch die Seite scrollt. Hintergründe können auch einen Einzug bekommen. Damit kann man einen Hintergrund erzeugen, der sich niemals wiederholt, egal wie lang die Seite ist. Die Bilder dabei sind nur ein paar Kb groß.

Bei folgendem Code muss die Datei background.png nur so groß wie der Verlauf und einen Pixel breit sein. Bei diesem Beispiel geht der Verlauf in Weiß über, aber das background-color Attribut kann jeden Wert annehmen.

body {
  background-color: white;
  background-image: url(background.png);
  background-repeat: repeat-x;
}

Kommentare

Wenn man sich den Code anschaut, den man vor mehreren Monaten erstellt hat, gibt es nichts Schlimmeres als herauszufinden was man damals gemacht. Man muss versuchen den Spagetticode zu entwirren und zu verstehen, das ist ärgerlich. Man kann sich selbst (und allen die auch den Code sehen) eine Freude machen, indem man Kommentare im HTML-Code platziert. Kommentare können schlimmstenfalls die Seite um ein oder zwei KB vergrößern, aber der Zeitgewinn bügelt das kleine Manko wieder aus.

Kommentare veranlassen auch, das man den Code übersichtlich hält, da man ihn in logische Abschnitte unterteilt. Manche Programmierer benutzen sogar Kommentare um ein Inhaltsverzeichnis der Seitenstruktur zu erstellen, welches nur in der Codeansicht zu sehen ist.

Man muss sich allerdings im Klaren sein, das HTML und CSS unterschiedliche Arten von Kommentaren verwenden, deshalb sollte man den unterschied kennen.

<!-- HTML-Kommentare sehen so aus und werden mit spitzen
Klammern und zwei Strichen eingeschlossen. Der Anfangs-Tag
beinhaltet zudem noch ein Ausrufezeichen -->

/* CSS-Kommentare werden durch einen Slash und ein
Stern eingeschlossen. */

Einfaches PHP für die Seitenerstellung

Es gibt keinen Grund ein PHP-Experte zu werden, wenn man mit seiner Seite beginnt. Wenn der Server PHP unterstützt, kann man schnell und einfach serverseitige includes verwenden, um eine Bibliothek von oft verwendeten Elementen anzulegen, indem man diese mit einem einfachen include() in die Seite einbindet. Dies eignet sich hervorragend für Menüelemente, welche als einzelne Instanz existieren können, was bedeutet wenn man einen neuen Menüeintrag hinzufügt oder das Design ändert, muss man nur noch die eingebundene Datei ändern um alle Instanzen zu ändern.

Includes sind einfache HTML-Codeschnipsel wie beispielsweise eine Tabelle oder eine ungeordnete Liste. Die Seite, die die includes* beinhaltet muss die Endung .php besitzen und die einzufügenden Dateien werden wie folgt eingebunden:

include("filename.html");

em-Angabe bei Schriftgrößen verwenden

Designer mögen es, Schriftgrößen in Pixel anzugeben, da dies mit dem was sie in Photoshop erstellen übereinstimmt. Aber bei Pixelangaben bei Schriftgrößen im Web gibt es ein großes Problem: Sie können im Internet Explorer nicht vergrößert oder verkleinert werden. Als die Bildschirmauflösung größer wurde, hatte jeder das Problem mit dem Vergrößern der Schriftgröße, nicht nur die Sehbehinderten. Was ist also die Lösung?

Die Antwort ist, die Schriftgröße in em anzugeben. Ein em ist grob die Breite eines em in einer Schriftart und wenn das Browserinterne default-Stylesheet verwendet wird, ist ein em ca. 16 Pixel. Setzt man die Schriftgröße im body-Tag auf 62,5%, ergibt dies ein em, was ca. 10 Pixel entspricht (16x62,5% = 10).

body {
  font-size: 62.5%;
}

So kann man Pixelangaben mit em gleichsetzen. Als Beispiel kann eine Schriftart die 12 Pixel groß ist, als 1.2em ausgedrückt werden, daraus wird 9 Pixel und wird zu 0.9em usw. Das ist mehr Arbeit, aber Designer und Anwender sind glücklich damit.

Der IE Box Model Hack

Früher oder später wird man auf einen wichtigen Bug im Internet Explorer stoßen, welcher falsche Berechnungen bei der Höhe und Breite von Block-Elementen durchführt. Der IE addiert die padding-Angaben zur inneren Box-Größe anstatt diese außen anzurechnen. Dies kann das Layout zerstören. Die Lösung wird Box Model Hack genannt, welcher einen weiteren Bug im IE ausnutzt, der Tags auswertet die andere Browser ignorieren. Folgendes valides DIV ist definiert durch:

div {
  width: 100px;
  padding: 5px;
  border: 5px solid #fff;
}

Hier erhält man in den meisten Browsern einen Kasten mit der Breite von 120 Pixeln, aber im IE ist der Kasten nur 100 Pixel groß. Die einfachste Lösung hierfür ist die Kasten-Im-Kasten Methode, welche ein DIV in einem anderen platziert:

div {
  width: 100px;
}
div .hack {
  padding: 5px;
  border: 5px solid #fff;
}

Dies wird wiefolgt angewendet:

<div>
  <div class="hack">
    Hier ist der Inhalt
  </div>
</div>

Platz sparen

Niemang mag es, Formulare in HTML zu schreiben, besonders dann nicht, wenn der Browser aus unersichtlichen Gründen Abstände zwischen den Elementen einfügt. Dies kann man einfach mit folgendem CSS umgehen:

<form style="margin-top: 0; margin-bottom: 0;">

Testen, testen und nochmals testen

Zwar dominiert der Internet Explorer mit einem großen Prozentsatz den Browsermarkt, allerdings wird er zur Zeit schrittweise von anderen Browsern wie beispielsweise Firefox oder Opera immer mehr vom Markt verdrängt. Es gibt leider auch noch eine Menge Menschen da draußen, die immer noch veraltete Browser wie pre-Mozilla Versionen von Netscape verwenden.

Es ist so gut wie unmöglich, Webseiten zu gestalten die mit allen Browserversionen funktionieren, deshalb ist es das Beste wenn man entscheidet welche Browser man unterstützen will. Mozilla-basierende Browser, WebKit-basierende Browser (wie z.B. Safari von Apple), KHTML-basierende Browser (wie Konqueror von KDE), Opera und der Internet Explorer in Version 4 und höher sind generell die Testkandidaten. Wie auch immer, man sollte den Code so gestalten, das Benutzer mit anderen Browsern die Seite (wenngleich mit ein paar Abstrichen, siehe Tipp 14) trotzdem betrachten können.

Format-Grundlagen

Früher war es einfach: Wenn das Bild wenige, einfache Farben enthalten hat wie z.B. ein Logo, dann nahm man GIF. War es ein Foto, hat man JPEG verwendet. Ein drittes Format wurde total übersehen, das PNG-Format (ausgesprochen Ping) welches es in zwei Geschmacksrichtungen gibt: Eine 8 Bit Version für 256 Farben (ähnlich wie GIF) und eine 24 Bit Version mit Alphakanal für Transparenz.

Die schlechte Nachricht ist, das der Internet Explorer den Alphakanal von PNGs nicht unterstützt, ohne einen komplizierten Hack anzuwenden. Dennoch komprimiert die 8 Bit Version viel besser als die korrespondierende GIF Version. Ausser wenn man Animationen benötigt, was PNG nicht kann, kann PNG das GIF Format in den meisten Situationen ersetzen, was eine drastische Reduzierung der Dateigröße zur Folge hat.

JPEG erstellt generell kleinere Dateien als das 24 Bit Format von PNG, so lange man also nicht den Vorteil vom Alphakanal des PNG Formates mit einem Hack nutzt, ist das JPEG Format immer noch das Beste für alle Fotos.

Der title und der alt Tag

Man sollte sicherstellen, das alle Bilder Gebrauch vom alt- und title-Tag machen, damit Sehbehinderte mit Screenreadern die Seite auch lesen können.

Das richtige Format für Pseudoklassen

Für Text-Rollover Effekte (überlappen) ist es wichtig, das die Pseudoklassen in der richtigen Reihenfolge stehen, sonst funktioniert es nicht allen Browsern. Die korrekte Reihenfolge ist:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: purple; }
a:active { color: red; }

Semantisches Markup verwenden

Die Idee hinter semantischem Markup ist die Trennung des Inhalts der Seite vom Aussehen, damit Änderungen schneller durchgeführt werden können und der Code aufgeräumter ist. Idealerweise sollte die Seite weiterhin funktionieren, wenn man das Stylesheet entfernt. Es sieht vielleicht nicht schön aus, aber so können Benutzer mit alten Browsern den Inhalt der Seite immer noch lesen.

Die Positionierung, Gestaltung und ein Teil der Interaktivität kann mit Stylesheets und CSS-P hinzugefügt werden.

Favicons

Favicons sind die 16x16 Pixel großen Icons die in der Favoritenliste und in der Titelleiste des Browsers angezeigt werden. Diese sind schnell und einfach zu erstellen: Man speichert eine Grafik im .ico Format (Mac-Benutzer sollten einen Grafikkonverter verwenden, Photoshop unterstützt dieses Format nicht) und legt es im Hauptverzeichnis ab. So einfach ist das.

Großschreibung (Kapitälchen) mit CSS ändern

Wenn man etwas in Kapitälchen schreiben möchte, wie beispielsweise eine Überschrift, kann man CSS die Arbeit tun lassen. Der folgende Code wandelt den gesamten Text mit einem h1-Tag in Kapitälchen um, ohne Rücksicht auf das Format zu nehmen.

h1 { text-transform: uppercase; }

Text um Bilder fließen lassen

Für einen einfachen und schnellen Weg, Text um Bilder fließen zu lassen, kann man das align-Attribut des Bildes verwenden, um es nach links oder rechts zu drücken. Statt das der Text unter das Bild rutscht, sollte er nun an den Ecken entlanglaufen.

Der universelle Zeichensatz

Zeichensätze sind ein entscheidender Teil der Seitendefinition, aber die am wenigsten verstandene Komponente. Zeichensätze, die unsichtbar im Kopfbereich der Seite definiert sind, geben dem Browser die Anweisung, wie die Zeichen zu interpretieren sind. Beim Zeichensatz ISO Latin 1 (auch bekannt als ISO-8859-1) wird die Seite mit dem normalen westlichen Alphabet gerendert, beim Zeichensatz Shift JIS wird die Seite mit japanischen Schriftzeichen gerendert.

Bei so vielen Zeichensätzen können Probleme auftreten, speziell dann wenn der MS Windows Zeichensatz verwendet wird (welcher bestimmte Zeichen enthält, die auf anderen Betriebssystemen als Leerzeichen interpretiert werden) oder wenn verschiedene Sprachen auf einer Seite dargesteltl werden sollen.

Die Antwort ist einen einzigen universellen Zeichensatz zu verwenden, der die meisten eventualitäten abdeckt. Glücklicherweise existiert dieser: UTF-8, welcher auf Unicode basiert. Unicode ist ein Industriestandard der entwickelt wurde um Zeichen und Symbole aller Sprachen auf dem Computer anzeigen und bearbeiten zu können. UTF-8 wird zum bevorzugten Zeichensatz und sollte im Kopfbereich der Webseite wiefolgt eingebunden werden:

<meta http-equiv="content-type"
  content="text/html; charset=utf-8" />

Druckansicht

Wenn Benutzer Webseiten drucken, sind sie nicht daran interessiert, auffällige Grafiken zu drucken, sie wollen eine vereinfachte Version der Seite. Mit CSS ist es möglich ein separates Stylesheet zu erstellen, das nur für die zu druckende Version verwendet wird. Man muss also keine komplett neue HTML-Seite erstellen oder die alte anpassen. Man kann ein Druck-Stylesheet genau wie die anderen CSS-Dateien einbinden:

<link rel="stylesheet" type="text/css"
  href="print.css" media="print">

Oder:

<style type="text/css" media="print">
  @import url(print.css);
</style>

media=print stellt sicher, das das CSS nur für den Ausdruck verwendet wird, und keinen Einfluss auf die Darstellung auf dem Bildschirm hat. Beim Druck-Stylesheet sollte sichergestellt werden, das man schwarzen Text auf weißem Hintergrund verwendet und unnötige Features und Bilder entfernt, was die Lesbarkeit steigert.

Von den anderen lernen

Abschließend ein kurzer und einfacher Tipp: Man lernt am besten von anderen guten Seiten. Den HTML-Code kann man jederzeit einsehen. Wenn man verstanden hat, wie andere Probleme gelöst haben, kann man dieses Wissen in eigenen Projekten verwenden.

Dieser Text wurde im Orginal von Jason Arber verfasst und auf netmag.co.uk veröffentlicht. Die Übersetzung stammt von mir (Aaron Fischer).