Gelungene Redesigns - Episode 1

von heike / 16. Januar 2006

Keine Gurke des Tages. Nicht nur Hobby-Blogger verwenden Webstandards. Während sich die Szene zofft, ob zu viel oder zu wenig gekuschelt wird, geht die taz hin und macht einen auf standardkonform. Einfach so: Sauberer Code. Und worüber sollen wir jetzt bitteschön diskutieren, liebe taz?? Am Ende wird noch das Internet besser. Das wär echt ne Gurke des Tages.

taz (www.taz.de)

taz, Titelseite vom 16.01.2006Das ist ein Relaunch wie ihn die Leser besonders gerne mögen: Alles am alten Platz, man muss sich nicht umgewöhnen und es lädt schneller.

Die Seiten lassen sich bei der taz tatsächlich so schnell umblättern wie bei kaum einer anderen Online-Zeitung. Das ist auch kein Wunder, denn im Quelltext (schlappe 14 KB, Startseite) steht fast mehr Inhalt als Markup. Das ausgewogene Inhalt-Code-Verhältnis freut nicht nur die Leser (Ladezeit), sondern auch die Entwickler (Übersichtlichkeit) und Google (Inhaltsdichte / Findability). Die Seite ist mit 4-5 divs grob gegliedert und arbeitet im Stylesheet effizient mit verschachtelten Selektoren, um nicht jedes Mal ein neues div oder span verwenden zu müssen (Descendant selectors, Selektor-Serie bei BereaStreet) z.B.

#boxmitte ul {
}
#kopf div.werbung {
}

Sowohl die globale Navigation im Kopf als auch die Zeitungs-Navigation in der linken Randspalte ist semantisch als Liste markiert und wird ganz ohne Zusatz-spans oder -divs formatiert. Der Navigations-Standort wird codesparend mit einer Klasse im li-Element (li class="aktiv") hervorgehoben:

<div id="navigation1">
<ul>
<li class="aktiv">Startseite</li>
<li><a href="http://www.taz.de/pt/.1/archiv/suche.demo,1">Archiv</a></li>
<li><a href="http://www.taz.de/pt/2006/01/14.1/magIndex">Magazin</a></li>
<li><a href="http://www.taz.de/pt/2006/01/13.1/mondeIndex">Le Monde diplomatique</a></li>
<li><a href="http://www.taz.de/pt/.1/tunnelnf">TomTunnel</a></li>
</ul>
</div>

Weitere Highlights:

  • Die Schrift ist skalierbar
  • das Layout passt sich flexibel an das Browserfenster an
  • der Code validiert (XHTML 1.0 Transitional)

Mehr demnächst womöglich in einem gesurft hier ganz in der Nähe.

