TYPO3.org Relaunch könnte besser sein

In der Woche vor Ostern wurde im Linuxhotel Essen von 20 freiwilligen Entwicklern im Rahmen der „T3O Relaunch Week“ ein Relaunch der bestehenden typo3.org Website durchgeführt. Ich hatte ebenfalls vor mich dort für die Mithilfe zu bewerben, leider konnte ich das auf Grund der aktuellen Projekte nicht.

Umso mehr ärgere ich mich jetzt, dass ich nicht teilnehmen konnte, denn das, was ich aktuell unter http://preview.typo3.org/ sehe, gefällt mir rein gar nicht. Dabei, will ich auch nicht übers Design sprechen, dem es auch an Kontrast und Usability fehlt, sondern ich habe als Frontendentwickler und Webstandards-Verfechter mir sofort den Quellcode angesehen…

Um es nochmal zu verdeutlichen, ich möchte hier keinem zu nahe treten, ich weiß, dass es viel Arbeit war und jeder sein bestes gegeben hat, den Einsatz und das freiwillig, honoriere ich! Ich weiß auch, dass man bei einem Projekt dieser Größenordnung Kompromisse eingehen muss um nicht nur zielgruppenorientiert sondern auch Cross-Browser-übergreifend ein gutes Ergebnis abzuliefern und eben nicht nur mit der Speerspitze der Technologie agieren darf.

Trotzdem bin ich der Meinung der Quellcode des TYPO3.org Relaunch hätte besser sein können. Ich sehe keine Unterstützung der aktuellen Browserfeatures, ich sehe keinerlei CSS3, gerade mal der <!DOCTYPE HTML> ist auf HTML5 umgestellt, mehr nicht! Warum dann nicht die Möglichkeiten von HTML5 nutzen? Wenigstens die neuen semantischen Elemente wie <header>, <footer>, <nav>, … nix! Warum dann HTML5?

Warum nicht die Möglichkeit nutzen die TYPO3-Schrift „Share“ als Webfont über @font-face zu integrieren, funktioniert browserübergreifend bis IE6! Der Webservice Fontsquirrel bietet einen Font Face Generator, dort kann man die Schrift hochladen und es werden on-the-fly die benötigten Formate generiert.

Font Face Generator
@font-face Generator von Font Squirrel

Warum ist die Navigation nicht mit CSS ausklappbar, warum nur per Javascript? Wieso kann man die Navi nicht mit der Tastertur bedienen? Es ist zudem nicht notwendig, so viele Grafiken für das visuelle Erscheinungsbild zu nutzen, viele Dinge können mit CSS3 abgedeckt werden. Verläufe und Schatten funktionieren in den allermeisten Browser mittlerweile sehr gut. Die Möglichkeiten habe ich Ende letzten Jahres zusammen mit dem Webstandard-Blog im CSS3-Adventskalender dargestellt.

Was ist mit „Progressive enhancement“? Muss eine Website in jedem Browser genau gleich aussehen? Im TYPO3-Backend wird mittlerweile Modernizr verwendet, warum nicht im neuen TYPO3.org Template?

Was machen diese leeren DIVs im preview.typo3.org Quelltext eigentlich? -> Schatten! Aha!

<!-- shadow elements -->
<div class="b-drop-body-l"><div></div>
<div class="b-drop-r-tl"></div></div>
<div class="b-drop-body-b"><div></div></div>
<div class="b-drop-body-r"></div>

Und es gibt noch weitere schöner Fundstücke…

<div class="aside-shade-head"></div>
<div class="aside-shade-cont"></div>
<div class="aside-shade-foot"></div>

Um aber nicht nur zu meckern, habe ich mir mal die Mühe gemacht, eine Navigationsdemo zu entwickeln wie es mit CSS3 funktionieren könnte (no Javascript):

TYPO3.org relaunch CSS3 Demo

