Bislang war es nicht ohne weiteres möglich auf Webseiten eigene Fonts zu verwenden. Webbrowser verwenden lediglich die auf dem System installieren Fonts zum Anzeigen von Webseiten. Damit war es, außer über den eher aufwendigen Umweg einer Grafik, oder dem kaum praktizierten bereitstellen eines eigenen Fonts auf dem Server, nicht möglich spezielle Schriftarten zu verwenden.

Auf der diesjährigen Google I/O Konferenz hat Google ihre Google font api vorgestellt. Darüber werden Schriftarten bereitgestellt und können ganz einfach im HTML-Header einer Website eingebunden werden. Die Schrift kann dann einfach per CSS eingebunden und formatiert werden. Aktuelle Browser unterstützen eingebundene Fonts. Google stellt einige Lizenzfreie Fonts zur Verfügung, z.B. Lobster (siehe Screenshot rock ‘n roll!). Eine Übersicht gibt es im Google font directory. Es können auch weitere Fonts anderer Web-Font Provider eingebunden werden. Derzeit wir nur der kostenpflichtige Provider Typekit genannt.

Folgende Code-Schnipsel werden zum Einbinden des Lobster Fonts benötigt. Im HTML-Header:

<link href='http://fonts.googleapis.com/css?family=Lobster'  rel='stylesheet' type='text/css'>

Die Formatierung der Schrift mit CSS:

<span style="font-family: 'Lobster', arial, serif; font-size: 30px;">rock 'n roll!</span>

Vor allem im Bezug auf Überschriften und Teaser finde ich die Fonts eine schöne Option. Ich bin gespannt ob diese Möglichkeit angenommen wird und sich etabliert. Die Designer dürften sich jedenfalls freuen.

In der Praxis setzen viele meiner Kontakte daher ihren Status auf “Abwesend” oder “Nicht Verfügbar”. Dadurch wird gerade eine der guten Eigenschaften des Instant Messaging aufgehoben. Aus meiner Sicht liegt dies an der schlechten Usability aller Messenger Clients und Protokolle die ich kenne. Also egal ob Jabber / XMPP, ICQ, Skype, MSN usw., es ist derzeit nicht möglich die Privatsphäre gruppenbasiert einzustellen. Ich bin mir dabei nicht sicher, ob dies evtl. schon durch das Protokoll verhindert wird.

Gruppenbasierter Status im Instant Messenger

Wünschenswert wäre, den persönlichen Status im Client (Online / Verfügbar, Abwesend, Nicht Stören, Unsichtbar, Offline) für Benutzer und Gruppen individuell einstellen zu können. Dadurch könnte man gezielt für bestimmte Kontaktgruppen verfügbar sein, beispielsweise tagsüber für Geschäftskontakte und Kollegen “Verfügbar”, dagegen für private Kontakte mit dem Status “Nicht Stören” aufwarten, zu bestimmten Zeiten Premium-Kunden Online-Support anbieten und am Abend mit Freunden chatten. Denkbar wäre auch direkt an einen Wochenplan und zusätzlich an den eigenen Kalender zu koppeln. Gerade von einem Tool wie Skype, das sehr stark auch im Business Bereich eingesetzt wird, würde ich solche Funktionalität erwarten. Aber scheinbar haben die Entwickler nicht wirklich Anhung von Benutzerfreundlichkeit. Die neue Skype-Version 4 kommt jedenfalls nicht sehr gut an, wie man heute bei Golem lesen konnte:

Das neue Skype 4.0 für Windows soll vieles besser machen. Doch unzufriedene Nutzer wechseln wieder zur Vorgängerversion 3.8. Ihnen fehlen Funktionen oder Softwareprobleme machen ihnen das Leben schwer.

Ich hoffe dass sich an dieser Stelle jedenfalls noch einiges verbessert und gleichzeitig immer mehr Benutzer von proprietären Protokollen auf offene Standards wie XMPP wechseln.

