Sie befinden sich hier:
» 
» 
29.11.2012

Tipps zur Webseitengestaltung in neuem Design

Kategorie(n): Über diese Website

Nach reichlich zwei Jahren war es an der Zeit, den „Tipps zur Webseitengestaltung“ ein neues, moderneres Webdesign zu geben. Doch es ging mir nicht allein darum, die „Tapete“ zu wechseln, sondern eine Erhöhung der „inneren Werte“ war ebenso mein Ziel.

Neues, besser strukturiertes Design

Das neue Design zeichnet sich durch folgende Eigenschaften aus:

  • größere Schrift
  • breiterer Contentbereich im Blog
  • kontrastreicherer Hintergrund
  • klare Markierung der externen Links

Implementierung in HTML5

  • bessere semantische Auszeichnung der Inhalte
    (dadurch leider auch ein etwas schlechteres Content zu Quellcode Verhältnis)
  • getestet in den gängigen Browsern
  • abwärtskompatibel bis inklusive IE6
  • W3C-kompatibel

Bessere Anbindung an soziale Netzwerke

  • durchgängige Integration des „gefällt mir“-Buttons, des Tweet-Button und des Google Plus Button
  • Implementierung einer individuellen 2-Klick-Lösung für mehr Datenschutz. Natürlich habe ich mich dabei von der Heise-Lösung inspirieren lassen. In Summe erschien mir diese Lösung aber zu komplex und zu groß. Deshalb habe ich eine „lightweight“-Lösung selbst implementiert.
  • Eine Vernetzung zu den meist verbreiteten sozialen Netzwerken ist jetzt ebenfalls von fast jeder Webseite aus möglich.

Mehr Features vs. Performance (Requests, Datenvolumen)

Durch die 2-Klick-Lösung und den Slider auf der Startseite und der Blog-Startseite haben sich natürlich die Anzahl der Requests und das zu übertragende Datenvolumen erhöht. Um dem entgegenzuwirken, musste an anderer Stelle optimiert werden. So wird für alle Bilder nur noch ein einziges Sprite verwendet. Das Sprite selbst ist hochgradig komprimiert. Verläufe und Schatten werden ausnahmslos über CSS-Gradienten realisiert.
Die 2-Klick-Lösung hat aber auch Vorteile, denn nur wenn die Button aktiviert sind, fällt auch der Traffic an. Von der Facebook-Fanbox ganz zu schweigen. Auf dieses Feature habe ich aus Performance- und Datenschutzgründen in der aktuellen Version komplett verzichtet.

Vergleich Datenvolumen / Anzahl Requests der alten und neuen Version

Ein kleiner Vergleich soll die Unterschiede verdeutlichen (die Volumen gelten für die gzip-Variante):

 
alte Version
neue Version
Startseite Volumen
120,3kB
70,9kB
Startseite Requests
7
6
Startseite Verh. Content zu Quelltext
43,5%
38,1%
Blogseite Volumen
289,7kB
82,0kB
Blogseite Requests
21
7

Mobile Variante noch unverändert

Falls Sie diese Webseite über ihr mobiles Gerät aufgerufen haben und somit auf die mobile Version umgeleitet wurden, fragen Sie sich vielleicht, was dieser Beitrag bedeutet. Es ist ganz einfach: Es wurde zuerst nur die Desktop-Version der Website umgestellt. Die mobile Version wird folgen. Dies wird aber noch ein Weilchen dauern.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und gebe bei Bedarf kompetente Beratung. Mehr Infos können Sie auf ueber-mich.html nachlesen.

53