30 Website-Tipps

Bei der Umsetzung einer Website kann so einiges falsch laufen. Um alle Pitfalls vorwegzunehmen habe ich eine Liste mit 30 nützlichen Tipps erstellt, die den Weg vom Konzept zur Website erleichtern sollen.

1. Plane voraus und organisiere dich

Viele Probleme können vermieden werden, wenn vorher alles abgeklärt ist. Was passiert, wenn ein Formular nicht vollständig ausgefüllt wurde? Welche Elemente werden nur einmal verwendet, welche finden mehrfach Anwendung? Um bei einem Projekt den Überblick zu behalten, empfiehlt es sich, Projektmanagement-Tools wie Trello zu verwenden, die einem ermöglichen, eine Website in ihre Komponenten zu strukturieren.

2. Vergiss die Usability nicht

Ab und zu können in einer späten Phase Probleme im Konzept auftauchen. Dies lässt sich verhindern, indem man die Designs erst einmal überdenkt und testet. Tools wie invisionapp.com erlauben es, ein Design zu testen, ohne es erst kompliziert umsetzen zu müssen. Auf Blogs wie uxmovement.com findet man zahlreiche Artikel und Analysen zu dem Thema.

3. Ein Click-Dummy sagt mehr als tausend Bilder

Ein statisches Bild einer Website gibt noch relativ wenig Information über die eigentliche Seite her. Erst wenn man die Möglichkeit hat, die Seite im Browser zu öffnen und Formulare, Slider und Navigationen im Einsatz zu sehen, lässt sich ein richtiges Bild machen. Ein Click-Dummy muss noch nicht funktional sein, Formulareingaben können erst einmal ohne weitere Sicherheitsmaßnahmen frontendseitig überprüft werden, AJAX-Requests können simuliert werden.

4. Benutze Dummy-Content richtig

Nicht immer hat man den finalen Content während der Entwicklung zur Verfügung. Hier empfiehlt es sich, sinnvollen Dummy-Content zu verwenden. Braucht man Bilder, um verschiedene Größen/Dimensionen zu testen, bietet dummyimage.com eine wundervolle API zur Generierung von Bildern unterschiedlicher Größen und Farben. Sucht man Fotos zur Visualisierung (zB: Hintergrund, Galerien) ist man mit lorempixel.com gut beraten; hier findet man Bilder zu verschiedenen Themen über eine API. Für Fülltext bietet sich ein „Lorem Ipsum“-Generator an, auf ipsum-generators.com kann man sich hier thematisch einen passenden aussuchen.

5. Überprüfe die Browser-Kompatibilität

Das Web bietet heutzutage eine Vielzahl an neuen Möglichkeiten, doch nicht alle Browser sind hier auf demselben Stand. Deshalb empfiehlt es sich, seine Zielgruppe zu analysieren, um herauszufinden, welche Browser beachtet werden müssen. Auf caniuse.com sieht man zu jeder Technologie den derzeitigen Unterstützungsstand verschiedener Browser in verschiedenen Versionen.

6. Strukturiere dein HTML

Nicht jeder Besucher verwendet einen visuellen Browser; sehbehinderte Besucher und Crawler werden sich in einem sauber und semantisch strukturierten HTML besser wiederfinden. Wichtig ist hier die Trennung von Inhalt und Design: Bilder, die nicht dem eigentlichen Inhalt dienen, sondern nur Teil des Designs sind, haben hier nichts verloren, und sollten im CSS deklariert werden. Ein kurzer Blick auf validator.w3.org hilft oft schon weiter.

7. Strukturiere dein CSS

Auch wenn CSS nur vom Entwickler angesehen wird, ist es wichtig, hier eine klare Struktur zu wahren. Oft wiederkehrende Elemente sollten nicht doppelt deklariert werden, weil beim CSS mit zu spezifischen Selektoren gearbeitet wurde. Ebenso ist es kontraproduktiv, CSS-Deklarationen für andere Elemente überschreiben zu müssen, weil ein falscher Selektor greift. Das erhöht nicht nur die Geschwindigkeit, sondern macht die Seite auch wartbarer. Ein wunderbares Tool hierfür ist cssstats.com, welches Seiten auf Redundanzen und vielfältige Deklarationen analysiert.