Noch mehr würde ich mich natürlich freuen, wenn ich irgendwo die gewünschten Optionen in meinem Pidgin Messenger übersehen habe und mir jemand erklärt wie ich das jetzt schon umsetzen kann!

1. Ordnung per Drag und Drop

Feeds und Ordner kann man ganz einfach mit der Maus per Drag and Drop verschieben. Der Google-Reader lässt nur alphabetische Sortierung zu und die Feeds müssen umständlich über das Dropdown-Menü in andere Ordner verfrachtet werden. Micheal Herrling beschreibt z.B. wie er Bloglines verwendet, um die Ordner für den Google-Reader umzubenennen. In der neuen Beta scheint mir das bislang nicht möglich. Ein Vorteil von Google-Reader: Die Ordner sind in Wirklichkeit Tags. Dadurch kann man einen Feed mehreren Ordnern (bzw. Tags) zuordnen was bei Bloglines nicht möglich ist. Ob man das jedoch benötigt?

2. Lesemodus bleibt für jeden Feed erhalten

Im Google-Reader kann man zwischen List view und Expanded view umschalten. Ich verwende List view gerne für hochfrequentierte Feeds wie z.B. IT-Nachrichten von Heise oder Golem, um die Nachrichten schnell zu scannen. Dafür reicht mir meist der Titel um zu entscheiden ob etwas für mich interessant ist. Bloglines Beta unterscheidet im Lesemodus zwischen Quick view (was List view entspricht), Full view (entspricht Expanded view) und bietet dazu noch den 3-pane view. Das geniale – Bloglines merkt sich die zuletzt gewählte Einstellung für jeden Feed.

3. Startseite: Intelligent vs. Konfigurierbar

Ein scheinbar tolles neues Feature ist die Startseite welche man per Drag and Drop mit eigenen Highlights füllen kann. Mir gefällt die Startseite des Google-Reader trotz weniger Flexibilität besser. Es werden mir automatisch “irgendwelche” Updates angezeigt (keine Ahnung wie diese priorisiert werden – muss wohl irgendwie auf meinem Leseverhalten beruhen?)

4. Feed-Out mit shared items

Schmerzlich vermisse ich bei Bloglines Beta die einfache Möglichkeit interessante Artikel in einem externen Feed zu vereinen wie es mit dem Google-Shared-Feed möglich ist. Durch einen Klick auf Share werden von mir gelesene Artikel in einem öffentlichen Feed vereint. Diesen veröffentliche ich z.B. hier in meinem Blog (Aus dem Feedreader) und lasse damit meine Blogleser an interessanten Artikeln teilhaben.

5. Archivierung und Retrieval

Eine schnelle Möglichkeit um im Google-Reader Artikel zu merken ist sie mit einem Stern zu markieren. Alle markierten Artikel kann man später unter Starred items einsehen.

Ich vermisse bei beiden Readern eine erweiterte Archivierungsfunktion. Statt einem einfachen Sternchen wäre mir lieber die Artikel mit Schlagwörtern zu versehen und sie dadurch im Archiv über eine Tagcloud wiederfinden zu können.

Weiter fehlt eine gute Suchfunktion über die abonnierten Feeds, über gelesene und ungelesene Artikel und über archivierte Artikel. Verwunderlich das dies gerade beim Google-Reader trotz Googles Such-Expertise nicht verfügbar ist. Die Suche in Bloglines Beta scheint auch nicht die abonnierten Feeds zu durchsuchen sondern sucht allgemein nach Feeds.

Um Artikel zu Archivieren und wiederzufinden lege ich deshalb häufig direkt aus dem Google-Reader die Artikel in meinem Delicious-Account ab.

6. Usability: Bedienung per Tastatur

