10 Schritte zur hochwertigen Website
Artikel vom 23. Mai 2006. ISSN 1614-3124, #24. Schwerpunkt: Webdesign (RSS-Feed für alle Themen).
Dieser und viele andere Beiträge sind auch als hübsches, wohlerzogenes E-Book erhältlich: On Web Development. Und wo wir gerade dabei sind, hier ist ein kleines Büchlein nur über die Qualitätssicherung von Websites: The Little Book of Website Quality Control.
Ein gutes Informationsangebot fällt nicht einfach vom Himmel, und es lässt sich nicht schnell zusammenklicken. Nein. Es stellt Ansprüche an Ziele, Inhalte, Struktur, Design, Programmierung, Pflege. Es erfordert Expertise, und dies permanent. Dieser Artikel skizziert – nicht allumfassend – die zehn wichtigsten Punkte zum Erstellen einer guten Website (und Webseite). Eine Checkliste zum Sammeln und Tauschen.
Inhalt
- Hingabe
- Planung
- Informationsarchitektur
- Design
- Programmierung
- Qualitätssicherung
- Ă–ffentlichkeitsarbeit
- Erfolgskontrolle
- Wartung
- Qualitätssicherung
1. Hingabe
Wenn Sie nicht wirklich »Lust« auf eine Website haben und diese schon gar nicht pflegen wollen: Lassen Sie es bleiben.
Eine hochwertige Website erfordert Hingabe, Einsatz, Engagement. Gute Inhalte erfordern Hingabe, Einsatz, Engagement. Ihre Benutzer und Besucher erfordern Hingabe, Einsatz, Engagement. Sie können gerne den Vergleich zu Haustieren ziehen – Sie sollten sich vorher Gedanken darüber machen, sich eins zuzulegen, nicht hinterher. (Natürlich schmerzen schlecht behandelte Haustiere weit mehr. Keine Diskussion.)
2. Planung
Okay, Sie wollen tatsächlich eine Website, und diese sollte auch tatsächlich ein bisschen gut sein. Dann planen Sie:
- Was ist das Ziel Ihrer Website?
- Was ist die Zielgruppe Ihrer Website?
- Welche Inhalte wollen Sie anbieten?
- Welche Kennzahlen und Metriken bestimmen den Erfolg? (Ermitteln Sie die »Key Performance Indicators«.)
Wenn Sie irgendwo unsicher sind, Zweifel haben oder gar einen Punkt offenlassen, sollten Sie erstmal eine Pause machen. Oder sich von jemand helfen lassen. Ihre Website kann solange warten.
3. Informationsarchitektur
Nachdem die Planung abgeschlossen ist, geht es noch nicht gleich mit Design und Umsetzung los: Erstellen, testen, verifizieren, überdenken Sie die Struktur und Architektur Ihres Angebots. Dazu schnappen Sie sich ein gutes Buch über Informationsarchitektur, achten auf ein paar Heuristiken, und lassen, wenn Sie richtig was losmachen wollen, mindestens 15 Benutzer Karten sortieren. Achten Sie frühzeitig auf Lokalisierung und Internationalisierung. Dann dokumentieren Sie die erarbeitete Struktur und validieren diese – über Tests, wenn es an das Design geht.
4. Design
Hurra, Design. Wichtig:
Design is a set of fields for problem-solving that uses user-centric approaches to understand user needs (as well as business, economic, environmental, social, and other requirements) to create successful solutions that solve real problems. Design is often used as a process to create real change within a system or market. Too often, Design is defined only as visual problem solving or communication because of the predominance of graphic designers. In other fields and contexts, Design might only refer to Fashion Design or Interior Design. However, a recognition of the similarities between all design disciplines shows that the larger definition for Design operates at a higher level and across many media.
– Nathan Shedroff: An Evolving Glossary of Experience Design (2005).
Achten Sie auf ein paar weitere Punkte, bevor Sie loslegen:
-
Beschäftigen Sie sich ruhig etwas mit Prinzipien, ob spezifischen wie denen von Tufte oder von Tognazzini, oder allgemeinen wie dem goldenen Schnitt oder Wabi-Sabi.
-
Behalten Sie unbedingt und schon in der Designphase Barrierefreiheit im Hinterkopf. So sind beispielsweise Farbenblindheit oder fotosensitive Epilepsie ebenso leicht zu berĂĽcksichtigen wie ausreichender Kontrast.
-
Testen Sie Ihre Entwürfe (nicht erst die finale Version). Testen Sie, ob nun mit fünf Benutzern, mit mehr, weil sonst nicht genug, mit n, Hauptsache günstig, oder gar keinem, weil man auf Experten setzt. Testen Sie, und beschäftigen Sie sich auch mit Grundregeln und Tipps zu Usability.
Nun: Seien Sie »kontrolliert kreativ«.
5. Programmierung
Nach Abschluss des Designprozesses, der eine funktionierende Gestaltung hervorbringen sollte, kann es an die Umsetzung gehen. (Es ist durchaus nicht ausgeschlossen, auch schon eher zu beginnen.) Umgebung (Server) und Dynamik (Skriptsprachen) auĂźer acht lassend, sollten mĂĽssen Sie unter anderem folgende Punkte entscheiden und beachten:
-
Wählen Sie einen angemessenen Dokumenttyp für Ihre Dokumente. Lassen Sie sich dazu im Zweifelsfall von Jeffrey Zeldman oder Eric Meyer inspirieren. Falls das nicht hilft – verwenden Sie halt irgendeinen validen Dokumenttyp. [Heutzutage einfach
<!DOCTYPE html>
.] -
Verwenden Sie HTML-Elemente gemäß Semantik.
-
Schreiben Sie strukturierten Code. Vor allem, wenn noch mehr als nur Ihre Hände am Projekt beteiligt sind.
-
Validieren Sie. Alles. Sehen Sie es als Tabu an, nicht validierende Dokumente und Stylesheets zu veröffentlichen.
-
Achten Sie auf jeden Fall auf Zugänglichkeit. Regeln der Barrierefreiheit sind nützlich, aber leider noch nicht hinreichend.
6. Qualitätssicherung
Nachdem Sie auf Grundlage der vorherigen Punkte ein durchdachtes, hochwertigeres Informationsangebot auf die Beine gestellt haben, sollten Sie dennoch, unbedingt und sowieso Qualitätssicherung (QS) betreiben. Die Veröffentlichung Ihrer Website hängt davon ab. Ihr Launch kann unmittelbar nach abschließenden Tests erfolgen, sofern Sie von Anfang an Augenmerk auf Qualität gelegt haben.
PrĂĽfen und optimieren Sie unter anderem:
- Technische Validität und Konformität aller Ressourcen.
- Barrierefreiheit, idealerweise mit Benutzern, aber auch ruhig mal automatisiert.
- Links. »Linksterben« war noch nie in Mode.
- Ladezeit.
- Einfach alles. Stehen Sie für hohe Qualität und gute Nutzererfahrung. Stellen Sie sie sicher.
7. Ă–ffentlichkeitsarbeit
Vermarkten Sie Ihre Website, ruhigen Gewissens. Ihr HTML sollte bereits fit für Suchmaschinen sein (Semantik und Barrierefreiheit), erarbeiten und verfolgen Sie jetzt eine moderate Linkstrategie. Und betreiben Sie herkömmliche Öffentlichkeitsarbeit (»Public Relations«, PR). Ja, leicht gesagt, sollte aber getan werden. Flippen Sie nicht gleich aus, wenn sich nicht sofort großartige Erfolge wie eine Verzehnfachung der Seitenzugriffe einstellen – planen Sie langfristig.
8. Erfolgskontrolle
Sorgen Sie dafür, dass die anfangs definierten »Key Performance Indicators« (KPI) gemessen werden. Wenn Ihre Statistiken diese Zahlen nicht hergeben, sorgen Sie dafür. Es gibt einige brauchbare Statistikwerkzeuge, wenige gute kostenlose (Google Analytics), unwesentlich mehr gute günstige (Mint), und ein paar gute teure (WebSideStory). Orientieren Sie sich an diesen Metriken, um die Entwicklung und den Erfolg Ihres Angebots beurteilen zu können.
Leider ein Hinweis, der etwas schwach auf der Brust ist, wenn Sie sich noch nie mit Webanalyse auseinandergesetzt haben. Holen Sie dies nach.
9. Wartung
Warten Sie Ihre Website. Aktualisieren Sie Ihre Website. Pflegen Sie Ihre Website. Ergänzen Sie sie regelmäßig durch neue Inhalte. Prüfen Sie regelmäßig alte Inhalte. Lesen Sie neue wie alte Inhalte gegen. Hinterfragen Sie Ihr Angebot immer wieder. Letztendlich geht es aber wieder um …
10. Qualitätssicherung
Ja, richtig. Qualitätssicherung ist ein Prozess. Validieren, prüfen, testen Sie Dokumente, Inhalte, Design immer wieder. Immer wieder. Erfreuen Sie sich an Ihrer guten Website!
Ăśber mich
Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.
Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)
Ähnliche Beiträge
Das könnte dich ebenfalls interessieren:
Die Webentwicklung gut überblicken? Probier WebGlossary.info – und The Web Development Glossary 3K. Mit Erklärungen und Definitionen zu tausenden Begriffen aus Webentwicklung, Webdesign und verwandten Feldern, aufbauend auf Wikipedia sowie MDN Web Docs. Erhältlich bei Apple Books, Kobo, Google Play Books und Leanpub.