Sehr gut strukturierte und für den fortgeschrittenen Webdesigner leicht zu verdauende Analyse des langsam zur Vollendung gärenden Webstandards.

Aber ob sich an der Front wirklich etwas tut? Man bedenke, dass dieser Artikel von Tim Tepaße auch schon wieder über zwei Jahre her ist. Und seitdem hat sich nichts bahnbrechendes getan in der Spezifikation, bzw. in den Entwürfen zur Spezifikation.

Infos: HTML 5 | HTML5 – Was geht heute schon, was geht nicht? Der große Überblick

Methode mit line-height

Dieses Vorgehen eignet sich nur für Einzeiler, also einen Schriftzug im Header oder eine horizontales Menü in Form zu bringen. Sobald was umbricht, tut sich die Hölle auf und schlimmere Dinge.

<p style="line-height: 50px; text-align: center">vertikal zentriert</p>

vertikal zentriert

Methode mit display: table-cell;

Über die CSS-Eigenschaft lässt sich jedem Element ein Tabellenverhalten aufzwingen und in Kombination mit vertical-align tatsächlich vertikales Zentrieren erreichen. Leider versteht sich der IE 6 darauf nicht. Mit zusätzlichen HTML-Code lässt sich da was machen, der Quelltext wird dann aber ein uneleganter.

<p class="code" style="display: table-cell; vertical-align: middle; height: 50px;">vertikal zentriert</p>

vertikal zentriert

Der Code:

a:active { position: relative; top: 1px; }

Gibt einen großartigen, geschmeidigen Effekt von Räumlichkeit ohne dabei zu protzen. Hier ein kleiner Testcase: a-active

Quelle: horstscheuer.net

Man kann sich mit einer CSS-Klasse zum Beispiel .ext-link behelfen, die man dem a-Tag hinzufügt. Als CSS-Regel wird hinterlegt:

a.ext-link {padding-right: 10px; background: url(images/extern-icon.jpg) right no-repeat;}

Dieses zu Fuß gehen hat den Vorteil, dass es unter jedem Browser funktioniert. Nachteilig ist, wenn man diese Klasse nachträglich bei einer Masse von Links nachrüsten muss. Da schafft die etwas kompliziertere Regel mit der sich Elemente mittels spezifischen Werten für Attribute auswählen lasssen:

a[href^="http:"] { background: transparent url('/images/extern-icon.jpg') right no-repeat; padding-right: 10px;}

Links auf eigene Domain ausschließen:

a[href^="http://pixeldrama.de"], a[href^="http://www.pixeldrama.de"] { background: transparent; padding-right: 0px;}

Damit muss der HTML-Code nicht angerührt werden. Ausgeschlossen von der Iconisierung sind Links, die auf die eigene Domain zeigen. Großer Nachteil der Methode ist, dass sie nur von modernen Browsern unterstützt wird. Erst der Internet Explorer 7 stellt alles korrekt dar, alle Internet Explorer darunter verweigern die Gefolgschaft. Hier ist die Zeit auf unserer Seite, irgendwann wird der Internet Explorer 6 wohl aussterben. Bis diese Stunde gekommen ist, sichern nur CSS-Klassen maximale Browserkompatibilität.

Fein raus sind wie üblich die WordPressnutzer, denn diese können auf das Plugin Link Indication zurückgreifen. Dieses läuft unter allen WordPressversionen aufwärts von 2.0. Es hängt dynmaisch Klassen an externe Links, so dass auch ältere Beiträge und Seiten nicht alle nochmal angefasst werden müssen, bietet aber die Möglichkeit unter Seiten wie Wikipedia oder Heise zu unterscheiden. Diese erhielten dann ein extra Icon. Macht alles noch mehr usable. Hätte es diese Plugin noch nicht gegeben, der Zeitpunkt für ein WordPress-Plugin aus meiner Feder wäre nahe herangerückt.

Aber das ist so das Kreuz mit WP, es gibt einfach schon alles für das System, man kann sich ruhig zurücklehnen und fett werden, wenn man nur weiß, wie man Google bedient.

Im Gegensatz zu YAML oder anderen Frameworks greift Kickstart nicht vor, sondern sondern enthält hauptsächlich leere Dateien. Komfortabel ist, dass alles schon gebrauchsfertig verlinkt ist. Nur die HTML-Datei enthält die aller notwendigsten Elemente, die aber validieren. Beigelegt ist noch default.css von Stefan Nitzsche und reset.css von Eric Meyer.

