michael-van-laar.de/blog

Getting nix done: Dieses Chaos muss ein anderes werden

Michael van Laar — Mon, 14 Mar 2011 12:13:43 +0100

Schon seit Wochen, eigentlich eher seit Monaten, habe ich das Gefühl, zu Hause nichts auf die Reihe zu bekommen. Es gibt viel zu tun, ich nehme mir viel vor – aber es will einfach nichts fertig werden. Dabei bin ich eigentlich ein sehr organisierter Mensch. Sowohl im Büro als auch privat setze ich David Allens „Getting Things Done“-Methode ziemlich konsequent um. Was im Berufsleben gut klappt, scheitert im Privatleben allerdings vor allem an der zur Verfügung stehenden Zeit.

Auch die beste Produktivitätsmethode kann leider nicht den 48-Stunden-Tag herbeiführen. Und das mit dem Delegieren funktioniert zu Hause auch nicht. Daraus folgt: Prioritäten setzen und bestimmte Dinge unerledigt lassen, ist die einzig verbleibende Möglichkeit. Das ist jedoch ebenfalls unbefriedigend, denn ich hasse es, Dinge unerledigt liegen lassen zu müssen. Um also nicht ständig mit einem schlechten Gewissen herumlaufen zu müssen, muss etwas passieren.

Schritt 1: Bestandsaufnahme

Es mag für viele Leser mehr als nur ein wenig befremdlich wirken, aber für die nächsten Wochen und Monate werde ich eine lückenlose Zeiterfassung betreiben. Nicht nur für meine beruflichen Aktivitäten, sondern immer und überall. Egal ob Frühstück, Schlaf oder Frühjahrsputz – alles wird erfasst. Ich möchte nämlich genau wissen, wofür meine Freizeit draufgeht. Denn für eine realistische Einschätzung, was überhaupt möglich ist, ist es unumgänglich, sein verfügbares Zeitbudget zu kennen.

Für diese Zeiterfassung nutze ich Toggl, einen praktischen und vor allem sehr einfach zu bedienenden Webservice. Die Zeiterfassung erfolgt dabei wahlweise auf der Website, mithilfe eines kleinen Desktop-Programms oder per iPhone-App. Die kostenlose Variante reicht für meine Zwecke vollkommen aus. Zeiteinträge lassen sich Kategorien zuordnen und mit Tags versehen. Verschiedene Reports sorgen für den nötigen Überblick.

Schritt 2: Erwartungen herunterschrauben

Das permanente Gefühl, nicht hinterherzukommen, rührt vor allem daher, dass ich Dinge nicht schaffe, die ich mir vornehme. Die einzige Möglichkeit, diesem schlechten Gewissen Herr zu werden, ist das Gar-nicht-erst-Vornehmen von Aufgaben. Dazu habe ich eine Tabelle mit einem idealisierten-Wochenzeitplan aufgestellt. Auf Basis der Zeiterfassung wird dieser später noch ein wenig angepasst.

Diese Übersicht ist kein starrer Terminplan, den es einzuhalten gilt. Das ist weder möglich noch sinnvoll. Ziel der Zeitaufstellung ist es, die verfügbaren Freiräume einschätzen zu können. Denn es bringt nichts, wenn ich mir vornehme, jeden Abend zwei Stunden an meiner Musik zu basteln, wenn ich nach realistischer Abschätzung überhaupt nur eine Stunde Freizeit pro Abend habe.

Aktuell sieht es so aus, dass ich einige meiner täglichen Vorsätze wohl auf unbestimmte Zeit verschieben muss. Wochentags habe ich maximal eine Stunde Freizeit pro Abend. Pro Wochenende sind maximal fünf Stunden für Hobbys drin – allerdings auch erst, wenn unsere Wohnung fertig eingerichtet ist. Da werden der Relaunch von michael-van-laar.de, die Neuauflage von marketingblogger.de, das Spanischlernen, die Musikproduktion und noch einiges mehr wohl noch auf ihre Realisierung warten müssen.

Schritt 3: Umsetzung mit GTD

Nach wie vor werde ich für die Erreichung meiner verbleibenden Ziele das GTD-System nutzen. Als GTD-Werkzeug nutze ich Toodledo, einen Webservice zur Aufgabenverwaltung, der sehr stark auf die GTD-Methodik ausgerichtet ist. Obwohl die Weboberfläche alles andere als schick ist, kann ich Toodledo jedem empfehlen, der das GTD-System mit elektronischer Hilfe umsetzen möchte. Auch für Toodledo gibt es eine praktische iPhone-App. Aufgabenlisten, Kontexte und Ziele der verschiedenen Stufen (kurzfristig, langfristig und lebenslang) lassen sich damit bequem von Unterwegs verwalten.

Meine erste Website auf Basis von MODX Revolution ist online

Michael van Laar — Mon, 28 Feb 2011 21:14:24 +0100

Noch beinhaltet meine eigene Website keinen Portfolio-Bereich. Deswegen nutze ich einfach das Blog, um ein paar Sätze über mein erstes MODX-Revolution-Projekt zu verlieren. (Und ja, MODX schreibt man jetzt wirklich nur noch in Großbuchstaben.) gerhardillig.de ist die Website meines ehemaligen Kollegen Gerhard Illig. Er ist Grafik-Designer und hat seine Agentur Anfang 2011 umfirmiert. Neuer Name, neue Geschäftsausstattung, neue Website.

Die Website ist zwar kein Hexenwerk, in mancherlei Hinsicht jedoch kein 0815-Standardprojekt – zumindest im Vergleich zu meinen anderen Webprojekten. Auch zeigt sich hier sehr schön, wie einfach und benutzerfreundlich Sonderwünsche mit dem flexiblen CMS MODX Revolution umgesetzt werden können.

Das Layout

Als Grafiker hat es sich der Hausherr der neuen Website natürlich nicht nehmen lassen, selbst ein Layout zu entwerfen. Er hat seine Wurzeln im Print-Design. Das war dem Entwurf auch deutlich anzumerken. Allerdings meine ich das ausnahmsweise einmal nicht negativ. Ganz im Gegenteil: Es war eine interessante Herausforderung. Für einen Print-Designer ist es selbstverständlich, eine in ihren Ausmaßen klar definierte Fläche zu gestalten und dabei den gesamten zur Verfügung stehenden Platz zu nutzen. Auf diesem Prinzip basierte auch Gerhard Illigs Webdesign-Entwurf. Das Layout sollte den Viewport immer komplett ausfüllen.

Original-Entwurf als PDF

Der Entwurf sah als PDF im DIN-A4-Format gut aus. Doch musste ich mir nun überlegen, wie aus diesem starren Entwurf ein Website-Layout werden sollte, das sich flexibel an die verfügbare Darstellungsfläche anpasst. Wie man an der fertigen Website sieht, habe ich mich für eine Art halbflexibles Layout entschieden. Die Breite der linken Spalte sowie die Höhe der Navigationsleiste skalieren nicht mit der Viewport-Größe. Denn das hätte folglich auch skalierende Schriftgrößen bedeutet, um die Proportionen zu erhalten. Der Einsatz der Schriftart TitilliumText als Webfont wäre durch solche variablen Schriftgrößen allerdings zum unkalkulierbaren Darstellungsrisiko geworden – zumindest bei der Betrachtung mit einem Windows-Browser. Denn nicht jeder Schriftschnitt wird unter Windows in jeder Größe sauber dargestellt. Abgeschnittene oder zugesumpfte Buchstaben sind aber gerade auf der Website eines Designers völlig inakzeptabel.

Das HTML-/CSS-/JavaScript-Grundgerüst

Basis für die Templates war eine an meine Bedürfnisse angepasste und erweiterte Version des HTML5 Boilerplates. Die neuen semantischen Elemente sind bisher jedoch die einzigen HTML5-Features, die Verwendung fanden. Wo immer es möglich war, habe ich statt der Verwendung von Bildern auf die entsprechenden CSS3-Features gesetzt. Damit die verschiedenen Internet-Explorer-Versionen die Seite halbwegs richtig anzeigen können, kommt CSS3PIE zum Einsatz. In vielen Fällen ließ es sich jedoch nicht vermeiden, halbtransparenten PNGs zu nutzen, um das CSS3-Unverständnis des Internet Explorers zu umschiffen. Für die vertikale Ausrichtung der etwas helleren Streifen im unteren Teil der linken Spalte war die „Sticky Footer“-Technik von Ryan Fait hilfreich. Das Dropdown-Menü der Hauptnavigation ist eine angepasste Variante der „Son of Suckerfish“-Dropdowns von Patrick Griffiths und Dan Webb.

