Relaunch: Stiftung Warentest

Ich weiss nicht, wie’s vorher war, aber das ist prall.

Durchgehend sauberer, semantischer und valider Code, gut skalierbar.
Bis auf die kleinen Fehlerchen, auf die ich gleich komme: so und nicht anders muss das sein.

Ein wenig geht immer noch, ein paar winzige Schnitzer sind drin, leider nix, worüber man sich ernsthaft das Maul zerreissen könnte:

  • Oben rechts das Login-ding zerfliegt schon bei geringster Skalierung:
    logindingens.png
  • In der Brotkrumen-navi überlagert sich irgendwas, was ich gerade nicht mehr provozieren kann; Screenshot:
    brotkruemel.png
  • Auf der Seite http://www.test.de/hilfe/neu/barrierefreiheit/ gibt’s eine Tabelle mit einer Zeichenerklärung, wo entweder die fehlende Summary dumm ist, oder die Vergabe der Alternativ-texte oder Beides:
    summary.png
    Wozu man sagen muss, dass für meinen Geschmack die Alternativ-texte generell nicht sonderlich zufriedenstellend vergeben sind.

Ich hoffe, dass ich nichts Grundlegendes übersehen habe, und vergebe eine 1-.

Link: Stiftung Warentest

Technorati Tags: , ,