Die einzige Bevormundung oder Vorgriff, den sich Gerrit gestattet, ist die Einbindung von jQuery. jQuery ist eine vergleichsweise schlanke Javascript-Bibliothek, die vor allem durch eine leicht verständliche Syntax besticht.

Kickstart 0.2

Ein Blick auf den Quellcode, offenbart eine ungehörige Schachtelung desselbigen in div-tags, welche ein Tribut an die Flexibelität des Frameworks sind. Der Name YAML (Yet Another Multicolumn Layout) verrät, dass es um vielspaltige Layouts geht. Und die gehen so bei drei Spalten los. Da Pixeldrama aber eigentlich gut mit zwei Spalten klarkommt, musste ich auf einige Eigenschaften verzichten, die mir ein rein auf zwei Spalten getrimmtes Markup geboten hätten, während YAML eigens dafür beschnitten werden muss. So konnte ich im Content-Bereich nicht ohne weiteres ein Clearing von Elementen einsetzen, da sie dann nicht mehr die Sidebar umflossen.

Kurz und gut, ich habe mich entschlossen das Markup und CSS neu zuschreiben und habe nur das Content-Stylesheet übernommen, was dazu führt, dass fragmentarisch ein paar YAML typische Selektoren erhalten geblieben sind, wie float_left… Resultat der Wochenendeaktion: Mein Layout ist flexibler auf meine Bedürfnisse abgerichtet und hat an Markup und CSS gespart.

Bei der Gelegenheit, habe ich auch noch die Übersichtsseite meiner Blogbeiträge aufgeräumt und optisch ein wenig ruhiger gestaltet, zusätzlich haben im Archiv nach jahrelanger Abstinenz Tabellen Einzug gehalten, da sie sich semantisch und auch, was natürlich nachrangig ist, entwicklerfreundlich angeboten haben. Wer ein gute Know-How-Quelle für barrierefrei Tabellen sucht, wird auf macximal fündig.

Zeitnah werde ich mich an meinen Footer ranwagen, mit den ich seither so meine Probleme habe und meine Referenzen endlich online stellen, dann habe ich das Dringstende auf diesem Pixeldrama erstmal erledigt.

Die Fehlersuche hat mich einige Zeit gekostet, deswegen dieser Post. Denn mich hat eine ausgiebige Internetrecherche nicht ans Ziel geführt, sondern nur eine mühselige und relativ ineffiziente Ausschlußmethode :).

Mein Ausgangspunkt in der HTML-Datei:

<head>
<link rel="stylesheet" media="all" href="style.css">
</head>

Und im zentralen Stylesheet sah es so aus:

@import url(layout.css);
@import url(content.css);
@import url(print.css);

Mit diesem Code hatte ich mir die Probleme ins Haus geholt und es dauerte ein Weilchen, bis ich herausbekam, wo es hakt. media="all" ist nicht logisch, wenn im referenzierten Stylesheet (im unserem Fall style.css) mit @import url(); weitegearbeitet wird. Denn in den dort referenzierten CSS-Dateien wird der Code von einer Klammer umschlossen, welche einen Hinweis geben soll, für welches Ausgabemedium das Stylesheet bereitgestellt wird.

@media all {
CSS-Code
}

@media print {
CSS-Code für Druckausgabe
}

Also ist das Verwenden von media=”all” an dieser Stelle unnützt und birgt auch noch die besagten Probleme mit dem IE 5.X. Wer aber dennoch nicht darauf verzichten möchte, weil beispielsweise alte Netscapeversionen ausgeschlossen werden sollen, kann sich damit behelfen:

<style type="text/css" media="all" >
@import "style.css";
</style>

Über diesen Codeschnipsel stolpert der IE nicht. Wer sich jetzt noch fragt, wie ich denn zu diesem freudigen Erlebnis mit dem Internet Explorer kam, dem sei zur Vorsicht geraten, wenn er per Drag and Drop CSS-Dateien im E-Texteditor einbindet. Dieser ansonsten überaus geniale Editor fügt dem link-Tag dummerweise das media-Attribut hinzu.

Titel der Unterseite >> Titel der Website – Slogan

Dies lässt sich auch mit Textpattern umsetzen, ohne Plugin und Schnick-Schnack. Aber ein paar Handgriffe sind vonnöten. Der Textpattern Tag <txp:page_title /> verhält sich suboptimal und hilft da nicht wirklich weiter, denn er produziert das hier:

