Focus Recoding von yatil.de
Alle reden nur, aber einer macht es einfach! Enttäuscht von den halbherzigen Redesigns großer Online-Portale geht gerade das große Meckern um in der Webstandards-Szene.
Der unglaubliche Eric Eggert, bekannt durch seine deutschsprachigen S5-Seiten und echte Pionierleistungen im Slowcasting Anfang letzten Jahres, hat sich nun drei Tage Zeit genommen und einfach mal die Focus-Startseite nachgebaut – mit semantisch-schlichtem XHTML, feinem CSS und sogar einem elastischem Seiten-Layout. Bravo an Eric und vielen Dank – ein weiteres Beispiel, mit dem man für den Einsatz von Webstandards argumentieren kann. Was mir noch fehlt, ist eine Auflistung von harten Fakten: Wieviel kB konnten gespart werden? Wieviele Inline-Style-Elemente sind ins CSS gewandert? Und so weiter.
macx am 18. Januar 2006 #
Was mich fasiziert ist die Tatsache, dass die Bilder auch vergrössern und das layout bestehen bleibt. Bravo!Timo am 18. Januar 2006 #
Leider schaut’s aber in Safari nicht so gut aus :-(Heiko am 18. Januar 2006 #
@macx für Images em als Einheit und du kannst deine Bidler skalieren. Unter heute.de ist dies schon lange zu begutachten.Eric’s Arbeit ist absolut klasse, auch wenn in seinem Blog gleich wieder Kritiken bezüglich Safari etc. laut werden. Mit genügend Zeit, um die »speziellen« Browser zu berücksichtigen, wären auch diese Anpassungen möglich.
Der Vergleich der von Dir angesprochenen Fakten wären durchaus interessant und sicherlich weitere Argumente für Webstandards.
Gerrit am 18. Januar 2006 #
@macx: Hast Du nicht eben erst bei Jörg Petermann noch für pixelgenaue Layouts plädiert? Hmm, eventuell können wir Dich ja noch bekehren!Roman Röhrig am 18. Januar 2006 #
Um hier mal so richtig in die ewige fluid-vs.-statisch-Disskussion einzusteigen: ;)Ich finde »fluid« auch oft problematisch. Wenn man jedoch auch bei »statischen« Layouts konsequent em einsetzt, dann ist dieses Layout immer noch statisch, aber im Ganzen zoombar – sogar im IE. Man kann also, z.B. auf diesen Notebook-Displays mit wahnwitzigen Auflösungen, sehr einfach die Lesbarkeit erhöhen. Wer natürlich eine 1024-er-Auflösung hat, und fünfmal zoomt, muss halt leider horizontal scrollen. Auf Seiten wie dieser hier, wo man wie üblich die Schrift zoomen kann, aber die Breite des Layouts nicht mitwächst, fliegt schon bei einmal Zoomen die horizontale Navi auseinander …
Thomas am 18. Januar 2006 #
Guter Vorstoß von Erik (yatil.de)!zu zoombar:
Ich finde zoombare Layouts, vorallem bei Mehrspaltigkeit viel sinnvoller als eine reine Schriftvergrößerung. Die Elemente wachsen im gleichen Verhältnis mit. Bei reiner Schriftvergrößerung kollabieren teilweise die Navigationen und vorallem gibt es Probleme innerhalb der Textspalten …
Grüße
p.s. Was soll das Mäkeln vonwegen Safari. Im IE muß die »Gegendarstellung« layouttechnisch funktionieren …
Conny Lo am 18. Januar 2006 #
Geil, diese Art »Relaunch«! Frech gemacht, leider derzeit bei Eric nicht kommentierbar (Fehlfunktion?), also hier. Man sollte einen Begriff dafür finden, wie etwa HTML4-Bashing, oder Table-Stalking, Valide-Remake, Future-Shocking usw.Diesen Begriff verbreiten unter einem Siegel wie etwa »2cool4IE« und sportlich über die »alten« Sites herziehen. Damit die verschnarchten Webdesign-Firmen endlich aufwachen, und deren etablierten Mitarbeiter wachgerüttelt werden.
Schluß mit Kuschel-Kurs gegenüber alten Coding, CSS 3 steht schon vor der Tür (in der Branche gibts immer noch Tabellen)!
macx am 18. Januar 2006 #
@Gerrit: Ich bin weiterhin für pixelgenaue Layouts, wenn wir die Maßeinheit px mal vergessen. Erics Beispiel ist nichts anderes als ein exakt definiertes Format, welches bei einer Vergrösserung nicht die Laufweite des Textes oder anderer Dinge verändert. Und genau darauf kommt es mir an. Ich werde Erics Idee nun umsetzen, aber weiterhin Fluid-Layouts, die eben die Laufweite verändern, ablehnen.Felix am 18. Januar 2006 #
»Was mir noch fehlt, ist eine Auflistung von harten Fakten: Wieviel kB konnten gespart werden?«Habe die Seiten mal auf http://www.websiteoptimization.com gegeneinander antreten lassen. Das Ergebniss:
Original: 188720 bytes
Kopie: 139686 bytes
Was in Gerrits´ (ungewolltem 56K-Modem Zustand) 10 Sekunden schnellere Ladezeiten ausmacht.
Conny Lo am 18. Januar 2006 #
49 KB gespart? Ist das viel? Im Vergleich zum Gesamtvolumen der Site vielleicht recht gering, aber der Aufwand, die Site zu pflegen, wird enorm sinken!Gibt es schon Reaktion von den »Fokussen«?
thomas Junold am 18. Januar 2006 #
ich finde es nach wie vor NICHT lesbar. es geht doch gar nicht um fluid oder statisch, es geht darum, kann ich es lesen oder nicht, oder anders gesagt, will ich es lesen oder nicht. und das ist doch nun wirklich einstellbar. musste letzte woche einem progger auch erstmal erklären, was zeilenabstand ist. der kannte das gar nicht. und ich finde, bevor ihr über liquide layouts redet und euch nen wolf proggt, macht euch mal bitte schlau, was lesbar ist und was nicht. sorry, dass das so provokant klingt, aber ihr arbeitet da ein wenig am user vorbei, wie ich finde. ihr tretet eine gelernte erfahrung aus mind. 500 jahre bücher lesen einfach mal so in die tonne. das muss nicht sein. der gerrit machts hier doch auch möglich. so viel platz muss doch sein auf einer webseite. das erste, was ich beim spiegel mache, ist ein eigenes css laden, damit ich das überhaupt ertrage, und ich bin noch jung. was sollen denn die älteren machen?sorry gerrit, dass das hier so kam, musste aber mal raus, weil mich das wirklich nervt.
beza1e1 am 18. Januar 2006 #
Die index.html ist von 121kb auf 32kb geschrumpft. Oder anders von 1293 Zeilen auf 660 Zeilen.Im Original gibt es 417 Zeilen (1/3) mit dem Begriff »style«. In der Überarbeitung noch 29 Zeilen (1/22).
Die Zahl der Tabellen wurde von 4 auf 1 reduziert.
Sonst noch Arbeit für meine Kommandozeile?
Timo am 19. Januar 2006 #
@Thomas & @Heiko: Von wegen Safari-Gemecker: Icke wollte ja nicht meckern, aber immerhin schafft Safari den Acid2 Test, und ist wohl nicht als Grotten-Browser bekannt. Klar’s gibt nen paar Probleme damit, aber die hielten sich meiner Erfahrung nach immer schön in Grenzen.Und daß man leider auch den Entwurf für den IE am leben halten lassen muß, macht die Aufgabe nicht leichter… daß ist mir schon bewußt. Aber wie hier zu sehen ist, ist die Seite in Safari tatsächlich völlig flöten gegangen. Das ist zwar pingelig, und ich halte die Sache für ein Ein-Mann-Projekt über nen paar Tage für großartig! Wirklich! Aber gerade bei solchen Portalseiten würde ich auch »barrierefreiheit« fordern, und das bedeutet ja nicht nur ALT-Tags für Bildchen sondern auch eine Lesbarkeit der Seite für Mac-User. Zumal das alte Thema »Barrierefreiheit« ja für XHTML auch ein Türöffner ist…
Naja, hab’ jetzt eben nochmal gecheckt und’s liegt wohl an der Darstellungsgröße der Typo. Wenn man mit Apfel + die Seite vergrößert darstellt, sitzt alles grob O.K. Bis auf einen extrem großen leeren Bereich am Ende der Seite…
@thomas Junold
Danke für den Kommentar. Die Diskussionen zwischen Fluid und Fest kann ich auch nicht so recht verstehen. Ich habe da auch immer das Gefühl, daß Web-Designer sich dort gern in Glaubensfragen verlieren, und vergessen welchen Zweck die Buchstaben auf dem Bildschirm wirklich haben: »Gelesen zu werden« Und wie man in den von dir schon angesprochenen Büchern lesen und auch am eigenen Leib erfahren kann, ist das eine etwas grundlegendere Aufgabe. Das erfordert wirklich fein abgestimmte Zeilenabstände, Buchstabenabstände und auch entsprechende Zeilenlängen. Die Entscheidung ob Fluid oder nicht würde ich IMMER von Fall zu Fall entscheiden und Aufgaben wie einer guten Lesbarkeit DEUTLICH unterordnen. Da liegt noch dermaßen viel im argen, daß man als Freund der Buchstaben schon oft weinen muß. Ich persönlich halte diese Focus und Spiegel-Websites typografisch für ähnlich gelungen wie den Pizza-Zettel aus meiner Nachbarschaft.
Tja ja… man hat’s schon schwer…
thomas Junold am 19. Januar 2006 #
danke timo.und deine seite ist lesbar :-)
Roman Röhrig am 19. Januar 2006 #
»Entscheidung ob Fluid oder nicht würde ich IMMER von Fall zu Fall entscheiden und Aufgaben wie einer guten Lesbarkeit DEUTLICH unterordnen.«Im Prinzip eine Selbstverständlichkeit, sollte man meinen. Meine persönlichen Zweifel an fluiden Layouts gründen auf schlechten Erfahrungen gerade mit solchen Lösungen, was die Lesbarkeit angeht. Ist halt bei fluiden Geschichten schwieriger zu kontrollieren, wieviel da in so einer Zeile steht.
Mein zwinkernder Smiley bzgl. der angeblichen »fluid-vs-statisch-Diskussion« weiter oben sollte durchaus meine Ironie zum Ausdruck bringen. Man kann auch ewig darüber diskutieren, ob runde oder eckige Ecken besser sind – wenn der pragmatisch rechtwinklige Schrank aber nicht in die runde Ecke passt, hat man plötzlich ein prägnantes Argument für eckige Ecken. Und kann die Ideologie daheim lassen.
Gerrit am 19. Januar 2006 #
Es geht jetzt in der Diskussion ein wenig am Thema vorbei, sorry. Ich unterhalte mich liebend gerne über fluid gegen fest gegen elastisch. Eric hat einfach nur das Design nachgebaut und dafür gesorgt, dass es bei Textskalierung nicht auseinanderfliegt. Ob das Design scheiße ist oder nicht, war nicht Thema der ganzen Aktion. Es geht hier gar nicht um Design, sondern um die technische Umsetzung in HTML/CSS-Code.Design können wir an anderer Stelle besprechen, bitte.
thomas Junold am 19. Januar 2006 #
das ja auch schön und gut gerrit, aber nur weil ich einen käfer knallrot anmale ihm neueste reifen dranbau und alles brav öle kommt am ende kein ferrari raus.aber eigentlich weisst der verlauf der disskussion auf ein grundsätzliches problem hin, welches gerne umgangen wird.
Gerrit am 19. Januar 2006 #
Das mag ein grundsäzliches Problem sein oder auch nicht – es muss doch mal möglich sein, über einen Teilaspekt einer Sache zu diskutieren, ohne gleich bei Adam und Eva anzufangen.Wenn ich bei einem Käferrennen mitmachen möchte, dann hilft es mir nichts, wenn ich einen Ferrari in der Garage stehen habe, sondern muss trotzdem meinen Käfer optimal tunen, so dass ich Chancen habe zu gewinnen.
In größeren Agenturen kannst Du als HTML-Coder auch nicht sagen: »Das Design der Seite ist scheiße, jetzt weigere ich mich, das in HTML umzusetzen.« Der Kunde hat das Design abgesegnet, jetzt muss man halt ran und das beste draus machen.
Idealismus ist ja schön und gut, aber bei solch großen Projekten wie Focus Online ist kann man nicht erwarten, dass man Einfluss auf alle Bereiche des Geschehens hat. Ich weiß, dass das nicht toll ist. Aber hier hat sich Eric mal an der Realität orientiert, nicht am Wunschdenken.
thomas Junold am 19. Januar 2006 #
ach, das wird nun ein abendfüllendes programm gerrit …ich glaube dir deine guten absichten. und damit gut!
Roman Röhrig am 19. Januar 2006 #
Um wieder zum Thema zurück zu kommen: Eric Eggert hat ja mit Focus eigentlich nichts anderes gemacht, als das, was Douglas Bowman mit Microsoft gemacht hat in seinem berühmten Throwing Tables Out The Window, was Eric ja selbst mal übersetzt hat. Wer sich für harte Fakten, wie z.B. Einsparpotential beim Traffic, interessiert, findet darin nach wie vor durchaus gute Anhaltspunkte. Eric hat auch bei Focus einen großartigen Job gemacht – man fragt sich wirklich, warum nicht mehr »große« Sites mal endlich auf XHML+CSS setzen!Apple am 19. Januar 2006 #
Die index.html ist von 121kb auf 32kb geschrumpft. Oder anders von 1293 Zeilen auf 660 Zeilen.Gerade vielbesuchte Websites könnten sich dadurch Unmengen an Traffic und Geld sparen. Ich verstehe nicht, weshalb es so wenige »große« Websites gibt, die auf XHTML und CSS setzen.
Timo am 19. Januar 2006 #
Zum Thema, zum Wunschdenken und zu Adam und Eva:Ich finde es schön, daß Eric bewiesen hat, daß selbst die dicken Portale (vermutlich in identischem Design) auf XHTML switchen können – Ich denke auch, daß das eigentlich niemanden weiter verwundert. Groß ist es jedoch, daß die Arbeit von einem einzelnen in so kurzer Zeit schon recht weitgehend erledigt werden kann. Klar sowas muß noch mit dem CMS klar kommen…
Auch daß dadurch der Traffic bei sauberem Code schrumpft, daß die Seite vielleicht ein bissel barrierefreier wird, und daß evtl. sogar Webstandards allgemein ernster genommen werden ist ganz und gar großartig.
Ich glaube auch, daß es in diesem Beitrag nicht unbedingt 100%ig angebracht ist, über Adam und Eva zu philosophieren, doch man sollte sich das Wunschdenken bewahren:
[1] Die Code-Freaks träumen von sauberem validen Code und schlanken Seiten, und es gibt ja nun hunderte schlagwertiger Argumente auf XHTML umzuschwenken – sofern’s genug billige und gute XHTML-Programmierer gibt die die Arbeit erledigen.
[2] Ich träume davon, daß im Zuge dieser rein technischen Wandlung mit all ihren Vorteilen die Leute anfangen auch mal wieder wie Adam&Eva auf die Seite zu schauen, und an der Usability feilen.
Und einmal ganz ehrlich: Wenn die Entscheider bei Focus und Co bei dem Projekt »Switch auf XHTML« nicht auch an das Design und den Leser denken, sind sie ihr Gehalt wirklich nicht wert. Ich denke ein XHTML-Focus wird wirklich anders ausschauen als ein Tabellen-Focus – Technik hat schon immer auch die Form bestimmt (siehe F. Didot…), und auch die Code-Freunde sollten nicht vergessen, daß sie neben Traffic, validem Code und Co auch noch andere Argumente im Ärmel haben.
So jetzt halt’ ich aber meine Klappe bevor’s all zu sehr nervt…
Eric am 19. Januar 2006 #
@Timo: Ich stimme dir zu: Die Seite vom Focus ist potthässlich und gehört eigentlich in den Müll. Aber das war doch gar nicht der Punkt. Die Frage war vielmehr warum der Focus bei seinem tabellenlosen Redesign die Semantik vergessen hat und ob das etwa an der Komplexität des Layouts lag. Tuts nicht :).lemming am 20. Januar 2006 #
@Eric. Tolle Arbeit. Dank dir weiß ich jetzt, dass man Styles auch mit einem Leerzeichen im Namen benennen kann. Ich selbst hab’ ewig alles in Tabellen-Design und wenn’s hoch kommt HTML 4.0 gemacht. Asche auf mein Haupt! Ich gelobe Besserung und baue gerade eines meiner wichtigsten Projekte auf XHTML um.
@Timo, das CMS von Focus-Online oder SpOn ist ein häßliches Monster. Evtl. wäre der Spiegel sogar noch der passendere Proband gewesen, als der Focus.
Die Redaktionssysteme rotzen regelrecht HTML (Abstandshalter als Bild ein Pixel groß und ohne leeren ALT-Tag) in die Welt das es nicht mehr feierlich ist. Jeder der mal versucht hat MovableType zu bändigen oder die häßliche Stiefmutter TYPO3, weiß wovon ich rede.
Eine Seite bauen die XHTML valide ist, kein Ding. Mit Handwerk läßt sich das machen. Aber das ganze noch in Einklang mit dynamischen (Webanwendungen lalala), oder mit CM-Systemen zu bringen, ist eine schreckliche Arbeit.
Ergo: Da 99% aller SpOn-Leser eh nichtin den HTML-Code kuggen und 99% aller Chefredakteure kein Blassen haben von Webstandards, wird das Thema am Haken »zu teuer« abgehängt.
Bernhard Benke am 20. Januar 2006 #
Als ich noch bei einer österreichische Tageszeitung als Webdesigner arbeitete, hatte ich die selbe Idee.
Die kB’s des HTML Codes auf der Homepage verringerte sich um 75%, das Pagerendering war merklich schneller als das endlos verschachtelte Tablelayout. Leider hat das die Verantwortlichen nicht besonders interessiert, wir hatten ja Bandbreite zum Säue füttern.
Das war vor 3 Jahren, vor einem Jahr gab es einen Relaunch – natürlich mit spacer.gif und all den anderen Sünden.
Christoph Freitag am 21. Januar 2006 #
Ich habe eine kleines Extranet aufgesetzt (s. Link in meinem Namen, noch bis Dienstag zu besichtigen) —natürlich mit Wordpress, XHTML und CSS. Die eigentliche Arbeit war in zwei Tagen erledigt: Wordpress instalieren, Plugins suchen und installieren, die Templates ein wenig umschreiben (hauptsächlich hier und da ein paar IF-Abfragen in PHP) und etwas Dummy-Content einpflegen.
Und dann habe ich einen Tag gebraucht, um alles wieder IE-kompatibel hinzubekommen!
Das sagt doch alles. Solange man Tricks und Hacks braucht, um mit den selben CSS-Anweisungen auf allen wichtigen Browsern auch das gleiche Ergebnis zu erhalten, ist es einfacher, mit Tabellen zu arbeiten.
Oder gleich arbeiten zu lassen (automatisierte CMS). Es gibt noch zu wenige Gerrits, die zugleich schreiben, gestalten, setzen und programmieren können.
Johanna am 31. Januar 2006 #
Respekt an Eric dafür …
Bill am 19. Oktober 2009 #
Ich finde das der Kontent weitaus wichtiger ist. Natürlich ist es, wenn hübsch verpackt, netter etwas zu lesen, was gut gegliedert und ohne viel schnick schnack ist. Gerade dies ist bei vielen Seiten ein Problem. Ich habe oft das Gefühl was der letzte Stand der Technik ist, muß auf die Seite. Dabei ist oft weniger mehr.