Wenn man sich den Spass etwas genauer anschaut, erkennt man als Laie schön, was man für moderne Webauftritte 2011 zwingend benötigt (kleiner Ausriss):

• XHTML 1.1 liefern wir (nach wie vor) als text/html aus
• 130 Fehler in 1700 Zeilen HTML-Code, das gab’s tatsächlich auch schon scheisser, allerdings nur von wenig seriösen Quellen überliefert
• 31 Javascripte für eine 08/15-Seite mit 2-3 „Funktionen“
• knapp 3000 (dreitausend(!)) CSS-Selektoren (Beispiel)
• feste Container-Höhen, so dass bei text-zoom alles munter durcheinanderpurzelt (Screenshot)
• Kein Hover-feedback in Aufklappmenüs (Siehe nächster Punkt)
• Kein display:block für die Submenü-punkte
• Eine Überschrift auf der ganzen Seite, das wäre im Bereich „Politik“ der aktuelle Link in der Breadcrumb.
  Nicht ausgezeichnet ist die eigentliche Seitenüberschrift (oben in der Mitte das grosse Wort „Politik“). Desweiteren nicht als Überschriften gekennzeichnet sind die Themen, Zwischenüberschriften usw. Auf den Artikelseiten gibt es keine Breadcrumb mehr, stattdessen als einzige Überschrift eine (wenigstens vernünftig ausgezeichnete) Artikelüberschrift.
• Auf Einzelseiten fehlt wie gesagt die Breadcrumb und somit eine Orientierung wo man sich befindet. Ja, genau, die hässliche Hervorhebung im (Unter-)Menü ist auch verschwunden

Soviel erstmal zu den objektiven Gesichtspalmen, subjektiv gäbs am Layout sicherlich noch einiges weiter zu kritteln, bzw. frage ich mich, obs so hohe Teaser-bilder in den Artikeln wirklich braucht, und/oder ob die tolle Artikel|Bilder|Video|Lesermeinung-Zeile nicht besser irgendwo anders aufgehoben wäre als ausgerechnet direkt mitten im Text.
Alles in allem erscheint mir der Spass sehr eng, viel und unaufgeräumt. Da könnte sich ein Grafiker/Designer sicherlich einen schönen Abend um die Ohren schlagen, was man da alles falsch gemacht hat…

• Update1:
  Das mit dem Schwarz auf Dunkelgrau ist ein Bug in einer meiner Erweiterungen. Ich weiss noch nicht, welches, muss ich mal bei Langeweile checken.
• Update2:
  1 Jahr haben die dafür gebraucht! … sagt zumindest das Design Tagebuch (nur echt mit Deppenleerzeichen)

Meine Noten:
Layout/Design: 3-
Code: 5+

Nochmal neumachen bitte.

Der Titel is schon geil.
Standardkonform? Welcher Standard? HTML? Nichtmal das bekommen sie mit ihren Divs gebacken.

Anwender, die die Software dann weiter nutzen wollen, können sich wahlweise für ein monatliches oder ein jährliches Abo-Modell entscheiden. Die Preise beginnen bei 15 US-Dollar im Monat

Yeah, 15 Dollar/Monat, wo kann ich bestellen?

Der zweite Klick landet bei Adobe und das Fazit übertrifft alle Erwartungen, das is so dermassen dumm, da bleibt einem die Spucke weg. Keine Überschriften, (entgegen der heisemeldung) keine Alternativ-attribute, kein Markup kein NIX. DIVs und Ps und Grafiken, fertich.

Dafür simmer 89 auffe Strasse!

Zum Kritteln allerdings fällt es schwer einen Einstieg zu finden, weil man nicht weiss wo man anfangen soll. Vielleicht:

Golem.de erscheint ab sofort in neuer Optik. Breiter und besser lesbar ist die neue Seite, an der wir gut ein halbes Jahr gearbeitet haben.

Dass da ein halbes Jahr dran gearbeitet wurde ist dem Quellcode deutlich zu entnehmen. Für ein derart schlichtes (und trotzdem optisch relativ angenehmes) Layout ein CSS-File mit fast 1500 (=30KB) Eigenschaften vollzuschreiben brauchts schon seine Zeit. Grob übern Daumen kann man dafür weit weniger als die Hälfte (an Eigenschaften) an einem halben Tag einplanen und hat gleichzeitig eine Menge Bugs erschlagen. Bleibt zu wünschen, dass die mit einem „halben Jahr“ ein halbes Mannjahr meinen und nicht ein halbes Agenturjahr.

Ach,  die Bugs.