Bei Bloglines habe ich die Taststur-Shortcuts bisher nicht gefunden. Google-Reader lässt sich sehr komfortabel und schnell mit der Tastatur bedienen. Die Tastatur-Shortcuts findet man übrigens in den FAQs. Bei Bloglines gefällt mir die Möglichkeit die Breite der Spalten anzupassen.

Fazit

Wie so oft haben beide Tools einige Vorteile. Bloglines hat einige gute Ansätze und verspricht laut noch einige wichtige Funktionen nachzulegen:

Options for saving, sending and sharing stories, tools for building link blogs, managing blog rolls, etc. are all on the way.

Beim derzeitigen Funktionsumfang liegt der Google-Reader für mich aber immernoch weit vorn. Sicherlich wird Google in nächster Zeit verstärkt am Feintuning des Google-Reader feilen müssen, um nicht viele Leser an Bloglines zu verlieren.

Weitere Artikel zur Bloglines Beta bei Basic Thinking, Blogging Tom oder Techcrunch

Ich arbeite an meinem Dell Notebook und habe eine externe Tastatur und einen ViewSonic TFT angeschlossen. Wenn man somit eh zwei Displays zur Verfügung hat macht es Sinn den Desktop auf das Display des Notebooks zu erweitern.

Eine Studie von Microsoft hat ergeben, dass durch ein weiteres Display die Produktivität im Durchschnitt um 8-50% erhöht. Mit diesem Argument und gleichzeitig sinkenden Preisen der TFT-Displays sollte auch die Argumentation im Unternehmen erleichtert sein.
Wer an seinem Notebook zwei externe TFT-Monitore verwenden möchte kann z.B. den DualHead2Go Adapter von Matrox verwenden. An einem PC ist es günstiger eine zweite Grafikkarte einzubauen, sofern die vorhanden Grafikkarte nicht schon zwei Ausgänge hat. Wer zuviel Geld hat kann sich auch ein Seamless Display vorbestellen:

Laut einem Artikel bei Golem soll es Anfang 2007 für schlappe 16.000 USD zu kaufen sein…

…soviel zu modernem Webdesign.

Hinweis: Um die Seiten inklusive aller Elemente im Browser vergrößern zu können, wurden alle Layout-Elemente und Schriften statt absolut in Pixel relativ in Prozent oder em bemaßt. Um dies möglichst einfach umzusetzen, wurde die Standard-Schriftgröße auf 62,5% gesetzt, was i.d.R. 10px entspricht. Dadurch entspricht 1em 10 Pixel und kann sehr einfach zur Bemaßung des Layouts verwendet werden.

1. Man soll Texte im Web ohne Brille lesen können?
2. Die Textgröße soll so klein sein damit man sie Scannen kann?
3. Schriften sollen niemals fixiert werden damit man mit “STRG +” die Schriftgröße anpassen kann?

Zu 1: Texte sollte man mit und ohne Brille lesen können, in gleicher Weise wie es einem Möglich sein sollte ein Buch zu lesen. Besuchern die damit Schwierigkeiten haben, sollten einen Augenarzt aufsuchen. Alle anderen Besucher sind vermutlich blind. Für Sie ist nur die gute Stukturierung der Texte wichtig, die Schriftgröße spielt dann keine Rolle. Viel mehr als diesen trivialen Hinweis würde mich eine Studie darüber interessieren, wie groß die Standard-Schriftgröße im Verhältnis zur Bildschrimauflösung sein sollte, damit ich und der stetig wachsende Anteil der älteren Generation einen Text am Bildschirm angenehm lesen können.

Zu 2: Wow, 100 Punkte, wer soll denn die alle Lesen? Ich versuche zu scannen? Vielleicht war “scrollen” gemeint? Viel Arbeit war es sicher, Respekt. Wichtiger scheint mir erst mal eine höhere Informationsdichte zu sein. Beim Scannen fehlen mir optische Anhaltpunkte. Eine Liste mit 100 Punkten wiederspricht dem. Ein paar H2-Überschriten und Anker dazu wären brauchbar, vielleicht sogar die Aufteilung der Seite und eine kurze Teaserseite mit zwei zusammenfassenden Sätzen?

