Referenzen

Mittwoch, 1. September 2010

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.

Geschrieben von Nico Steiner in Referenzen um 00:35 | Kommentare (0) | Trackbacks (0)

Montag, 30. August 2010

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

Geschrieben von Nico Steiner in Referenzen um 22:20 | Kommentare (0) | Trackbacks (0)

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!

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

Dienstag, 3. August 2010

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.

Geschrieben von Nico Steiner in Referenzen um 22:33 | Kommentar (1) | Trackbacks (0)

Donnerstag, 22. Juli 2010

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.

Geschrieben von Nico Steiner in Referenzen um 22:02 | Kommentare (0) | Trackbacks (0)

Donnerstag, 1. Juli 2010

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)

Geschrieben von Nico Steiner in Referenzen um 08:28 | Kommentare (0) | Trackbacks (0)

Sonntag, 13. Juni 2010

Vortrag auf dem nächsten PHP Usergroup Treffen

Ich werde mit Frank am 29. Juni noch einmal den Vortrag Frontend-Performance mit PHP halten. Wer Interesse hat, kann sich im PHP Usergroup Forum über das Treffen informieren und sich dort auch anmelden.

Thema: Frontend-Performance (mit PHP) von Nico Steiner & Frank Kleine
Datum: Dienstag den 29. Juni 2010, 19 Uhr
Location: Hochschule Karlsruhe
Gebäude M, 3. Obergeschoss, Raum 302

Die Veranstaltung ist kostenlos.

Geschrieben von Nico Steiner in Referenzen um 18:22 | Kommentare (0) | Trackbacks (0)

Donnerstag, 3. Juni 2010

International PHP Conference Spring Edition

Die letzten Tage nahm ich zusammen mit Stephan und Frank an der IPC in Berlin teil. Parallel dazu fand die Webinale statt, die wir ebenfalls besuchen konnten. Nach Shopping, Hooters, Sonne, Bier und Lena am Samstag ging es am Sonntag nach einer Stadtrundfahrt mit einem Workshop los. Am Montag startete dann die eigentliche Konferenz - die Session zu Augmented Editorial Design war an diesem Tag für mich das Highlight - Julian Koschwitz hat sehr anschaulich vermittelt, wie diese Technik eingesetzt werden kann. Anhand von Markern in Print-Magazinen (ähnlich einem QR-Code) werden digital Zusatzinformationen in das Magazin eingebettet, sobald man dieses mit Hilfe einer Webcam durch einen Flash-Film betrachtet. Am Montag hielt ich zusammen mit Frank eine Session zur Performance von Websites und entsprechenden Möglichkeiten in PHP. Am Abend gings dann zur obligatorischen Konferenz-Party. Da ich am nächsten Morgen kaum aus dem Bett kam, schaffte ich es nur mit Verspätung zur Präsentation von Stefan Fischerländer zu Kennzahlen der Suchmaschinenoptimierung. Die von ihm erwähnten Fakten waren für mich zum Großteil komplett neu und sehr interessant. Ich hatte mich bisher immer nur auf das für meinen Job relevante Gebiet der On-Page-Optimierung konzentriert. Was es da jedoch für tolle Möglichkeiten der Messung von eventuellen Verbesserungen gibt, war mir nicht bewußt.

Enttäuschend waren Ich® – Die eigene Identität als Marke und die Session zu zukünftigen Features von CMS. Da hatte sehr viel mehr erwartet.

Geschrieben von Nico Steiner in Referenzen um 23:16 | Kommentare (0) | Trackbacks (0)