Ich muss allerdings dazu sagen, dass ich die Testsite nicht in allen Browsern getestet hab, dazu blieb nebenher nicht die Zeit, sorry.

Passend dazu: CSS3 vs. CSS: A Speed Benchmark – ein Vergleich auf Smashing Magazine

TYPO3camp Stuttgart

Auf dem TYPO3camp Stuttgart werde ich ein HTML5 tt_news Template vorstellen, dass dann für HTML5 Webseiten zusammen mit tt_news verwendet werden kann.

Wie schon eingangs erwähnt, wäre ich gern beim Relaunch dabei gewesen, naja, vielleicht ist ja noch nix zu spät und ich kann hier und da noch helfen…

Was meint Ihr zur aktuellen Preview?

36 thoughts on “TYPO3.org Relaunch könnte besser sein”

  1. Nur kurz zur Info – das ist eine Preview, mit der wir zeigen wollten, was der aktuelle Stand ist. Das ist weit davon entfernt fertig zu sein und hat schon gar keine Browsertests erlebt. Man kann sich natürlich über die Verwendung der verschiedenen Elemente streiten, aber vielleicht ist es besser, erst einmal die Fertigstellung abzuwarten… Wir laden rechtzeitig zur Beta-Test-Phase ein.

  2. Und wenn wir schon mal dabei sind, es gibt noch mehr zu meckern. Weniger zu den verwendeten Techniken, mehr zu der aktuellen Qualität der technischen Umsetzung:

    So z.B.

    1. (X)HTML-Fehler: 8 (W3C)
    2. CSS-Fehler: 91 (W3C)
    3. Spaghetti-Code: 16 Elemente schon auf der Startseite
    4. Datentransfer –> 36 Requests beim Laden der Seite

    Da ist noch Luft nach oben :-) Bei einem derartig prominenten Projekt darf man sich über Kritik natürlich nicht wundern.

  3. Bei der Navi die hätte man echt mit CSS machen sollen. Aber bei der Schrift, das ist in dem Fall kein Argument das es in allen Browsern läuft. Hast du dir das mal im IE6-7 angesehen? Die Fonts sehen lange nicht so schön gerendert wie mit Cufon aus. Es gibt so viele Argumente dafür wie dagegen.

    Das alles sieht so aus als hätte ein Entwickler die Umsetzung gemacht der gewöhnt ist auch ältere Browser mit ähnlicher Darstellung zu unterstützen zu wollen. Es gibt viele Firmen wo der Chef eben immer noch wegen seiner IT mit IE7 surft und der sollte keine „Progressive enhancement“ Seite sehen sondern möglichst das ganze Layout mit der vollen User Experience.

  4. Ich stimme Joern zu. Solange die Site nicht fertig ist, macht Meckern nur eingeschränkt Sinn. Mir gefällt erst einmal, was ich auf den ersten Blick sehe und der Aufbau der Seiten ist recht schnell. Wenn die Entwickler mit dem Refactoring fertig sind, sehen wir weiter:-)

  5. Vielen Dank für diese ausführliche Stellungnahme und für den Beispielcode. Dein Beispiel sieht in meinen Augen auch sehr viel besser aus, als das was auf preview.typo3.org zu sehen ist.
    Sebastian kann ich auch nur zustimmen, die Kritik sollte auf jeden Fall angenommen werden. Und @Joern 83% fertig klingt ja schon eher nach „fast fertig“ als nach „weit davon entfernt fertig zu sein“ …

  6. @Joern Das Argument „Wartet mal, das ist noch Alpha und in der Beta wird alles toll“ lasse ich im Bereich HTML und CSS nicht gelten. Wer es kann, der programmiert sowas von Grund weg sauber – da iteriert und refactorisiert man nicht zahlreiche Male drüber weg. Die oben genannte Schattenkonstruktion zeugt von Frontend-Knowhow aus Web 2.0 Zeiten, während der Rest der Welt (inklusive Eures Doctypes) mittlerweile in Richtung HTML5 weitergezogen ist.

    Man darf demnach die Mutmaßung anstellen, dass die Mischung Leute, die sich an den Relaunch gesetzt hat, nicht sehr heterogen gewählt war, sprich: Viele Typo3-/Backend-Affiniados, aber keine Webstandardista (nun ja, HTML ist ja auch eh für Mädchen, oder?). Holt Euch mal den Sven an Board, gibt kaum einen stärkeren Frontendler als ihn – und Typo3 kann er auch noch!

  7. Hi Sven, vielen Dank für Dein fundiertes und konstruktives Feedback zum neuen Redesign.

    Ich denke, wir (die TYPO3 Community, Association, das Projekt, ) werden auch daran gemessen, wie diese Seite technisch realisiert wurde – das wird das Aushängeschild für TYPO3 in den nächsten Jahren werden und – vor allem – sicherlich Basis zahlreicher Klone auf certification.typo3.org, news.typo3.org, … Da sollte die Basis 100% den neuesten Standards entsprechen. Und dies ist ein Teil der eben nicht „Geschmackssache“ ist wie beispielsweise Design – sondern absolut notwendiges Handwerkszeug (und bevor jetzt alle nachsehen *gg* – auch wir arbeiten gerade an einem Relaunch unserer Seite mittels HTML5/CSS3).

    Sicherlich ist das noch ein Beta-Status – aber ich denke Svens Anregungen sollten aufmerksam gelesen, diskutiert und dann eingearbeitet werden.

    Patrick

  8. Hallo Sven,

    Deine Kritik ist konstruktiv gehalten finde ich.

    Du machst auch konkret Vorschläge zur Verbesserung. Ich denke, dass Jörn Dir sicher dabei helfen wird diese Änderungen einfliessen zu lassen.

    Sehen wir doch den offenen Umgang als Chance!

  9. Ich verstehe die Logik hinter „Solange die Site nicht fertig ist, macht Meckern nur eingeschränkt Sinn.“ nicht.

    Zum einen ist es nicht meckern, sondern konstruktive Kritik und zum anderen sollte man die wann genau anbringen? Wenn es fertig ist?

  10. Zuerst, die neue Seite sieht viel moderner aus, als die alte Seite.

    Aber:
    * der Kontrast ist oft sehr niedrig (orange Buttons mit weißen Links, Links allgemein, Link Listen)
    * kein JS für Menüs (!!!), ever (Ausnahme, Fallback für IE)
    * die Landingpages der Unterpunkte werden leicht übersehen, da sie kein Rollover haben und man eher die Unterpunkte mit Rollover auswählt
    * alle Suchen klappen noch nicht (weil noch nicht fertig?)
    * Ich weiß noch nicht, ob ich die ganzen Akkordeons mag. Als Eye-Candy toll, aber wenn man etwas sucht, muss man erst klicken

  11. BETA 83% RELAUNCH ist, finde ich, nicht mehr allzu weit weg von fertig – Tipps und Ratschläge sind dafür da angenommen bzw. angehört zu werden. Aber, wie so oft in der Praxis erlebt – ist einfach nur auf der Stelle treten doch einfacher … Wo!? Wenn nicht dort – könnte technische Raffinesse erwartet werden?

  12. Hallo,

    Kritik ist immer gut und willkommen.
    Insbesondere Dinge wie umfassendere HTML5-Integration kommen natürlich noch. Es gibt ein Konzept dafür und das wird noch integriert.

    Bei der Schätzung der Prozente und der „Fast-Fertig“-Aussage sollte man allerdings bedenken, dass das Markup und CSS der Webseite ein kleiner Bruchteil des Großen Ganzen sind. Insbesondere im Hintergrund des Systems (Extensions, TER, …) und aus inhaltlicher Sicht gab es sehr viel zu tun, wovon ein riesiger Batzen erledigt wurde, was zu den 83% führt.

    Zu der Frage cufon vs. font-face gibt es völlig unterschiedliche Ansichten/Meinungen, wir haben uns an dieser Stelle für cufon entschieden.

    Viele Grüße,
    Berit

  13. @Philipp „kein JS für Menüs (!!!)“

    Falsch, hier ist Javascript durchdacht und richtig eingesetzt worden. Die Navigation funktioniert sowohl ohne Javascript, als auch auf Touch-Devices weil nach einem Klick auf einen Obermenüpunkt die Unterpunkte links noch einmal statisch erscheinen. In diesem Fall ist das Javascript nur eine Erleichterung für Clients mit Javascript und Mausbedienung und somit (meiner Meinung nach) unbedenklich.

  14. Was mich als helfenden Entwickler total ärgern würde ist der Verweis auf die Agentur über dem TYPO3 Wasserzeichen im Quelltext:

    TYPO3 implementation by AOE media GmbH – the open web company – http://www.aoemedia.de

    Was soll denn das, ich hoffe das kommt noch raus, ist jedenfalls sehr störend, egal ob sie Sponsor sind oder nicht!

  15. Je präziser man Standards einhalten möchte desto weiter entfernt man sich doch von der Web Realität. Jede Seite die nicht 100% Valide ist muss nicht schlecht sein und umgekehrt sind auch 100% Valide Seiten nicht gut per se.

    Das mit dem Anklicken der Menüpunkte habe ich gar nicht gemerkt, in diesem Fall voll OK.

    Wenn man dann so den Rest der Kritikpunkte liest ist das doch vieles eher Geschmackssache
    als wirkliche Kritik.

  16. ich finde auch, dass die Kritik durchaus positiv ist. Vielleicht hat aber einfach die Aussage der Fertigstellung von „83%“ hier ein bisschen für Unmut gesorgt. Wann die HTML- und CSS-Fehler ausgebügelt werden, bleibt ja jedem Projektleiter selbst überlassen – der eine will es gleich haben, der andere machts am Schluss.
    Mit der Aktualität der Technologien (HTML5 / CSS3 / etc.) muss ich @Sven jedoch recht geben, momentan erweckt es nicht den Eindruck als ob man hier das Maximum ausschöpft!

  17. Hallo Sven,

    vielen Dank für dein fundiertes Feedback, was jeder vernünftig denke Mensch als konstruktive und berechtigte Kritik bewerten muss. Über einige Dinge muss man sicher nicht lange diskutieren: eine alternative Navigation, welche auch ohne JavaScript funktioniert, gehört meiner Meinung nach dazu. Andere Punkte hingegen sollten im Zuge der Beta-Testphase durchaus nochmal benannt und diskutiert werden, insofern kann ich nur hoffen, dass die Verantwortlichen sich dies zu Herzen nehmen und in den Prozess der Fertigstellung einfließen lassen.

    Zu hoffen bleibt nur, dass trotzt des auch hier scheinbar zu erkennenden 80/20-Prinzips in den nächsten Wochen die Seite fertig gestellt wird. Ich persönlich könnte sehr gut damit leben, dass die Umstellung auf die neue Seite so schnell wie möglich läuft und die Seite dann für ein halbes Jahr als beta gekennzeichnet wird. In dem halben Jahr können dann entsprechende fehlende Funktionen bzw. technische Umsetzungen erneuert werden. Wie lange laufen irgendwelche Webservices als beta und hey: wann wird tt_news stable??? ;-)

  18. Ex-em-plarisch. Das Redesign, die Kritik und die Kommentare hier sind beispielhaft für alles, was mich an der TYPO3-Kommunity die Hände über dem Kopf zusammenschlagen lässt.

    HTML5, CSS3, Webfonts und Ladezeiten mögen alle diskutierbar valide Kritikpunkte sein, aber warum verliert denn hier niemand auch nur ein Wort zur Accessibility? Die Seite ist für Menschen, die auf Tastaturnavigation angewiesen sind de Fakto nicht zu bedienen. Links und Form-Elemente haben keine :focus-Zustände, das Javascript-Menü klappt nicht auf, Bild-Links haben keine sinnvollen ALT-Auszeichnungen.

  19. Das sehe ich genauso @j4k3 Allerdings erstmal auch ein Lob an die konstruktive Kritik und den Tatendrang seitens Sven… Das Menü könnte man richtig lecker z.B. mit http://pfirsichmelba.de/artikel-scripts/suckerfish-barrierefrei.html umsetzen. Das es auch ohne JS gehen sollte versteht sich von selbst.

    Aber auch alle die Accessibility wären ein leichtes sie noch umzusetzen. Bei den JavaScript Features müsstem an allerdings sicher genauer hinsehen.

    Diese Kritik soll ja nichts schmälern, das Design ist toll (bis auf ein paar Kotraste), modern und zeitgemäß. Aber da lässt siich defintiv so viel mehr raus holen… Ist halt inzwischen oft so wie bei den ganzen Java-Fraggels… pah HTML… das kommt bei mir direkt aus dem Framework ;)

    *Tabellen* grins

  20. Erstmal Danke für deine Meinung aber an dem Artikel und insbesondere manchen Kommentaren stört mich einiges – ich versuchs mal zusammen zufassen:

    – Das ist (öffentliche) Kritik an der Arbeit von vielen – die teilweise mehrere Wochen reingesteckt haben und auch noch „müssen“ um es fertig zu stellen – und sowas führt nicht dazu, dass man dabei motivierter ist! Auch passt das nicht wirklich zu einem TYPO3 Spirit den ich mir wünschen würde.

    – Die Überschrift ist sehr „catching“ und impliziert, dass das Projekt im allgemeinen „schlecht“ sein soll. Dabei ist das Markup ja nicht der Grund für den Relaunch – da gibt es zahlreiche Dinge die höhere Priorität haben

    – Es wird sich weitgehend daran „hochgezogen“, dass nicht die aktuellsten Möglichkeiten von HTML5 und CSS3 genutzt worden. Dazu gleich mehreres:
    – Ich weiß nicht ob man die „Qualität“ eines Markups wirklich daran messen kann, ob es möglichst jetzt schon viele Features eines noch in Entwicklung befindlichen Standards verwendet. Noch dazu wenn es eine Webseite für die breite Masse sein soll (nächster Punkt)

    – Es gibt durchaus auch Gründe die gegen die neuen elemente wie „footer“ oder „header“ einzusetzen – e.g. wenn man IE7 ohne JS unterstützen möchte… (Und vom Mehrwert für den Nutzer betrachtet eher wenige die es nötig erscheinen lassen diese unbedingt einzusetzen.)

    – Diese Seite nutzt sogar noch XHTML Transitional – uuuh wie 2009 ;-)

    Wie auch immer ich finde es ja super konstruktive Verbesserungsvorschläge zu machen – aber mit ein bisschen weniger „Eigenvermarktung“ und etwas mehr Diplomatie hätte man dafür wahrscheinlich auch Bugs in forge aufmachen können … und seine Hilfe bei diesen anbieten können… Denn meckern ist immer einfach…

    Viele Grüße

  21. Hi,

    zu allererst einmal herzlichen Dank an alle Helfer im Rahmen des T3O-Projektes. Was hier an Arbeit geleistet wurde und immer noch geleistet wird, ist sagenhaft. Auch und trotz aktueller Projekte, die jeder von uns hat ;-).

    Um nun das Projekt ein wenig tiefer zu verstehen: Dieser Relaunch ist keine Arbeit, die mit dem Relaunch beendet sein wird. Sprich: Wenn der Relaunch bei 100% ist, dann wird das kein Status Quo für die nächsten Jahre. Damit würden wir wieder in ein Desaster hineingurken, in dem die neue Seite nach kurzer Zeit wieder „outdated“ ist. Geplant ist vielmehr ein ständiges Weiterentwickeln, Pflegen und Verbessern auch nach dem Relaunch.

    Die Kritikpunkte, die hier genannt wurden, sollten angenommen und aufgenommen werden. Ich sehe jedoch die meisten Punkte hier als B-Priorität an, die Zeit bis nach dem Relaunch haben und dann noch verfeinert werden können.

    Wie gesagt, es wird auch nach dem Relaunch ein starkes Team an FE-Entwicklern, BE-Entwicklern, Redakteuren und Designern gebraucht. Die T3O-Woche war eine fokussierte Anstrengung, jedoch ist die Welt hier nicht zu Ende.

    Ich persönlich bin einfach erst einmal froh, wenn der Relaunch erfolgreich geschafft ist, denn dann ist geschafft, was in den Jahren zuvor dreimal!!! fehlgeschlagen ist. Die Zeichen dafür stehen besonders gut, in so kurzer Zeit sind die Teams zuvor nicht annähernd so weit gekommen.

    Und ich freue mich, dass die Website nach dem Relaunch immer weiter verbessert, erweitert und gepflegt wird. Mittelfristig ist nach dem Merger von typo3.com und typo3.org auch die Einbindung von news.typo3.org und association.typo3.org geplant. Die vielen Microsites möchten wir unter einen Hut bringen. Und viele weitere Schritte stehen auf der Agenda. Viel zu tun also. Jeder (zuverlässige, kontinuierlich mitarbeitende) Helfer ist willkommen. Anregungen auch.

    Herzlichst,
    Peter

  22. hi…

    ich habe mir mal die Zeit genommen und hab aus dem ganzen Menü mal ein barrierearmes Menü gebaut. Kann man sicher noch verfeinern, aber mit der Grundlage von Sven und dem Dickerfish-Menü kann da schon was vernünftiges, tastaturbedienbares bei rum kommen. Nur getestet und gebaut mit Firefox 4.0, deshalb kein Anspruch auf Vollständigkeit.

    http://www.toolband.de/typo3_relaunch/menue.html

    Download: http://www.toolband.de/typo3_relaunch/typo3_relaunch.rar

    Es hat übrigens einen Grund, dass ich die Struktur verändert habe. Optisch kann man das sicher wieder über CSS erreichen. Aber ich würde abraten von Contentstrukturen in Menüs. Dies ist eher ein „nogo“ aus Accessibility-Sicht. Dehalb hier eher Klassen vergeben und damit Kategorien hervorheben. Denkbar ist hier natürlich auch eine dritte ul li-Ebene um dies dann auch semantisch hervorzuheben.

    Als kleines Negativbeispiel: http://www.bitvtest.de/infothek/artikel/lesen/tdm-bmg.html

    Gruß

    Matthias

  23. @Daniel ich hör immer nur IE7, IE7, … ist da der Focus nicht falsch gesetzt? Es wird für einen Browser optimiert, der weltweit um 10% liegt (http://gs.statcounter.com/#browser_version-ww-monthly-201003-201103) und ohne JS wahrscheinlich noch drunter?! Jetzt wird im Markup auch „article“ verwendet, das crasht dann genauso!

    Ich betone nochmals und das hab ich auch geschrieben, dass ich die Arbeit die bisher geleistet wurde (und vieles sieht man auch nicht, da es im Hintergrund geschehen ist/geschied) hoch anrechne und gern bereit bin mich einzubringen!

    Zu Thema „Eigenvermarktung“ und „catchy Überschrift“ gebe ich dir Recht. ;)

  24. Hi Sven, aus welchem Grund wollten sie dich denn nicht dabei haben?
    P.S. freu mich dich am T3CS 2011 wieder zu treffen.
    Gruss Lars

Kommentare sind geschlossen.