Nahezu jeder ist heute in der Lage eine eigene Website zu erstellen. Homepagebaukästen laden den Onlineuser dazu ein, mit nur wenigen Klicks die erste eigene Homepage zu kreieren. Vorgefertigte Seiten benötigen nur noch ein wenig Text, sowie ein paar Bilder und schon steht das erste Webprojekt. Den Speicherplatz für die Webpräsens gibt es bei unzähligen Anbietern – zum Teil sogar kostenlos. Lediglich die Domain, über die später die Homeage erreichbar ist, verlangt eine geringe Gebühr. Für den Heimanwender oder ein Non-Profit-Projekt mag dieser geringe Aufwand ausreichend sein, ein Onlineunternehmen kann sich allerdings mit dieser Vorgehensweise nicht zufrieden geben. Neben der Programmiertechnik ist die Suchmaschinenoptimierung (SEO) ein wesentlicher Faktor, der den Erfolg des Unternehmens im Onlinehandel bestimmt.

Für ein erfolgsversprechendes Webprojekt sind Homepagebaukästen ein absolutes „No-Go“. Neben unnützen Code lassen sich die Webseiten auch nachträglich nicht im Detail für SEO optimieren. Für „sauberen“ Code sollte deshalb auf Entwicklungsumgebungen wie Eclipse oder NetBeans zurückgegriffen werden. Auch viele WYSIWYG-Editoren (What you see is what you get) fügen unerwünschten Code in die Webseiten ein, und sind deshalb auch nur mit Vorsicht zu benutzen. Vier Punkte sind bei der Umsetzung eines solchen Projekts enorm wichtig: Benutzerfreundlichkeit, Zugänglichkeit, Suchmaschinenoptimierung und die Programmiertechnik. Viele Mechanismen greifen dabei auch ineinander über. Eine saubere Programmierung und eine klare Struktur ist zugleich ein Mehrwert für die Benutzerfreundlichkeit, die Zugänglichkeit und die Suchmaschinenoptimierung.
Die folgenden Punkte helfen bei der Umsetzung:

Valider Quelltext

Ein valider Quellcode ist das A und O einer Website. Ein Quelltext ohne Fehler ist der Grundstein einer sauberen Ausgabe. Der HTML- oder CSS Quelltext kann über den W3C-Validator geprüft werden. Fehler und Hilfe dazu werden direkt ausgegeben.

Trennung von Daten und Design

Gerade beim Webdesign ist darauf zu achten, dass funktionaler HTML-Code nicht mit style-Elementen vermischt wird (Spaghetti-Markup). Das Aussehen der Website sollte komplett in einer externen CSS-Datei untergebracht sein. Somit lassen sich auch später sehr schnell Schriften, Farben und viele weitere Designelemente schnell und effektiv ändern. Die Ausgabe kann somit auch für bestimmte Endgeräte optimiert werden, wie z.B. Smartphones, Tablets oder für eine Druckausgabe.

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

Frames und Weiterleitung vermeiden

Die ersten Websites des World Wide Web waren mit Frames bestückt. Heutzutage verzichtet man komplett auf diese Technik, weil es durch das Web 2.0 bessere Techniken gibt, Frames zu ersetzen. Auch auf automatische Weiterleitungen sollte verzichtet werden, da der Online-User ungern wartet und diese Technik außerdem für Suchmaschinen schädlich sein kein.

Tabellenlos ist Trend

Auch das beliebte Vorgehen ein Template mit Tabellen zu bauen ist nicht mehr zeitgemäß. Auch dafür kann man komplett auf CSS zurückgreifen. Für eine tabellarische Auflistung von Daten für den Betrachter kann natürlich weiterhin das Table-Element verwendet werden!

Textelemente

Bei einem Text spielen die Schriftart, die Schriftgröße sowie die Farbgestaltung eine entscheindene Rolle. Bei der Schriftgröße sollte unbedingt darauf geachtet werden, dass die Größe nicht absolut sondern relativ angegeben wird. Das hat ganz besonders dann den Vorteil wenn ein Onlineuser die Schriftvergrößerung über den Browser benutzt. Von der Schriftart „Times New Roman“ ist abzusehen. Man sollte allerdings auch keine exotischen Schriftarten für die Website verwenden, denn der Betrachter sollte zur korrekten Darstellung der Schrift ebenfalls diese Schriftart auf seinem System besitzen. Für Zitate oder besondere Fachbegriffe ist es ratsam eine kursive Schrift bzw. eine fette Schrift zu verwenden. Überschriften werden mit dem h-Tag versehen mit aufsteigender Reihenfolge. Auf die Attribute für einen blinkenden oder bewegten Text sollte unbedingt verzichtet werden. Diese Elemente stören den Betrachter bei der Informationsaufnahme und hinterlassen einen negativen Eindruck.

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<b>Fetter Text</b>
<i>Kursiver Text</i>
<u>Unterstrichener Text</u>

