Generelles Design

Dass die neue Optik der Website ziemlich obamaesk anmutet, ist nicht nur mir aufgefallen, auch in das Design Tagebuch hat sie es deswegen geschafft. Gut, sich die überaus erfolgreiche Online-Kampagne von Herrn Obama als Vorbild zu nehmen ist jetzt sicherlich nicht verkehrt, nicht zuletzt, weil ja Nachahmung laut Oscar Wilde die höchste Form der Anerkennung sein soll. Der Nachteil solcher großen Fußstapfen ist halt nur, dass man dann auch dem Vergleich standhalten muss, was aber meiner Meinung nach hier nicht der Fall ist.

Das Design wirkt auf mich generell unruhig und unstimmig. Im Gegensatz zum „Original” präsentiert es sich nicht aufgeräumt, die einzelnen Elemente sind teilweise zu dicht gedrängt. Ein optisches Ungleichgewicht entsteht auch durch die zentrale Ausrichtung mit den rechtslastigen (internen) Werbebannern.

Web-Standards

Die Umsetzung eines Designs mittels standardkonformer (X)HTML und CSS ist das Fundament einer professionellen und zeitgemäßen Website. Eine Prüfung mit verschiedenen Validierungs-Tools zeigt hier leider einige Fehler, sogar der RSS-Feed entspricht nicht den Vorgaben.

Ob dies nun ein Indiz dafür ist, wie gut sich diese Partei an Regeln halten kann, sei dahingestellt , die handvoll Fehler im XHTML-Quellcode könnten jedenfalls leicht ausgebessert werden. Die Herausforderung liegt hier auch darin, die Standardkonformität auch über längere Zeit aufrecht zu erhalten. Laut Jürgen Koller von Kollermedia.at waren es auch schon mal viel mehr Fehler, es wird also fleissig daran gefeilt.

Aber auch in den Style Sheets gibt es noch hauptsächlich Flüchtigkeitsfehler. Nur ein paar Anweisungen, die nur der Internet Explorer versteht, sollten verschwinden oder, wenn es denn wirklich sein muss, zumindest über Conditional Comments vor anderen Browsern (und anderen Betrachtungssystemen) versteckt werden.

Übrigens, nur um der Gerechtigkeit genüge zu tun: Barack Obamas Website ist auch größtenteils nicht standardkonform.

Accessibility

Auch in Bezug auf die Barrierefreiheit ist die Website oevp.at noch nicht da, wo sie eigentlich sein sollte. Eine Prüfung nach den WAI-Richtlinen ergibt wieder einige Fehler. Eine der Faustregeln für Barrierearmut lautet außerdem, dass die Website auch ohne Einsatz von Style Sheets und JavaScript logisch erfassbar und verwendbar sein sollte. Deaktiviere ich beides, erhalte ich leider nur recht unstrukturierte Inhalte und unnötige Elemente, wie zum Beispiel einige leere Buttons auf der Startseite.

Auch störend ist die relativ kleine Schriftart im Hauptmenü und das halbtransparente Untermenü, wo sogar ich mit meiner 3/4 Dioptrie Probleme habe, die einzelnen Punkte sofort zu erfassen. Der Farbkontrast könnte an manchen Stellen auch ruhig stärker sein.

Zwar gibt es auf der Website eine Funktion zur Vergrößerung der Schrift, nur nutzt diese wenig, wenn zum Beispiel das Hauptmenü oder der Fußteil davon gänzlich unbeindruckt bleiben oder das Layout so starr gebaut wurde, dass ich dann lauter Scrollbalken habe, weil die Inhalte sprichwörtlich ihren Rahmen sprengen. Mittlerweile bieten alle gängigen Browser (und auch Betriebssysteme) Benutzungshilfen, wie zum Beispiel Vergrößerungen, an, die wesentlich effektiver arbeiten, als die Funktion auf der Website.

Usability

Hier gäbe es jede Menge Verbesserungspotenzial. Hier nur einige Punkte:

Links

