Gelungene Redesigns - Episode 1
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)
Das 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 »
RSS-Feed für Kommentare zu diesem Beitrag. TrackBack URL
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
Und ich dachte schon, das taz-redesign würde gar nicht mehr gewürdigt werden.
Comment von andreas — 17.01.2006, 00:03 Uhr
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
@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
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
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
[...] 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
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
.. und nun folgt das SPON-redesign…
http://homelesspixel.de/view.html
Comment von radu — 10.05.2006, 11:15 Uhr
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
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
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
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
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
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