8. Nutze Open-Source-Lösungen

Es macht keinen Sinn, jedes Mal wieder das Rad neu zu erfinden. Oft gibt es für ein Problem eine gute Open-Source-Lösung, bei der hunderte Entwickler gemeinsam über Monate oder Jahre hinweg genau dein Problem bereits gut gelöst haben. Zu finden sind diese etwa auf github.com.

9. Teste deine Schriften

Dank Webfonts können Websites endlich ihre Individualität auch durch ihre Schriftarten ausleben. Wichtig ist hier, in verschiedenen Browsern zu testen. Nicht jeder Browser unterstützt alle Formate, auch mag das Rendering bei verschiedenen Betriebssystem anders aussehen. Wichtig ist auch, ein Fallback zu definieren. Wurde dies nicht gemacht, und kann der Browser die Schriftart nicht laden, bleibt die Seite leer. Mit typekit.com hat Google ein tolles Tool gekauft, um Webfonts zu testen.

10. Wähle das richtige JavaScript-Framework

jQuery ist nicht der Weisheit letzter Schluss. In den letzten Jahren hat sich eine Vielzahl von JS-Libraries und Frameworks entwickelt, die vielleicht für den Anwendungsfall besser geeignet sind. Auf todomvc.com findet man eine Vielzahl von Implementierungen derselben Applikation in unterschiedlichen Frameworks/Libraries. So kann man sich einen Eindruck machen und fürs nächste Projekt das perfekte Tool finden.

11. Lege Wert auf Accessibility

Eine saubere HTML-Struktur allein macht eine Seite noch nicht accessible. Bilder müssen mit alt-tags versehen, Navigationen als solche deklariert werden.

12. Teste auf allen Zielbrowsern

Nur weil alle Zielbrowser theoretisch die Seite unterstützen würden, bedeutet dies noch nicht, dass sie auch auf allen Browsern gut aussieht. Ein kurzer Test auf allen Browsern und einer Auswahl mobiler Endgeräte zeigt schnell eventuelle Probleme. Wenn notwendig lassen sich so Anpassungen wie „Media Queries“ machen, bevor es zu spät ist.

13. Wähle die richtigen Tools

Viele Aufgaben lassen sich einfacher mit den richtigen Tools lösen. Bei yeoman.io findet man ein cleveres Tool zur Generierung von Start-Templates mit einer Vielzahl unterschiedlicher Vorlagen. bower.io ist ein Tool zur Verwaltung von Frontend-Dependencies und auf getcomposer.org findet man selbiges für PHP-Dependencies.

14. Nutze Automatisierung

Wiederkehrende Aufgaben können mittels Automatisierung schnell erledigt werden. Tools wie gruntjs.com oder gulpjs.com erlauben es, Aufgaben wie Komprimierung, Prekompilierung oder Testing einfach und automatisiert zu lösen.

15. Teste deine Scripte

Viele Bugs lassen sich durch Tests früh erkennen. Für größere Projekte macht es durchaus Sinn, Unit-Testing zu betreiben. Hier gilt: Erst der Test, dann die Implementierung. Ist dies nicht immer möglich, so empfiehlt es sich, eine Person, die sich mit der Seite noch nicht befasst hat, testen zu lassen.

16. Überprüfe den Page-Speed

Es kann viele Gründe haben, warum eine Seite langsam ist. Nicht komprimiertes JavaScript oder Bilder sind nur einige davon. Dieses Tool von Google kann dabei helfen, diese zu finden.

17. Teste die Druckansicht

Es mag nicht überall Sinn machen, doch auf manchen Seiten empfiehlt es sich, auch auf die Druckansicht zu achten. Viel kann hier durch eine saubere HTML-Struktur gemacht werden, kleine Ausbesserungen kann man in einem Druck-CSS tätigen.

18. Nutze die Dev-Tools