Es wird sehr schnell deutlich, dass es kein durchgängiges Konzept für Links gibt. Bei den Teasern ist unintuitiver Weise der Inhalt der Link zum ganzen Artikel, dann gibt es anderswo wieder blaue Links, dann sind sie wieder grau… Alles in allem nicht durchdacht und verwirrend. Die Grundregel aus Sicht des Besuchers „Don’t make me think!” wurde hier leider nicht beachtet.

Navigation

Ein weiteres Manko ist, dass ich weder durch eine optisches Kennzeichnung im Menü, noch über den (nicht vorhandenen!) Seitentitel, noch über eine sprechende URL erfahre, wo in der Struktur ich mich gerade befinde. Der einzige zarte Hinweis ist der große Balken, wo die Überschrift des Hauptmenüpunktes steht, die aber teilweise auch inkonsequent ist („Politik” im Hauptmenü heißt „Themen” im Balken). Wozu überhaupt dieser Balken? Ein Menü mit Hervorhebungen löst den Balken ab und ich spare jede Menge Platz für Inhalte.

Mag auch sein, dass Herr Pröll wichtiger ist als andere Teammitglieder, ihm aber einen eigenen Hauptmenüpunkt zu widmen, obwohl seine Seite sowieso unter dem Menüpunkt „Team” zu finden ist, zerstört die Logik der Navigation. Shortcuts sollte man anders gestalten und ein Menü stets die Seitenstruktur abbilden.

Top Stories mit Passwort

Ein Highlight ist auch, dass ich vom Firefox jedesmal gefragt werde, ob ich mein Passwort speichen möchte, wenn ich mich auf der Startseite durch die „Top Stories” klicken möchte. Offenbar wird hier gleich jedes Mal das davon eigentlich unabhängige Login-Formular mitgeschickt.

RSS Feed

Wenn ich schon einen RSS Feed anbiete, dann sollte dieser auch über entsprechende Meta-Tags eingebunden werden, damit auch Browser und andere Tools wissen, dass dieser existiert und ein Abonnement kinderleicht wird, weil man nicht auf der Seite nach etwaigen Icons suchen muss.

Sprechende URLs

Sprechende URLs, also zum Beispiel oevp.at/links/teilorganisationen statt oevp.at/links/index.aspx?pageid=38038, machen die Website sowohl für Menschen als auch Maschinen weitaus nutzbarer.

Suchmaschinenoptimierung

Die ÖVP möchte offenbar auch nicht gut gefunden werden. Meta-Tags für Stichworte und Kurzbeschreibung fehlen komplett, viel schlimmer ist aber, dass der Titel ausnahmslos „Die Österreichische Volkspartei” lautet, egal auf welcher Seite ich mich befinde. So etwas gefällt Google und Co. überhaupt nicht, den menschlichen Betrachtern übrigens noch viel weniger.

Der tatsächliche Beitrag von sprechenden URLs zur Suchmaschinenoptimierung ist zwar umstritten, unterschätzen würde ich ihn aber auf keinen Fall.

Web 2.0

Die selbst proklamierte Web 2.0-Tauglichkeit beschränkt sich auf Links zu einer handvoll ÖVP-Blogs und etablierten Plattformen, wie zum Beispiel YouTube, Flickr oder Facebook. Die Möglichkeit Beiträge auf der Website zu kommentieren gibt es derzeit noch nicht, laut Fritz Kaltenegger, Generalsekretär der ÖVP, wird das aber zeitgleich mit der Veröffentlichung des neuen Parteiprogramms möglich sein (Quelle: derStandard.at).

Auf die einzelnen Blogs möchte ich hier gar nicht näher eingehen, das hat schon Max Kossatz auf Wissenbelastet.com ausführlich erledigt.

Ein kurzer Blick auf YouTube und Flickr verrät: Viel mehr als Videos von Pressekonferenzen oder Fotos von pressewirksam händeschüttelnden Grinsekatzen gibt es dort nicht. Spektakuläre Betrachungszahlen offenbar deswegen auch nicht.

