Auch im Blog Bereich hat sich etwas getan. Als Beispiel WordPress legt eine neue WP 3.14 Version auf, Flatpress eine neue 0.1010.2 Version und wieder Update Arbeit um im sicheren Fahrwasser zu sein. War das alles? Nein…

Avira Personal bringt ein Update, welches unbedingt zur Erhöhung der Web Sicherheit eine Toolbar für Internet Explorer und Firefox installieren will. Wird die Toolbar nicht installiert, beziehungsweise wieder deinstalliert, funktioniert der Webguard in der Avira Personal nicht mehr. Aber kein Ton dazu von der Avira Seite.

Updates, Updates, viele Fragen und offene Punkte. Der Juni 2011 hatte es in sich…

Kriterien der Studie

• Größe der Webseite inklusive aller Inline-Elemente
• Festes oder flexibles Layout
• Feste Schriftgröße in Pixel oder skalierbare Schriftgrößen
• W3C konformer Quelltext und Barrierefreiheit
• Platzierung der Navigation

Größe von Webseiten

In diesem Bereich sind sehr unterschiedliche Ergebnisse aufgetaucht, je nach Thema und Machart der Webseite. Die Seitengrößen beziehen sich jeweils nur auf einzeln aufgerufene Seiten der Webseite und beinhalten den Dokumentinhalt und Inline-Elemente, wie zum Beispiel Grafiken für das Design.

Die Größen variieren zwischen 26KB (Google.de) bis 4MB bei Webseiten mit Flash Animationen (sensisoft.pl). Branchengrößen wie IBM oder SUN liegen im Bereich um die 500KB und in diesem Bereich sind auch viele andere Webseiten zu finden, die sich mit Nachrichten oder Produkten verschiedener Art beschäftigen.

Die überwiegende Anzahl der analysierten Blogs liegt im Bereich um die 200KB, was sich ebenfalls auf vielen privaten Webseiten wieder spiegelt.

Festes oder flexibles Layout

Geprüft wurde mit einer Bildschirmauflösung von 1024×768 Pixel und der aktivierten Verlaufsleiste in verschiedenen Browsern. Auf vielen Webseiten ist der rechte Bereich der Webseite außerhalb des sichtbaren Bereiches im Browserfenster und der horizontale Scrollbalken erscheint, bedingt durch die Verlaufsleiste.

Einige Webseiten arbeiten mit einer festen Breite von 780 Pixel, andere mit 960 Pixel oder größer und nur sehr wenige mit einer flexiblen Breitenangabe in Prozent oder "em"-Werten. Interessant ist die Tatsache, das bei fixen Breitenangaben sowohl mit Tabellenlayout, wie auch mit "div"-basierenden Layout gearbeitet wird. Die flexiblen Webseiten nutzen überwiegend ein "div"-basierendes Layout, sind aber zum Zeitpunkt dieser Analyse deutlich in der Minderheit.

Feste Schriftgröße in Pixel oder skalierbare Schriftgrößen

Das ist der schwierigste Part der Studie, da viele Webseiten die Textvergrößerung des Microsoft Internet Explorer bis einschließlich Version 6 nicht berücksichtigt haben. Im Gegensatz zu Firefox, Konqueror, Opera oder Safari funktioniert die Vergrößerung der Inhalte erst ab Microsoft Internet Explorer 7 mit der Tastenkombination "STRG" und "+".

Oftmals ist eine feste Schriftgrößenangabe von "11px" oder "small" anzutreffen, wobei die Angabe mit "px"-Werten den Internet Explorer daran hindert, die Texte zu vergrößern. Skalierbare Schriftgrößen in "em" oder "%" sind nicht so verbreitet, was daran liegen könnte, das diverse Designelemente nicht flexibel umgesetzt sind. Beim Einsatz von Prozentangaben ist bei Schriftgrößen oft ein Wert von 70 – 80 Prozent zu finden, bei "em"-Werten taucht häufig "0.8em" auf. Zur Erläuterung von "em"-Werten sollte man erwähnen, das ein Wert von "1em" dem Wert von "16px" als feste Schriftgröße gleichgesetzt wird.

W3C konformer Quelltext und Barrierefreiheit

Bei vielen der analysierten Webseiten entsteht der Eindruck, das diese selten auf korrekte Syntax mit den Online Prüftools des W3C überprüft wurden. Auch das Thema Barrierfreiheit zeigt ähnliche Ergebnisse, wobei bei dieser Studie nur Wert auf Tastaturbedienung, selbsterklärende Links und Skiplinks gelegt wurde. Insgesamt ist der Umgang mit Barrierefreiheit bisher noch nicht sehr weit verbreitet.

Platzierung der Navigation

