CSS3 Redesign startet jetzt
Für die nächsten Stunden wird die Seite übel aussehen - danach hoffentlich nicht mehr... 
Vortrag auf der WebTechCon 2010
Ich bin wieder zurück von der WebTechCon 2010. Neben einigen interessanten Vorträgen und jeder Menge Socializing habe auch ich einen Vortrag gehalten. Es ging um die Frontend-Architektur unserer Abteilung.
"Frontend-Architektur der 1&1 Bestellsysteme" bei Slideshare
Es gab einige interessante Fragen und jede Menge positives Feedback (zwitscher, zwitscher, zwitscher).
Einige Dinge, die ich aus den Gesprächen mitnehme:
- Viele Entwickler sitzen auf zwei Stühlen - PHP und das bißchen Frontend gleich noch mit. Den meisten ist bewußt, dass das alles andere als optimal ist
- Sehr gewachsene, heterogene Infrastrukturen - Konsolidierung nicht in Sicht (Zeit- oder Geldmangel)
- Uneinsichtige Chefs blockieren Innovationen
- Gute Kollegen trösten über vieles hinweg
- Kicker sind Mangelware
- Großraumbüros sind definitiv keine Option für Entwickler
Das macht mir mal wieder deutlich klar, wie gut wir eigentlich mit Personal und Systemen aufgestellt sind und wie viel Nachholbedarf andere Firmen da noch haben.
Letzte Woche war ich zusammen mit Andi und Mathias auf der Fronteers in Amsterdam. Chris Heilmann hat die Talks der Konferenz sehr gut zusammengefasst. Bleibt nur noch hinzuzufügen, dass der CSS3 Workshop von Dan Rubin sehr lehrreich und kurzweilig war.
Die Webseite
Inspiriert durch dieses Meisterwerk von Jochen Malmsheimer (unbedingt vorher ansehen, sonst kommt der Witz nicht rüber) habe ich versucht, diesen Gag auf ein anderes Thema zu übertragen.
Die Webseite
Wie geht eine Webseite? Fangen wir unten an. Da ist das valides HTML. VALIDES HTML! Mit einer richtigen Semantik, damit die Elemente der Seite auch eine anständige Bedeutung haben. Richtiges HTML, semantisch, suchmaschinenoptimiert. Nicht diese zusammengeschusterte Tagsuppe, die ihr Layout in Tabellen presst und von Headlines noch nie etwas gehört hat!
Da drauf - extern, minimiert und komprimiert - gutes CSS! Man kann auch Stylesheets oder Layout dazu sagen. Und das CSS rendert von oben über das HTML, und dann lernen sie sich kennen und dann tun sie sich zusammen - denn sie wissen, gleich gibt's noch richtig was auf's Dach.
Und dann! Das ist jetzt ganz wichtig, Zettel raus, Stifte und mitschreiben - BITTE! Und dann...! Unobtrusive, buchstabiert U-N-O-B-T-R-U-S-I-V-E, JavaScript! Die Zeiten von Inline-Events sind vorbei!
Die müssen sauber voneinander getrennt sein! HTML und CSS bilden Gerüst und Layout der Seite und JavaScript fügt eine Logik-Schicht hinzu. Und dann gibt das eine Technologieexplosion, die einem die Zähne aus dem Hals bläst, wenn sie nicht ordentlich verschraubt sind!
DAS IST GUT! Seit Jahren ist das so gut! Das sind Webstandards!
Bis... zu diesem furchtbaren Tag... an dem so ein mental verotteter Grafiker (sorry, Jungs) DA FLASH DRAUFGEMACHT HAT, UND GRAFISCHE HEADLINES, UND VERLÄUFE UND OHNE ENDE SCHLAGSCHATTEN! DU HAST DAS GEFÜHL, DU BLICKST AUF EINE SCHIESSBUDE! DAS HAT DOCH MIT EINER WEBSEITE NICHTS ZU TUN! ICH WERDE NOCH WAHNSINNIG!
ICH... ich bin für den Einsatz des Militärs im eigenen Land! Die Soldaten sollen die Grafiker unter vorgehaltener Waffe dazu zwingen, ihre eigenen Webseiten mit einem Screenreader zu bedienen! Ein Grafiker soll morgens ins Büro kommen, eine anständige Webseite layouten und wieder nach Hause gehen - ist das denn so schwer ?!?
Das mache ich fast jeden Tag - könnt ihr euch das vorstellen? Das ich das gesundheitlich überhaupt mitmache! Auf der anderen Seite finde ich, dass ein so durchaus technologielastiges Blog wie dieses so einen Hauch von Emotion durchaus verträgt. Auf der anderen Seite fragt sich der eine oder andere Leser diese Artikels jetzt vielleicht... Was - hat - der - Mann?
RECHT HAT ER!!!
Danke an Andi und Matthias, die zum Teil unter dem Einsatz alkoholischer Getränke ihren Beitrag geleistet haben 
Content Delivery Server online!
Seit gestern werden auf der United Internet AG Website sämtliche Grafiken über einen Content Delivery Server ausgeliefert. Dieser komplettiert das Puzzle an Optimierungen, welches die Performance unserer Shops verbessern soll.
Folgende Features wurden in der ersten Phase implementiert:
- Far Future Expires Header (mehr Infos bei Yahoo!)
- Umschreiben der Grafikpfade auf eine Hashtag-Version
- Cookiefreie Domain (mehr Infos bei Yahoo!)
- Mehr parallele Downloads dank verschiedener Subdomains (mehr Infos bei Yahoo!)
Zum zweiten Feature habe ich keine gute Quelle im Netz gefunden. Es geht hierbei um das Problem, dass eine Grafik mit Expires Header ohne Conditional GET aus dem Cache geladen wird. Was prinzipiell erwünscht ist wird zu einem Problem, wenn eine veränderte Version dieser Grafik gepublished wird. Um dann trotzt des Expires Headers ein Neuladen zu erzwingen, ist eine veränderte Grafik-URL nötig. Für gewöhnlich kann man sich zwischen einer Versionierung und einem Hash Tag entscheiden. Letzteres erschien uns praktikabler, da ein Hash Tag vergleichsweise einfach implementiert werden kann. Facebook hat das gleiche Verfahren gewählt, Amazon dagegen setzt auf eine Versionierung der Dateinamen.
Eine Vorher-Nachher-Analyse belegt die Verbesserungen eindrucksvoll. Obwohl auf der Website vergleichsweise wenige Grafiken eingebunden werden, werden die Seiten beim 1. Request (dank 8 statt 2 parallelen Downloads) 25% schneller geladen. Beim 2. Request ist dank des optimalen Cache-Verhaltens eine Zeiteinsparung von fast 40% messbar. Es gibt diverse Studien, die eine verbesserte User Experience durch schnelle Ladezeiten belegen. Beispielhaft sei auf einige Statistiken der letzten Velocity verwiesen.
Im Verlauf der nächsten Monate werden wir den CDS in die sehr viel grafiklastigeren Shops integrieren und die Verbesserungen in diesem Umfeld dokumentieren. Man darf gespannt sein.
Für die Zukunft sind weitere Features geplant. So soll mit den Daten des CDS ein "selbstlernendes" Image Prefetching gebaut werden. In einem weiteren Schritt könnte der CDS zu einem Content Delivery Network ausgebaut werden, um statische Ressourcen weltweit mit möglichst geringer Latenz auszuliefern.
Darauf hoch die Tassen!
Speaker auf dem PHP World Kongress 2010
Ich werde am 9. November auf dem PHP World Kongress einen Vortrag zur Verbesserung der Website Performance halten.
Abstract
Wie verbessere ich die Ladezeiten meiner Websites und welche Vorteile ergeben sich daraus? Auf der Basis allgemeingültiger Regeln werden in diesem Vortrag Lösungen vorgestellt, wie sie im Umfeld der 1&1 Shopsysteme entstanden sind. Es wird weiterhin erläutert, wie zentralisierte Technologien dafür sorgen können, dass diese Optimierungen projektübergreifend angewendet werden, Kennzahlen erhoben und mögliche Schwachstellen identifiziert werden können.
Promote JS! Better Docs For Us, By Us!
Speaker auf der WebTech 2010
Am 13. Oktober werde ich auf der WebTech 2010 einen Vortrag zum Thema "Frontend-Architektur der 1&1-Bestellsysteme" halten.
Abstract
Die Anforderungen an eine Frontend-Architektur sind vielfältig. Neben der Organisation und Modularisierung von HTML, XML, CSS, JavaScript und Grafiken stellen Performance- und Suchmaschinenoptimierung, Ermittlung von Kennzahlen, Coding Guidelines und Qualitätssicherung ganz besondere Herausforderungen dar. In der Session wird gezeigt, wie 1&1 ihre Bestellsysteme darauf ausgerichtet hat.
Gast-Beitrag im Webstandard-Blog
Im Webstandard-Blog ist heute mein Gast-Beitrag Onpage-Optimierung - Möglichkeiten und Grenzen erschienen. Ich versuche darin zu verdeutlichen, dass Onpage-Optimierung keine Ranking-Wunder vollbringen kann, sondern eher als Basis einer vielmehr besucherzentrierten, informativen und relevanten Website zu verstehen ist.
Archive
- Februar 2012 (1)
- Oktober 2011 (1)
- August 2011 (2)
- April 2011 (1)
- Oktober 2010 (6)
- September 2010 (5)
- August 2010 (3)
- Juli 2010 (2)
- Juni 2010 (3)
- Mai 2010 (9)
- April 2010 (8)
- März 2010 (13)
- Februar 2010 (10)
- Januar 2010 (11)
- Dezember 2009 (8)
- November 2009 (6)
- Oktober 2009 (10)
- September 2009 (9)
- August 2009 (12)
- Juli 2009 (16)
- Das Neueste ...
- Älteres ...