Titel der Website >> Unterseite

Unangenehmer wird es für den User, wenn er nun mehrere Fenster oder Tabs einer Website geöffnet hält. Der Browser übernimmt den Titel-tag normalerweise als Fenster- bzw. Tabüberschrift, und dann trägt es nicht zu Übersichtlichkeit bei, wenn alles mit dem gleichem Titel beschriftet ist. Als Abhilfe binde ich <txp:section title="1" /> in Verbindung mit <txp:site_name /> und <txp:site_slogan> in den Titeltag ein. Dann muss ich die Sections mit meinen Keywords betiteln, ansonsten macht der Einsatz des Section-tags kein Sinn :). Für die Startseite schließe ich allerdings den Sectiontag mittels dem Conditional Tag <txp:if_section> aus:

<title>
<txp:if_section name="default">
<txp:site_name /> - <txp:site_slogan />
<txp:else />
<txp:section title="1" /> &raquo; <txp:site_name />
</txp:if_section>
</title>

Das erzeugt die optimale Ausgabe. Es gibt aber noch einen Haken, denn das funktioniert nur dann, wenn ich Textpattern als Antrieb für eine statische Seite benutze. Möchte ich aber einen Blog mit Textpattern und optimalen Titeln, dann muss der Umweg über einen Baustein gegangen werden. Sonst kann ich so eine Ausgabe nicht erreichen:

Artikeltitel >> Titel der Unterseite >> Titel der Website

Denn <txp:title /> ist ein arcticle-Tag und muss deswegen einen Baustein der Artikel-Klasse erstellen, und dort den <txp:title /> reinschreiben. Den Baustein speichere ich mit den Namen optimaler-titel ab. Aufgerufen wird er mit <txp:article form=“optimale title“>. Dass, vermengt mit unseren Codeschnipsel, macht den optimalen Titel auch für einen Textpatternblog perfekt.

<title>
<txp:if_section name="default">
<txp:site_name /> - <txp:site_slogan />
<txp:else />
<txp:article form="optimal-title" /> &raquo; <txp:section title="1" /> &raquo; <txp:site_name />
</txp:if_section>
</title>

Hilfreich ist eine zweite Seitenvorlage für die statischen Seiten, aus denen ihr den article-Tag wieder entfernt. Sonst habt ihr einen Artikeltitel vor dem Titel der Unterseite.

So das wärs dann gewesen. Ich hoffe es hilft was.

Sehr viel dramatischer als die verschleppte Weiterentwicklung der Standards und damit letztendlich die Fundamente der Internetechnik, ist der Richtungsstreit zwischen Vertretern der Browserhersteller (WHATWG) und dem W3C. Falls wirklich diese raue Vielzahl an Standards ( XHTML 2.0, XHTML 5.0; HTML 5) bei rumkommt, dann gute Nacht. Denn in der Logik setzen alle neuen Standards schon ein Verständnis für die vormaligen Empfehlungen des W3C voraus. Das heißt der klassische Tabellenlayouter wird die neuen Standards nicht annehmen, weil er gar nicht in der Lage dazu ist. Woraus wiederum folgt, dass das Netz mittelfristig ein trashiger Ort für trashige Websites bleiben wird.

Die Zahlen für Webentwickler, die noch Anhänger der klassischen Tabellenkonstrukte sind, sollen jenseits der 50% Marke liegen. Die Mehrheit der Webdesigner wird von einem neuen Standard nichts mitbekommen.
Angesichts dieses Trends mag man bezweifeln, ob der derzeitige Status Quo sobald aufgebrochen wird.

Ausführlicher Artikel auf Golem: Webtechnologien im Umbruch: Der steinige Weg von HTML 5

So hat Webdesigner Nadja Müller-Schade aus Leipzig sich die Mühe gemacht, das Markup und CSS einer Breadcrumb – Navigation im Stile der auf apple.com verwendeten Breadcrumb-navi auf ihrem Weblog cne _LOG zum Download bereitzustellen. Zwei relativ kurze Codeschnipsel + Grafik und fertig ist das Gartenhaus. Auf einer extra Seite bietet Nadja noch ein paar individualisierte Varianten an.

Optimale Ausführung für Einsteiger, Zeitsparer und Inspirationslose, schöne Idee und danke dafür.

Website besuchen…

Link zum Video: barrierefreies Webdesign

