Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Relaunch bei QSC und freenet

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Relaunch bei QSC und freenet

Eine neue Woche, zwei neue Seiten mit Relaunch: QSC und freenet sind mit neuem Layout und neuem Code online gegangen.

Beide Sites sind mir zwar im alten Layout bereits begegnet, da ich jedoch kein regelmäßiger Besucher bin, musste ich mein Gedächtnis erst mit Hilfe der Waybackmachine wieder auffrischen.

Eine neue Woche, zwei neue Seiten mit Relaunch: QSC und freenet sind mit neuem Layout und neuem Code online gegangen.

Beide Sites sind mir zwar im alten Layout bereits begegnet, da ich jedoch kein regelmäßiger Besucher bin, musste ich mein Gedächtnis erst mit Hilfe der Waybackmachine wieder auffrischen.

QSC

Screenshot von www.qsc.deEines vorweg: Das Aussehen der Site hat meiner Meinung nach bei dem Relaunch deutlich gewonnen. Die Startseite ist übersichtlich bietet einen schnell zu erfassenden Überblick über die gebotenen Leistungen. Die gesamte Optik wirkt frischer und erheblich großzügiger im Vergleich zur abgelösten Version. Das liegt natürlich auch an der festen Breite von 940 Pixeln für den Inhaltsbereich, der bei breiterem Fenster zentriert dargestellt wird.

Lässt man sich die Seite ohne Bilder anzeigen, fehlt keine wesentliche Information. Allerdings ist man bei QSC auch betont sparsam mit der Verwendung von Bildern umgegangen. Die textuelle Information steht offensichtlich klar im Vordergrund. Das setzt sich auch auf den Folgeseiten fort – Bilder werden weitestgehend nur als Eyecatcher eingesetzt.

Die Seiten validieren nicht, sind aber sehr nahe dran. Hätte man statt »strict« »transitional« genommen, hätte es auf den meisten Seiten schon gereicht. Auf das TARGET-Attribut muss man eben verzichten oder den passenden Doctype wählen.

Das Markup ist weitgehend semantisch. Überschriften sind Überschriften, Listen sind Listen und Absätze sind Absätze. Allerdings leidet der Auftritt an einer leichten Divitis. Einige der tief verschachtelten DIVs hätte man sicherlich einsparen können, ohne auf gestalterische Möglichkeiten zu verzichten.

Auf Layouttabellen wird weitestgehend verzichtet. Jedoch wird in der Login-Maske, die nach Klick auf »myQSC« als Layer erscheint, dann doch wieder auf eine Tabelle zur Gestaltung zurückgegriffen. Mit ausgeschaltetem JavaScript funktioniert der Login übrigens auch, dann aber nicht im Layer sondern auf einer neuen Seite – spannend ist dabei, dass die aufgerufene Login-Seite dann wieder im alten Layout erstrahlt. Auch an anderen Stellen der Site konnte ich keine Nachteile bei deaktiviertem JavaScript feststellen.

Besondere Hilfen zur Zugänglichkeit der Site konnte ich nicht finden. Weder konnte ich Möglichkeiten zur Schriftgrößenänderung oder zur Farbumkehrung finden, noch sind Übersprunglinks, mit denen man z.B. direkt den Inhalt unter Umgehung der Navigation erreichen kann, zu vorhanden. Benutzer eines Screenreaders dürften sich jedoch trotzdem aufgrund des semantischen Markups relativ einfach zurechtfinden können, wobei man es ihnen sicher leichter machen könnte.

freenet

Screenshot von www.freenet.deAuch hier eines vorweg: Dieser Relaunch ist im Hinblick auf die Codequalität deutlich weniger erfreulich als der von QSC.

Die Optik der Seite ist für eine Portalseite mit dem üblichen Informationsüberflussgehalt recht angenehm. Die Breite ist fixiert auf 830 Pixel und bleibt bei größerem Fenster mit einem kleinen Rand linksbündig stehen. Dem Betrachter erschließt sich auch hier sehr schnell, worum es bei freenet geht.