15 Kommentare »

  1. Naja, der XHTML Schema Validator wirft sechs kleinere Fehler bzw. Warnungen für die Startseite aus: Validator-Ergebnis
    Dank der fehlenden Kodierungsangabe kann ein XML-Parser das XHTML nicht verarbeiten (Vorschrift des XML-Standards) - aber das ist ein üblicher Fehler von Pseudo-XHTML als text/html. Den machen ironischerweise auch viele Webstandards-Verfechter. ;)

    Comment von molily — 16.01.2006, 20:14 Uhr

  2. Und ich dachte schon, das taz-redesign würde gar nicht mehr gewürdigt werden.

    Comment von andreas — 17.01.2006, 00:03 Uhr

  3. Warum eigentlich nicht statt

    gleich schreiben? Das erpart 1 -Element ( ist ebenfalls wie ein Block-Element). Außerdem sei daran erinnert, dass bei Bedarf auch die Mehrfachnennung von Klassen angewendet werden kann, um evtl. schachtelnde -Elemente zu vermeiden, welche ansonsten funktionslos sind: .

    Comment von Sierk Bornemann — 23.01.2006, 15:29 Uhr

  4. @molily

    Die XML-Deklaration incl. der Zeichenkodierung (z.B. UTF-8) ist von der Spezifikation her empfohlen und zur Validierung eines XML-Dokuments notwendig. Leider schaltet der Internet Explorer in seiner jetzigen Form beim Auftauchen dieser Deklaration automatisch in den sog. “Quirks”-Modus, d.h., ein nach “Strict”-DTD valides Dokument stellt er dann nicht mehr im Strict-Modus dar.
    Entweder man verzichtet also auf die XML-Deklaration und gewährt damit dem IE die Möglichkeit, das Dokument im “Strict”-Modus darzustellen, oder man verzichtet auf die Möglichkeit einer jederzeit anständigen Validierung z.B. durch den W3C Validator.
    Ich versuche in meinen Projekten einen Kompromiss zu finden, indem ich per SSI-Variablen und IE-Kommentaren abfrage, ob der lesende Web-Browser ein IE ist, bei welchem dann die XML-Deklaration ausgeblendet wird. Auf alle anderen Clients trifft die Abfrage nicht zu, und sie bekommen die XML-Deklaration mitgeliefert. So ist dann auch eine Validation möglich.

    Gruß,
    Sierk

    Comment von Sierk Bornemann — 23.01.2006, 15:36 Uhr

  5. Sierk, das ist mir klar.
    Der Ausweg ist nicht die fallweise eingefügte XML-Deklaration, sondern die Verwendung von UTF-8.

    Comment von molily — 27.01.2006, 21:32 Uhr

  6. Auch kein schlechtes Redesign, das nicht von Hobbybloggern kommt, ist http://www.glaskoenig.de. (Evtl. mit dem Wayback-Machine-Archiv vergleichen - uiuiui…)
    Vielleicht wäre das ein weiterer Artikel für “Gelungene Redesigns”!? Mir gefällt’s jedenfalls. :)

    Comment von Nathalie — 03.02.2006, 12:48 Uhr

  7. [...] Plant die taz Neues im Bereich Online-Redaktion? Nach der Neugestaltung der Website (die älteren Versionen kann die/der geneigte UserIn übrigens bei archive.org anschauen), die an der einen oder anderen Stelle positiv aufgenommen wurde scheint die taz noch mehr Veränderungen für ihre Homepage angedacht zu haben. Darauf deutet ein Stellenangebot von ihrer Netzseite, das mittlerweile wieder runtergenommen wurde (Job vergeben?), hin. Screenshot von besagtem Stellenangebot.Darin wird einE ProgrammiererIn zur Unterstützung beim Aufbau einer Online-Redaktion [...]

    Pingback von blogozin ‹ blogozin Archiv ‹ taz baut Online-Redaktion aus?! — 05.02.2006, 02:39 Uhr

  8. Die junge Welt hat kürzlich auch ihre Website neu gemacht: http://www.jungewelt.de
    Sieht auch ganz gut aus.

    Comment von Petra — 13.03.2006, 18:39 Uhr

  9. .. und nun folgt das SPON-redesign…

    http://homelesspixel.de/view.html

    Comment von radu — 10.05.2006, 11:15 Uhr

  10. Ich persönlich finde das Redesign der TAZ gar nicht so schlecht. Eben ansprechend passend zu einer Zeitung.
    Ich möchte jedoch einmal sagen, dass es für mich viel wichtiger ist, Eure Kommentare zu lesen, da ich daraus viel Wissen ziehe und auch versuchen werde, es bei mir anzuwenden.

    Dafür einmal ein Dank an alle.

    Karen

    Comment von Karen Zuch — 06.06.2006, 07:19 Uhr

  11. Ich habe heute diese Website gefunden und studiere Sie nun schon seit einiger Zeit.
    Ich wußte nicht, dass es so viele Gestaltungsmöglichkeiten dank CSS gibt.
    Ich werde wohl einiges dank der Hilfe dieser Website an meiner Homepage ändern müssen.

    Für die zahlreichen Tipps schon einmal vielen Dank.
    Ich werde meinem Webmaster Eure Site auch empfehlen, da er gerade eine Homepage mit dem Thema Hilfe zum Webdesign erstellt hat, denke ich, dass Eure Seite super dazu passt.

    Hier mal der Link:

    http://www.homepagehelfer.de

    Bye und ich werde hier wohl öfters rumstöbern.

    Reik

    Comment von Reik Misoph — 12.06.2006, 15:43 Uhr

  12. Hallo,

    ich finde das neue Design der TAZ auch sehr gelungen. Ich möchte mich an dieser Stelle auch mal als stiller Leser für die Info´s auf dieser Seite bedanken.

    Gruß
    Georg

    Comment von Georg — 20.07.2006, 14:43 Uhr

  13. Das neue Design der FAZ ist wirklich gelungen. Man sieht das dort gute Programmierer am Werk waren. So Nachrichten Seiten wie die Bild könnten sich eine Scheibe davon abschneiden.

    Gruß
    Cetin

    Comment von Cetin — 24.07.2006, 17:54 Uhr

  14. Hallo,

    wie findet ihr das neue Design von http://www.rp-online.de ?
    Ich persönlich finde es optisch nicht so gelungen wie das vorherige.
    Funtionell betrachtet ist es aber als besser einzustufen, trotzdem, das Auge ißt nunmal mit!

    Gruß Manu

    Comment von Manuela — 22.11.2006, 16:24 Uhr

  15. Die taz hat schon wieder ein neues Layout, ziemlich 0815 diesmal, dazu noch mit erbärmlichem Code. Eindeutig ein Rückschritt.
    Gruß Martin

    Comment von Martin — 06.07.2007, 17:11 Uhr

RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URL

Kommentar schreiben




Suche

About

"Vorsprung durch Webstandards" ist ein Webzine zu Webstandards, Barrierefreiheit und Usability. In loser Folge erscheinen hier theoretische Texte, praktische Tipps und hilfreiche Links zum Thema.

Classics

Falling in love with CSS

I love CSS

alle Interviews

Blogroll

Neu im Blog

Updates

Feed Neue Texte als RSS-Feed

Autoren

Heike Edinger, heike.edinger at gmail.com

Timo Wirth, timo.wirth at gmail.com