(Nicht nur) Text-zoom wird ohne Not mit festen Höhen (und Breiten) kaputtgemacht, die verwendeten Schriftarten sind egal, ob man den Font von Google-apis lädt oder nicht, durchweg Scheisse.
Georgia im Fliesstext oder eine verwaschene Droid, da werde ich mir in Zukunft 2 Mal überlegen müssen, ob mich der Artikel wirklich interessiert. Ach, apropos Droid:

Unsere Wahl fiel auf Googles Open-Source-Fonts Droid Serif und Droid Sans.

Dass die Schriften nicht Googles Open-Source-Fonts sind (siehe auch), sondern von Steve Matteson muss ich von einem Informationsportal nicht erwarten. Dass die die zur Datensparsamkeit selbst hosten wohl auch nicht. Für ein eigenen Statistikprogramm hat’s auch nicht gereicht, da wird zur Sicherheit meine IP&Co ein weiteres Mal an Google verschenkt.

Lange Rede kurzer Sinn:

• Layout: 2
• Umsetzung 3-
• Geschwindigkeit: 3-

Quelle: Golem.de hat ein neues Design (golem.de)

Hinweis

Hinweis

Wegen geplanter Wartungs- und Erweiterungsarbeiten steht Ihnen die JOBBÖRSE der Bundesagentur für Arbeit derzeit nicht zur Verfügung. Wir werden Ihnen den gewohnten Service schnellstmöglich wieder zur Verfügung stellen.

Bitte versuchen Sie es zu einem späteren Zeitpunkt erneut.

Völlig korrekt mit einer Biene in Gold ausgezeichnet.
Semantik erstklassig, man beachte die „doppelte“ Überschrift; einmal für vorsintflutliche Reader, die mit Überschriften nicht umgehen können und ein weiteres Mal strukturell vernünftig als H4 gekennzeichnet. „Stärkere“ Überschriften sind hier
a id="logo" oder div id ="logoMeineJobboerse".
Morgen schau ich mir den Spass noch einmal etwas genauer an, vielleicht fällt ja ausnahmsweise mal noch etwas spannenders ab, als a: dieser Bullshit und b: der vom letzten Jahr oder dem vorletzten oder …

Update:
Nun gerade habe ich mal die Goldmedaillen (nur die Startseiten) etwas intensiver gestresst und bin einigermassen positiv überrascht. Text-Zoom, Minimale Schriftgrösse, einigermaßen korrekte/sinnige Alternativattribute – alles im hellgelben Bereich. Einzig die Bundesagentur für Arbeit und „Einfach Teilhaben“ tanzen bei Skalierung mit einem 200% breiten Viewport aus der Reihe. Gold? Mhh, ohne den direkten Vergleich mit den anderen Kandidaten denke ich; ja, geht.

Das schöne an so ’nem Relaunch – zumindest bei Arte – ist, dass man deutlich sieht, dass da ein WebTeam stetig bündelweise viereckige Papierbündel heimtragen darf, und dass – ohne Ironie – tatsächlich Leute da sitzen, die sich Gedanken machen, was man alles 2010 so machen kann.
Das doofe an so ’nem Relaunch ist – zumindest bei Arte, und das generell – dass nach jedem Relaunch man sich in der konfusen Menü- und Seitenführung neu einarbeiten muss. Arte.tv funktioniert nicht wie man das im Seminar „Zugänglichkeit, Barrierefreiheit und so Kram“ gelernt haben sollte, dass man auf die Seite kommt und sieht; „ah meine Info-Interessen liegen da und da, da klick ich jetzt.
Arte.tv ist für Neueinsteiger wie ein Spiel, wo es Sachen zu entdecken gilt a la: „ah, wenn ich jetzt hier klicke, dann passiert das und das. Und wenn ich da klicke, dann: oh, verrückt!“.
Für Alteingesessene, wie meinereiner funktioniert das genauso – zumindest (gefühlt…) alle acht Wochen. Und das ist – das wird man ja wohl noch sagen dürfen: Scheisse!
Dabei gäbs da soviel schöne Sachen zu basteln.
Man könnte:

• den Flash-player endlich mal aufpolieren.
  • Bspw. deutlich machen, was passiert, wenn ich auf „SQ“ oder „HQ“ klicke. Man könnte dem Flashplayer sagen, dass er nicht nur 2 Minuten (ZWEI MINUTEN!) cachet, wenn man aufm Dorf sitzt und das nächste DSL, was flüssig liefe 20km weg ist.
  • Man könnte dem Flashplayer sagen, dass er beim Spulen nicht alles neu streamt, sondern den ganzen Schröffel, so wie man das von Youtube&Co kennt solang im Cache lässt, wie man kuckt.
  • Man könnte dem Flashplayer erklären, dass er das gecachte nicht nach weiteren 2 Minuten wieder verwirft, nur weil man so doof is aufm Dorf zu wohnen und grad 10 Sekunden zu lang auf Toilette war.