Via Webstandard

So hat man die taz.de flink einer unlogischen Semantik überführt:

Wie man deutlich sieht, ist der Kaczinskyartikel noch mit passenden h1-tag, h2-tags und für den kurzen Anreißer mit dem p-tag ausgezeichnet. Seltsamerweise ist für die nachrangigen Meldungen kein p-tag zum Einsatz gekommen, auch mit dem h3-tag wird gespart.

Tinglelets eignen sich für den geschwinden Überblick, ersetzen aber nicht tiefere Analysetools wie Firebug oder die Web Developer Extension. Diesen Anspruch erheben sie auch gar nicht.

tingelets are not aiming to replace tools like Firebug or Style xope

Auf zur Website der Tinglelets…

Infolgedessen muss, falls man nicht einen Editor benutzt, der dies automatisch tut – wie z.B. E-TextEditor :-), auch mal eine Entität nachgeschlagen werden. Zu diesem Zweck kann man sich HTML Entity Character Lookup näher ansehen. Mit dem Einsatz von AJAX Javascript, hat nichts mit AJAX zu tun, fühlt sich nur so an, bekommt man augenblicklich nach Eingabe des Sonderzeichens die Entität angeboten. Sehr angenehmer Service.

Zusätzlich ist natürlich auch möglich, sich auf die altmodische Art durch entsprechende Listen, wie bei e-workers oder XHTML Character Entity Reference oder HTML-Zeichenreferenz zu quälen.

Website HTML Entity Character Lookup besuchen…

Starthilfe bietet Uni-form, das nicht nur HTML und CSS schon vorbereitet hat, sondern auch mit der beliebten und bekannten Javascript Bibliothek jQuery dem Webdesigner andient. Vor allem geht es darum, weniger Zeit in die Programmierung stecken zu müssen, dafür stehen Code Snippets zur Verfügung, und mehr Kraft für die Gestaltung einsetzen zu können. Unterstützt werden alle modernen Browser: IE6, IE7, Fx1.5.x, Fx2.x Opera9.x, Safari, Konqueror.

Not many people know how to mark up their forms properly and semantically, so hopefully this will be of help to them – and in turn – also help people who will eventually be using those forms.

Für den kenntnisärmeren Anwender gibt es eine Dokumentation und ein Forum, die eine gute Einführung in das Formulartemplate bieten. Ob ich Uni-Form auch mal selber nutzen werde, kann ich noch nicht sagen, da ich gerne selber alles umsetze und ich einen individuellen Stil habe.

Website besuchen und Download

Das Projekt steht unter der Creative Commons License, bei Verwendung also einen Backlink einrichten!

Trotz alledem ist es doch lobenswert, dass MTV auf die Leute hört, für die sie die Website betreiben. Auf dem MTV-blog wird Verbesserung in Punkto Navigation, Suchfunktion, und Geschwindigkeit ausgelobt.

Doch auch mich als HTML-Anhänger mit starken Glauben an Accessibility freut es, wenn ein potentes Unternehmen mit der Strahlkraft von MTV sich der Argumente bedient, mit denen auch ich des öfteren versuche Kunden zu bezirzen oder besser gesagt, ihnen Flash als Fundament für ihre Website auszureden.

Templates sparen Zeit

Nun bestehen die meisten Seiten alle aus ein und demselben Grundgerüst und zwar hoffentlich aus validen, sauberen HTML-Markup. Um hier nicht immer das Rad neu zu erfinden, empfiehlt es sich, mit einem Template zu arbeiten. Auch die CSS-Datei kann schon in Teilen voreditiert sein. So können Teile wie header, footer, wrapper, Absätze, die immer wiederkehren, schon enthalten sein, damit man nicht immer wieder das Gleiche tippen muss. Viele Websites ähneln sich in der Menüführung und der Anordnung von Elementen. Gut so, denn sich auf jeder Website komplett auf eine neue Navigation umstellen zu müssen ist nicht unbedingt benutzerfreundlich. Gerade Blogs bestehen typischer Weise aus zwei bis drei Spalten, die auf ca. 750px Breite optimiert sind. Viele Seiten bauen ähnlich auf diesen Layout auf, was nicht schlecht oder eintönig ist, denn Platz für eigene Handschrift im Layout ist mit geschickten Einsatz von CSS allemal.

Template? Ja aber welches?

