Checkliste zur Hompage-Erstellung

Gestalterische und inhaltliche Überlegungen

Je nach Menge der Inhalte, die Sie präsentieren wollen und je nach Anzahl der Seiten, die über Menüs zugänglich gemacht werden müssen, können andere Layout-Überlegungen sinnvoll sein.

  • In welchem Stil soll meine Homepage gestaltet sein? Welche Farben sind gewünscht oder liegen vor? Soll die Website eher weicher und detailverliebter oder strenger und klarer gestaltet sein? Versuchen Sie, Ihre zukünftige Website etwas distanziert, durch die Augen Ihrer Klientel zu betrachten, sofern Sie deren Erwartungen und Vorstellungen in etwa kennen – oder stehen Sie zu Ihren eigenen Umsetzungswünschen, sofern individuelle Dienstleistungen im Vordergrund stehen.
  • Sind die wichtigsten geplanten Inhalte – zumindest auf größeren Bildschirmen – sofort oder ohne langes Scrollen sichtbar?
  • Wie groß sollte die Schrift des Haupttextes mindestens sein? Ist seine Zeilenlänge weder zu kurz, noch zu lang, um einen optimalen Lesefluss zu gewährleisten?
  • Wo und in welcher Reihenfolge sollen Menüpunkte aufgeführt werden, damit der Besucher sich möglichst schnell zurechtfindet?
  • Funktioniert das Bedienkonzept auch auf kleineren Bildschirmen mit womöglich umplatzierten Navigationselementen oder fehlenden Dropdown-Menüs?
  • In welcher Form könnten größere Textmengen sinnvoll gegliedert werden? Machen Spezial-Elemente wie Reiter, Slider, Karussells, oder ein „Akkordeon“ Sinn?
  • Welche Fotos und Grafiken liegen vor oder sollten erstellt werden, um Texte aufzulockern oder sinnvoll zu ergänzen? Brauche ich vielleicht Fotos in anderen Formaten, z.B. ein Panoramaformat für den Kopfbereich meiner Homepage?

Technische Überlegungen

  • Welche älteren Browser(-versionen) sollen noch unterstützt werden?
    Ältere Browser können bestimmte CSS-Befehle, Dateiformate etc. nicht interpretieren und es kommt zu Fehldarstellungen. Je größer die erwartete Zielgruppe ist, desto eher sollten auch ältere Browser mit geringem Marktanteil noch unterstützt werden. Nachteil ist, dass dies oft mit einem Mehraufwand verbunden ist, der sich natürlich rechnen muss.
  • Welche technischen Anforderungen stellt die Website?
    Zunächst sollten die benötigten Scriptsprachen wie z.B. PHP, ASP, Phyton oder Perl in der geforderten Version vorhanden sein. Wird ein Content-Management-System (CMS) verwendet, wird zudem eine Datenbank wie MySQL benötigt.
    Wichtig ist auch, mit wie vielen anderen Kunden, also Webseiten, sie sich bei Ihrem Hoster einen Server teilen müssen. Je stärker die geplante Website frequentiert sein wird, desto eher sollte in ein höherwertiges Hosting-Paket investiert werden.
  • Welche aufwändigeren Scripte machen Sinn, welche sind eher „nice to have“?
    Jeder aufwändigere Effekt und jede über zusätzlichen Programmcode integrierte Inhaltsaufbereitung kostet weitere Lade- oder Rechenzeit. Eine solche Mehrbelastung des Gerätes kann sich dann z.B. durch ein Ruckeln und ein unsanftes Scrolling bemerkbar machen. Zudem mag mancher nett gedachte Effekt von Besuchern als nervig oder Unruhe stiftend betrachtet werden. Ich persönlich tendiere hier zu dezenten Effekten und Techniken, wenn sie helfen, Inhalte sinnvoller oder angenehmer zu präsentieren.

Empfehlungen zur internen Optimierung