• Man könnte mit Cookies arbeiten
  • Welche die erkennen, ob man nach ewigem rumprobieren festgestellt hat, dass nach Drücken auf HQ man SQ schaut und andersrum
• Apropos HQ/SQ: Man könnte sich am Anwender (siehe Fazit) orientieren und nicht einmal 90kb+ und einmal 25kb/s senden. Sondern jeweils das Maximum beim Anwender. Dann könnte der möglicherweise flüssig die Videos schauen.
• Apropos Cookies; man könnte den Feed-Link dahingehend modifizieren, dass er nur das auswirft, was gerade als „Interesse“ angeklickt ist. Nämlich Dokumentationen und nicht Kindersendungen. Oder anders rum.

Man könnte, mal so als Pseudofazit, man könnte sich als Webentwickler mal alle 8 Wochen vor die Computerglotze setzen und sich anschauen, was man da schon wieder für einen hybschen Bockmist verzapft hat.

Oh, meine 2 Minuten Cache sind voll. Melde mich dann hier gleich wieder…

Link: Arte Videos (videos.arte.tv)

Ich bin entsetztfassungslos, äusserst derbe Sache.

Link: Pure CSS Twitter ‚Fail Whale‘ (subcide.com)

Thx an Missi.

Ich hätte zum Thema von der selben Seite bei Apple noch einen nachzuschieben, mit gefälschtem User-Agent:

This demo contains H.264 video. Windows users can download QuickTime to enable support for this industry-standard format.

Edit: Ach hier gibt’s noch einen Nachtrag bei fefe, da sich wohl etliche Apple-fanbois beschwert haben, dass das alles ganz toll wäre…

Keine weiteren Fragen.

Windows Internet Explorer Preview does not support any operating system earlier than Windows Vista SP2

Soweit alles wie gehabt bei Microsoftens, wenn ich mir anschaue, was die sonst noch so zu bieten haben, geht mir das Messer in der Tasche auf. Mal zur Dokumentation für die Nachwelt, falls die irgendwann doch ihre Blödheit bemerken sollten und das korrigieren:

-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-style: solid;
border-width: 6px;
padding: 48px;

Das wird als Beispielcode einer flink und schlampig hingeschluderten Demoseite aufgeführt, dass der IE9 unter anderem – angeblich – border-radius kann, im Code steht es dann korrekt.

Vielen Dank, kein Interesse…

Ich hab, da ich vorgewarnt wurde, nicht alles gelesen, sondern bin gleich schnurstracks zu den Kommentaren runter, und siehe da; ich wurde nicht enttäuscht, auf sachliche Kritik gabs Folgendes zum Besten:

1. „Valides“ (X)HTML ist diskutierbar. Was „valide“ ist, entscheidet der Validator. so gibt es Validator, die ein als Fehler ausgeben, andere verlangen ein

Ein was? Was valide ist, bestimmt nebenbei der Standard.

…

3. Barrierefreiheit war explizit nicht gefordert, da es Designanforderungen gab, die höher gewichtet wurden.

Designanforderungen? WO bitte bricht man sich denn bei einem solchen 08/15-Layout einen Zacken aus der Krone, das barrierefreiarm zu bekommen?

4. In Zeiten von web 2.0 und 98,6% User MIT Javascript braucht man nicht über 1.4% diskutieren, die OHNE Javascript kommen. Hier wurde einfach Kosten und 1.4% gegeneinander abgewägt.

Welche Kosten? Die Mehrkosten, die vertrödelt wurden, um Links kaputtzumachen, oder für anderen Javascriptschnickschnack?

Hier wurde mal wieder alles richtig gemacht, Javascript noch und nöcher, für jeden Furz ein Div, Dillionen Inline-styles, absolute Höhen, kaputte Formulare, Fliegenschissschrift (auf einer Apothekenseite!) usw. usf.

Darauf einen Klosterfrau Melissengeist!

Links:

• Deutscher Apotheker Verlag setzt auf das Open-Source-CMS (t3n.de)
• http://www.apotheken.de/

Guckt euch mal den HTML-Source an!

Das ist widerlichster Schweinkram unterallerster Schublade, kann man sowas nicht verbieten?

Link: http://blog.fefe.de/?ts=b58ac514

Für die etwas fauleren MitwebdesignerdeppInnen unter uns: Nein, das was mir meine Webdeveloper-extension da im Screenshot markiert sind keine Tabellenzellen. Es sind Tabellen. Für jeden einzelnen Punkt eine.

Wenn man mich fragen würde … ääh besser nicht, könnte weh tun.