Die Facebook Fanpage wird hauptsächlich als Aggregator verwendet, woran es jetzt prinzipiell nichts auszusetzen gibt. Wie aktiv die ÖVP dort um einen Dialog mit den knapp 800 Fans bemüht ist, kann ich schwer beurteilen. Offizielle Reaktionen auf die ohnehin spärlichen Kommentare von Besuchern scheint es jedenfalls nicht zu geben.

Fazit

Hier wurde eine große Chance vertan. Abgesehen von den technischen Mängeln: Im Web 2.0 geht es um Authentizität und Dialog. Der neuen Website fehlt es an beidem. Einen großartigen Mehrwert im Vergleich zur alten Version erschließt sich für mich eigentlich nicht.

Dass die Website eine „100%ige Eigenproduktion der ÖVP” ist, halte ich prinzipiell für eine gute Sache, bei so einem Projekt kann man viel lernen. Dass das Ergebnis der Mühen und sicherlich unzähligen Stunden der freiwilligen „Bastler” offenbar mangels professioneller Beratung nicht optimal ist, finde ich äußerst schade.

Auf mich wirkt die Website jedenfalls unprofessionell. Und gepaart mit dem Tamtam rund um die Veröffentlichung macht es für mich den Eindruck, als hätte die ÖVP das Medium Web und dessen Potenzial noch nicht ganz verstanden.

Ich bin jedenfalls gespannt, wie sehr die Partei ihre „Homepage” in nächster Zeit noch verbessern wird.

Similar posts:

• Bedürfnispyramide eines Website-Besuchers
• Link Prefetching im Firefox (und wie man es deaktiviert)
• Mutig in die neuen Zeiten
• LoungeFM dank Fluid ohne Browser genießen
• Freewave wird internationaler

Comment on this post.

Und dennoch: Unabhängig davon, ob es sich um eine Unternehmens-Website, ein Blog oder eine komplexe Web 2.0 Anwendung handelt, gelten in den meisten Fällen eines Website-Besuchs ein paar grundlegende Kriterien, die erfüllt werden wollen, damit er sowohl für den Betrachter als auch den Anbieter zu einem positiven Erlebnis wird.

Ich habe versucht, diese Kriterien zusammenzufassen und sie wie die Maslowsche Bedürfnispyramide aufzubauen. Das Prinzip dieser Pyramide funktioniert so: Wird das Bedürfnis einer Stufe nicht erfüllt, sind die darüberliegenden hinfällig, was die unterste Stufe zum Einstiegspunkt macht.

Erreichbarkeit

Das Fundament eines jeden Website-Besuchs: Die Website muss erreichbar sein. So trivial das klingt, so ist es doch ein mehr oder weniger kompliziertes Zusammenspiel vieler einzelner Elemente.

Da wären unter anderem die Internetleitung, der Router, das Modem, etwaige Proxy-Server, DNS Server, Web Server, Router, Switches, Firewalls und vieles mehr. Und nicht zuletzt spielt auch der eigene Computer mit der darauf installierten Software eine große Rolle. Nur wenn all diese Zahnrädchen reibungslos ineinandergreifen, kommen die Daten auch dort an, wo sie hingehören.

Die URLs, also die Adressen unter denen die einzelnen Seiten erreichbar sind, spielen hier ebenfalls schon eine große Rolle. Im Idealfall sollten Inhalte immer über die erstveröffentlichte Adresse erreichbar bleiben, man spricht dann von sogenannten Permalinks. Löscht oder verschiebt man Seiten ersatzlos, bekommt ein Besucher, der über einen externen Link auf die Website gelangt ist, nur „Nicht gefunden”-Meldungen präsentiert, was nicht unbedingt zum Erfolg der Website beiträgt. Ein interessanter Artikel zu diesem Thema lautet „The Importance of Being Permanent” von Simon Waldman (via Helge).

Funktionsfähigkeit