Dieses Kriterium zeigt eine Vielfältigkeit des Internet, die wirklich beeindruckend ist. Einige Webseiten von namhaften Unternehmen der IT Branche plazierten die Navigation teilweise komplett verteilt im sichtbaren Bereich der Webseite, Blog-Systeme von Webexperten meistens oben und an der Seite, Online Magazine oben, rechts und links an der Seite, sowie teilweise unterhalb des Inhaltes. Interessant hierbei das unsichtbare Skiplinks gegenüber den sichtbaren Skiplinks überwiegen, sehr zum Nachteil für mobile Geräte wie PDA oder Handy.

Fazit

Viele Webseiten sind mit animierter Werbung ausgestattet, Blog-Systeme mit Videos und teilweise sind Links sehr unübersichtlich platziert. Google AdWords ist häufig zu finden und insgesamt steigt die Webseitengröße aufgrund der Verbreitung von DSL immer höher, was natürlich auch mehr Möglichkeiten bietet.

Ein kurzes Fazit zum Schluss:

• Webseitengröße von 160KB oder höher
• Überwiegend festes Layout mit "px" Werten
• Schriftgröße oft "11px", nur wenige skalierbare Schriftgrößen
• sehr wenige Webseiten sind valide und barrierefrei
• Anordnung Navigation oben, links, rechts und unten

Die in der Tabelle aufgelisteten Werte stammen von einem neuen iPhone mit Safari, also ohne irgendwelche Updates oder Modifikationen.

Das interessante beim Testen des Safari auf dem iPhone war aber, das meine CSS-Dateien für "media=handheld" gar nicht zum Zuge kommen. Safari zeigt per default die ganze Webseite stark verkleinert und passt sie somit dem Display an (je nachdem, ob Hoch- oder Querformat genutzt wurde). Erst nachdem man die Vergrößerungsfunktion nutzt, wird die gesamte Webseite vergrößert, also nicht nur die Texte sondern auch alle Bilder und Grafiken.

Das iPhone liegt schön in der Hand, cool dabei ist, wenn man es dreht, so passt sich der Bildschirm automatisch in 90 Grad Schritten (Hochformat/Querformat) an. Sehr angenehm und Danke, das ich das iPhone für ein paar Minuten testen konnte

Anhand folgender Webseite möchte ich gerne einige mir wichtige Punkte aufzeigen und etwas zum Nachdenken anregen.

» externer Link zu Lebenshilfe angesagt…

Diese Webseite wurde in Zusammenarbeit von Menschen mit und ohne Behinderung erstellt und soll mir immer wieder zeigen, das ich nicht vergessen sollte über den Tellerrand zu schauen.

• Passende Bilder zur Navigation (Visualisierung)
• Texte vorlesen lassen (Akustische Möglichkeiten)
• Deutliche und aussagekräftige Symbole
• Farbwahl und Kontraste

Nehme ich jetzt eine x-beliebige Webseite die mit Bobby (Watchfire) ein sehr hohes WAI Level erreicht und vergleiche solch eine Seite mit der Seite von Lebenshilfe Angesagt, stelle ich doch einige Unterschiede fest. Sehe ich als Mensch ohne Behinderung alle Bedürfnisse und kann diese richtig umsetzen?

Anfangen möchte ich anhand der bekannten und oft genutzten Skip-Links im Zusammenhang von mobilen Geräte und Screenreader. Ein, wie ich finde, schönes Beispiel um unterschiedliche Sichtweisen aufzuzeigen:

• für mobile Geräte sollten Skip-Links sichtbar sein
• für Screenreader können sie visuell unsichtbar sein

Verzichte ich aufgrund des Designs auf visuelle Skip-Links oder sollten eigentlich nicht doch beide Möglichkeiten abgedeckt werden und eine bessere Zugänglichkeit zu erreichen?

Das nächste Beispiel zeigt weitere Kriterien, die ich oft auf Webseiten vermisse. Wie steht es mit Schriftgrößen, Farben und Kontraste?

• Menschen ohne visuelle Einschränkung sehen gut
• Menschen mit Farb- und Sehschwächen könnten Schwierigkeiten bekommen
• Schriften verkleinern oder vergrößern, bricht das Layout auseinander?
• Wird jeder Browser unterstützt (IE und fixe Schriftangaben)?
• Ist genügend Kontrast vorhanden (Farbwahl)?

Ein weiterer wichtiger Punkt, der scheinbar vielen unbekannt ist, sind die Anzeige-Systemeinstellungen (Darstellung am Monitor mit 96dpi oder 120dpi).