Zu 3: Ok, wichtiger Punkt – “re-seizen”, nach dem Eric den Focus zerlegt hat. Auch ich drücke abends oft mal schnell “STRG +” um entspannter die Seiten einiger old-school-designer lesen zu können. Mir ist bislang noch keine Seite begegnet, welche die Schriften (außer in Grafiken) nicht vergößert. Nur der Internet Explorer Browser kennt “STRG +” nicht und vergößert pixelgenaue Schriftgrößen nicht. Firefox ignoriert dies stillschweigend.

Nicht vergessen sollte man, dass Navigationselemente und DIVs entsprechend auch relativ bemaßt werden sollten, um das Layout der Seite zu erhalten. Sonst endet der Benutzer schnell in einem Buchstaben/Layer-Salat.
Nichts für ungut, viele Artikel sind echt gut geschrieben und lohnen sich zu lesen, aber manchmal scheint mir Content-Masse vor der Content-Qualität zu kommen. Sicherlich gibt es auch in besagtem Artikel viele hilfreiche Tipps, nur war ich zu faul mich bis dahin durchzukämpfen ;-).

Die Praxis zeigt, dass es noch viele Microsoft-Word-Profis gibt, die versuchen würden per drag and drop ein Bild in ihrem eben erstellten Gästebucheintrag einzufügen. Nachweislich ist der deutlich größere Teil der Wikipedia-Artikel technischer, natuarwissenschaftlicher oder mathematischer Natur [vgl. FAZ]. Viele Entwickler haben das Potential von komfortableren Wikis erkannt. Ein nahtlos integrierter WYSIWYG-Editor im Microsoft-Word-Style, viel AJAX, etwas Web2.0 Style, noch ein kleines Beta aus Prinzip…, die neuen sprießen wie Pilze aus dem WWW. Und so auch Wetpaint(beta):

“The heart of the Wetpaint advantage is its ability to allow people – especially those without technical skill to create, contribute, and connect with websites written for and by those who share a passion or interest.”

Die Flash-Demo ist nur “für Mütter gedacht”, direkt testen kann man in der Sandbox. Wie die genaue Lizenzierung von wetpaint gedacht ist konnte ich bisher leider nicht finden. Ich bin gespannt ob man das Wiki auch als komplettes Packet zur eigenen Installation erwerben kann. Kostenlos wird es vermutlich höchstens einen eingeschränkten Onlineaccount geben, mit dem man nichts ernsthaftes anstellen kann.

Weitere Artikel findet ihr unter dem Tag “Wiki“.

Die Seiten lassen sich einfach durchsuchen, gruppieren und dazu mit Tags versehen um den Überblick nicht zu verlieren. Eine Versionsverwaltung stellt sicher, dass nichts “verloren geht” und jede Änderung zurückverfolgt werden kann. Während der Bearbeitung werden Seiten automatisch für 15′ gesperrt. Jede Seite kann (ebenfalls im WYSIWGY Modus) kommentiert werden. Sogar Word-Dokumente können per Copy&Paste im Editor eingefügt werden. Außerdem können Dokumente und Multimediadateien auf eine Seite geladen und verlinkt werden. Über das Dashboard wird man immer über Änderungen auf dem Laufenden gehalten. Was mir fehlt sind RSS-Feeds und eine einfache Möglichkeit intern Seiten zu verlinken.

Insgesamt geht Rallypoint aber sicher einen richtigen Weg für eine breite Anwenderschaft.
“Microsoft-Word-Texter”, die bisher noch Angst vor simpler Wiki-Syntax hatten, könnte durch die neuen Plattformen ein Einstieg in die Wiki-Welt ermöglicht werden.
Die einfache und funktionelle Benutzeroberfläche mit 100%igem Rich-Text-Editing à la Word ermöglicht einen sehr einfachen Umstieg. Ein Team das erst einmal die flexible Wiki-Welt geschnuppert hat, wird sicherlich nicht mehr so schnell die alten Word-Dokumente im Kreis herum mailen.