Wird man auf der Website ausschließlich von Fehlermeldungen begrüßt, hinterlässt das nicht gerade einen guten Eindruck. Ich spreche hier nicht von den kleinen Schnitzern, die die Funktionalität der Website in keinster Weise beeinträchtigen, sondern von den fatalen Fehlern. Quellen dafür gibt es ja wirklich genug. Seien es die 500er Errors, Programm-Fehler oder „Bandwidth exceeded“-Meldungen, für den Besucher gibt es kein Weiterkommen und oftmals auch kein Wiederkommen.

Ebenfalls unter diesem Punkt untergekommen sind die groben Anzeige- und Funktionsfehler, die den Benutzer daran hindern, die Website so zu nutzen, wie es ursprünglich gedacht war. Dies kann zum Beispiel passieren, wenn Sites nur für einen Browser „optimiert“ werden, ein glücklicherweise immer seltener auftretendes Phänomen, immerhin gibt es so viel verschiedene davon.

Durch die Einhaltung der Web Standards unter Berücksichtigung der Allüren der einzelnen  Browser inklusive ausgiebiger Tests können diese Fehler im Vorfeld ausgemerzt werden.

Funktionieren sollte eine Website natürlich für so viele Menschen wie möglich. Ist eine Seite rein optisch eindrucksvoll, aber der Code dahinter ein Saustall, wird sie zum Beispiel für blinde Menschen, die auf Bildschirmleseprogramme oder die Braillezeile angewiesen sind, einfach nicht funktionieren.

Richtlinien der Web Accessilbity Initiative (WAI) wie zum Beispiel die Web Content Accessibility Guidelines (WCAG) sollen eine größtmögliche Barrierefreiheit ermöglichen.

Im österreichischen E-Government-Gesetz (§1 Abs. 3) war übrigens die Zielsetzung gesetzlich verankert, barrierefreien Zugang zu behördlichen Internetauftritten für Menschen mit Einschränkungen bis 1. Jänner 2008 umzusetzen. Bei vielen Websites heißt es aber nach wie vor „bitte warten”.

Orientierung

Kein Besucher wird sich auf einer Website sonderlich wohl fühlen, wenn er nicht auf Anhieb erkennt, wo in der Struktur er sich gerade befindet und wie er navigieren kann.

Die sofortige Erkennbarkeit von Navigationselementen, sei es ein Menü oder einfache Links ist einer der Grundsätze der „Web Usability“. Ziel muss es sein, die Website einfachst und intuitiv nutzbar zu machen. Verbesserungsbedarf gibt es im Netz jedenfalls reichlich, denn man glaubt es kaum: Es gibt tatsächlich noch Menschen, die meinen, dass man wichtige Textpassagen im Web unterstreicht.
Eine Buchempfehlung zu diesem Thema ist übrigens „Don’t make me think“ von Steve Krug. Dort werden Richtlinien für eine durchdachte Usability mit dem Hausverstand erarbeitet.

Selbstverständlich spielen die Leitfäden der Web Accessibility Initiative auch in dieser Stufe eine gewichtige Rolle. Techniken wie zum Beispiel semantisches HTML, also die korrekte Verwendung von HTML-Bausteinen nach ihren logischen Bedeutungen und Strukturen, tragen ebenfalls zur besseren Verarbeitung von Hilfssoft- oder -hardware und damit zur besseren Orientierung bei.

Warum kommt die Orientierung in der Pyramide vor dem Verständnis? Nun, es kann ja vorkommen, dass der Besucher seine Ziel-Website nicht in einer ihm bekannten Sprachen vorfindet, er sich aber für die Sprachumschaltung trotzdem orientieren und diese erkennen können muss.

Verständlichkeit

Der Betreiber und der Betrachter eines Internetauftritts müssen mindestens zwei Dinge gemeinsam haben, wenn sich eine positive Beziehung zwischen den Beiden entwickeln soll. Zum einen wäre das die Sprache, zum anderen das Wissen über das auf der Website behandelte Thema.