Sie oder Ihr Dienstleister sollte auf die folgenden Punkte achten, um die Ladezeiten einer Website zu verringern:

  • Markup auf das notwendigste beschränken, um die interne Struktur schlank und somit für den Browser schnell lesbar zu halten.
  • Stylesheet-Inhalte höchstmöglich komprimieren, d.h. „Luft“ innerhalb der Dateien entfernen, wodurch kleinere Dateien erzeugt werden.
  • Sofern es der Server ihres Hosters zulässt, können spezielle Anpassungen für eine weitere Komprimierung der Inhalte vorgenommen werden, in dem durch einen speziellen Algorithmus mehrfach vorkommende Zeichen in intelligenter Weise zusammengefasst werden. Vergleichbar mit den .zip-Dateien auf Ihrem PC.
  • Laden aller Bilder, Videos und iFrame-Inhalte nur auf Abruf, d.h. erst dann, wenn diese in den sichtbaren Bildschirmbereich gelagen.
  • Verwendung von Icons in Form von Vektor-Schriftpaketen, wo sinnvoll und möglich. Das bedeutet fast immer bessere Ladezeiten als bei einzelnen Bitmap-Grafiken und eine schärfere Darstellung auch auf hochauflösenden Bildschirmen, wie z. B. Apple Retina-Displays.
  • Für größere, mehrfarbige Strichzeichnungen kann inzwischen auch zum Vektorformat SVG gegriffen werden. Hier ist auf einen korrekten Export der Daten aus einem Grafikprogramm zu achten, um eine korrekte bzw. optimierte Darstellung in allen Browsern zu gewährleisten.
  • Für Profis der Bildbearbeitung selbstverständlich: Ein je nach Bildinhalt optimiertes Dateiformat wählen. Hier sind Einsparungen von 70% und mehr durchaus möglich, wenn zusätzlich auch die richtigen Formateinstellungen gewählt werden.
  • Schlussendlich: Komprimierung aller verwendeten Bilder durch spezielle Software. Das bringt kann noch einmal Einsparungen bis zu 50% – ohne visuelle Qualitätsverluste.

Ganz speziell: Responsive Webdesign

Das Schlagwort responsive Web-Design (RWD), also die Anpassung einer Website an verschiedene Bildschirmgrößen, ist heute in aller Munde. Auch hier gibt es hinsichtlich Umsetzung große Qualitätsunterschiede.

Achten Sie auf diese Punkte, wenn Sie sich eine Homepage erstellen lassen:

  • Die Anpassung der Inhalte und Menüs erfolgt in individuellen, kleinen Schritten.
    Nur dadurch kann die Bildschirmbreite effizient ausgenutzt werden. Auf Smartphones sollten die Elemente bis fast zu den Seitenrändern laufen und die Schriftgröße so justiert werden, dass Sätze gut lesbar sind und nicht zu früh umbrechen. Bedienelemente und filigrane / wichtige Bildelemente sollten so konfiguriert werden, dass sie eine bestimmte Mindestgröße beibehalten. Bei jeder Bildschirmgröße sollte darauf geachtet werden, dass Menüs nicht ungeplant umbrechen, sondern entweder in ihrer Breite angepasst, harmonisch zentriert oder über ein spezielles Menü zusammengefasst werden.
  • Unterschiedliche Bilddimensionen je nach Ausgabegerät.
    Je nach Größe und Auflösung des Bildschirms eines Ausgabegerätes sollten nur solche Bildgrößen geladen werden, die Sinn machen bzw. effizient genug sind. Bei mobiler Nutzung ist jeder Besucher über ein geringes und damit rascher ladbares Datenvolumen dankbar. Auch das Anpassen oder Entfernen bestimmter Stilelemente auf kleineren Bildschirmen halte ich für eine sinnvolle Mehrarbeit, da diese entweder nicht oder nicht in voller Größe sichbar sind.
  • Texte nicht als Grafik ausgeben lassen.
    Falls diese Maßnahme wegen einer besonderen Schriftart angedacht wird, empfehle ich lieber eine Vektordatei. Ansonsten ist eine Umsetzung in HTML und CSS immer die bessere Wahl, trotz höherem Aufwand. Denn nur so ist eine echte dynamische Anpassung je nach Bildschirmbreite möglich.
    Neben einer oft unleserlichen Verkleinerung hat ein Grafiktext zudem den Nachteil, dass er weder von Suchmaschinen noch von Bildschirm-Lesegeräten ausgewertet werden kann.