Hyperlinks

Links sind die zentrale Navigationselemente einer Website. Sie müssen dem Betrachter klar ersichtlich und funktional korrekt arbeiten. Defekte Links wirken sich nicht nur negativ auf die Suchmaschinenoptimierung aus, sondern führen auch den Betrachter in eine Sackgasse. Text-Hyperlinks sollten vier verschiedene Farben besitzen für unbenutze Links, bereits genutzte Links, aktive Links und für den Mouse-Over-Effekt. Pop-Ups sollten nach Möglichkeit vermieden werden. Pop-Up-Blocker verhindern ohnehin das Öffnen dieser neuen Fenster und sie sind zudem auch noch störend, da sie durch die Werbebranche einen negativen Ruf erhalten haben.

<style type="text/css">
a:link { color:#FF9966; }
a:visited { color:#FF9900; }
a:active { color:#FFFFFF; }
a:hover { color:#FF0000; }
</style>

Sprechende URLS

Gerade bei dynamisch generierten Webseiten (Web 2.0) kann nicht mehr einfach ein sprechender Dateiname wie z.B. gaestebuch.html verwendet werden. Eine PHP-Seite liefert dynamisch die Inhalte aus einer Datenbank aus, die vom User angefragt werden. Oft wird diese PHP-Seite mit einer ID aufgerufen, die für den enstprechenden Inhalt steht (index.php?id=21). Für Suchmaschinen und den Betrachter entfachen sprechende URLS eine viel größere Wirkung. Für eine erfolgreiche URL-Umschreibung eignet sich die .htaccess – Datei hervorragend. Die sogenannte Rewrite-Engine sowie Mod-Rewrite zaubern aus hinterlegten Schlüsselwörter sprechende URL’s.

Meta-Tags

Meta-Tags sind für den Betrachter nicht sichtbare Informationen, die fast ausschließlich zu SEO-Zwecken verwendet werden. Sehr wichtige Meta-Tags sind title, description und keywords. Was hier eingetragen wird, darüber ist die Seite dann auch später bei Google zu finden. Der Title sollte aus vier bis fünf Wörtern bestehen, die Description nicht mehr als 160 Zeichen beinhalten. Beim den Keywords scheiden sich die Geister. In der SEO-Szene wird behauptet, dass das Keyword-Tag nicht mehr relevant ist. Schaden kann es allerdings nicht vier bis fünf Keywords einzutragen. Ein ganz entscheidender Punkt bei der Meta-Tag-Vergabe ist die Individuelle Beschreibung jeder Seite. Jede Seite muss unikate Tags beinhalten. Copy & Paste sollte um jeden Preis vermieden werden, auch wenn dies den Aufwand erheblich vereinfacht.

<meta name="keywords" content="Informationstechnik, Web 2.0, SEO, Benutzerfreundlichkeit" /> 
<meta name="description" content="Mit nur wenigen Tricks gestalten Sie Ihr Webprojekt barrierefrei, erhöhen die Benutzerfreundlichkeit und optimieren die Webseiten für die Suchmaschinen" /> 
<title>Webprojekt barrierefrei gestalten - Suchmachinenoptimiert</title>

Ladezeit

Wer möchte schon lange warten bis die Website vollständig erschienen ist? Eine ladezeitoptimierte Gestaltung ist ein ebenfalls sehr wichtiger Faktor. Je mehr externe Dateien in die Hauptseite eingebunden werden, desto länger dauert auch die Ausführung. Gerade externe Javascript-Dateien können zusammengefasst werden und auch direkt in der Hauptseite untergebracht werden. Auch Bilddateien können zusammengefasst werden. Ein Sprites-Bild enthält z.B. viele kleinere Bilder, muss allerdings nur einmal bei der Ausführung der Seite geladen werden. Alle anderen Bilder können bis kurz vor einem ersichtlichen Qualitätsverlust komprimiert werden. JPEG-Bilddateien bieten im Web den höchsten Komprimierungsfaktor.