Besonderes Kopfzerbrechen hat mir erwartungsgemäß der Internet Explorer 6 bereitet. Einer der Knackpunkte war die Tatsache, dass der IE6 mit der CSS-Angabe „position: fixed“ bekanntermaßen nichts anfangen kann. Das ist bei einem Layout, das großenteils nur durch diese Angabe überhaupt funktioniert, ein wenig ungünstig. Zwar gibt es im Netz eine ganze Reihe Workarounds. Doch die meisten von ihnen waren für meine Bedürfnisse entweder gar nicht geeignet oder zu unflexibel. Letztlich habe ich dann doch eine annehmbare Styling-Variante für den Internet-Explorer hinbekommen. Mit kleinen Schönheitsfehlern, wie dem endlos anwachsenden Vertikalen Scrollbalken, müssen die wenigen Prozent der Besucher, die noch mit diesem Browser-Dinosaurier im Netz unterwegs sind, ganz einfach leben.

Eines der wichtigsten Template-Features ist die vollflächige Darstellung eines Bildes, das den größten Teil des Viewports einnimmt. Zu diesem Zweck habe ich das „POKE Posterwall“-Skript von Mattias Gunneras angepasst und ein wenig weiterentwickelt. Das angepasste Skript kann

… ein Bild so skalieren und positionieren, dass es den verfügbaren Platz des Viewports, abzüglich der linken Spalte komplett ausfüllt.
… „Beschnittvorgaben“ berücksichtigen. Ein Website-Redakteur kann im CMS für jedes Bild einstellen, wo innerhalb des Bildes das Hauptmotiv platziert ist. Dazu stehen neun Auswahlmöglichkeiten bereit: „links oben“, „Mitte oben“, „rechts oben“ usw. (siehe Screenshot unten). Das Skript berücksichtigt dies und positioniert das skalierte Bild dementsprechend. Auf diese Weise ist sichergestellt, dass das Hauptmotiv des Bildes immer sichtbar ist, auch wenn Teile des Bildes aufgrund des Viewport-Seitenverhältnisses „abgeschnitten“ werden müssen.
… auf Wunsch das Bild so skalieren, dass es den verfügbaren Darstellungsbereich nicht vollflächig ausfüllt, sondern innerhalb dieses Bereiches so groß wie möglich, aber in jedem Fall vollständig dargestellt wird. Diese Option ist ebenfalls pro Bild über das CMS auswählbar (siehe Screenshot unten). Sie ist nützlich, wenn es sich bei einem Bild nicht um ein Foto handelt, sondern um ein freigestelltes Objekt vor einem einfarbigen Hintergrund. Ohne die Zusatzoption könnte es ansonsten passieren, dass das freigestellte Objekt je nach Viewport-Größe teilweise angeschnitten dargestellt oder von der Navigationsleiste überlagert werden würde. Das sähe jedoch nicht gut aus.

Einer der individuellen Tabs als Teil des Pflegeformulars im MODX-Backend

Ein hübsches technisches Detail ist auch der Störer, der auf jeder Seite über dem Bild liegt. Die Farbe des Störers sollte als Teil der benutzerdefinierten Farbschemen flexibel über das CMS einstellbar sein. Um dies zu ermöglichen, wird das Hintergrundbild des Störers dynamisch generiert. Mithilfe der MODX-Erweiterung phpThumbOf entsteht aus einer Graustufenversion des Störer-Hintergrundbildes und dem vom CMS bereitgestellten Farbwert eine eingefärbte Variante.

phpThumbOf ermöglicht aber nicht nur die komfortable Nutzung der PHP-Bibliothek phpThumb innerhalb von MODX-Templates. Die Erweiterung bringt auch gleich ihr eigenes Cache-Management mit. Die farbigen Bilder werden also nicht bei jedem Aufruf neu generiert, sondern nur bei einer Änderung des Farbwertes. Der Schatten des Störers ist übrigens ein eigenes Bild, denn das zusätzliche Hineinrechnen in das eingefärbte Hintergrundbild per phpThumbOf hat in meinen Tests nicht richtig funktioniert.

Die Umsetzung mit MODX Revolution

Einer der größten Vorteile von MODX ist seine Flexibilität. Mit zusätzlichen Eingabefeldern und Anpassungen an den Formularen für die Pflege der Seiteninhalte lassen sich individuelle und exakt an die Besonderheiten der Website angepasste Pflegeoberflächen schnell und einfach aufbauen.

Sämtliche Formulare zur Pflege der Seiteninhalte im Backend von gerhardillig.de sind angepasst oder komplett individuell gestaltet. In Kombination mit dem recht mächtigen Rechte- und Rollensystem lassen sich Benutzeroberflächen schaffen, die auf die Zugriffsrechte, den Wissensstand und die typischen Aufgaben verschiedener Backend-Benutzertypen abgestimmt sind.

In Farbe und bunt

Ein Beispiel für die Backend-Anpassung ist die Verwaltung der auf gerhardillig.de verwendeten Farbschemen. Das Layout sah vor, dass die vier Farben der linken Spalte sowie die Farben des sternförmigen Störers und des Störertextes nicht Website-weit einheitlich sein sollten. Vielmehr sollte ein Website-Redakteur die Möglichkeit haben, ein Set von Farbschemen sowohl zu pflegen als auch neue Farbschemen anzulegen. Diese Farbschemen wiederum sollten als Auswahlmöglichkeiten für die Konfiguration der einzelnen Referenzprojekte bzw. der einzelnen Inhaltsseiten (wie „Agentur“ oder das Kontaktformular) verfügbar sein.

Als Pflegeoberfläche für die verschiedenen Farbschemen dienen ganz normale Seiten in einem separaten Bereich des Seitenbaums (für die MODX-Kenner: ein zweiter Kontext), dessen Inhalte nicht im Frontend der Website auftauchen können. Eine Seite in diesem Bereich hat nicht mehr viel mit einer „normalen“ Seite zu tun. Sie dient vielmehr als eine Art „Datenbank-Eingabemaske“. Für jedes Farbschema gibt es eine eigene Seite. Das ermöglicht einem Website-Redakteur das einfache Erzeugen neuer Farbschemen. Er muss dazu lediglich eine neue Seite innerhalb des Ordners „Farbschemen“ anlegen.

Jede Seite innerhalb des Ordners „Farbschemen“ zeigt statt des normalen Formulars für die Bearbeitung der Seiteninhalte ein individuelles Formular für die Farbschema-Pflege. Dieses individuelle Formular enthält neben einem Feld für den Namen des Farbschemas die benötigten Eingabemöglichkeiten (für MODX-Kenner: Template-Variablen) für die sechs Farben. Die Farbeingabefelder sind zusätzlich mit einem hübschen Colorpicker ausgestattet.

Individuelles Formular zur Pflege der Farbschemen

Die Pflegeformulare der sichtbaren Seiten enthalten ein Auswahlfeld, das alle aktuell verfügbaren Farbschemen auflistet. Auf diese Weise werden die Farbschemen den sichtbaren Seiten der Website zugewiesen. Die Farbinformationen fließen als Inline-Styles in die HTML-Templates ein. Zwar hätte ich auch aus einem statischen Basis-Stylesheet und einem variablen Teil, der die notwendigen CSS-Anweisungen für die Farbschemen enthält, dynamisch die finale CSS-Datei zusammenstellen lassen können. Aber für ein paar Hex-Codes erschien mir dieser Aufwand dann doch nicht gerechtfertigt. Außerdem hätte es wahrscheinlich Reibereien mit dem Smartoptimizer gegeben, der CSS- und JS-Dateien vor der Auslieferung noch einmal komprimiert und ggf. zusammenfasst.

Projektchen wechsel dich

Die Startseite von gerhardillig.de zeigt bei jedem Aufruf zufallsgesteuert ein anderes Projekt. Dabei ändert sich die komplette Seite. Natürlich lässt sich der Projekt-Pool, aus dem der Zufallsgenerator ein Projekt für die Darstellung auswählt, im Backend über ein individuell angepasstes Formular einstellen.

Individueller Tab im MODX-Backend zur Projektauswahl für die Startseite

Anmerkung für MODX-Kenner: Bei der Erstellung des Startseiten-Templates kam es mir sehr gelegen, dass MODX Revolution im Gegensatz zur Vorgängerversion mit verschachtelten Snippet-Aufrufen umgehen kann. Man muss zwar sehr genau aufpassen, dass man dabei die Übersicht nicht verliert. Dafür ist es sehr praktisch, direkt im Template das Ergebnis eines Snippet-Aufrufs als Eingabewert für einen anderen Snippet-Aufruf verwenden zu können. In MODX Evolution war hier die Erstellung eines zusätzlichen Hilft-Snippets meist unumgänglich.