Quälle: https://isis.tu-berlin.de/ (is ne technische Universität, www also bitte selbst einfügen…)
via: konrad

Probleme

Wie auch viele andere benutzen auch wir vom Trash-Log bereits Webfonts. Leider birgt die Nutzung von Webfonts einige Probleme. So ist es zwar völlig legal, etwa Calibri als Schriftart per font-family: Calibri, Sans-Serif; zu benutzen. Calibri ersetzt Verdana in vielen neueren Microsoft-Programmen als Standardschriftart und wird somit automatisch „kostenlos“ auf vielen Systemen mitinstalliert. Einbinden darf man die Font-Datei aber nicht einzeln, denn Microsoft verkauft sie nebenher noch für $120! Ob nur der Seitenbetreiber haftet, oder auch der Besucher, dessen Browser unlizensierte Software runterläd, ist nicht geklärt.

Weitere Probleme ergeben sich aus dem Aufbau der font-Eigenschaft. Diese erlaubt es, mehrere Schriftarten anzugeben – ist eine auf dem System nicht vorhanden, wird die nächste probiert. Webfonts lassen da der Kreativität freien Lauf. Der CSS-Quelltext sieht dabei etwa so aus:

font: 2em Yanone, Verdana, Sans-Serif;

Besucht man die Seite mit einem Browser, der Webfonts nicht unterstützt, wird „Yanone“ vermutlich nicht gefunden, der Browser wird also Verdana benutzen. Obwohl wir mehrere Schriftarten angeben können, müssen wir uns aber für eine Schriftgröße (2em) entscheiden! Das führt zu drei Möglichkeiten, die alle nicht zufriedenstellen können:

• Schriftgröße wählen, bei der Yanone gut aussieht
• Schriftgröße wählen, bei der Verdana (als Standard-Schrift) gut aussieht
• Ein Mittelmaß, bei dem beide ok, aber nicht toll aussehen

Fazit

Webfonts ermöglicht es Designern endlich aus dem alten Raster der immer gleichen Schriftarten im Web auszubrechen und die Schrift zu wählen, die am besten zur Seite passt. Es bestehen aber noch einige Probleme, die hoffentlich (teilweise) noch in der bisher nicht veröffentlichten CSS3-Recommendation gelöst werden. Eine Zuordnung von einer Schriftgröße zur einer Schriftart würde die Vorteile von Webfonts stark verbessern!

Meinen persönlichen Hauptgewinn bekommen:

• www.credit-suisse.com
  

  Ihr Browser unterstützt keine Cookies
  Um unsere Website zu besuchen, aktivieren Sie bitte in den Browsereinstellungen die Option Cookies und laden Sie die Seite neu. Wir freuen uns auf Ihren Besuch auf www.credit-suisse.com

• www.buergerhaushalt-trier.de
  

  Umleitungsschleife
  Limit für Umleitungen dieser URL überschritten.  Die angeforderte Seite konnte nicht geladen werden. Dies könnte von blockierten Cookies verursacht werden.

Etwa 50% der Seiten der Preisträger skaliert (bei nur-text-zoom) nicht fluid, sondern rechts aus dem Browserfenster hinaus (Extra-scrollbalken, jippie).
Desweiteren verwenden mehrere der Preisträger feste Höhen für diverse Elemente, so dass Text überläuft, teilweise auch weisse Schrift in weissen Hintergrund hinein. Bspw. bei www.bund.de, aber da ist man nach dem Skalieren eh schon verloren.
Das Selbe gilt für browserseitig eingestellte minimale Schriftgrössen.

www.dhl.de beglückt mich mit einem inlineframe, www.weisse-liste.de, was eigentlich am brauchbarsten ist hat da rechts einen „Ihre-meinung-button“, auf den man sich tot-klicken kann, Zeit-online bekommt für ihr altbekanntes interaktives Ratespiel „wo zur Hölle ist mein Fokus?“ eine Biene in Bronze, alles in allem kristallisiert sich bei den Preisträgern die Frage heraus, was man eigentlich noch alles falsch machen muss um KEINE Biene zu bekommen.

Goldgewinner Manufactum glänzt neben anderen Schwächen mit:
h1, h2, h3, h4, h5, h6 { font-size: 1em;}
Das muss ich nicht verstehen…

Link: BIENE 2009: Manufactum hat die schönste Blüte (einfach-fuer-alle.de)

Geht mir von mit Eurem Dreck. Grad sitz ich mal wieder an so ’nem System dran, und ich kann nur sagen, was ich immer gesagt hab: Sooooooooooo einen Hals!!111eins

Link: Typo3 4.3 ebnet Übergang zu Typo3 v5 (golem.de)