Windows hat per default Installation eine Schriftgröße von 96dpi eingestellt, was normaler Schriftgröße entspricht. Menschen mit Sehschwächen nutzen aber 120dpi, also den großen Font. Hat man ein Layout in einer Darstellung von 96dpi erstellt mit 80 Zeichen pro Zeile, so kommt man bei einer Darstellung mit 120dpi auf bis 15 Zeichen weniger pro Zeile. Im schlimmsten Fall finden Schriftüberläufe in den Textbereichen statt, es erscheinen Scrollbalken oder bei der CSS Funktion <overflow:hidden;> werden Navigation und Texte gar nicht oder nur unvollständig angezeigt, weil sich Bereiche überlappen. Der Browser Firefox ignoriert diese Einstellung des Betriebssystems bei Linux, MacOS oder Windows und benutzt seine eigene Schriftgröße. IE, Opera, Konqueror oder Safari nicht.

Auch Bildschirmauflösungen können Barrieren sein. Wie sieht die Seite mit 800×600 oder 1900×1600 aus? Passt sie sich dem Browserfenster an (flüssiges/elastisches Layout), muss man horizontal scrollen um alles lesen zu können (fixe Breite) oder entsteht rechts und links ein großer leerer Raum?

Ein ebenso wichtiger Punkt ist die Lesbarkeit von Inhalten. Ist eine einfache Wortwahl gewählt worden oder strotzt der Inhalt mit Fachbegriffen? Sind diese Fachwörter mit acronym/abbr entsprechend gekennzeichnet worden?

Ja, was machen dann aber Benutzer die keine Maus benutzen können? Der erklärende Titel erscheint nur beim Überfahren mit der Maus und ist, je nach Einstellung, auch nur für den Screenreader lesbar. Stört der erklärende Titel den Lesefluss? Existiert für Tastaturnutzer ein Glossar? Ist dieses Glossar auch für Screenreader und andere Medien entsprechend aufbereitet oder nur eine schier endlose Auflistung von Erklärungen? Wurde auch daran gedacht, das jeder Browser die Kennzeichnug von Abkürzungen unterschiedlich darstellt (Vergleiche zwischen Firefox, Safari oder IE)? Wurde CSS zur visuellen Kennzeichnung verwendet? Ist diese visuelle Kennzeichnung beim Drucken ebenfalls sichtbar oder wurde es für den Druck entsprechend aufbereitet?

Weitere mir wichtige Ansatzpunkte:

• mit Tastatur oder anderen Hilfsmitteln bedienbar
• selbsterklärende Navigationen und Webinhalte
• logische Struktur in der Webseite
• verschiedene Medien (Druck/Kleinbildschirme/TV)
• Browser abwärts Kompatibilität

Den Punkt Flashseiten möchte ich hier nur als Denkanstoß auflisten, da Flash diesen Artikel sprengen würde (ab Adobe FlashPlayer Version 8 ist es möglich diese durch Einsatz von ActiveScripting zugänglich zu machen).

Der Artikel läßt sich beliebig erweitern und soll zum Nachdenken anregen das jeder Mensch Barrieren sehr unterschiedlich wahrnimmt, abhängig von seinen eigenen Bedürfnissen, seines Standpunktes oder seiner Behinderung.

Weiterführender Link:
» Accessibility Blog Parade 2007

Also habe ich mich nach Alternativen umgesehen und bin dabei über PivotX zu Flatpress gekommen. Flatpress ist ein schnelles und einfaches Blog ohne Datenbank und benötigt nur einen Webserver mit mindestens PHP 4.1.0. Es sind viele Ähnlichkeiten zu WordPress vorhanden, aber arbeitet auf reiner Textbasis, was mir die Möglichkeiten gibt auch ohne Datenbank die Inhalte zu lesen.

Bevor ich hier kurz die Vor- und Nachteile, auf Grundlage der Erfahrungen die ich gesammelt habe, aufzeige, kann sich jeder selbst mal Flatpress anschauen:

» Flatpress – Bloggen ohne Datenbank

Vorteile

• Schnelle und einfache Installation
• Auch in Deutsch verfügbar
• Editor mit Vorschaufunktion
• Einige vorinstallierte Plugins
• Portabel durch Textdateien
• Einfache Datensicherung
• Eigenes Theme kann einfach erstellt werden

Nachteile

• Nicht so komfortabel und umfangreich wie WordPress
• Nicht so viele Plugins
• Nicht so viele vorgefertigte Themes
• Titel und SEO Optimierung muss man selber machen

Im Großen und Ganzen bietet Flatpress einen schnellen und einfachen Einstieg in die Blog-Welt. Wer nicht so hohe Ansprüche stellt ist mit Flatpress hervorragend bedient. Ein großer Vorteil ist die Konformität zu den W3C Empfehlungen und seit der Version 0.703.6 (X)HTML Code im Editor mit einzugeben. Am Anfang habe ich Flatpress nur als temporäre Alternative angesehen, inzwischen möchte ich es nicht mehr missen. Auch kann ich jetzt nicht mehr sagen, mit welchem Blog ich lieber arbeite

Weiterführender Link:

» Link zu Flatpress.org