Projektzusammenfassungen im RSS-Feed

Auch der RSS-Feed der Website hat ein individuelles Template bekommen. Statt einfach einen RSS-Feed auf Basis der veröffentlichten Seiten erstellen zu lassen, habe ich Projekte zusammengefasst. Jeder Artikel im RSS-Feed beschreibt ein Projekt. Auf eine kurze Projektbeschreibung (die auch auf der Website zu sehen ist), folgt eine Liste mit verkleinerten Ansichten (600 Pixel Breite) aller Bilder, die das Projekt umfasst. Selbstverständlich sind alle Bilder mit den jeweiligen Detailseiten verlinkt, so dass die Großansicht eines Bildes nur einen Klick entfernt ist.

Suchmaschinenoptimierung

Um eine gute Voraussetzung für die On-Page-Optimierung zu schaffen, ist jedes Bild innerhalb eines Projekts als eigene Seite angelegt. Jede einzelne Bildseite lässt sich auf diese Weise separat optimieren. Bei vielen JavaScript-Slideshows werden dagegen entweder alle Bilder in einem Dokument platziert oder dynamisch nachgeladen. Beides erschwert dem Google-Crawler die Arbeit. Ein angenehmer Nebeneffekt der Einzelseiten-Architektur: Jedes Bild kann über eine sprechende URL direkt verlinkt werden.

Über die restliche On-Page-Optimierung werde ich nur wenige Worte verlieren. Der Grund dafür ist die Tasache, dass das extrem minimalistische Layout der Website eine blütenweiße On-Page-Optimierung so gut wie unmöglich macht. Deswegen fällt meine Umsetzung eher in den dunkelgrauen Bereich. Es sei nur soviel gesagt: Durch das Zusammenspiel aus Backend-Anpassungen und Templates erfolgt ein Teil der On-Page-Optimierung automatisch und sehr bequem für Website-Redakteure. Dass solche automatisierten Lösungen im Frontend nicht immer besonders „schön“ aussehen, ist auch klar. Aber wenn strikte White-Hat-Kriterien ohnehin nicht eingehalten werden können, ist das auch schon egal.

Noch sind nicht alle gewünschten Einzelseiten optimiert. Es wird sich zeigen, wie Google später auf das fertige Konstrukt reagieren wird.

To Do

Einige Features warten noch auf ihre Umsetzung:

angepasste Stylesheets für den Ausdruck sowie für die Anzeige auf mobilen Geräten,
eine layoutkonforme Einbindung des Facebook-Like-Buttons,
ein geschützter Kundenbereich.

Aber alles zu seiner Zeit. Gut Ding will Weile haben.

Kleines JavaScript-Mashup sorgt für (nahezu) perfektes Webfont-Ladeerlebnis

Michael van Laar — Mon, 15 Nov 2010 23:38:57 +0100

Zwei Dinge haben mich bisher bei der Nutzung von Webfonts gestört: Der FOUT-Effekt („Flash of unstyled text“) in Firefox und Opera sowie die meist nahezu unlesbare Darstellung bei ausgeschalteter Schriftglättung. Ein nur 3 KB (mit gzip sogar nur 1,3 KB) großes JavaScript schafft Abhilfe. Die Credits dafür gehen jedoch nicht an mich, sondern an Paul Irish und Zoltan Hawryluk. Ich habe lediglich beide Lösungen zusammengeführt und minimal angepasst – ganz einfach weil der Gebrauch auf diese Weise praktischer ist.

Teil 1: Schriftglättungserkennung via JavaScript

Beim Webfontday in München erwähnte Olaf Nies in seinem Vortrag eher nebenbei, dass es offensichtlich eine Möglichkeit gibt, per JavaScript festzustellen, ob die Schriftglättung eingeschaltet ist oder nicht. Wenn sie zuverlässig funktioniert, bietet eine solche Lösung natürlich wesentlich genauere und „fairere“ Selektionsmöglichkeit als Gerrit van Aakens Alternativ-Vorschlag, per JavaScript einfach alle Windows-XP-Nutzer, um die es beim Problem mit nicht aktivierter Schriftglättung hauptsächlich geht, gänzlich von der Webfont-Darstellung auszuschließen. Optimal wäre zudem noch die Einschränkung, Webfonts im Bedarfsfall nur Windows-Nutzern mit aktiviertem ClearType zu zeigen, nicht jedoch Besuchern, die mit der „alten“ Graustufenglättung unterwegs sind.

Und siehe da, eine solche JavaScript-Lösung existiert tatsächlich. TypeHelper.js von Zoltan Hawryluk kann durch den geschickten Einsatz von Canvas testen, ob ein Buchstabe geglättet dargestellt wird oder nicht. (Der Internet-Explorer gibt sogar direkt Auskunft, so dass es hier ausnahmsweise einmal einfacher ist als in den anderen Browsern.) Durch eine Verkleinerung des Testbuchstabens lässt sich auf Wunsch sogar die Graustufenglättung von Windows als unzureichende Darstellungsform aussortieren.

Der Einfachheit halber habe ich mich auf die CSS-Nutzungsvariante des Scripts konzentriert. Dabei wird dem html-Element der Seite je nach Testergebnis eine der drei folgenden Klassen angehängt:

.hasFontSmoothing-true = Schriftglättung aktiviert
.hasFontSmoothing-false = Schriftglättung nicht aktiviert
.hasFontSmoothing-unknown = Test nicht durchführbar im Opera-Browser

Mithilfe von CSS lassen sich dann je nach Testergebnis Webfonts für die Darstellung aktivieren oder eben auch nicht.

Was mich am TypeHelper.js-Script jedoch stört, ist die Tatsache, dass standardmäßig für das Anhängen der Klassen an das html-Element Zoltan Hawryluks EventHelper.js herangezogen wird. Dadurch soll erreicht werden, dass die zusätzlich Klasse möglichst frühzeitig an das html-Element angehängt wird. Dafür jedoch im head-Bereich der HTML-Datei noch ein zusätzliches Script (das besagte EventHelper.js) zu laden, von dem ein Großteil des Inhalts für diese Aktion überhaupt nicht verwendet wird und das zudem einen zusätzlichen http-Request erfordert, erschien mir übertrieben. Auf die jQuery-Alternative zu setzen, verbot sich ebenfalls. Denn dann müsste ich die komplette jQuery-Bibliothek bereits im head-Bereich der HTML-Seite laden, was ich ebenfalls nicht wollte.

Also habe ich die notwendigen Teile des EventHelper.js-Scripts und das TypeHelper.js-Script in einer Datei kombiniert. Da meine JavaScript-Kenntnisse noch immer nicht überragend sind, kann es sein, dass ich ein wenig zu viel übernommen habe. Aber dank Minifizierung fällt das jedoch nicht wirklich ins Gewicht. Hauptsache es funktioniert.

Teil 2: FOUT-Kosmetik für Firefox und Opera

Für die vollständige Webfont-Lade-Glückseeligkeit fehlte jetzt nur noch eine Lösung für den „Flash of unstyled text“ (FOUT) in Firefox und Opera. Als erstes kam mir dabei natürlich der Google WebFont Loader in den Sinn. Doch dadurch hätte ich ein weiteres externes JavaScript aufrufen müssen, inklusive zusätzlichem http-Request und DNS-Lookup. Für mich als Ladezeitfetischist nicht tragbar, wenn es auch anders geht – zumal ich ja ohnehin schon das Script zur Schriftglättungserkennung nutze. Die Lösung musste also lokal sein, damit sie einfach unten an das vorhandene Script angehängt werden konnte.

(Prinzipiell bin ich natürlich schon für die Nutzung von Content Delivery Networks. Doch solange Webfonts noch nicht wirklich stark verbreitet sind, dürfte Chance auf einen „ist schon im Cache“-Vorteil beim Google WebFont Loader eher gering sein.)

Glücklicherweise hat Webfont-Experte Paul Irish ein ebensolches Script im Angebot. In seinem Artikel „Fighting the @font-face FOUT“ zeigt er mit wenigern Zeilen JavaScript-Code, wie man im Firefox ab Version 3.5 (und auch nur in diesem Browser) das kurzzeitige Aufblitzen der Fallback-System-Schriftart zwar nicht vermeiden, jedoch kosmetisch überdecken kann. Die gesamte Seite wird dabei so lange verborgen, bis alle Webfonts geladen sind, höchstens jedoch drei Sekunden. Das ist im Allgemeinen ein guter Kompromiss und funktionierte in meinen Tests zufriedenstellend.

