ononlinework

Auch in 2011 gibt es bei den Webkrauts wieder einen Adventskalender mit Artikeln, die sich mit der Theorie und Praxis der Erstellung von Webinhalten beschäftigen. Den Anfang macht Ansgar Hein mit einem Text zu Wireframes.

Aus Zeitgründen (immer die gleiche Ausrede) bin ich auch in diesem Jahr wieder nicht mit einem eigenen Artikel vertreten. Umso dankbarer bin ich den aktiven Webkrauts, die wieder reichlich Zeit und Fachwissen in ihre Artikel gesteckt haben und genau dieses Wissen gern teilen. Ich habe zwar nicht mitgewirkt, kenne aber grob die Themen der folgenden Artikel im Adventskalender und kann versprechen, dass es sich lohnt, täglich auf die Seite zu schauen. Bleibt dran, Leute!

Beim Hören der heute erschienenen Ausgabe 19 von SEO-House wurde ich mal wieder daran erinnert, dass ich noch was zum Thema HTML5 für SEOs schreiben wollte. Markus hat in der Sendung auf die HTML5-Session mit JohnMu auf der SMX hingewiesen und sich beklagt, dass dort wenig auf die neuen Elemente eingegangen wurde, die in HTML5 zur Verfügung stehen. Das habe ich zwar ebenso empfunden, ich denke aber auch, dass das beim anwesenden Publikum meist jenseits des Verständnisses gewesen wäre. Mir schien der Anteil an Frontend-Leuten eher klein zu sein. Um bei den HTML5-Elementen in die Tiefe zu gehen, bedarf es schon einigem technischem Vorwissen.

Trotzdem wäre ein Überblick über header, nav, footer, article, aside und section gar nicht schlecht gewesen. Das hätte man sicher in fünf Minuten anreißen können. Ich möchte aber hier auch gar nicht auf die einzelnen neuen Elemente eingehen, das haben andere schon ausführlich erledigt. Den Nutzen im Hinblick auf SEO sehe ich derzeit noch nicht, es gibt aber keinen Grund, die Elemente bei neuen Projekten oder Relaunchs auch jetzt schon zu verwenden. Wenn der Parser von Google die Elemente irgendwann verstehen sollte, ist es deutlich einfacher, den Unterschied zwischen Inhalten, Navigation und Fußbereich zu erkennen (nur als Beispiel), wobei ich aber denke, dass Google das auch jetzt schon sehr gut kann.

Überschriftenhierarchien in HTML5

Mir geht es viel eher um eine andere Möglichkeit, die uns die Spezifikation an die Hand gibt: Das Ermitteln von Überschriftenebenen aus der Document-Outline. Jetzt fragen sich die meisten vermutlich »Was möchte der komische Mann von uns?«, daher mal ein Beispiel:

Eine Seite hat eine H1-Überschrift, ein Bereich der Seite wird mit einer H2-Überschrift eingeleitet, ein Artikel darin beginnt mit einer H3 und Abschnitte des Artikels tragen dann folgerichtig sogar noch eine H4 (z. B. »Einleitung«, »Fazit«). Damit wird sowohl in alten Versionen von (X)HTML als auch in HTML5 eine korrekte Hierarchie von Überschriften dargestellt.

Die Spezifikation von HTML5 ermöglicht aber nun die automatische Erkennung dieser Hierarchie unabhängig vom angegebenen Element (H1–H6). Die Hierarchie wird hierbei allein durch die Position in der Document-Outline festgelegt. Der Vorteil liegt darin, dass man beim Anlegen des Dokuments ausschließlich H1-Überschriften verwenden kann, die vom Parser dann der richtigen Ebene zugeordnet werden. Gerade bei Content-Syndication ist das natürlich von Vorteil. Wenn ich einen Artikel an mehreren Stellen verwende, z. B. komplett auf der Artikelseite und als Auszug auf einer Start- oder Übersichtsseite, muss ich mir um die Verschachtelungstiefe der Überschriften keine Gedanken mehr machen. Ein riesiger Vorteil für Nachrichtenseiten!

