Gesamtstruktur

Wenn man nicht gerade eine Web-Visitenkarte baut, die ausschliesslich zur Kontaktaufnahme im Internet dient, besteht eine Website aus mehreren Seiten (Pages). Neben den Seiten, welche die tatsächlichen Inhalte einer Webpräsenz vorstellen, gibt es einige Pflichtseiten. Für gewöhnlich landet ein User auf einer Startseite. Von dort aus kann er dann zu den Inhaltsseiten navigieren. Auf der Seite Kontakt kann er durch ein Web-Formular Kontakt zum Betreiber der Site aufnehmen. Zwar haben nur gewerbliche Anbieter von Internetseiten eine Impressumspflicht, jedoch hat es sich inzwischen eingebürgert auch auf den privaten Internetauftritten ein Impressum zu veröffentlichen. Verwendet ein Webseitenbetreiber einen Dienst wie “Goolge Analytics” für Besucherstatistiken, welcher die IP-Adressen speichert, ist der Betreiber verpflichtet einen entsprechenden Hinweis (Disclaimer) bezüglich der Erfassung und Nutzung der Daten auf der Webseite zu platzieren.  

Performance / Coding

Eine Seite besteht aus folgenden Elementen: 

• (X)HTML - Markup
• Text
• Grafiken
• CSS - Styling

Zunächst gilt es ein sauberes (X)HTML Markup zu programmieren. WYSWIG-HTML-Editoren wie z.B. Adobe’s Dreamweaver machen es zwar automatisch, nichtsdestotrotz können auch dort Fehler passieren, wenn der Entwickler die Code-Ansicht nicht im Auge behält. Zum sauberen HTML gehört zunächst das korrekte Verschachteln von HTML-Elementen. z.B. ein DIV-Container umschliesst ein SPAN-Tag.

1

<div><span>Inhalt</span></div>

und nicht

1

<div><span>Inhalt</div></span>

Richtige HTML-Elemente für entsprechende Inhalte. Eine Hauptüberschrift gehört in einen H1-Tag, ein zusammenhängender Text wird in Paragraphen aufgeteilt und von P-Tags umschlossen. Einen TABLE-Tag verwendet man ausschliesslich um tabellarische Inhalte darzustellen und nicht etwa zur Strukturierung einer Seite.

Grafiken in einer Web-Site sollten stets im korrekten Format eingebunden werden. Für verlaufsarme Darstellungen eignet sich am besten das GIF-Format, jedoch sollte die Grafik-Export-Funktion eines Bildbearbeitung-Programms belangt werden um einen Kompromiss zwischen Qualität und Dateigröße herauszufinden. Dateigrößen von über 50 Kilobyte haben auf einer Internet-Seite keinen Platz, die Größe muss entsprechend in Relation zu den Abmessungen eines Bildes gesetzt werden. Je kleiner die Abmessungen eines Bildes, desto kleiner die Dateigröße. Vor Allem übertriebene Dateigrößen für Grafiken beeinflussen die Performance einer Web-Site sehr stark.

CSS-Styling sollte in externe Dateien ausgelagert werden. So ist es auf eine einfache Art und Weise möglich Aussehen mehrerer Seiten oder der Ganzen Web-Site schnell zu manipulieren. Zwar ist es nicht verboten visuelle Anpassungen durch CSS mithilfe vom STYLE-Attribut vorzunehmen, jedoch empfiehlt es sich nicht, da man dadurch HTML-Markup (die Struktur) und das Aussehen der Seite in einer Datei miteinander vermischt. 

Bei Coden der ausgelagerten CSS-Dateien ist auf die korrekte Verwendung von Selektoren und die Kaskadierung von CSS-Eigenschaften zu achten. Korrekt ist es z.B. die Eigenschaft font-family schon für den Selektor BODY zu definieren und nicht für jedes einzelne Element, das einen Text darstellt. 
 
Usability / Accesability

Es gibt einige wichtige Usability-Faktoren, die beim Erstellen einer Web-Site zu beachten sind.

Da wären zuerst die Proportionen einer Seite. Ist die Breite einer Seite größer als die Breite des Browser-Fensters, zwingt es einen Benutzer horizontal zu scrollen. Daher müssen geeignete Abmessungen für eine Web-Site gefunden werden, die dem User ein bestmögliches Browsing-Erlebnis bereiten.

Es ist unmöglich die Darstellung einer Web-Site in allen auf dem Markt verfügbaren Browsern identisch zu gestalten, jedoch sollte sie in den am meisten verbreiteten Browsern überprüft und angepasst werden. Die Boliden unter den Browsern sind zur Zeit Internet Explorer ab Version 6, Firefox ab Version 2 und Safari ab Version 2. Eine Site sollte in diesen Browsern getestet werden und die Darstellung optimiert werden.

Eine klare Navigation soll den User durch die Internetpräsenz leiten und ihm stets anzeigen wo er sich zur Zeit auf der Site befindet. Bei größeren Internet-Auftritten wird empfohlen ein Breadcrumping einzusetzen, bei Kleineren genügt es oft den aktiven Navigationspunkt entsprechend zu markieren.

Links im Fließtext oder Link-Listen müssen als solche erkennbar sein. Es eignet sich eine farbliche Absetzung oder auch eine Textdekoration wie z.B. eine Unterstreichung. Nicht markierte Links verwehren dem User eine Weiternavigation.

Fließtext einer Web-Site sollte keineswegs in Grafiken dargestellt werden. Zwar ist dadurch möglich eine Seite grafisch ansprechender zu gestalten, jedoch reduziert man die Zugänglichkeit (Accessebility) dieser Seite. Inhalte müssen für alle User lesbar und erkennbar sein. User, welche z.B. die Darstellung von Bildern im Browser ausstellen, würden demnach die Texte der Web-Site nicht lesen können, da diese in Grafiken verpackt sind. Auch sollte die Farbe des Textes so gewählt werden, dass sie im entsprechenden Kontrast zum Hintergrund einfach zu erkennen und zu lesen ist. Es sollte auf eine adäquate Schriftgröße zu achten und ein akzeptabler Zeilenabstand einzustellen.

Nicht zuletzt sollte auf den Einsatz von PopUp-Fenstern verzichtet werden. Es hat sich in den letzten Jahren herausgestellt, dass PopUps die Usability einer Seite stark reduzieren, wenn diese nicht vom Benutzer selbst geöffnet wurden.