Was im Script von Paul Irish allerdings noch fehlte, war die Opera-Erkennung. Denn auch im Opera-Browser zeigt sich das FOUT-Problem. Eine Erkennungsmöglichkeit für Opera 10.0 (seit dieser Version werden Webfonts in vollem Umfang unterstützt) und aufwärts ist mir zwar nicht gelungen. Doch eine Erkennung von Opera 10.5 und aufwärts konnte ich einbauen. Besser als nichts.

Zum Schluss musste ich nur noch die Schriftglättungserkennung und das FOUT-Fighting-Script zusammen in eine Datei packen. Fertig war der super einfach und nahezu universell nutzbare Webfont Load Enhancer.

Download, Konfiguration und Nutzung

Update: Das kleine Projekt ist jetzt auch auf GitHub verfügbar.

(Minimale) Konfiguration

Das Script führt den Schriftglättungstest auf allen Plattformen aus. Allerdings wird es nur bei Windows tatsächlich haarig. Deswegen betrifft die folgende Minikonfiguration auch nur Windows. Auf Macs oder iOS-Geräten erhält man normalerweise immer das Ergebnis „Schriftglättung aktiviert“ – zumindest soweit ich dies getestet habe.

Fall 1: Webfonts sollen bei jeder Art von Schriftglättung angezeigt werden

Standardmäßig kommt das Script zu dem Ergebnis, dass die Schriftglättung aktiviert ist, wenn ein Browser entweder die „alte“ Graustufen-Schriftglättung oder aber das moderne Subpixel-Rendering verwendet. Werden Webfonts nur in großen Größen eingesetzt, beispielsweise für Überschriften, ist das völlig OK. Eine Konfiguration ist nicht notwendig.

Fall 2: Webfonts sollen unter Windows nur bei aktivem ClearType angezeigt werden

Wenn man Webfonts auch für den Fließtext verwendet, kann es sinnvoll sein, sie unter Windows nur anzeigen zu lassen, wenn ClearType (die Subpixel-Rendering-Technologie von Windows) eingeschaltet ist. Um herauszufinden, in welcher Kombination aus Fließtextgröße und Schriftglättungstechnologie der gewünschte Webfont gut oder unansehnlich aussieht, hilft nur Testen. Viel testen (und noch viel mehr testen) ist übrigens immer eine gute Idee, wenn es um Webfonts geht.

Aber zurück zum Thema. Um zu erreichen, dass das Script Windows’ Graustufenglättung (wie gesagt, MacOS und iOS sind davon nicht betroffen) als nicht gut genug für die Webfont-Darstellung einstuft, muss man lediglich webfontloadenhancer.js und/oder webfontloadenhancer.min.js im Texteditor öffnen und eine kleine Suchen-und-Ersetzen-Aktion ausführen. Man ersetzt dabei „32px Arial“ durch „12px Arial“. Das ist alles. Datei(en) speichern und fertig.

(Für alle, die es genauer interessiert: Dadurch wird die Größe des Testbuchstabens geändert. Anhand dieses Buchstabens findet das Script heraus, ob die Schrift in reinem Schwarz-Weiß dargestellt wird, oder ob der Testbuchstabe auch Pixel in anderen Farben enthält. Der Trick besteht nun darin, dass Windows bei aktivierter Graustufenglättung 12px Arial genau so darstellt, als ob gar keine Schriftglättung aktiviert wäre. Im Gegensatz dazu stellen MacOS und iOS den Testbuchstaben immer geglättet dar, egal ob in 32 Pixel oder 12 Pixel Größe. Und das obwohl iOS sogar „nur“ Graustufenglättung beherrscht. Aber nachdem es gut aussieht, ist das kein Problem.)

Diese Konfigurationsidee stammt übrigens von Lars G. Sehested, der sie in einem Kommentar zu Paul Irishs Artikel beschrieben hat.

Installation und Nutzung

Es genügt die Datei webfontloadenhancer.js (nicht minifiziert) oder besser webfontloadenhancer.min.js (minifiziert) mithilfe eines script-Elements im head-Bereich der HTML-Seite einzubinden, direkt über dem CSS-Aufruf.

Die FOUT-Kosmetik für Firefox und Opera funktioniert ohne weiteres Zutun.

Um Webfonts nur in Browsern mit ausreichender Schriftglättung anzuzeigen, muss man ein wenig CSS verwenden. Wie oben beschrieben, fügt das Script dem html-Element eine zusätzliche Klasse hinzu.

Darauf bezugnehmend kann man dann beispielsweise folgendes in sein Stylesheet schreiben:

p {font-family: Arial, Helvetica, sans-serif;}
.hasFontSmoothing-true p {font-family: "Cooler Webfont", Arial, Helvetica, sans-serif;}

Vor- und Nachteile

Vorteile

Funktioniert mit jeder Art von Webfont-Einbindung
egal ob direkt via @font-face, JavaScript oder einer Kombination aus beidem
Fast keine Konfiguration notwendig
Man muss sich beim Laden der Webfonts nicht auf JavaScript verlassen, wenn man dies nicht will.
In diesem Fall gibt man im Stylesheet die Webfonts als Standardfall an und nutzt die .hasFontSmoothing-false-Klasse, um Systemschriftarten für Besucher ohne ausreichende Schriftglättung anzeigen zu lassen. Allerdings muss man in diesem Fall beachten: Für Besucher, die mit der Kombination aus deaktivierter Schriftglättung und deaktiviertem JavaScript unterwegs sind, wird die Website sehr wahrscheinlich ziemlich schlimm aussehen.
Nur 1,3 KB groß, sofern die minifizierte Version mit gzip ausgeliefert wird.
Das ist sogar noch wesentlich kleiner als der Google WebFont Loader (soweit man den Google Webfont Loader nur für die FOUT-Kosmetik verwendet, ansonsten hinkt der Vergleich).
Kein zusätzliches DNS-Lookup
im Vergleich zum Google WebFont Loader, vor allem in Kombination mit selbstgehosteten Webfonts

Nachteile

Die Lösung verhindert nicht, dass die Webfont-Dateien auch von Browsern heruntergeladen werden, die sie letztendlich gar nicht anzeigen.
Mit ein paar Zeilen JavaScript lässt sich jedoch ausschließlich im Fall einer positiven Schriftglättungserkennung entweder eine separate CSS-Datei (die nur die @font-face-Deklarationen enthält) laden oder eine JavaScript-Laderoutine ansprechen. Der Nachteil (zumindest kann man es als Nachteil sehen) daran ist wiederum die völlige Anhängigkeit der Webfont-Anzeige von JavaScript.
Das Script löst nicht das FOUT-Problem für Opera-Versionen < 10.5.

Konzertempfehlung: A-Capella-Metal-Band Van Canto auf Tour

Michael van Laar — Fri, 12 Nov 2010 20:59:06 +0100

Als bisher wohl inaktivstes Mitglied des Streetteams der A-Capella-Metal-Band Van Canto muss ich endlich mit ein wenig Promotion für diese von mir favorisierte Sängertruppe starten. Deswegen hier mein Tipp für alle Blog-Leser, die etwas härteren Rock-Klängen nicht abgeneigt und offen für neue Metal-Spielarten sind:
Hingehen, anhören, begeistert sein, weitersagen!

Mich werdet ihr garantiert am 8. Janur 2011 beim Konzert in Schweinfurt antreffen.

Und hier für die noch nicht Kundigen ein wenig Van Canto auf die Ohren:

Auf der Suche nach einem wuchtigen Snare-Drum-Sound

Michael van Laar — Tue, 09 Nov 2010 21:41:16 +0100

Nach langen Jahren des Schleifenlassens bin ich nun dabei, mein Hobby Musik und Musikproduktion (leider „nur“ Homerecording) wieder in Fahrt und auf Kurs zu bringen. Mit der schlanken und flexiblen DAW-Software Reaper habe ich eine für mich ideale Produktionsumgebung gefunden. (Für die Webdesigner unter den Musikern: Reaper ist vom Konzept und von der Unkompliziertheit der Handhabung her quasi das MODx unter den DAWs.) Nun geht es an die Ausstattung dieser Produktionsumgebung mit virtuellen Instrumenten und Effekten. Dabei möchte ich zunächst einmal sehen, wie weit ich mit kostenlosen VST-Plug-Ins komme, bevor ich teure Profi-Software auf meine Wunschliste setze. Als erstes bin ich nun auf der Suche nach guten Drum-Sounds.

