33 Dinge die kontrollliert werden müssen

  • von Lennart Prange

Ich wünsche euch frohe Ostern.

Jedes Projekt ist individuell, aber trotzdem gibt es viele Dinge, die bei jedem Projekt beachtet werden müssen, wenn es erfolgreich werden soll. Darum soll es hier gehen.
Es sind sicherlich nicht alle Faktoren, die bei jedem Projekt beachtet werden müssen. Deswegen seid ihr zum Kommentieren herzlich eingeladen ;).

Kommentare und Social Bookmarks würden mich sehr freuen. Viel Spaß mit dem Beitrag.

  1. Kontrast – Nur mit vernünftigen Kontrast sind eure Texte lesbar. Nur mit gutem Kontrast ist eure Webseite “knackig”. Hellgrauer Schriften auf weißem Grund zu verwenden, nur weil es cool aussieht, ist der falsche Weg.
  2. Don’t Decorate, Communicate!

  3. Farben – Versucht keinen Augenkrebs zu verursachen. Fragt auch andere Leute, wie ihnen das Farbschema gefällt und ignoriert deren Verbesserungsvorschläge nicht.
  4. Keine Animationen – Animationen gehen schnell ins Lächerliche und Unprofessionelle. Meistens sind sie sinnlos und bringen wirklich nichts. Überprüft ganz genau, ob Animationen sinnvoll sind und gut aussehen.
  5. Aufbau – Ist der Aufbau eurer Seite nachvollziehbar und recht konstant?
  6. Ladezeit – Wie lang laden eure Seiten? Nicht nur die Startseiten sollten überprüft werden. Auch alle Unterseiten sollten sich in akzeptabler Zeit aufbauen. Der normale Nutzer hat nicht viel Zeit und freut sich nicht, wenn sie von sich aufbauenden Seiten verschwendet wird.
    Bei zu langen Ladezeiten solltet ihr euren Hoster überprüfen. Außerdem müsst ihr die Größen der Dateien der Website (insbesondere der Bilder) kontrollieren.
  7. Bildqualität – Beim Optimieren von Grafiken kann man viel falsch machen. Unter der Optimierung sollte die Qualität jedenfalls nicht zu sehr leiden.
  8. Impressum – Jede Webseite sollte ein Impressum aufweisen. Das kostet nicht viel Aufwand und schützt eventuell vor rechtlichen Problemen.
    Überprüft auch, ob man das Impressum von jeder Seite aus (und am besten über einen Textlink) erreichen kann.
  9. Texte – Niemand ließt gerne lange Texte am Monitor. Der Durchschnittssurfer überfliegt Texte im Internet nur. Überprüft also, ob eure Texte prägnant formuliert sind und kürzt, wo ihr kürzen könnt.
    Weiterhin solltet ihr alle Texte selber durchlesen und gucken, ob sie durch genügend Absätze, Zwischenüberschriften, Listen usw. strukturiert sind.
  10. Rechtschreibung und Grammatik – Lest eure Texte doppelt und dreifach (ich weiß, mir passieren auch Fehler und ich sollte meine Artikel vielleicht auch mal genauer lesen). Es erklärt sich von selbst, dass Fehler unprofessionell sind. Denkt auch daran Überschriften zu lesen. Hier liegt das größte Fehlerpotential.
  11. Typographie – Verwendet eure Homepage sichere Schriften? Hier erzähle ich ein bisschen was über Schriften. Außerdem sollte die Schrift gut lesbar sein. Hierfür müsst ihr bei fast jeder Schrift ein paar Werte in deiner CSS Datei ändern. Das Smashingmagazine zeigt 8 einfache Wege mit denen man die Typographie auf Webseiten verbessern kann.
  12. Navigation – Kann man gut durch die Seite navigieren? Sind alle Unterseiten mit möglichst wenig Klicks erreichbar? Ohne eine gute Navigation ist jede Webseite Schrott.
  13. Print CSS – Nicht jeder will am Bildschirm lesen. Deshalb solltet ihr ein extra Stylesheet integrieren, damit alle Seiten gut gedruckt werden können.
  14. Analyse Software – Installiert diese Software aufjedenfall bevor ihr die Ladezeit testet. Sie kann die Performance beeinträchtigen. Ihr solltet eine solche Software (zum Beispiel Google Analytics) aufjedenfall verwenden, damit ihr eure Seite optimieren könnt.
  15. Kontakt aufnehmen leicht gemacht – Meiner Meinung nach sollte jede Webseite ein Kontaktformular zum schnellen Kontaktieren zur Verfügung stellen. Man sollte aber auch eine E-Mail Adresse angeben. So überlässt man dem Nutzer die Entscheidung.
  16. Formulare – Auf fast jeder Webseite gibt es momentan Formulare. Sei es ein einfaches Kontaktformular oder ein umfangreiches Formular zur Bestellung eines Zeitschriftenabo. Der Artikel “Wie gestaltet man das perfekte Formular” ist ganz hilfreich.
  17. Beta Test – Bevor ihr die Internetseite der breiten Öffentlichkeit zugänglich macht, solltet ihr ein paar Leute vor die Homepage setzen und sie die Seite auf Herz und Nieren testen lassen. Optimal wäre es, wenn die Leute in eure Zielgruppe passen und keine Ahnung von Gestaltung usw haben. Beobachtet das Verhalten der Nutzer und notiert euch die Stellen, wo es nicht so gut läuft.
  18. 404 Seite – Auch wenn die Seite noch ganz neu ist, kann es sein, dass jemand einen falschen Link anklickt oder eingibt, der ihn zur 404 Seite führt. Mein Artikel “Der Weg zu einer besseren 404-Fehler Seite” könnte hilfreich sein.
  19. Valide – 1. Checkt ob alle Seiten XHTML und CSS valide sind. 2. Wenn ihr ein Icon auf eurer Seite habt: Diese Seite ist valide, checkt es doppelt!
  20. ALT Tags vernünftig gefüllt – Ich weiß, eigentlich gehört das zum letzten Punkt, aber ich möchte die ALT Tags nochmal extra erwähnen. Jede Grafik sollte diesen Tag zugewiesen bekommen haben und er sollte vorallem mit sinnvollem Inhalt gefüllt worden sein.
  21. Mobiles Web – Falls ihr kein iphone oder ein ähnliches mobiles Endgerät habt, solltet ihr einen Bekannten darum bitten, eure Seite auf seinem Gerät zu testen. Der Anteil an mobilen Geräten im Netz ist einfach zu groß, um ihr zu ignorieren.
    Wenn die Seite nicht vernünftig funktioniert, solltet ihr euch überlegen, eine extra Version für mobile Geräte zu erstellen oder die entsprechenden Probleme zu beheben.
  22. Seiten Titel – Der title Tag ist sehr wichtig für Google. Deshalb sollten in ihm Keywörter stehen.
  23. Favicon – So wenig Arbeit für soviel Wirkung. Das Favicon zu vergessen ist ein Tabu. Es erscheint erstens in der Tableiste und zweitens inder Lesezeichenleiste. Drittens wahrscheinlich auch noch im Feedreader.
    Wechselt das Favicon möglichst selten und integriert es aufjedenfall. Es bringt Wiedererkennungswert.
  24. Browserkompatibel – Funktioniert eure Website in allen Browsern? Wenigstens in den letzten Versionen vom Internet Explorer (ja, so ist es -.-) und in den letzten Versionen von Firefox sollte sie gut dargestellt werden. Nützlich ist browsershots.org.
  25. Links – Führen alle Links zu ihrem Ziel? Das solltet ihr immer wieder testen.
  26. RSS Feed – Viele Leute haben die RSS Technik für sich gewonnen und verfolgen ihre Lieblingsseiten über einen Reader. Schaut, ob der Link zum RSS Feed gut platziert ist und ob der Feed funktioniert.
  27. Sitemap – Eigentlich hat die Suche zum größten Teil die Sitemap ersetzt. Trotzdem solltet ihr den Nutzern diese Möglichkeit zur Navigation nicht vorenthalten und eine übersichtliche und vollständige Sitemap präsentieren.
  28. Suche – 1. Ist eine Suche integriert? 2. Ist sie gut positioniert? Diese beiden Fragen solltet ihr mit Ja beantworten.
  29. Suchergebnisse – Außerdem sollten die Suchergebnisse gut dargestellt werden. Am besten lehnt man sie an Google an. Diese Ansicht sind Nutzer seit jeher gewohnt.
  30. Alle Pop-Ups gelöscht – Pop Ups sind nervig. Daher sollte jeder mehrmals überdenken, ob die wirklich nützlich sind.
  31. Informationen veranschaulicht – Ein Bild sagt mehr als tausend Worte. Das gilt besonders im Internet. Die Nutzer sind lesefaul und daher sollte man so viele Informationen wie möglich visuell veranschaulichen. Zum Beispiel mit Diagrammen.
  32. Code auskommentiert – Der Code sollte nicht nur valide und schlank sein, sondern auch vernünftig auskommentiert sein. Jeder hat Zugriff auf ihn und schließlich soll das Ganze doch professionell wirken.
  33. Blindtexte entfernt – Es ist schon sehr peinlich wenn irgendwo noch ein Lorem Ipsum Dolor auftaucht. Blindtexte werden ständig und überall benutzt und die Gefahr, dass man sie stehen lässt, besteht daher schon.
  34. Breadcrumb Navigation – Es ist eine Möglichkeit, aber nicht zwingend notwendig. Dennoch: Breadcrumb Navigationen sind nützlich. Über das Thema sollte man wenigstens nachgedacht haben. Umso komplexer die Navigationsstruktur desto sinnvoller wird eine Breadcrumb Navigation.
  35. Update: Zitat von Tobias: Breadcrumb (oben das e vergessen^^) sind allein schon was das SEO angeht sehr nützlich. Der Titel wird wiederholt und gleichzeitig nochmal verlinkt. Vielleicht sollte man das nochmal ergänzen