Die Frage ist nicht leicht zu beantworten. Aber die Verwendung eines gut vorgearbeiteten HTML-CSS-Templates macht den ersten Schritt zur barrierefreien Webprogrammierung etwas leichter. Zugegeben, das ist ein Plus, welches man erhalten kann, wenn man auf Templates von Profis zurückgreift. Diese sind aber nicht unbedingt für den Einsteiger leicht zu verstehen. Unerfahrene sollten ihre ersten Schritte mit Templates rudimentärer Natur machen.

Einfachste Grundgerüste

sind Templates nur aus HTML-Code bestehend und ohne CSS-Datei. Auf Perun.net gibt es zum Download eine kleine Template-Datei. Sie enthält die allernötigsten Säulen eines jeden HTML-Dokuments, was bekanntlich mit einem doctype anfängt.

Accessify.com bietet den interessanten Dienst markupmaker an. Er generiert euch valides HTML mit nach Wunsch georderten Komponenten. Es ist möglich den Doctype zu wählen.

Etwas komplexer und mit CSS

Für mich ist der Dauerbrenner das Standardtemplate von Manuela Hoffmann. In wenigen Minuten kann man Inhalte zentrieren und ein Spaltenlayout erstellen. Schrifttypen- und Größen sind voreingestellt, wer hier eine andere Auffassung als Manuela hat, kann die Schriften in Größe und Typ mit denkbar wenigen Handgriffen auf die persönliche Sicht der Dinge umstelllen.

Bei particletree.com gibt es ähnliches, aber der CSS-Teil ist noch uneditiert.

CSS Templates oder eher Frameworks

gibt es im Netz mittlerweile Einige. Ich habe mal bei del.icio.us CSS-Template als Suchterm eingegeben, was schnelle Resultate liefert. Ist nur fraglich, wie flexibel sie sich auf jeweilige Einsatzszenarien anpassen und ob die Templates zu allen häufig verwendeten Browsern kompatibel sind.

Ein Template das ich wirklich empfehlen kann und das gerade in der webdesignerischen Blogosphäre hofiert und als Framework beschrieben wird, ist YAML.

YAML hat auch einiges vorzuzeigen:

• Es ist ein hochflexibles multispalten Layout, die Spalten lassen sich fast beliebig anordnen
• Auf allen wichtigen Browser optimiert, man muss sich nicht mit jedem Browserbug persönlich herumärgern
• sehr gute Dokumentation

Nachteile:

• Das CSS ist wirklich etwas kompliziert, aufgrund der Komplexität, Robustheit und der Flexibilität
• Die Einarbeitung kostet Zeit, aber ohne grundlegendes Verständnis für die Denkweise des Autors läßt sich YAML auch nicht effizient einsetzen.

Mittlerweile ist ein Buch zu Yaml erschien, Rezensenten sind unter anderem Gerrit und Alex auf Perun.net. Und diese Jungs sind sehr überzeugt von der neuesten Lektüre in Sachen Webprogrammierung mit CSS. Trotz guter Dokumentation, Foren und guter Kritiken ist YAML wohl eher für den professionellen Webdesigner geeignet, als für den Hobbyschrauber. Ganz nebenbei bemerkt, setzt Pixeldrama.de auf YAML auf :).

Alle Links zum Artikel

• Perun.net » Grundgerüst zum mitnehmen
• Accessify – Home of the Accessibility Toolset
• markupmaker
• Manuela Hoffman » Standard Template – XHTML und CSS – zum Mitnehmen
• particletree.com » Quick Start Your Design with XHTML Templates
• YAML Version 2.5.2
• del.icio.us » Suche nach CSS-Templates

Webentwickler sollten sich in Firefox zum Menü ›Extras‹ > ›Add-ons‹ begeben und dort sämtliche Erweiterungen deinstallieren, die sie bisher zum Analysieren von Websites benötigt haben

.

Bis auf die Webdeveloper Toolbar kann ich mich dem Aufruf nur anschließen. Firebug ist wirklich das Beste, was ich je gesehen habe, in Sachen HTML- und CSS-Analyse, Javascript debuggen, sich mal den DOM näher angucken. Ein Schmankerl ist bei der CSS-Analyse das Durchstreichen von CSS-Selektoren, die durch wichtigere oder später eingebundene Selektoren ersetzt werden.

Gerade bei YAML macht sich das sehr angenehm bemerkbar, bei diesem komplexem CSS-Framework sorgt Firebug für schnellen Überblick.