Ein Snare-Drum-Sound mit viel Wumms muss es sein

Da der Musikstil, der mir vorschwebt, zu einem guten Teil auf Genres wie Symphonic Metal, Melodic Rock und dem guten alten Hair Metal basieren soll, ist mir vor allem ein wuchtiger Snare-Drum-Sound à la Michael Wagener wichtig. Das „Hysteria“-Album von Def Leppard oder „Loud and Clear“ von Autograph geben die Richtung vor. Nicht ganz so effektüberladen, künstlich und aufdringlich sollte der gesuchte Snare-Sound sein, aber doch deutlich voluminöser und kraftvoller als das eher dünne Ticken mancher moderner Metal-Produktionen.

Eine recht ausführliche Recherche in verschiedenen Foren ergab, dass für die typischen 80er-Jahre Snare-Drum Sounds selbst auf den Alben vieler Hair-Metal-Bands keine echten Schlagzeuge, sondern Drumcomputer zuständig waren. Einige sollen sogar auf das Triggern mithilfe elektronischer Drum Kits verzichtet haben und die damals allgegenwärtigen LinnDrum direkt programmiert haben. Beim oben erwähnten Snare-Sound von Def Leppard kommt hinzu, dass es sich offenbar nicht um ein reines, effektbeladenes Snare-Sample handelt, sondern um ein Layer-Gebilde aus Snare und Low Tom.

Konsequenterweise habe ich mir sämtliche Samples der alten Drum Machines heruntergeladen. Trotzdem würde ich zunächst gerne mit etwas organischerem beginnen und diesen Sound dann entsprechend meiner Vorstellungen verbiegen. Ob das in der Praxis funktioniert, wird sich zeigen, denn meine Toningenieur-Kenntnisse bewegen sich eher auf Grundwissen-Niveau.

Ein geeignetes VST-Instrument als Ausgangspunkt

Unter den von mir getesteten VST-Instrumenten war auch SuperDrumFX. Dieser softwarebasierter Drumsampler ist ganz großes Freeware-Kino. Mithilfe von intelligentem Sample-Layering soll ein annähernd natürlichen Drumsound erzeugt werden, was meines Erachtens auch gut gelingt.

Das Preset „Dunnett Stainless“ hat den härtesten mitgelieferten Snare-Sound. Unbearbeitet klingt das dann so:

SuperDrumFX Snare-Test: Original-Sound ohne Effekte

Der einzige Effekt in diesem Audiobeispiel ist ein Limiter (ReaComp ohne Kompression, aber mit aktiviertem „Limit output“) auf dem Master, um Verzerrungen in der MP3-Datei auch ganz sicher zu vermeiden. Alle Laustärkenregler sind in der Grundeinstellung von 0 dB belassen.

EQ und Gated Reverb auf der Snare-Spur

Beim Einfügen einer neuen Instrumentalspur mit SuperDrumFX legt dieses praktischerweise gleich noch ein paar zusätzliche Spuren an, auf die Audioausgabe des VST-Instruments verteilt wird. Das entspricht in etwa dem Mikrofinieren einzelner Teilbereiche eines echten Schlagzeugs. Dadurch ist es sehr bequem möglich, Effekte gezielt nur auf die Snare anzuwenden.

Auf der im Screenshot hervorgehobenen Snare-Spur liegen in meinem Test folgende Effekte (in dieser Reihenfolge):

Classic EQ
Der 200-Hz-Fader ist komplett am oberen Anschlag (+10). Und auch bei 63 Hz gibt es mit +6 ordentlich Dampf im Subbass-Bereich. Ob das professionellen Tontechnik-Best-Practices entspricht, wage ich zu bezweifeln. Aber zumindest klingt die Snare dadurch schon ein wenig voller und rumpeliger.
Modern Spacer
Das Preset „Vintage Plate“ dieses Reverbs sorgt für Fülle, reicht aber für meinen Geschmack noch nicht ganz aus. Weil das Schrauben an den Reglern des Plug-Ins nicht den erwünschten Effekt bringen (was wahrscheinlich an meinem fehlenden Know-How liegt), habe ich mich der Einfachheit halber für einen zusätzlichen, zweiten Reverb-Effekt entschieden.
Classic Reverb
Der Name des verwendeten Presets sagt bereits alles: „Phil’s Toms“ Um noch etwas mehr herauszuholen, habe ich den Raumgröße-Regler noch ein wenig weiter (auf 320 m²) aufgedreht.
ReaGate
Um den klassischen Gated-Reverb-Effekt zu erzielen, braucht es natürlich noch ein Gate. Dieses schneidet die an dieser Stelle unerwünschte Ausklingphase der Hallfahne ab.

Durch den Gate-Einsatz hört sich das Ergebnis noch immer recht trocken an, so dass man im späteren Mix ggf. noch immer ein wenig Hall, diesmal tatsächlich wegen des Hall-Effektes, hinzufügen kann.

SuperDrumFX Snare-Test: Effekte auf Snare-Spur

Der Vollständigkeit halber sei noch erwähnt, dass ich die Snare-Spur im zweiten Audiobeispiel minimal heruntergeregelt habe, auf – 2 dB.

Noch mehr Tiefe für die Snare

Das Ergebnis der Effekte auf der Snare-Spur klingt für meine Ohren bereits gar nicht mal so schlecht. Der Klang ist, verglichen mit den erwähnten Hair-Metal-Beispielen, noch immer ziemlich natürlich. Trotzdem dürften die Tiefen noch etwas voller klingen.

Um dies zu erreichen, habe ich nicht, wie eingangs beschrieben, einen Tom-Sound zur Snare hinzugemischt. Stattdessen kommt einer der Tipps von Michael Wagener zum Einsatz: Auf einer zusätzlichen Snare-Spur wird das Audio-Signal mithilfe eines Harmonizers oder Pitch Shifters „tiefergelegt“ und dem Snare-Sound beigemischt.

Die zusätzliche Snare-Spur, die von SuperDrumFX auf die selbe Weise mit Input beliefert wird, wie die im obigen Screenshot markierte Spur, enthält folgende Effekt-Kette:

ReaPitch
Damit geht es um eine Oktave nach unten. Von den vielen Einstellungsmöglichkeiten habe ich „Shift (full range)“ verwendet. Den Rendering-Algorithmus habe ich auf „Project Default“ belassen.
SIR
Auch der „tiefergelegte“ Snare-Sound muss ein wenig aufgepeppt werden, damit er zum Rest passt. Um ein wenig auszuprobieren, kommt hier ein Convolution Reverb zum Einsatz. Die verwendete Impuls-Datei „dance_snare.wav“ findet sich im vss3-Paket in der Sammlung von echochamber.ch.
ReaGate
Dieses Mal dient das Gate hauptsächlich dazu, mithilfe einer Attack-Zeit von 82 ms das eigentliche Schlaggeräusch auf der Zusatzspur weitgehend zu unterdrücken. Schließlich soll der Snare-Drum-Sound nicht so klingen, als ob er von zwei gleichzeit geschlagenen Trommeln käme. Die Zusatzspur soll lediglich etwas mehr Volumen bringen, jedoch keinen sofort hörbaren zweiten Schlag.

Mit ein klein wenig Lautstärkenverringerung (auf – 4 dB) der Zusatzspur hört sich das Endergebnis meines ersten Drum-Sound-Experiments so an:

SuperDrumFX Snare-Test: Effekte auf Snare-Spur und extra „tiefergelegte“ Snare-Spur

Ganz zufrieden bin ich damit noch nicht. Auch ob sich dieser Snare-Sound auch im Mix bewähren kann, muss sich erst noch zeigen. Aber es ist ein Anfang, der mich ausreichend zufrieden stellt, um mich jetzt erst einmal dem Ausprobieren weiterer VST-Instrumente zuzuwenden. Neben der üblichen Rock-Band-Besetzung fehlt mir schließlich noch ein ganzes Orchester.

Neue Studie zur B2B Social-Media-Nutzung liefert objektive Zahlen statt subjektiver Einschätzungen

Michael van Laar — Fri, 08 Oct 2010 15:39:22 +0200

