zurück

Online-Marketing-Tutorial Thema: Webdesign

Hier geht es nicht um eine Einführung in HTML und CSS, wenn Sie noch keine oder nur geringe Kenntnisse in diesem Bereich haben, empfehle ich Ihnen das Tutorial von Stefan Münz "SelfHTML", Sie können es sich hier kostenlos runterladen.

Suchmaschinen mögen vor allem eines: Text, Text und noch mehr Inhalt! Sie bewerten die Relevanz einer Webseite auch nach dem Kriterium Dateigrösse und Verhältnis von Inhalt zu reinem HTML-Code.
Das verlangt, dass Sie HTML als das verwenden was es ist: eine reine Auszeichnungssprache. Das Design geht über CSS-Code, der in eine externe Datei ausgelagert wird.

Die Definition des Dokumenten-Typs

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

werde ich hier immer unterschlagen, das ist mir einfach zuviel uselige Tipperei.
Je nach Umfang der CSS-Definitionen haben Sie jetzt schon das eine oder andere Kb in Ihrer HTML-Datei gespart.

Weitere Einsparmöglichkeiten: Verzichten Sie auf Tabellen-Layout!
Das Thema barrierefreies Webdesign wird hier nicht zufällig mit behandelt, tabellenloses Layout ist für barrierefreie Webseiten zwingend notwendig, da die Screenreader mit den fürchterlich kompliziert in einander verschachtelten Tabellen nach wie vor nicht klarkommen.

Da die meisten Wysiwyg-Editoren nicht in der Lage sind, tabellenloses Layout zu produzieren, und darüber hinaus teilweise ganz schönen Schrott-Code unters Volk bringen, ist es spätestens jetzt an der Zeit, sich nach einem guten Editor umzusehen (Weaverslave ist übrigens kostenlos) und das Hardcoden zu Lernen.

Ein einfaches Beispiel für ein zweispaltiges tabellenloses Layout:

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="header">
Inhalt des Headerbereichs, kann auch ein Logo sein, Text ist aber besser
</div>
<div class="linkespalte">
Inhalt der linken Spalte z.B. Navigation
</div>
<div class="rechtespalte">
Inhalt der rechten Spalte
</div>
<div class="cleaner">
Wird benötigt, um das "Floaten" wieder aufzuheben
</div>
</body>
</html>

Und in Ihrer Datei style.css steht dann:

.header {margin: 0px; padding: 0px; width: 100%; }
.linkespalte { float: left; width: 24%; }
.rechtespalte { float:right; width: 75%; }
.cleaner { clear:both; }

Durch das "Floaten" erscheinen die Bereiche im Browser neben einander. Die Breite in Prozent bewirkt, dass das Layout skalierbar bleibt, die Summe ergibt keine 100% da es leider bei einigen Browser aufgrund von Rundungsdifferenzen zu einer fehlerhaften Darstellung kommt.
Bei solchen Gelegenheiten empfehle ich den Browser Mozilla Firefox, der im Gegensatz zum Konkurrenzprodukt (zumindest bei den älteren Versionen) einer fast völlig unbekannten Software-Schmiede aus Übersee in der Lage ist, HTML-Code Standard konform zu interpretieren.

Jetzt kann man natürlich den CSS-Code noch ein bischen aufpeppen z.B. mit Hintergrundfarben für die Bereich, auch um zu sehen, ob das mit dem "Floaten" auch wirklich so klappt wie man sich das vorgestellt hat:

body {
font-family:Verdana, Arial, Helvetica, Sans-Serif;
font-size:0.9em;
margin: 0; padding: 0; }
.header {
margin: 0px;
padding: 3px;
width: 100%;
height:50px;
background-color:#0080C0;
border:3px outset #0080C0;
color:#fff;
}
.linkespalte {
float: left; width: 24%;
height:500px;
padding: 2px;
background-color:#005B88;
color:#fff;
border:3px outset #005B88;
}
.rechtespalte {
padding: 2px;
float:right; width: 73%;
background-color:#D2F0FF;
height:500px;
border:3px outset #D2F0FF;
}
.cleaner {
clear:both;
background-color:#0080C0;
color:#fff;
}

Das sieht dann so aus: Beipiel ansehen

Wenn Sie jetzt den Code eines zweispaltigen Layouts mit Tabellen vergleichend daneben stellen (hier währen noch zusätzliche Style-Definitionen für die Tabellen notwendig):

<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<table>
<tr>
<td>Headerbereich</td>
</tr>
<tr>
<td>
Anfang Linke Spalte
<table>
<tr>
<td> Link 1 </td>
</tr>
<tr>
<td> Link 2 </td>
</tr>
<tr> <td> usw. </td>
</tr>
</table>
Ende linke Spalte
</td>
<td>
Anfang rechte Spalte
<table>
<tr>
<td> Inhalt, manchmal stehen hier noch weitere Tabellen drin </td>
</tr>
<tr>
<td> Inhalt, manchmal stehen hier noch weitere Tabellen drin </td>
</tr>
<tr>
<td> usw. </td>
</tr>
</table>
Ende rechte Spalte
</td>
</tr>
</table>
</body>
</html>

Und wer macht sich jetzt die Mühe, mal die Bytes zu zählen und zu vergleichen? Aber ich glaube man kann auch so sehen, dass es sich beim tabellenlosen Layout um viel schlankeren Code handelt. Die Tabellen sind im Übrigen meist viel umfangreicher und komplizierter.

Wer jetzt den Aufwand moniert, der durch das Hardcoden entsteht, hat den Aufwand nicht im Blick, der durch Wartung oder Verbesserung/Erweiterung einer Homepage entsteht, deren Layout mit Hilfe von fürchterlich kompliziert ineinander verschachtelten Tabellen realisiert wurde.

Buchempfehlungen:

Modernes Webdesign: Gestaltungsprinzipien, Webstandards, Praxis
von Manuela Hoffmann

zur Buchbeschreibung bei amazon.de

Einführung in XHTML, CSS und Webdesign: Standardkonforme, moderne und barrierefreie Websites erstellen
von Michael Jendryschik

Bild zum Buch Einführung in XHTML, CSS und Webdesign

zur Buchbeschreibung bei amazon.de

CSS-Praxis: Modernes Webdesign mit CSS, Grundlagen, Praxisbeispiele, Referenz, inkl. Prototyping, CSS-Frameworks, SEO u.v.m
von Kai Laborenz

Bild zum Buch CSS-Praxis: Modernes Webdesign mit CSS

zur Buchbeschreibung bei amazon.de

CSS. Das umfassende Handbuch - Behandelt CSS2 und CSS2.1
von Eric A. Meyer

Bild zum Buch CSS. Das umfassende Handbuch

zur Buchbeschreibung bei amazon.de

Besser PHP programmieren: Handbuch professioneller PHP-Techniken
von Carsten Möhrke

zur Buchbeschreibung bei amazon.de

weiter zum Thema Barrierefreiheit