Um beim Beispiel oben zu bleiben, haben wir also eine H4-Überschrift namens »Fazit« innerhalb des Artikels. In der Outline (keine Ahnung, wie man die darstellt) haben wir also body h1 > section h2 > article h3 > section h4. Im erzeugten HTML steht aber an jeder der genannten Stellen eine H1! Ich hoffe, das ist inhaltlich halbwegs verständlich.

Geil, 40 mal H1 auf der Seite

Jetzt könnte man als unbedarfter (oder testender) SEO natürlich auf die Idee kommen, dass man tatsächlich jede Überschrift auf einer Startseite als H1 auszeichnet, um Google zu zeigen, wie wichtig das doch alles ist. Und weil es so in der Spezifikation steht und Google selbst ja schließlich vehement den sofortigen Einsatz von HTML5 empfiehlt, kann das ja wohl kaum als Spamming angesehen werden. Um genau das herauszufinden, habe ich nach der Session auf der SMX JohnMu direkt darauf angesprochen. Das hätte ich natürlich auch in der Fragerunde am Ende tun können, mir schien der Sachverhalt aber zu speziell und zu erklärungsbedürftig. Die Antwort war Google-typisch ausweichend: Ich sollte mir dabei keine allzu großen Sorgen machen und wahrscheinlich würde das kein Problem geben. Was er aber eindeutig sagte, war, dass der Google-Bot derzeit noch keinen HTML5-Parser hat. Die Überschriften kämen also in diesem Beispiel alle als H1 an, nicht in der gewollten Hierarchie.

Ich möchte nun natürlich nicht seine Aussage anzweifeln, für mich sieht das dann aber schon danach aus, als könnte das ein wenig spammy wirken. Man stelle sich die Startseite eines Nachrichtenportals vor, auf der dann 40–60 Überschriften erster Ordnung erkannt werden, jeweils gefolgt von zwei Zeilen Text. Selbst wenn dann ein Quality-Rater draufschaut, müsste der erst mal mit HTML5 ziemlich gut vertraut sein, um die Richtigkeit des Tuns zu erkennen. Mir wäre das Risiko eindeutig zu hoch. Zumindest habe ich für einen anstehenden Relaunch unseres Shops dieses Vorgehen weit von mir gewiesen. Die Gefahr, damit in einen Filter zu laufen, ist mir deutlich zu hoch.

Ganz nebenbei habe ich auch gelesen (die Quelle finde ich gerade nicht), dass Screenreader mit der hierarchischen Einordnung der Überschriften auch noch nicht umgehen können. Das sehe ich zumindest noch als weiteren wichtigen Grund, auf die Möglichkeiten zu verzichten. Die sonstigen Elemente sollte man aber verwenden, es spricht aus meiner Sicht nichts dagegen.

Sollte jemand mal einen Testballon Richtung H1-Häufung starten wollen, bin ich sehr am Ergebnis interessiert. Auch andere Hinweise im Bezug auf HTML5 und SEO sind hier gern gesehen. Sollte ich hier Quatsch geschrieben haben, sind die Hinweise natürlich ebenfalls willkommen.

In den vergangenen Tagen hat ein ehemalige Kollege von mir, der mittlerweile als Einzelkämpfer-Designer unterwegs ist, auf den Launch eines neuen von ihm designten Projekts hingewiesen. Beim Ansehen der Site bzw. des zugrundeliegenden HTML klappten sich mir mal wieder die Fußnägel hoch. Eine Schande, was auch 2010 noch auf neu entstehenden Sites veröffentlicht wird.

Ich habe den Designer daraufhin angeschrieben und wortreich auf seine Fehler hingewiesen. Ein kurzer E-Mail-Dialog entwickelte sich und die von meiner Seite aus letzte Mail daraus möchte ich hier anonymisiert veröffentlichen. Ich nenne dabei weder die angesprochene Site noch den Designer, weil ich hier kein öffentliches Bashing betreiben sondern nur mal wieder auf ein falsches oder zu kurz gegriffenes Selbstverständnis von Webdesignern hinweisen möchte, das leider noch weit verbreitet ist. Trotz der im Text enthaltenen Hinweise wird sich die angesprochene Site trotz Keyworddomain auch kaum bei Google finden lassen. Warum das so ist, zeigt sich im Text, ist aber auch unschwer zu erraten.

Die E-Mail