Viele Unternehmen aus dem Industrieumfeld stellen sich zurzeit die Frage, ob und wie sie Social Media in ihren Marketing-Mix integrieren sollen. Zwar existieren zu dieser Frage eine Reihe von Studien. Diese basieren jedoch meist auf den Ergebnissen aus Umfragen unter Entscheidern, also letztlich auf subjektiven Meinungen. Beim Institut für Online-Markenführung (für den Disclaimer: mein Arbeitgeber) haben wir uns daher bewusst dagegen entschieden, für unsere Studie „Social Media im Industrieumfeld“ Entscheider aus dem Marketing oder der Geschäftsleitung zu befragen.

Stattdessen wollten wir eine „Landkarte“ der bestehenden Social-Media-Aktivitäten erstellen. Dazu wurden sowohl das Engagement der Unternehmen als auch die Aktivität der adressierten Zielgruppen im B2B-Umfeld untersucht. Im Rahmen der Studie wurden aus dem Industrieumfeld über 14.000 Blog-Artikel, 14.000 Twitter-Updates, 5.000 Forenpostings, 5.000 YouTube-Videos sowie mehr als 800 Social-Media-Accounts quantitativ und qualitativ untersucht. Hier nun ein kleiner Ausschnitt aus den Ergebnissen der Studie.

Zielgruppen und Reichweiten

Lediglich ein Viertel der untersuchten B2B-Unternehmen eine Social-Media-Brutto-Reichweite von über 12.000 Personen. Bei 54 Prozent der Unternehmen liegt die Brutto-Reichweite sogar nur zwischen 1.800 und 8.100 Personen. Diese im Vergleich zur Marktgröße gering anmutenden Brutto-Reichweitenzahlen lassen darauf schließen, dass die Social-Media-Nutzung bei B2B-Zielgruppen derzeit noch auf einem relativ niedrigen Level stattfindet.

Doch der Markt ist in Bewegung. Betrachtet man die als „Best Practice“ eingestuften Twitter-Unternehmensaccounts, so zeigt sich, dass sich deren Followerzahlen innerhalb der letzten drei Monate mehr als verdoppelt haben – unabhängig von Unternehmensgröße oder Produktportfolio. Dies ist ein klares Indiz dafür, dass die Nutzung und Akzeptanz von Social Media im Industrieumfeld stark zunimmt.

Social-Media-Aktivitäten der Unternehmen

Sucht man unter den analysierten Unternehmen und Social-Media-Accounts nach Best Practices, so fällt auf, dass nur selten ein Absender (Business Unit, Abteilung, Funktionsbereich o.ä.) innerhalb eines Unternehmens auf mehreren Plattformen wirklich erfolgreich im Sinne einer großen Brutto-Reichweite ist. Unter den untersuchten Accounts fand sich zudem kein einziger Absender, der auf allen drei großen Plattformen (Twitter, Facebook und YouTube) gleichzeitig erfolgreich vertreten ist.

Die Untersuchungsergebnisse lassen den Schluss zu, dass Art und Umfang der derzeitigen Social-Media-Aktivitäten in den meisten Fällen weder strategisch geplant, noch aufeinander abgestimmt sind, sondern vielmehr stark von den Erfahrungen und Vorlieben sowie der Motivation der ausführenden Mitarbeiter abhängen. In dieser Hinsicht gibt es ein großes Optimierungspotenzial. Es gilt, die einzelnen Aktivitäten unter Effektivitäts- und Effizienzgesichtspunkten besser aufeinander abzustimmen, ohne die Freiheiten der beteiligten Mitarbeiter und damit deren Motivation einzuschränken.

Industrie-relevate Inhalte in Social-Media-Kanälen

88 Prozent der untersuchten Social-Media-Accounts wurden zur Verbreitung von Neuigkeiten verwendet. Informationen, die dem Presales-Bereich zuzuordnen sind, werden über 47 Prozent der untersuchten Accounts verbreitet. Ähnlich häufig werden Imagebotschaften in Form von klassischen Image-Videos oder in Form von Texten zu sozialen Engagements, Sponsoring- und Corporate-Social-Responsibility-Themen über Social-Media-Kanäle verbreitet. Nur in sehr geringem Maß finden sich Inhalte aus dem Bereich Aftersales auf den drei großen Plattformen. In den meisten Fällen sind Aftersales-relevante Social-Media-Inhalte nahezu ausschließlich in Fachforen zu finden.

Zum jetzigen Zeitpunkt ist die Nutzung von Social-Media-Kanälen im Industrieumfeld stark Presales-lastig. Dabei setzen Unternehmen den Microblogging-Dienst Twitter in vielen Fällen lediglich wie einen klassischen Einweg-Nachrichtenkanal und YouTube wie eine Art eigenen „Image-Video-Fernsehkanal“ ein. Die Möglichkeiten der direkten, öffentlichen Kommunikation mit der eigenen Zielgruppe werden bisher nur in wenigen Fällen konsequent genutzt.

Methoden und Hintergrund

Bei der Auswahl der analysierten Social-Media-Profile haben wir uns auf die Branche Automatisierungstechnik konzentriert, da hier die Kaufentscheidungsprozesse sehr vielfältig sind. Im Umfeld dieser Branche werden gleichermaßen Entscheidungen über Hardwarekomponenten, Software, Anlagen sowie Ersatzteile getroffen. Ebenso wird in diesem Bereich komplexes Projektgeschäft betrieben. Diese Eigenschaften der Automatisierungsbranche ermöglichen eine gute Übertragbarkeit der Erkenntnisse auf andere B2B-Branchen.

Alle Informationen zur Studie „Social Media im Industrieumfeld“ gibt es auf der Website www.socialmediastudie.de. Die Studie wird am 18. Oktober 2010 veröffentlicht. Bis zu diesem Termin kann die vollständige Auswertung der Studie zum Vorzugspreis von 548 Euro (statt regulär 685 Euro) vorbestellt werden.

Bei media-TREFF.de gibt es außerdem einen ausführlichen Artikel über die Social-Media-Studie mit noch mehr Einzelergebnissen der Studie.

Meine MODx-Installation (Teil�2): Anpassung der Muster-.htaccess-Datei („ht.access“)

Michael van Laar — Wed, 22 Sep 2010 10:15:09 +0200

Die Muster-.htaccess-Datei („ht.access“) der normalen MODx-Evolution-Installation enthält bereits eine Menge nützlicher Optionen, die man je nach Bedarf aktivieren kann. Mit einigen Ergänzungen wird die Website noch ein wenig performanter und sicherer.

Leider funktionieren erfahrungsgemäß nicht alle der folgenden Modifikationen und Ergänzungen auch problemlos auf jedem Server. Beim Provider meines Vertrauens (all-inkl.com) läuft das alles reibungslos. Wer sich aber mal kundenbedingt mit 1&1-Hostingpaketen herumschlagen musste, wird ein Lied von den etwas seltsamen 1&1-Konfigurationsvorstellungen singen können. Daher gilt: Testen und ggf. die eigene MODx-Standardinstallation anpassen.

Kompression für Text-Dateien

Die folgenden Zeilen der mitgelieferten ht.access-Datei nutzen die zlib-Bibliothek, um Text-Inhalte komprimiert an den Webbrowser zu übermitteln.

# Reduce server overhead by enabling output compression if supported.
#php_flag zlib.output_compression On
#php_value zlib.output_compression_level 5

Da ich in irgendeinem Forum gelesen habe, dass das Apache-Modul mod_deflate aus Performance-Gründen der zlib-Blbliothek vorzuziehen sei, habe ich die obigen drei Zeilen durch folgende Anweisungen ersetzt:

# Apache served files compression
<IfModule mod_deflate.c>
#--- Insert filter
SetOutputFilter DEFLATE
#--- Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
#--- Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
#--- MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
#--- Don't compress images and Webfonts
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|woff)$ no-gzip dont-vary
#--- Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

In diesem Code-Schnipsel, den ich mir aus verschiedenen Quellen zusammengesucht habe, ist zwar noch eine Menge Code enthalten, der sich auf Uralt-Browser bezieht. Aber andererseits stört das auch nicht wirklich.

Browser-Caching von verschiedenen Dateitypen detailliert kontrollieren

Das folgende Stückchen Code steuert die Expires Headers. Dadurch soll erreicht werden, dass Dateien, die sich selten oder nie ändern, länger im Browser-Cache vorgehalten werden, so dass sich die Ladezeit reduziert.

# Expires Control
ExpiresActive On
ExpiresDefault A0
<FilesMatch "\.(gif|jpg|jpeg|png|swf|ico|ttf|eot|otf|woff)$">
#--- 1 month
ExpiresDefault A2628000
Header append Cache-Control "public"
</FilesMatch>
<FilesMatch "\.(xml|txt|html)$">
#--- 2 hours
ExpiresDefault A7200
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
<FilesMatch "\.(js|css)$">
#--- 1 month
ExpiresDefault A2628000
Header append Cache-Control "proxy-revalidate"
</FilesMatch>