Welche Dinge müssen noch kontrolliert werden?

13 Kommentare

  1. unset
    12. April 2009 um 18:53 Uhr

    Das ist alles nichts neues, aber trotzdem: Eine Checkliste zu haben ist immer gut. Und bestimmt ist da draußen der ein oder andere, der nicht alle Punkte beherzigt 😉

    Ein paar Anmerkungen meinerseits

    5. Ladezeit: Bzgl. der Ladezeiten empfehle ich YSlow (ein Fireofx-Addon). Liefert oftmals hilfreiche Hinweise zur Optimierung der Ladezeiten.

    9. Rechtschreibung und Grammatik: Ich halte es für wesentlich wichtiger, dass verschiedene Personen den Texte gegenlesen. Man wird selbst schnell Betriebsblind.

    16. Beta-Test: Schön und gut. Allerdings bringt ein solcher Aktzeptanztest nichts, wenn die Probanden nicht geführt werden. Solche Tests sind schwieriger als man denkt. Je nach dem, um was es sich für eine Seite handelt, kann da schon mal ein ganz großer Posten für das testen entstehen – vor allem, wenn man Komponententests und Integritätstestsmit einbezieht.

    17. 404-Seite: Falsche! Alle 4**-Codes sollten eine Seite hinterlegt haben. Vor allem bei geschäftlichen Projekten und Webangeboten ist alles andere peinlich.

    23. Browserkompatibel: Ich empfehle viel mehr die Einrichtung einer Reihe von virtuellen Maschinen mit den gängigen Browsern auf verschiedenen Betriebssystemen. Das ist schneller eingerichtet als man denkt und hat den Vorteil, dass man auch Sachen wie JavaScript testen kann. Ansonsten empfiehlt sich Selenium. Da hab ich auch schon ein paar Sachen zu gebloggt: http://phphacker.net/index.php?s=selenium

    31. Code auskommentiert: Ziemlich missverständliche Überschrift. Wenn der Code auskommentiert ist, wird er ja nicht mehr ausgeführt 😉 Wahrscheinlich meinst du einfach, dass der Code ordentlich kommentiert ist. Das ist in der Entwicklung wichtig. Während des Live-Gangs einer Seite, sollten Kommentare und vor allem auskommentierte Code-Passagen automatisiert entfernt werden. Das spart Ladezeit und kann vor peinlichen Kommentaren schützen (wenn ich mir manchmal angucke, wie ich in Code-Kommentaren fluche … das sollte keiner sehen ;))

    unsets letzter Beitrag..Das Wort zum Sonntag

  2. Lennart Prange
    12. April 2009 um 18:59 Uhr

    Danke für deine Ergänzungen.

    Zum Beta-Test: Damit er funktioniert sollte man den Usern ein Zeil vorgeben (zum Beispiel das Bestellen einer Reise). Das habe ich vergessen.

    Natürlich ist die Einrichtung von virtuellen Maschinen von Vorteil, aber dazu hat nicht jeder den Nerv. ICh nutze zum Beispiel lieber Browsershots. Internet Explorer 6, Firefox und Safari hab ich alles hier, bei den restlichen Browsern verlasse ich mich auf den Internetdienst.

  3. unset
    12. April 2009 um 21:18 Uhr

    Naja, virtuelle Maschinen richtest du einmal ein und gut ist. Dank Snapshots müssen die nichtmal groß hochfahren. So viel Mühe sollte man sich schon machen, wenn man professionell entwickelt 😉 Darüberhinaus: Ein Browser kann auf unterschiedlichen Betriebssystemen auch unterschiedlich Rendern. Vor allem der Safari sticht da raus 😉

    unsets letzter Beitrag..Das Wort zum Sonntag

  4. Manu
    13. April 2009 um 13:22 Uhr

    Das SmashingMagazine hat dazu kürzlich auch eine Checkliste erstellt, in der noch einige ergänzende Punkte zu finden sind. http://tr.im/iIgt

    Die Liste geht bei mir allerdings noch etwas weiter: 😉

    >>> Linkzustände: Links sollen je nach Zustand erkennbar sein. Das heißt, dass sowohl Angaben für “das Mausüber”, den aktiven Link als auch den fokusierten vorhanden sind. Gerade letztere beiden werden häufig weg gelassen und haben oft keine Priorität. Auch Links, welche bereits besucht worden sind, sollte man von den noch nicht besuchten abheben. Auf diese Weise stärkt man nicht nur die Benutzerfreundlichkeit sondern auch die Orientierung innerhalb der Website.

    >>> Neben den Zuständen können sogenannte Skiplinks sehr hilfreich sein. Vorallem wenn man bedenkt, dass beiweitem nicht alle Menschen mit der Maus im Internet unterwegs sind. Einige Links, die etwa zur Navigation bzw. zum Inhalt springen sind deshalb sicherlich angebracht und stellen einen nicht allzu großen Aufwand dar. Wer noch einen weiteren Beitrag zur Barrierefreiheit der Website beitragen will, kann diese noch mit Accesskeys bestücken.

    >>> OpenSearchXML: Neuere Browser, unter anderem FF 3 und der IE 7 unterstützen den OpenSearch Standard. Über das Suchfeld in der rechten oberen Ecke des Browsers, ist es möglich (falls die OSxml Datei vorhanden und eingebunden ist), die Website bequem zu durchsuchen.

  5. Tobias Schnorr
    15. April 2009 um 01:55 Uhr

    Breadcrumb (oben das e vergessen^^) sind allein schon was das SEO angeht sehr nützlich. Der Titel wird wiederholt und gleichzeitig nochmal verlinkt. Vielleicht sollte man das nochmal ergänzen 😉

  6. Lennart Prange
    15. April 2009 um 12:03 Uhr

    Danke, ich habe es ergänzt.

  7. sparansage
    15. April 2009 um 21:17 Uhr

    Für mich als Webmaster ist zudem eine sehr gute interne Verlinkung der Artikel wichtig. Ansonsten sehen die Unterseiten nicht viel vom Pagerank.

  8. Tobias
    8. Mai 2009 um 09:37 Uhr

    Klasse Übersicht! Ist wirklich alles dabei, was wichtig ist. Evt. noch zu jedem Punkt ein weiterführenden Link zu Beispiel- oder Hilfeseiten und es ist perfekt 😉

    LG Tobias

  9. Kamillentee
    26. September 2009 um 08:38 Uhr

    Hallo zusammen,
    ich bin kein Web-Designer, sondern nur ein ganz normaler Mensch, hoffe ich jedenfalls, und lese hier: “… Hellgraue(r) Schriften auf weißem Grund zu verwenden, nur weil es cool aussieht, ist der falsche Weg.” Und dann gibt der Verfasser genau seiner Schrift einen gerademal klitzekleinen dunkleren Grau-Touch mit auf den Weg, der nicht viel besser zu lesen ist als der angeprangerte.
    Schwarz auf Weiß ist noch immer am Besten lesbar… Auch in einem Kommentarfeld…
    Nix für ungut. Ansonsten schöne aufgeräumte Seite.
    LG Kamillentee

  10. Mark von Bauchfett weg
    23. April 2010 um 19:49 Uhr

    Super! Tolle Checkliste. Wie Tobias schon sagte ein paar hilfreiche Links wären toll. Trotzdem gelungen und sehr hilfreich. Ich arbeite grundsätzlich mit Checklisten und kann dies jedem nur empfehlen.

Trackbacks/Pingbacks