Auf Semantik wurde bei freenet kein erkennbarer Wert gelegt. Zwar sind die zahlreichen Links meist in Listen organisiert, das war es dann aber auch schon mit semantischer Auszeichnung. Überschriften konnte ich bei meinem Besuch keine entdecken und in Absätzen stehender Text taucht auch nicht auf. Stattdessen steht eine Überschrift z.B. als <strong class="frn_linkLink">Online-Billard</strong> im Quelltext und der überschriebene Absatz folgt einfach in einem noch weniger sinnvollen SPAN-Element. Der ganze Wust steht mit dem vorausgehenden Bild in einem A-Element. Der gesamte Seiteninhalt ist von einer Layouttabelle umgeben.

Mit ausgeschalteten Grafiken wird die Seite schon schwer navigierbar. Da die Überschriften der einzelnen Linklisten als Grafik ohne ALT-Attribute angelegt sind, fehlt ohne die Grafiken jede Orientierung. Dass es für Nutzer von Screenreadern keine Hilfen gibt, muss da schon fast nicht mehr erwähnt werden.

Ohne die Verschachtelungstiefe der DIVs gezählt zu haben, würde ich jedoch bei freenet von einer noch gravierenderen Divitis ausgehen, als bei QSC. Da es innerhalb dieser DIVs bis auf ein paar eingestreute STRONGs keinerlei sinnvolles Markup gibt, dürfte die Seite für Blinde und für Google gleichermaßen schwer inhaltlich zu erfassen sein.

Dass kein Wert auf valides HTML gelegt wurde, überrascht wirklich nicht. Die Ampersands in den zahlreichen Links sind nicht maskiert. ALT-Attribute fehlen, dafür bekommen INPUT-Elemente jedoch großzügig WIDTH und HEIGHT zugeteilt. IDs werden mehrfach definiert.

inhaltsleerer ContainerMit ausgeschaltetem JavaScript zeigen sich hässliche Löcher an Stellen, die für interessante Informationen gedacht waren. Ich habe keinen anderen Weg gefunden, um trotzdem an die Infos zu gelangen. Sinnvolle Verwendung von JavaScript sieht für mich deutlich anders aus.

Fazit

Beide Neustarts sind optisch ansprechend, einer ist es auch von seinen inneren Werten her. Wenn man ein Beispiel für einen gelungenen Relaunch sucht, sollte man sich an QSC orientieren und die wenigen angeführten Kritikpunkte beachten.

Kommentare

Daniel
am 04.04.2007 - 10:46

Unter optischen Gesichtspunkten gefällt mir die neue QSC Webseite sehr gut. Die Navigation ist sehr eingängig, die Inhalte der Startseite sowie der Unterseiten haben alle "ihren (Weiß)Raum". Im Zusammenspiel mit dem Colorscheme (Orange mit Graustufen sieht sogar etwas edel aus) sowie den guten (fast stylischen) Fotos ist die Seite sehr übersichtlich und gut zu rezipieren. Insgesamt eine sehr leichte und lockere Anmutung. Auch das markup des Quellcodes finde ich recht aufgeräumt, keine große "DIVeritis". Schön, finde ich sehr gelungen!
Generell gefallen mir diese vorher/nachher Betrachtungen immer sehr gut! Hier kann man auch immer wieder Anregungen für eigene Relaunchs herausziehen...

Permanenter Link

Florian Vogelmaier
am 04.04.2007 - 15:55

Wenn ich an dieser Stelle den Kommentar einfügen darf:

Vor Kurzem wurde die Seite der Stadt Dresden neu gelauncht. Vielleicht möchte sich jemand mal mit ihr beschäftigen?

Viele Grüße

F. Vogelmaier

Permanenter Link

Mario
am 26.04.2007 - 08:49

Die Seite von QSC ist ne glatte 1 finde ich, bei Freenet hätte ich etwas mehr Pepp erwartet

Permanenter Link

Marie
am 01.05.2007 - 00:33