Weg mit den ETags

Die gängigen Ladezeit-Optimierungs-Tools empfehlen, die ETags zu deaktivieren, da deren Verarbeitung wohl nicht immer reibungslos verläuft und sich negativ auf die Ladezeit auswirkt. So werden sie deaktiviert:

# Remove all ETags from being sent
Header unset ETag
FileETag None

Verzeichnis-Ansicht verhindern

Wer nicht möchte, dass die Inhalte von Bilderverzeichnissen im Browser komplett eingesehen werden können, kann dies abschalten:

# Prevent directory browsing
Options -Indexes

Schutz vor allzu neugierigen Zeitgenossen

Zentrale Konfigurationsdateien sollten für bäsartige Skripts, Bots und andere Halunken nicht einsehbar sein. Einen Beitrag dazu leistet dieses Stückchen Code:

# Prevent anybody from accessing the configuration file
<Files config.inc.php>
order allow,deny
deny from all
</Files>

# Prevent anybody from accessing the .htaccess file
<Files .htaccess>
order allow,deny
deny from all
</Files>

Internettrends im Online-Marketing-Praxis-Check

Michael van Laar — Fri, 17 Sep 2010 08:52:05 +0200

In keiner anderen Branche entstehen schneller so viele neue Trends wie im Web-Umfeld. Doch was bringen diese neuen Werkzeuge den Unternehmen im Tagesgeschäft? Welche Trends können Unternehmen und Selbstständige nutzen, um tatsächlich am Markt effizienter zu agieren? Und welche Buzzwords kann man getrost ignorieren? In einem Vortrag beim XING Business Frühstück bin ich diesen Fragen auf den Grund gegangen.

Eine ausführliche Liste mit allen im Vortrag erwähnten Verweisen auf Plattformen, Werkzeuge und weiterführende Fachartikel habe ich im IFOM-Blog zusammengestellt: www.i-fom.de/internettrends

Webstandards sind toll, aber kein wirksames Verkaufsargument

Michael van Laar — Fri, 03 Sep 2010 13:09:31 +0200

Nur damit gleich von vornherein keine Missverständnisse entstehen, und damit mich Jens nicht wegen dieses Artikels sofort aus der Webkrauts-Mailingliste streicht: Ich finde Webstandards toll, und ich werde nicht müde sie zu propagieren. Ich bin davon überzeugt, dass es das Web weiterbringt, wenn noch mehr Webdesigner und Webentwickler sich an Webstandards halten.

Doch als Verkaufsargument gegenüber Kunden taugen Webstandards häufig nicht, weil sie aus Kundensicht schlicht und einfach nicht als relevant angesehen werden. Das ist zumindest meine Erfahrung. Dieser Artikel ist daher in höchstem Maße subjektiv.

Warum die immer wieder angeführten Vorteile für Kunden in vielen Fällen keine Verkaufsargumente sind

Eine sehr schöne Auflistung der Vorteile von Webstandards für Kunden findet sich bei aufw:arts. Ich habe mir erlaubt, diese Liste hier zu zitieren, zu sezieren und zu kontrastieren. Meine Kommentare zu den wunderschönen Vorteilen sind bewusst ein wenig überzeichnet und ein bisschen zu pessimistisch. Doch „Worst-Case-Szenarien“ dieser Art dürften dem ein oder anderen Webworker aus Gesprächen mit Kunden bekannt vorkommen. Die Wahrheit liegt, wie so oft, irgendwo zwischen den beiden Extremen.

Zukunftssicherheit

„Webstandards sichern, dass Ihre Website auch noch in den nächsten 5-6 Jahren von unterschiedlichen Browsern und Geräten korrekt angezeigt wird.“
Quelle: aufw:arts

Fünf bis sechs Jahre sind eine lange Zeit. Viele Webdesigns werden gar nicht so alt. Dann steht ein Relaunch an, bei dem auch alle Templates komplett neu aufgesetzt werden. In diesem Fall ist es völlig egal, wie korrekt oder nicht korrekt eine Website mit den Browsern der fernen Zukunft angezeigt wird.

Auf der anderen Seite gibt es dann Websites, die viele Jahre überhaupt nicht angefasst werden. Häufig sind das die Online-Präsenzen von kleinen Unternehmen, die mit dem Web eigentlich überhaupt nichts am Hut haben. Hier könnte das obige Argument greifen. Doch aus heutiger, vielleicht nicht gerade zukunftsorientierter, aber meiner Meinung nach durchaus realistischen Sicht muss ich sagen: Aufwärtskompatibilität war eigentlich noch nie ein großes Problem der Desktop-Browser.

Erst vor ein paar Tagen ist mir ein wahrlich augenkrebserregendes Frame- und Tabellenlayout-Ungetüm aus dem Jahr 2000 untergekommen. Zugegeben, die Website sieht scheußlich aus. Doch sie sieht in einem modernen Browser noch genau so korrekt scheußlich aus, wie sie das vor zehn Jahren im Netscape Navigator 4 tat.

Zwar machen Netbooks und Smartphones das ein oder andere Frame-Layout durchaus auch einmal unbenutzbar. Doch die Art von Kunden, die Ihre Website fünf Jahre lang praktisch ohne Veränderung im Web vor sich hin schlummern lässt, interessiert sich heute auch (noch) nicht für das mobile Internet und alles, was sich außerhalb ihres eigenen Desktop-Browsers abspielt.

Fazit: Zukunftssicherheit ist häufig kein Verkaufsargument.

Geringere laufende Kosten

„Websites nach Webstandards können besser und schneller geändert werden.“
Quelle: aufw:arts

Für große Portale, an denen ständig geschraubt, verändert und verbessert wird, ist dieses Argument ja vielleicht noch nachvollziehbar. Bei vielen kleinen Webdesign-Kunden wird am Templating überhaupt nichts mehr verändert, wenn es einmal steht. Zumindest solange, bis es einen Relaunch mit komplett neuem Design gibt.

Wenn es dann doch einmal eine Änderung geben sollte, wird die mittlerweile zu Webstandards bekehrte Haus- und Hofagentur wohl kaum plötzlich weniger berechnen als bisher, nur weil die Entwickler jetzt ein bisschen schneller arbeiten können. Schließlich hat sich der Kunde längst an das bisherige Preisniveau gewöhnt. Und bewerten können viele Kunden die Qualität und den dafür realistisch notwendigen aufwand sowieso nicht.

Fazit: Geringe laufende Kosten sind häufig kein Verkaufsargument.

Keine Knebelverträge

„Sie können Ihre Webdesigner bei Bedarf besser wechseln. Der Zugriff auf den Code braucht nicht mehr aufwendig entschlüsselt werden.“
Quelle: aufw:arts

Gerade bei trickreichen CSS-Spielereien oder umfangreichen Browser-Hacks zur Sicherung der Abwärtskompatibilität darf man durchaus in Frage stellen, ob tatsächlich nichts mehr „entschlüsselt“ werden muss.

Doch selbst wenn es tatsächlich so wäre, so wechseln kleine und mittelständische Kunden nicht alle Naselang ihre Internetagentur. Meiner Erfahrung nach wird meist aus Anlass eines Relaunchs gewechselt, vorausgesetzt es herrscht Unzufriedenheit mit der bisherigen Agentur. Wenn es dann einen Relaunch gibt, geht dieser in der Regel mit einem neuen Design einher und gerne auch mal mit einem neuen CMS. Der Zugriff auf den alten Quellcode ist daher in den meisten Fällen überflüssig.

Fazit: Die Unabhängigkeit von einzelnen Dienstleistern ist häufig kein Verkaufsargument.

Besser gefunden werden

„Standardkonforme Seiten werden von Google schneller indiziert und besser bewertet.“
Quelle: aufw:arts

Das habe ich auch lange Zeit geglaubt. Es ma zwar sein, dass eine saubere HTML-Struktur dem Google-Bot die Arbeit ein wenig erleichtert. Aber ich sehe regelmäßig so viele grauenhafte HTML-Ungetüme hervorragend ranken, dass ich die obige Aussage nicht mehr unterschreiben kann.