Sicherlich wird sich Rallypoint im Bezug auf RSS und interner Verlinkung noch verbessern, schliesslich handelt es sich erst um eine Betaversion. Wer selbst testen möchte kann sich einfach und unverbindlich einen Account anlegen. Ich würde freuen wenn ihr eure Test-Erfahrungen dabei mitteilt.

Barierefreies Webdesign: 

Es gab 2 Vorträge zu barrierfreiem Webdesign die ich mir angehört habe. Interessant fand ich dabei, dass barrierefreie Webseiten Kosten sparen können. Durch ein neues barrierefreies Onlineangebot konnte z.B. die Serverlast um über 60% reduziert werden, erklärte einer der Referneten. Die Seiten werden durch das kleinere Volumen schneller geladen und die Server konnten ca. 2 Jahre länger als ursprünglich geplant im Einsatz bleiben.

Als barierefrei werden Seiten bezeichnet, die für alle gleichermaßen zugänglich sind und niemanden ausschließen. Erstaunt war ich auch über die doch recht große Bevölkerungsgruppe, die von barrierefreien Seiten profitieren. Es sind nicht nur sehbehinderte, blinde, schwerhörige oder gehölose, wie meist vermutet. Auch "Internet-Anfänger", motorisch behinderte Menschen, die immer größer werdende Gruppe von älteren Menschen (zu der ich ja jetzt wohl auch so langsam gehöre ;-)) sowie Menschen mit älterer Hard- und Software (die Modem-Menschen) profitieren entscheidend davon.

In Deutschland sind 6,7 Mio Menschen schwerbehindert, 155.000 Menschen blind, 500.000 Menschen sehbehindert, ca. 10% der männlichen Bevölkerung rot-grün-blind und 18,8 Mio. Menschen älter als 60 Jahre.

Das barrierefreies Webdesign dabei schönes Webdesign sein kann, sieht man meiner Meinung nach an vielen schönen Weblogs, welche die Vorgaben erfüllen. Ein paar einfache Punkte die dabei u.a. zu beachten sind, wären z.B.

• Alternativtexte für sämtliche Grafiken zu vergeben,
• Seiten klar anhand von Überschriftshierarchien zu gliedern
• auf Layouttabellen und Frames zu verzichten
• Anpassung der Schriftgröße durch Verwendung relativer Schriftgrößen erlauben
• kritische Farbkombinationen zu meiden und klare Kontraste zu bevorzugen
• logische Tabulatorfolgen und Ermöglichung von Tastaturbefehlen

Weitere Informationen gibt es z.B. auf den Seiten von BIK und EFA

Eye-Tracking: 

Begeistert hat mich auch der Eye-Tracking Test der HDM. Dabei werden die Blickbewegungen beim Betrachten eines Monitors aufgezeichnet.  Für die Webseite der Stadt Stuttgart wird derzeit eine Analyse erstellt. Jeder Testteilnehmer erhielt einen "Gaze-Plot", eine Aufzeichnung der Blickbewegungen und der Ruhepunkte der Augen beim betrachten der Seite Stuttgart.de. Dadruch kann analysiert werden wie ein Anwender die Webseite wahrnimmt, wie gut er sich in der Navigation zurechtfindet und Informationen auf der Seite findet. Entsprechend kann aus diesen Erkenntnissen ein Onlineangebot optimiert werden. Ich hoffe das sich jedenfalls die Seiten der Stadt Stuttgart noch etwas verbessern werden.

Informationen zu Usability und Eyetracking gibt es beim Fraunhofer Institut und auf den Seiten des Usability Lab.