Nico Steiner - Frontend-Entwicklung und -Architektur

Mittwoch, 9. Juli 2008

Qualität deutlich verbessert!

In der letzten Zeit hat sich die Qualität des Frontend-Codes - vor allem des Markups - bei einigen 1&1-Projekten deutlich verbessert. Zu verdanken ist dies einer gewissen Sesibilisierung für dieses Thema von meiner Seite, vor allem aber der Aufgeschlossenheit der Kollegen im Website-Management, welche die Seiten ja letztendlich produzieren.

Am Beispiel der DSL-Startseite möchte ich ein paar Punkte ansprechen, die sich in diesem Zusammenhang verbessert haben. Leider fehlen mir entsprechende Negativ-Beispiele aus alter Zeit - genug davon gab es jedenfalls.

Semantik
Die Layouts mit den sinngebensten HTML-Elementen im Markup abbilden - das gelingt mittlerweile an vielen Stellen perfekt. Hier ein paar Beispiele.





Durchgängige Headline-Hierarchie
Auch hier eine perfekte Umsetzung.



Valider Code
Auch dieses wichtige Qualitätsmerkmal zieht sich durch die gesamten Produktseiten.



Last, not least
Weiterhin ist auf allen Seiten ein korrekter Doctype angegeben, das CSS ist weitgehend fehlerfrei und durch die projektweite Integration einer reset.css entfallen die lästigen browsereigenen Styles.

Geschrieben von Nico Steiner in Referenzen um 17:38 | Kommentare (0) | Trackbacks (0)

Reiter-Navigation für Hosting US

Mit Einführung des neuen 1&1 MailXchange bei Hosting US werden dessen neue Features in unterschiedlichen Boxen beworben. Diese Boxen können über eine Reiter-Navigation ein- bzw. ausgeblendet werden.



Es war meine Aufgabe, diese Reiterfunktionalität mit JavaScript auf beliebiges Markup abbildbar zu machen. In der Praxis sieht das so aus, daß verschiedene Reiter-Elemente initialisiert und diesen Elementen Bereiche zugeordnet werden. Wird ein Reiter gehovert bekommt er eine bestimmte CSS-Klasse. Wird er geklickt, wird dieser Reiter als aktiv markiert und der zugehörige Bereich wird eingeblendet. Alle anderen Bereiche in diesem Reiter-Verbund werden zeitgleich ausgeblendet.

Weiterhin ist es möglich, die Reiter periodisch in einem definierten Interval anzusteuern. Diese Animation startet mit Laden der Seite.

Geschrieben von Nico Steiner in Referenzen um 15:58 | Kommentare (0) | Trackbacks (0)

Flash mit Light-Box

Im Zuge der neuen DSL-Kampagne wird der 1&1 HomeServer in einem Flash-Film beworben. Dieser Flash-Film öffnet sich in einer Light-Box.



Mein Beitrag war die Programmierung eines fexiblen Light-Box-Moduls basierend auf der YUI-Library. Weiterhin habe ich ein JavaScript-Modul entwickelt, welches das Einbinden von Flash-Filmen vereinfachen und innerhalb unserer Abteilung standardisieren soll. Zusätzlich dazu wird ein externes Script zum Prüfen der Flash-Verfügbarkeit und -Version genutzt.

Geschrieben von Nico Steiner in Referenzen um 14:47 | Kommentare (0) | Trackbacks (0)

Skip Navigation Links

Inspiriert von einem Artikel von Jim Thatcher habe ich unseren BA-Studenten Matthias Wenz gebeten, die in dem Artikel beschriebene Technik auf den Seiten von 1&1 DSL und 1&1 Mobile Internet einzubauen.

Mit Hilfe dieser Links ist es möglich, nachfolgende Inhalte der aktuellen Seite direkt anzuspringen. Der Nutzen entsteht bei der Bedienung der Seite über die Tastatur mittels Tab-Taste oder bei einer Navigation der Seite mit einem textbasierten Browser oder einem Screenreader.



Matthias hat in seinem Blog einen eigenen Artikel zu dieser Arbeit geschrieben.

Geschrieben von Nico Steiner in Referenzen um 14:05 | Kommentare (0) | Trackbacks (0)