19 Kommentare to “Relaunch: Stiftung Warentest”

  1.  Greg schrieb am 12. Sep 2007 um 21:32

    Echt gut gemacht. Find ich gut, dass du hier auch mal positive Relaunches vorstellst 🙂

  2.  DarkRat schrieb am 12. Sep 2007 um 22:43

    wow. just wow!

    Endlich mal etwas, was sich zu zeigen lohnt!

    Großes Lob an die Ersteller. Super Arbeit!

  3.  Mike® schrieb am 13. Sep 2007 um 0:53

    [quote comment="7299"]Find ich gut, dass du hier auch mal positive Relaunches vorstellst :)[/quote]
    Ja, man muss halt auch mal an die Aussenseiter denken 😉
    Wie sagte vorhin völlig unabhängig davon jemand zu mir: „Du mit Deinem Realismus immer, das ist doch auch nicht alles, lass Dir doch mal was Gutes tun…“

  4.  Greg schrieb am 13. Sep 2007 um 15:52

    Keulchen: Der Datenbankserver will wohl gerade nicht so richtig. Das macht die ganze Site lahmer… Hoffe, dass sich das bald legt.

  5.  Keulchen schrieb am 13. Sep 2007 um 15:45

    Mensch, bei ner 1- hätte das eigentlich auch noch in YMMD landen dürfen ;).

    Es grüßt dat Keulchen

    PS: Lahmt die Seite heut nur bei mir?

  6.  Keulchen schrieb am 13. Sep 2007 um 18:25

    Sowas in der Art hab ich mir dann später auch gedacht:

    http://ja-nee.net/images/trash.gif

    *gg*

  7.  Blacker47 schrieb am 13. Sep 2007 um 19:29

    Nun, die Seite scheint mal ausnahmensweise wirklich gut gecodet zu sein.

    Ein Problemchen habe ich. Opera, Linux, JavaScript an. Wenn ich auf einen Menüeintrag zeige und im Drop-Down was auswählen will, muss ich recht schnell nach unten den Mauszeiger bewegen. Mache ich das relativ gelassen, schließt sich das Drop-Down. Navigieren kann ich trotzdem, in dem ich auf den Menüeintrag klicke und im neuen Fenster den Sub-Menüeintrag auswähle.

  8.  Marc schrieb am 14. Sep 2007 um 8:58

    Ich gehe davon aus, dass das kein JS-Problem ist, da das Menü in gescheiten Browsern auch so funktioniert. Ist aber ein bekanntes Problem bei den CSS-Flyout-Menüs, dass da ab und an bei manchen Browsern der Abstand nicht stimmt und der hover-Status „verlassen“ wird. Im FF funzt es ohne JS einwandfrei, im Opera für PC auch. Wäre mal interessant wie hoch der Prozentsatz der Linux/Opera/ohne JS-Kombi-User ist 😉

    @Blacker: Ist das eine (relativ) übliche Linux Userkombi? Ich dachte Linux User nehmen auch eher FF, Konquerer etc.

  9.  Greg schrieb am 14. Sep 2007 um 10:53

    Marc, Blacker hat JS ja an. Und die Kombi Linux/Opera/JS an dürfte schon vorkommen 😉

    Gibt es für Opera sowas wie die WebdeveloperToolbar oder Firebug? Dann müsste man mal untersuchen, ob das Verhalten richtig oder falsch ist. Wie sieht es denn bei deaktiviertem JS aus? Ich habe leider keinen Linux-Rechner hier um das zu testen, es würde mich aber interessieren.

  10.  Marc schrieb am 14. Sep 2007 um 10:57

    Ups, JS an. Trotzdem sollte das Ding auch ohne JS funktionieren. Wobei ich nicht weiss warum test.de das nötige JS nicht nur dem IE liefert, ich finde zumindest nichts dergleichen. Da wird nur die jquery Bib geladen, kein IE-ich-verstehe-kein-CSS-Script mit Conditional Comments o.ä. Wäre interessant zu wissen wie es ohne JS aussieht.

  11.  Blacker47 schrieb am 14. Sep 2007 um 14:40

    Dektivierung von JavaScript ändert das Verhalten nicht.

    Es ist schon relativ üblich, Opera unter Linux einzusetzen. Firefox ist so eine Sache.. und Konqueror ist recht fehlerhaft.

    Bei mir läuft Opera als statisch kompiliertes Paket (nicht dynamisch gelinktes QT), weil ich ein 64-bit Linux mit nur 64-bit QT habe und von Opera, bis auf die neue Alpha, noch keine 64-bit Kompilationen gibt. Das hat offenbar auch kleine Auswirkungen auf die GUI, die scheinbar etwas „verzögert“ läuft. Kann sein, dass so ein Effekt auch deshalb ausgelöst wird. Ich müsste mal das Selbe bei mir unter Windows testen.

  12.  Blacker47 schrieb am 14. Sep 2007 um 14:42

    Ach ja, die WebdeveloperToolbar oder Firebug:

    Kannst du erklären, was die genau machen und wie man da und welches Verhalten auf richtig oder falsch überprüfen kann?

  13.  DarkRat schrieb am 14. Sep 2007 um 14:43

    Hab Win/Opera getestet.

    Weder mit noch ohne JS gibts Probleme

  14.  Greg schrieb am 14. Sep 2007 um 17:32

    Blacker: Damit kann man zB Elemente rumranden lassen (siehe den letzten Screenshot des Artikels). Damit könnte man dann sehen, ob alles direkt aneinander grenzt, oder warum der hover-Status verloren geht. Das könnte ja dadurch entstehen, dass Lücken auftreten.

  15.  Blacker47 schrieb am 14. Sep 2007 um 17:45

    Also ich sehe keine Lücken. Opera kann auch so umrandungen machen, aber die verändern wiederum die Objektgröße. Es gibt für Opera seit kurzem irgendwelche developer tools, aber diese habe ich nie näher angesehen.

    Wenn ich Zeit habe, filme ich evtl. das Verhalten.

  16.  Mike® schrieb am 14. Sep 2007 um 18:15

    Ich kann das Problem in Opera unter bestimmten Bedingungen nachvollziehen, allerdings aufgrund fehlender Tools (wie oben angesprochene Webdeveloper) nicht eruieren.
    Allerdings bringen Opera (und Konqueror) noch ein paar andere Problemchen mit sich, was imho an Schrifteinstellungen des Systems (die da von Linuxgeschmäckle zu geschmäckle sich stark unterscheiden können) liegt.
    So bricht das Wackelmenü (bei mir unter Debian Schlagmichtot) bei 100% Seitenansicht um in die nächste Zeile (dann funktioniert auch der Hover vernünftig) wenn ich soweit runterskaliere, dass die Seite „wie gewollt“ aussieht, dann ist der Hover defekt.
    Werde mir das bei Gelegenheit aus Interesse mal etwas genauer anschauen.

    P.s.: Solche Hoverprobleme habe ich allerdings in Opera und speziell unter Linux schon des Öfteren gesehen, aber auch andere Browser zicken da mal (in letzterem liegt’s aber definitiv am Code)

  17.  Mike® schrieb am 14. Sep 2007 um 23:15

    So, ich hab mir den Spass jetzt nochmal angeschaut, und auch das Problem, bzw. den Auslöser gefunden.
    Es gibt 2 in Frage kommende Definitionen als Verursacher für das Problem:
    #nav li ul {
    ...
    top: 1.58em;
    ...
    }

    und:

    #nav li a {
    ...
    line-height: 1.6;
    ...

    Hier kann man nur mutmaszen, ob margins, paddings oder was auch immer die 0.02em zur 1.6-fachen Zeilenhöhe soweit aufblähen, dass es letztendlich (ca.) 1px zu viel Abstand zum eigentlichen Menü sind.
    Schönes Anschauungsbeispiel mal wieder, wo feste Positionierung hinführt, imho ist die Positionierung in diesem Falle gänzlich überflüssig.

  18.  Greg schrieb am 15. Sep 2007 um 11:37

    Der Unterschied wird nicht wirklich nur 0.02em betragen. Bei solchen Werten wird ja gerundet. Zusätzlich zum Line-height kommt außerdem noch padding, das könnte auch was damit zu tun haben.

  19.  Mike® schrieb am 16. Sep 2007 um 21:25

    Bei solchen Werten wird ja gerundet.

    Ja, wie ich hier in einem Testcase sah, zwischen 1.54em und 1.6em auf einen Pixel auf und darunter auf 0Pixel ab.
    ÄÄh.
    Oder irgendwas in der Art.
    Je länger/ öfter ich da drauf schau, umso weniger blick ich wirklich durch 😉

Trackback-Adresse | RSS-Feed für die Kommentare abonnieren

Hinterlasse einen Kommentar:


(Wir behalten uns vor Kommentare von dummen Menschen entweder zu löschen oder exemplarisch für die Nachwelt zu konservieren. Dumme Kommentare mit Werbelinks müssen leider auf zweiteres Privileg verzichten.)

XHTML: Du kannst diese Tags verwenden:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>