Ich finde es erschreckend, dass du offensichtlich tatsächlich so ahnungslos bist. HTML hat nichts mit Programmierung zu tun sondern ist eine Auszeichnungssprache für Inhalte. Du zeichnest jedoch keine Inhalte aus sondern lieferst Daten, die keinerlei tabellarische Struktur haben, in einer Tabelle aus. Das ist, als würdest du private Briefe mit Excel schreiben.

Weil HTML eine Auszeichnungssprache ist, haben rein visuelle Angaben darin nichts zu suchen. Das steuert man ausschließlich über CSS. Anreichern kann man dann die Nutzererfahrung noch durch den sinnvollen Einsatz von JavaScript (womit wir dann doch bei der Programmierung wären). JavaScript findet aber nur so Verwendung, dass alle Inhalte auch ohne aktiviertes JavaScript erreichbar sind. Das muss dann nicht identisch aussehen und auch nicht genauso geschmeidig funktionieren, die grundsätzliche Funktion muss aber gegeben sein. Moderne Websites gewährleisten das problemlos.

Unter Camper-Preisvergleich findest du z. B. ein von mir gebautes Formular. Mit aktiviertem JavaScript lassen sich An- und Abreisedatum sehr komfortabel über Datumswähler eingeben und eine der Reisedauer angemessene Kilometerangabe wird dynamisch berechnet, lässt sich aber sehr intuitiv über einen Schieberegler anpassen. Ruft man die Seite ohne Javascript auf, ist alles ebenso bedienbar und man kann mit dem Formular arbeiten, es ist jedoch weniger dynamisch und interaktiv. Auch das kann man noch verbessern, es ist aber auf jeden Fall ein guter Ansatz. Nun ist mir zwar klar, dass das auf der von dir erstellten Seite kein Problem ist, da du JavaScript dort kaum einsetzt. Es soll nur zeigen, was man mit sinnvollem Quelltext für seine Kunden erreichen kann.

Du hingegen versteckst Inhalte in schlecht komprimierten Grafiken mit so sprechenden Namen wie »logo_oben.jpg« und lieferst dafür noch nicht einmal alternative Inhalte. Der optisch offensichtlich so wichtige Text »entfernt« kommt auf der Seite nur im Titel und im Copyrighthinweis vor. Der Text »Beratungsförderung«, immerhin einer der Punkte der Hauptnavigation, taucht an keiner Stelle der Seite auf. Wie soll Google oder ein blinder Anwender auf der Suche nach dieser Dienstleistung wissen, worum es geht? Und du meinst tatsächlich, dass deine Kunden bei Google gut gefunden werden? Kann ja gar nicht sein, wenn du die relevanten Keywords vor den Suchmaschinen versteckst.

Dreamweaver mag ein gutes Programm sein, liefert jedoch vernünftiges HTML nur, wenn man es dazu zwingt. Einfach bunte Bildchen und Texte in ein Tabellenkonstrukt zu ziehen, hat nichts mit der Erstellung von Webseiten zu tun. Das ist, als würde ich einen Tischler mit der Anfertigung eines Regals beauftragen und der baut mir ein IKEA-Billy zusammen. Da kann man zwar Bücher reinstellen, dafür hätte ich aber keinen Tischler gebraucht.

Die Konsequenz für dich kann nur sein, das Handwerk Webseitenerstellung zu erlernen oder es Leuten zu überlassen, die es können. Alles andere ist deinen Kunden gegenüber eine riesige Schweinerei. Verwunderlich finde ich in diesem Zusammenhang übrigens, dass ein Kunde, der sich mit Beratung beschäftigt, sich bei der Auswahl eines so wichtigen Dienstleisters offensichtlich nicht hat beraten lassen. Er hätte sich sonst nicht für dich entschieden, zumindest was die Umsetzung der Site angeht. Gegen das Design ist aus meiner Sicht gar nichts einzuwenden, das finde ich für den Zweck und das vermutlich kleine Budget sehr gelungen. Sich aber als Designer nur auf das Optische zu beschränken, ist ein zu eingeschränktes Selbstverständnis.

Ich habe vor gut drei Jahren mal einen Artikel übersetzt und veröffentlicht, der sich mit genau dieser Problematik beschäftigt. Ich würde mich freuen, wenn du ihn dir mal durchliest. Vielleicht bleibt ja etwas hängen.