Schaut man sich zudem die letzte umfangreiche Ranking-Faktoren-Untersuchung von SEOmoz an, so erkennt man, dass nur ganz wenige On-Page-Faktoren etwas mit Webstandards zu tun haben. Lediglich die Title-Elemente und die Alt-Texte von Bildern sollte man tunlichst pflegen, wenn man der Untersuchung Glauben schenken darf. (Und das darf man meiner Meinung zumindest tendenziell durchaus, schließlich ist die Anzahl der analysierten Domains, Websites und Links mächtig groß, so dass eine gewisse Repräsentativität eigentlich vorhanden sein sollte.)

Selbst Googles Sprachrohr in Sachen SEO, Matt Cuts, hat bereits vor zwei Jahren ganz klar gesagt, dass die Einhaltung von Webstandards in keinster Weise das Ranking einer Webseite beeinflusst.

On-Page-Optimierung ist ohnehin schon seit Jahren lediglich „Basisarbeit“, mit der man nur noch begrenzt etwas reißen kann. Mit dem richtigen Linkaufbau lässt sich dagegen – etwas überspitzt formuliert – so ziemlich alles zum Ranken bringen.

Fazit: Die bessere Auffindbarkeit in Suchmaschinen ist eigentlich kein Verkaufsargument.

Unabhängigkeit von Geräten

„Ihre Website kann auf verschiedenen Browsern und Geräten angezeigt werden.“
Quelle: aufw:arts

Beispielhaft seien an dieser Stelle Netbooks mit kleinem Monitor, Handys und Smartphones erwähnt. Meine Erfahrung hat mich gelehrt, dass diese Themen bei vielen Kunden noch längst nicht angekommen sind. Da gibt es in der Kundenwahrnehmung zwar etwas, aber das bewegt sich noch immer auf einem so niedrigen Niveau, dass Kunden es gerne vernachlässigen.

Selbst wenn die Webanalyse-Daten ein paar Smartphone-Surfer ausweisen, ist das auch egal. Schließlich können die mobilen Browser mittlerweile zoomen – mal besser, mal schlechter, aber für die paar Nerds wird das schon reichen, meinen viele Kunden. Mit Handys unterhalb des Smartphone-Niveaus geht sowieso niemand ernsthaft online, also kann man diese auch vernachlässigen.

Dann wären da noch die Netbooks. Bei denen darf man sich eigentlich nur keine Frames mehr erlauben. Die Standard-Webdesign-Breite von 960 Pixeln (echte flexible Layouts kann man Kunden ja ohnehin nur ziemlich selten verkaufen) passt meist auch für kleine Netbook-Bildschirme so halbwegs. Also ist aus Kundensicht alles in Butter, selbst wenn die Website noch aus lauter Layouttabellen besteht.

Übrigens: Wenn man denn überhaupt über technische Zugänglichkeitsaspekte mit Kunden redet, dann ist die korrekte Darstellung im uralte Internet Explorer 6 die viel häufigere Forderung.

Fazit: Die Unabhängigkeit von Geräte ist in vielen Fällen – zumindest zurzeit noch – kein Verkaufsargument.

Geringere Ladezeiten

„Der Code ist kurz und klar und verkleinert die Größe der Seiten. Dadurch laden die Seiten schneller.“
Quelle: aufw:arts

Schlanker HTML-Code ist toll. Das bringt nur leider nichts für die Ladezeitoptimierung, wenn danach tonnenweise JavaScript, riesige Bilder und aufwändige Flash-Spielereien auf eine Seite geknallt werden, dass die Leitung nur so glüht. Möglichst das alles noch ohne gzip und Minifizierung ausliefern, dafür aber aufgeteilt auf mehrere Dutzend Einzeldateien.

Startseiten, die zwischen 1 und 2 MB auf die Waage bringen und dabei HTTP-Requests im mittleren zweistelligen Bereich erzeugen, sind leider keine Seltenheit. Und viele dieser Ladezeitmonster kann man durchaus als webstandardkonform bezeichnen. Nur leider reißt ein schlanker HTML-Code bei solchen Ladezeitmonstern auch nichts mehr heraus. Webstandards vermeiden zwar Layouttabellen-Ungetüme und redundante Inline-Layoutangaben, schützen aber leider an vielen anderen Stellen nicht zwangsläufig vor verschwenderischem Ressourcenumgang.

Ein guter Webdesigner sollte zwar immer die Ladezeit im Blick haben. Doch ob eine am Ende tatsächlich ladezeitoptimiert umgesetzte Website wirklich ausschließlich bzw. überwiegend mit der Webstandardkonformität begründet werden kann, bezweifele ich. (Wenn mein Bild von Webstandards diesbezüglich falsch ist, lasse ich mich gerne vom Gegenteil überzeugen.)

Fazit: Eine geringere Ladezeit ist durch Webstandards nicht zwangsläufig gegeben und daher nicht zwangsläufig ein Verkaufsargument.

Zugänglichkeit steigt

„Für Millionen von Menschen mit Einschränkungen werden Ihre Seiten erst durch Webstandards begehbar.“
Quelle: aufw:arts

Richtig. Doch außerhalb der behördlichen Landschaft ist Barrierefreiheit in der überwiegenden Zahl der Fälle bestenfalls ein Nice-to-have-Feature. Das ist zumindest meine Erfahrung. Das Interesse an Barrierefreiheit oder -armut nimmt auf Kundenseite sehr stark ab, je weiter man sich einerseits von Websites mit richtig großen Reichweiten entfernt und andererseits von Unternehmen mit Zielgruppen, die Barrierefreiheit tatsächlich in signifikantem Maß erfordern.

Fazit: Die Zugänglichkeit ist häufig kein Verkaufsargument.

Warum ich mich trotzdem an Webstandards halte

Ganz einfach: Weil ich möchte, dass nicht nur ein Kunde mit seiner neuen Website zufrieden ist, sondern auch ich selbst.

Ein Beispiel: Selbst wenn es einem Kunden völlig egal sein sollte, ob es ein Print-Stylesheet gibt oder nicht, so ist mir persönlich das eben doch wichtig. Und das Ausblenden von nicht benötigten Website-Teilen per CSS ist bei der Verwendung von Layouttabellen eben nicht so einfach möglich.

Außerdem möchte ich nicht, dass andere Webdesigner beim Anblick meines Quellcodes die Hände über dem Kopf zusammenschlagen. Soviel Perfektionismus muss sein.

Deswegen: Immer schön brav Webstandards benutzen, auch wenn die Kunden es vielleicht (noch) nicht zu schätzen wissen.

Power-Pop-Musikempfehlung: Das neue Album „That’s Gravity“ von Geoff Smith

Michael van Laar — Mon, 16 Aug 2010 01:25:00 +0200

Ab und zu passiert es, dass ich bei iTunes, Amazon oder CD Baby in ein Album hinein höre und das Album dann auch spontan kaufe. Selten jedoch passiert es, dass ich bereits nach den ersten paar Takten des ersten Songs weiß: „Das Album muss ich unbedingt haben.“ So geschehen beim neuen Album „That’s Gravity“ von Power-Pop-Songwriter Geoff Smith.

Durch einen Blog-Artikel meines favorisierten Piano-Rockers Matthew Ebel wurde ich auf das neue Album von Geoff Smith aufmerksam. Geoff war mir bisher vor allem durch seine großartige Weihnachts-EP „Christmas Tunes“ (anschau- und anhörbar je nach Belieben bei Amazon*, bei CD Baby* oder bei iTunes*) bekannt. Sein neues Album „That’s Gravity“ ist mit neun Songs zwar nicht besonders umfangreich. Diese neun Songs haben es aber in sich.

Geoff Smith liefert energetischen Power Pop vom Feinsten. Die Songs gehen sofort ins Ohr, ohne dabei jedoch platt oder schon hundertmal gehört zu klingen. Die kurze Beschreibung bei CD Baby fasst es prägnant zusammen:

„That’s Gravity is a nine song collection of the same irresistible Power Pop songs you’d get if you mixed the Beatles, Squeeze and Mike Viola into a band together.“
Quelle: CD Baby

Vor allem die Einflüsse der Beatles hört man deutlich, finde ich. Ich würde sogar sagen: So klängen die Beatles vermutlich, wenn sie heute noch gemeinsam Songs schreiben könnten.

Ein Video zum ohrwurm-potenten Titel-Track „That’s Gravity“ hat Geoff Smith auch gleich produziert.

Und so klingen die restlichen Songs des Albums:

„That’s Gravity“ von Geoff Smith ist erhältlich

bei Amazon* (als MP3-Download),
bei CD Baby* (als MP3-Download oder als CD),
bei iTunes* (als DRM-freier AAC-Download).

* Affiliate-Link