Jeder moderne Browser verfügt über integrierte Dev-Tools. Auch Extensions wie Firebug und Webdeveloper bieten viele Möglichkeiten, Probleme im Browser zu erkennen und zu reparieren, ohne die Seite neu laden zu müssen.

19. Lege Wert auf Open-Graph Tags

Guter Content will geteilt werden. Doch wie werden Benutzer die Seite auf Social-Media-Plattformen wie Facebook sehen? Mittels Open-Graph Tags lässt sich steuern, wie ein Link dargestellt wird. https://developers.facebook.com/tools/debug bietet Einblicke in den Inhalt, der geparsed werden kann, und zeigt Schwachstellen auf.

20. Achte auf eine gute URL-Struktur

Saubere und leserliche URL-Strukturen sind nicht nur SEO-technisch von Vorteil, sie helfen auch dem Benutzer, sich auf einer Seite wiederzufinden und können nützliche Informationen über die Struktur einer Seite liefern.

21. Verwende Source-Versioning

Source-Versioning-Tools wie git oder svn erleichtern nicht nur das kollaborative Arbeiten, auch das Verwalten von „Tags“ zur Verwaltung von größeren Versionssprüngen erleichtert die eventuelle Rückkehr zu einer älteren Version.

22. Verwende den richtigen Input-Typ

HTML bietet mehr Input-Typen als „Text“ und „Password“. So wird z.B. beim Typ „Email“ unter iOS eine entsprechende Tastatur angezeigt, die es dem Benutzer erleichtert, seine Daten einzugeben.

23. Achte auf eine Bedienung ohne JavaScript

Eine Seite sollte auch ohne JavaScript navigierbar sein. Dies hat sowohl SEO-technische (Crawler navigieren ohne JavaScript durch die Seite) als auch Accessibility-Zwecke.

24. Kommentiere deinen Code

Kehrt man nach längerer Zeit zu einem Projekt zurück, gibt es nichts Schlimmeres als ein ewiges Einlesen in alte Gedankengänge. Sinnvolle Kommentare erleichtern einen schnellen Wiedereinstieg und helfen auch anderen Entwicklern weiter.

25. Vergiss die Sitemap nicht

Eine saubere Sitemap im XML-Format zeigt Google & Co den Weg. So können Probleme beim Indizieren und Crawlen bewusst vermieden werden.

26. Achtung bei Scroll-Hijacking

Nichts ist nervtötender als schlechtes Scroll-Hijacking. Generell empfiehlt es sich, vorsichtig damit umzugehen; auch haben mobile Geräte wie das iPad oft Probleme damit. Dass es auch klug eingesetzt werden kann, zeigt Apple bei der Präsentation seiner neuen iMac-Serie. Flüssig und klug angewendete Animationen lassen den Besucher in die Welt des iMacs eintauchen.

27. Verwende nicht zu viele Plugins

Auch wenn externe Plugins hilfreich sind, macht es oft Sinn, erst zu überlegen, ob sich ein Problem nicht auch anders lösen lässt. Zu viele Plugins können interferieren und die Seite langsam machen.

28. Wähle das richtige CMS

Wo macht es Sinn, WordPress zu verwenden? Wo ist eine individuellere Lösung notwendig? Diese Frage muss man sich vor der Umsetzung stellen. Fragen wie „Wie oft werden die Inhalte geändert?“ und „Welche Inhalte müssen anpassbar sein?“ helfen hier weiter.

29. Nutze eine Staging-Umgebung

An einem Live-System zu arbeiten ist selten eine gute Idee. Vorheriges Testen von Updates in einer Staging-Umgebung ermöglichen, Probleme rechtzeitig zu erkennen.

30. Automatisiere dein Deployment

Eine Vielzahl an Tools ermöglicht ein automatisiertes Deployment über git, Capistrano und Capifony decken hier die Bereiche Ruby-on-rails und Symfony ab. Services wie Codeship.io achten noch zusätzlich darauf, dass erst dann deployed wird, wenn alle Tests positiv laufen.

Newsletter abonnieren