Ich habe heute ein kleines Tool in Form einer Excel-Datei veröffentlicht, das mir bei zwei aktuellen Projekten sehr geholfen hat. Es handelt sich dabei um einen Grid Calculator, also ein Werkzeug zur Berechnung von Layoutrastern.

Nahezu jeder, der vor der Aufgabe eines komplexen Layouts gestanden hat, konnte schon feststellen, dass es eine ziemliche Fummelarbeit ist, die Spaltenbreite, die Breite der Spaltenabstände und die zur Verfügung stehende Gesamtbreite auf einen Nenner zu bringen und so ein ansprechendes Raster zu berechnen. Insbesondere bei einem Frontend-Projekt, in dem ich unterschiedlichste Breiten für Eingabefelder brauchte, war für mich ein möglichst vielspaltiges Layout wichtig, um bei den Eingabefeldern sehr flexibel arbeiten zu können.

Hat man dann endlich ein passendes Layoutraster berechnet, steht man vor dem nächsten Problem: Beim Anlegen der Stylesheets oder Festlegen der Vorgaben für Bildgrößen berechnet man immer wieder die Breite von Elementen, die mehrere Spalten und die entsprechenden Zwischenräume umfassen.

Um die Suche nach einem passenden Raster zu erleichtern und vor allem die nervige Berechnung der mehrspaltigen Elemente zu automatisieren, habe ich eine Excel-Datei gebaut, die einem die Arbeit abnimmt.

Eine Erläuterung der Datei und die Möglichkeit, den Layoutraster-Rechner als Excel- und Open-Document-Datei herunterzuladen gibt es auf der Seite »Grid Calculator – Layoutraster berechnen«.

Eine zwangsverordnete Pause hat mich dazu gebracht, mich endlich mal wieder nach langer Zeit mit meinem Weblog zu beschäftigen. Insbesondere der schon lange anstehende Relaunch konnte nun in Angriff genommen werden.

Insgesamt war das eine Sache weniger Stunden, was man vermutlich an der einen oder anderen Stelle noch sehen kann. Aber welcher Relaunch ist schon perfekt und an welchem Relaunch wird nicht nach dem Start noch mehr oder weniger verändert? Hier geht es schließlich auch nicht um eine Firmenwebsite sondern um nur um mein kleines Weblog mit einer doch sehr begrenzten Anzahl von Lesern.

Das Layout selbst spukte so oder ähnlich schon seit einiger Zeit in meinem Kopf herum. Ich wollte endlich von dem alten Einheitsgrau weg zu einem farbenfrohen, warmen und dennoch schlichten Layout, in dem das Lesen der Beiträge Spaß macht. Das Lesen steht hier auch ganz klar im Vordergrund, auch wenn ich vorhabe, zukünftig deutlich mehr mit Grafiken zu arbeiten, um Inhalte zu illustrieren oder einfach nur die Optik spannender zu machen.

Für die nicht ganz so regelmäßigen Besucher hier noch einmal das alte Layout als Screenshot.

Aussichten

Dem Layout liegt ein 12er-Grid zugrunde. Dazu schreibe ich in den nächsten Tagen nochmal etwas. Schließlich soll das Weblog ja nach dem Relaunch auch mit interessanten Inhalten gefüllt werden, was in der Vergangenheit viel zu kurz gekommen ist. Zumindest zwei Themen habe ich da schon in der Pipeline, mehr ergibt sich sicherlich, wenn erst mal wieder Druck auf der Leitung ist.

An einigen Stellen wird es noch Erweiterungen geben, so plane ich eh, mich mal mit dem Thema YQL zu beschäftigen und habe dann ja hier eine schöne Spielwiese. Auch für Bilder muss auf die Schnelle noch eine schöne Darstellungslösung gefunden werden. Noch dazu habe ich dem Thema Barrierefreiheit bisher kaum Aufmerksamkeit gewidmet. Das wird aber noch passieren. Die Grundlagen dafür sind ja schon gelegt.

Feedback zum Relaunch nehme ich natürlich gern an. Lasst euch in euren Kommentaren einfach aus und schont mich nicht.