Hallo, mal ganz davon abgesehen, dass mir der neue Webauftritt von QSC nicht so ganz überzeugt tut es der von Freenet um so mehr. Ich möchte nicht wissen, wieviel diese neugestaltung gekostet hat..

Permanenter Link

Micha
am 31.05.2007 - 07:53

Die freenet-Seite sieht gut aus und ist übersichtlich, scheint aber denen der Mitbewerber sehr zu ähneln. Etwas mehr Eigenständigkeit hätte gut getan. Die QSC Seite halte ich für gelungen und aufgeräumt.

Permanenter Link

vincent
am 07.06.2007 - 22:46

Den QSC Relaunch finde ich auch sehr gelungen.

Die Freenet Seite finde ich überhaupt nicht gut gelungen.
Für mich ist das eine 0815 Seite die ich mir kurz anschaue und sofort wieder gehe weil Sie viel zu überladen ist.
Ich kann verstehen, dass ein gewisser Inhalt dem User übermittelt werden muss, aber ab einer gewissen Fülle von Inhalt verschreckt man seine Besucher mehr als Sie zu locken.

Das Sie nicht ganz so schlecht abschneidet, bekommt Sie von mir eine 1 im füllen von freien Flächen ....
Da wurde echt jeder Pixel ausgereizt. xD

Permanenter Link

Hendrik
am 19.11.2007 - 16:10

Die Webseite von QSC sieht viel frischer und moderner aus und kommt nicht mehr so altbacken daher wie vorher. Die Seite ist sehr angenehm zu betrachten und lesefreundlich. Die Bilder sehen hochwertig aus, sind auf den Inhalt abgestimmt und individuell gestaltet. Insgesamt wirkt die Seite gediegen und hochwertig. Die Produkte stehen im Mittelpunkt. Als Kundenkreis werden wohl hauptsächlich Geschäftskunden anvisiert. Ein gelungener Relaunch.

Die Webseite von Freenet bietet ebenfalls ein frisches, auch farblich ansprechendes Design. Die Seite ist allerdings sehr überfrachtet. Beim Aufruf der Freenet-Seite wird man vom Informationsgehalt regelrecht erschlagen (Kopfschmerzen inklusive). Dazu kommt, dass sich der Inhalt in der Mitte der Seite bei erneutem Aufruf ständig ändert. Der Inhalt scheint damit beliebig. Man hat keinen festen Bezugspunkt. Der einzige „Rettungsanker“ ist die linke Navigation, die sehr übersichtlich ist. Die allgegenwärtige „Bilderflut“ wirkt ebenso erdrückend. Durch den Community-Bereich und die vielen Themenseiten ist der Informationsgehalt der Freenet-Seite hoch. Allerdings hätte man sicher besser daran getan, die Informationen der Seiten auf das Wesentliche zu beschränken. Ein designtechnisch zwar gelungener, aber noch verbesserungswürdiger Relaunch.

Permanenter Link

Joe
am 14.03.2008 - 13:01

Also zum Kommentar zur Freenetseite möchte ich sagen, dass ich die Freenet-Seiten optisch 1A finde. Kann mich da der Meinung nicht anschließen

Permanenter Link

Thomas
am 09.07.2008 - 17:07

QSC oder freenet? Beide Seiten sind aus meiner Sicht gelungen, wobei mein persönliches Empfinden die von QSC bevorzugt. Der Hauptunterscheid für die visuelle Empfindung ist aus meiner Sicht zum einen die verwendeten Breiten von 940px bei QSC und 830px bei freenet sowie die Positionierung zentriert bei QSC und die Linksauesrichtung bei Freenet. Ich stimme dem Autor zu das Freenet einige wichtige Dinge wie Überschriften und Textblöcke vernachlässigt hat. Trotzdem freue ich mich bei der Vielzahl von gruseligen Websites im www über jede gelungende Relauch wie bei diesen beiden Seiten und nehme auch für mich einige Anregungen mit.

Permanenter Link

Die Kommentare sind geschlossen.