Das gemeinsame Sprachverständnis fängt bei der Schrift und Symbolik an. Erkennt der Besucher nicht einmal die Schriftzeichen, wird er nicht sonderlich viel mit den dargebotenen Texten anfangen, sofern die Inhalte nicht auch in seiner Sprache anzeigbar sind (wo wir wieder bei der Orientierung und Sprachumschaltung wären). Aber auch einfache Symbole können eine Barriere darstellen. Vereinfacht heißt das: Man stelle sich einen Website-Besucher auf YouTube.com vor, der die Symbole für „Abspielen“ () oder „Pause“ () einfach nicht kennt. Entweder startet jetzt ein Lernprozess oder YouTube.com wandert nicht in die Favoritenliste des Besuchers.

Erst ein gemeinsamer Wortschatz ermöglicht also überhaupt das generelle Verstehen von Texten. Grundsätzliche Regeln der Semiotik müssen erfüllt werden, damit eine Botschaft vom Sender an den Empfänger verarbeitet werden kann. Sollen diese Botschaften auch inhaltlich verstanden werden, muss sich das Wissen von Beiden über die Inhalte zumindest überschneiden.

Die Aufbereitung von Text im Internet ist eine Wissenschaft für sich, die den Rahmen dieses Artikels bei weitem sprengen würde. Viele Faktoren entscheiden dabei zwischen Verwerten oder Verwerfen.

Verwertbarkeit

Egal aus welchem Grund und auf welchem Weg ein Besucher zu meiner Website gelangt ist, kann ich ihn neugierig machen, ihn fesseln und eventuell sogar zur Partizipation animieren, haben wir beide gewonnen.

Ziel einer Website muss es sein, Informationen effizient und effektiv nutzbar zu machen. Dabei ist es egal, ob das nun Texte, Bilder, Dokumente oder Filmchen sind. Hat der Benutzer für seine Zwecke einen echten Mehrwert für eine minimale Anzahl an Klicks erhalten, wird er sich länger auf der Website aufhalten, sie mit einem positiven Gefühl wieder verlassen und im Idealfall weiterempfehlen und wiederkommen.

Auswertungs- und Analyse-Tools wie zum Beispiel AWStats, Google Analytics oder Mint können enorm bei der Optimierung einer Website helfen. Sie zeigen die Stärken und Schwächen unter anderem anhand der Anzahl von (wiederkehrenden) Besuchern, deren Navigationswegen und Aufenthaltsdauer auf.

Similar posts:

• Website Check: oevp.at
• Link Prefetching im Firefox (und wie man es deaktiviert)
• Mutig in die neuen Zeiten
• Web-Entwicklung mit Safari
• LoungeFM dank Fluid ohne Browser genießen

Comment on this post.

Ich habe gewartet bis sich die Wogen wieder geglättet haben, um meinen Senf dazu abzugeben.

Ein kurzer Rückblick

Nach langen Jahren des Stillstands wurde von Microsoft endlich ein neuer Internet Explorer entwickelt. Die neue Version sollte sich mehr an Web Standards halten und damit Fehler und Eigenheiten der vorigen Versionen ausmerzen. Diese Änderungen beschränkten sich auf den standardkonformen Modus, der Quirks-Modus wurde nicht angerührt, um die von Microsoft angenommene Mehrheit der Websites, die diesen Modus verwenden, auch noch korrekt anzuzeigen.

Das Problem: Microsoft hatte offensichtlich unterschätzt, wieviele Websites tatsächlich im standardkonformen Modus entwickelt wurden und bekam nach der Veröffentlichung des Internet Explorers 7 wohl eine Flut an Beschwerden, dass Websites damit nicht mehr korrekt angezeigt wurden (siehe IE Blog). So wurde Microsoft schließlich selbst Opfer seiner jahrelangen Ignoranz gegenüber Web Standards.

Diesen Fehler wollte man in Redmond natürlich nicht nochmal begehen und so wandten sich die Entwickler der achten Generation unter anderem an Mitglieder des Web Standard Project um gemeinsam eine Lösung auszuarbeiten.

