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.
Zoompf 2010 State Of Web Performance Report
Ich hatte den Link gestern bereits getwittert, möchte aber auch hier nochmal auf diesen interessanten Report hinweisen (es ist die Angabe einer E-Mail-Adresse nötig). Zoompf hat nicht nur die 1000 populärsten US-Websites auf typische Performance-Kriterien hin untersucht, sondern auch lesenswerte Schlüsse aus den daraus enstandenen Statistiken gezogen. Ursachen für die schlechte Performance von großen Websites sind laut dem Report zum einen fehlende Lösungen für eine durchgängige Anwendung von Optimierungen auf die gesamte Infrastruktur und zum anderen fehlende Werkzeuge, um sämtliche Webseiten eines Top-1000-Unternehmens auf mögliche Schwachstellen zu durchleuchten und nachhaltig zu überwachen.
Ich hatte auf diese Punkte bereits vor ca. einem Jahr in einem Blog-Post hingewiesen und wir haben seit damals kontinuierlich an der Lösung dieser Probleme gearbeitet. Wenn ich mir die Liste von damals jetzt durchlese, stelle ich erfreut fest, dass viele der Dinge schon geschafft sind - einige wirklich große Brocken stehen noch aus. Mal sehen, was die nächsten Wochen so bringen 
Vortrag auf dem 1&1 Developer Day
Ich werde nächsten Dienstag auf dem 1&1 Developer Day einen Vortrag zu unserer Frontend-Architektur halten. Dieser Vortrag dient unter anderem als Vorbereitung auf die WebTech Conference in Mainz, auf der ich zu einem ähnlich Thema reden werde. Diese Woche wird wohl komplett für die Vorbereitungen draufgehen. Eine Story steht schon - analog auf einem großen Blatt Papier. Jetzt geht es an das Zurechtschneiden von Screenshots, Anfertigen von Statistiken, Suchen passender Fotos und Grafiken etc. Zum Schluß steht dann die Übertragung in Powerpoint an. An dieser Stelle sei nochmals auf die Bücher slide:ology, ZEN oder die Kunst der Präsentation und Bekenntnisse eines Redners hingewiesen - in diesen Büchern findet man viel Wissenswertes zum Thema Vorträge und Präsentationen.
Außerdem geht es nächsten Montag zum 5. Webmontag Talk nach Mannheim. Björn Seibert hat mich mit einer Einladung über XING darauf aufmerksam gemacht.
Im Oktober steht vor der WebTech noch eine Reise nach Amsterdam zur Fronteers 2010 an. Der Veranstaltungsort ist wie immer total beeindruckend. Diesmal haben PPK und seine Jungs das Pathé Tuschinski ausgewählt - das Gebäude ist schon von außen eine Wucht - aber drinnen wird's dann richtig abgefahren!
Unit Tests mit XPath
Seit einigen Tagen setzen wir ein neues System zur Verbesserung der Qualität unserer Source-Codes ein. Wir testen mit Hilfe eines Saxon-Processors unsere Apache Maven-Module auf Verstöße gegen interne Coding Richtlinien. Genauer wenden wir auf alle XML-Dokumente eines Shops XPath-Ausdrücke an, welche sich grundsätzlich in eine der Kategorien notAllowed und isNeeded unterteilen lassen.
So sind beispielhaft folgende XPath-Ausdrücke der Kategorie notAllowed zugeordnet:
- //@style (Inline-Styles sind nicht erlaubt)
- //pfx:blank (Template zum Erzeugen eines Blank-Gifs ist nicht erlaubt)
- //br/br (Breaks zum Erzeugen von "Absätzen" sind nicht erlaubt)
Weitere Unarten wie Inline-Events und die Verwendung von Attributen wie clear oder align fallen durch eine sukzessive Umstellung aller Projekte auf den DOCTYPE HTML 4.01 Strict mit Hilfe der HTML Validator Extension auf.
Kandidaten für die Kategorie isNeeded sind interne Link-Parameter wie
- //shop:button/@linkId
- //shop:button/@linkType
Dabei sind diese Tests nicht auf valides Markup ausgerichtet, sondern setzen auf einem höheren Level des Markupdesigns und der richtigen Verwendung von internen Templates an.
Generell lassen sich die XPath-Regeln pro Shop individuell festlegen. Integriert ein Shop Templates aus einem Modul, integriert dieses Modul die Regeln zur richtigen Verwendung seiner Templates automatisch.
Popups im Browserfenster mit Rahmen öffnen
Wenn Popups über das Kontextmenü in einem neuen Tab geöffnet oder über Suchmaschinen gefunden werden, kann es zu dem Problem kommen, dass keine Verlinkung zur Startseite der Website existiert und das Popup somit eine Sackgasse darstellt. Besonders im Fall der Suchmaschinen-Verlinkung kann dies sehr ärgerlich sein, da einem potentiellen Kunden der Weg zum Angebot der Website versperrt bleibt.
Wir haben dieses Problem gelöst, indem wir mit JavaScript die Existenz von window.opener prüfen. Ist dieses Objekt nicht vorhanden, wurde die Webseite nicht im Popup geöffnet sondern wird im Browserfenster angezeigt. Über eine zusätzliche Klasse auf dem body-Element wird in diesem Fall ein umgebender Rahmen eingeblendet, welcher das ursprüngliche Popup als Webseite mit Hauptnavigation erscheinen läßt.
1&1 SmartPad als Popup
1&1 SmartPad als Webseite
Dies setzt vorraus, dass die Popups eine einheitliche Struktur aufweisen und im Idealfall die selben Dimensionen besitzen. Zur Demonstration habe ich das entsprechende Popup direkt verlinkt und eine Google Suchanfrage formuliert, welche das Popup (hoffentlich an erster Stelle) als Treffer anzeigt.
Mobile Internet Redesign
Heute ist 1&1 Mobile Internet in einem neuen Gewand online gegangen. Damit sind fast alle 1&1 Neukundenshops auf das neue Layout umgestellt. Nicht nur optisch hat sich einiges getan - wir haben die Umstellung dazu genutzt, Benennungen und Ordnerstrukturen für Grafiken und CSS zu vereinheitlichen. Dadurch konnten jede Menge alte Grafiken und Styles gelöscht werden. Auch bei diesem Design wurde darauf geachtet, gesharte Ressourcen modular vorzuhalten und zentral als Maven-Modul für alle Shops bereitzustellen. Obwohl die neuen Layouts sehr grafiklastig sind, findet sich unter der Haube schlankes, semantisches, zugängliches Markup, das mit einem Strict-Doctype valide ausgeliefert wird. Die grafischen Headlines wurden mit Image Replacement und die Buttons und Tabs mit der Sliding Doors Technik realisiert. Die Seiten sind trotz der Größe ihrer Ressourcen sehr performant. Das CSS ist modular aufgebaut, setzt gespritete Grafiken sinnvoll ein und kommt zu einem Großteil ohne Hacks und !important Regeln aus.
Mobile Internet (neu)
Mobile Internet (alt)
Archive
- März 2012 (3)
- 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)
- Das Neueste ...
- Älteres ...