Herausgekommen ist ein Kompromiss, der die Branche spaltet.

Der neue Meta-Tag

Dieser Kompromiss besteht aus einer neuen Meta-Anweisung, die, wenn im Kopfteil der (X)HTML-Seite platziert, dem Explorer 8 mitteilt, ob nun die aktuelleste, standardkonforme Umsetzung von HTML und CSS zu tragen kommt, oder nicht.

Zusammengefasst kennt der Internet Explorer 8 nun drei Modi:

• Der Quirks Modus „funktioniert“ wie gehabt
• Der standardkonforme Modus arbeitet genau wie im IE 7
• Wer die noch bessere, aktuellere Standardkonformität des IE 8 auskosten will, muss einen Meta-Tag hinzufügen

Diese Meta-Angabe sieht folgendermaßen aus:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Nur durch diese Anweisung entlocke ich also dem Internet Explorer 8 die aktuelleste Umsetung der Web Standards. Und genau daran scheiden sich die Geister. Die einen begrüßen diesen Schritt Microsofts, andere sehen darin die Gefahr, den Fortschritt der Umsetzung und Weiterentwicklung von Web Standards auszubremsen. Wiederum andere sehen darin nur eine Machtdemonstration Microsofts über das Web.

Der Senf

Ich persönlich finde diese Umsetzung nicht gelungen. Auch wenn es sicher keine Machtdemonstration ist und ich die Beweggründe Microsofts nachvollziehen kann, hätte ich mir dennoch eine andere Lösung gewünscht. Würde Microsoft einfach weiter konsequent auf Web Standards setzen, müssten sämtliche IE-optimierten Websites endlich auf den neuesten Stand gebracht werden, was dem Web sehr gut getan hätte.

Darüber hinaus stand der Internet Explorer 7 lange genug als Beta-Version zur Verfügung, es war also genügend Zeit seine Websites damit zu testen und gegebenenfalls anzupassen.

So müssen wir Web Entwickler, die standardkonform arbeiten, in Zukunft wohl oder übel diese Meta-Angabe hinzufügen, wenn wir die aktuellste Umsetzung auskosten wollen. Und das werden wir wollen, denn immerhin soll der Internet Explorer 8 den Acid2 Test mühelos bestehen und damit seinen hohen Grad an Standardkonformität beweisen, was unter den gängigsten Browsern bisher nur Safari und Opera geschafft haben. (Firefox 3, der diesen Test ebenfalls besteht, war zum Zeitpunkt des Schreibens dieses Artikels noch im Beta-Stadium.)

Peter-Paul Koch argumentiert, dass ja in jedem Fall irgendjemand diesen Meta-Tag einbauen müsste, ob nun die Für-IE-Optimierer oder die Anhänger der Web Standards. Und bei dieser Auswahl wäre der Meta-Tag wohl besser bei Letzteren aufgehoben. In diesem Kontext hat er natürlich recht, allerdings bin ich nicht seiner Meinung, dass diese Anweisung in jedem Fall existieren müsse.

Web Standards existieren seit Jahren und viele andere Browser richten sich ebensolange danach. Auf Websites, die lediglich für einen -noch dazu hoffnungslos veralteten- Browser optimiert wurden, so viel Rücksicht zu nehmen ist meiner Meinung nach kein guter Beitrag zur Weiterentwicklung des Webs.

Update 3. März 2008

Microsoft hat sich umentschieden! Wie hier nachzulesen wird der Internet Explorer 8 nun doch von vornherein Websites so standardkonform wie möglich interpretieren. Wer im IE 8 den standardkonformen Modus des IE 7 verwenden will, muss dies explizit angeben. Ich werte das als sehr wichtigen Sieg im Kampf für bessere Unterstützung von Web Standards.

Similar posts:

• Netscape Navigator – Ein Nachruf
• Vielfalt zum browsen gehen
• Ein iPhone für den Geek in mir
• Mutig in die neuen Zeiten
• Web-Entwicklung mit Safari

Comment on this post.