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.

• 3 Comments

Instant Messaging wird immer mehr verwendet und ist für viele in der täglichen Kommunikation nicht mehr wegzudenken. Inzwischen läuft sogar ein kleines Jabber-Pilotprojekt bei Eberspächer und begeistert immer mehr. Mit Instant-Messaging verschmilzt jedoch Freizeit und Arbeitszeit immer mehr. Wer nicht konsequent verschiedene Accounts für verschiedene Gruppen (z.B. geschäftlich & privat) führt ist quasi für alle “immer verfügbar”. Für mich ist die Lösung mit verschiedenen Accounts nicht praktikabel, da natürlich auf die Übergänge verschiedener Kontaktgruppen fließend sind (Die Idee von zwei paralellen Skypeaccounts habe ich nicht weiter angewandt).

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!

• 4 Comments

Bloglines (ein online Feedreader) hat die neue Betaversion freigegeben. Nachdem ich anfangs Bloglines verwendet habe, verwende nun seit langem den Google-Reader. Gerade habe ich meine Feeds aus dem Google-Reader in Bloglines importiert, um mir die Beta anzusehen. Einige neue Features gefallen mir dabei sehr gut, andere Funktionen vermisse ich aber immer noch bei beiden Tools.

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

• 7 Comments

hab mich mal eben via GPRS in Kenya eingewählt und die Startseite von diesem Blog geladen. Auf diese Seite habe ich 9 min gewartet. Ich habe nur diese Seite im Browser geöffnet. Es macht keinen Spaß…

• 5 Comments

Seit einigen Monaten arbeite ich mit zwei Displays. Es ist natürlich sehr angenehm und ich kann dadurch bestimmte Tätigkeiten viel effektiver ohne ständiges Hin- und Herklicken erledigen. Oft wird bei der Arbeit eine Dokumentationsseite oder Anleitung in Form einer Website oder PDF-Dokuments benötigt, die man parallel auf dem zweiten Monitor legen kann. Die eigene Dokumentation kann zudem viel schneller im eigenen Wiki erstellt werden. Gerade wenn viel am PC programmiert und entwickelt wird, ist es sinnvoll einen zweiten Monitor anzuschaffen. Aufgaben die zwischendurch schnell erledigt werden müssen können außerdem viel schneller abgehakt werden.

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…

• 4 Comments

Anfang des Jahres ging www.eberspaecher.com online. Der Auftritt wurde vom “lange bewährten” Partner für Printmedien designt und von der Netpioneer GmbH umgesetzt. Als Content Management System kommt pirobase CMS® der Pironet NDH AG zum Einsatz. Näturlich liegt es nahe für das Intranet dasselbe CMS zu verwenden. In den letzten Wochen habe ich dafür an den Intranet-Einsatz angepasste Designvorlagen in XHTML und CSS erstellt und daraus in Zusammenarbeit mit unserem Partner die benötigten Templates erstellt. Ein Schwerpunkt war dabei die Usability der Seiten zu verbessern, ohne die pixelgenauen Designvorgaben zu missachten. Bei normaler Schriftgröße im Browser, sehen die internen Seiten daher wie vorgegeben aus. Mitarbeiter mit hochauflösenden Displays, Sehschwächen oder müden Augen können die Seiten problemlos im Browser re-sizen (vergrößern). Dazu kann man z.B. im Firefox ‘STRG +’ drücken oder den Internet-Explorer auf große Schriften einstellen. Zum Vergleich hier je ein Screenshot der Internet- und Intranet-Seite bei einer Monitorauflösung von ca. 3200x1200px und entsprechend starker Vergrößerung der Schriften.

…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.

• 6 Comments

Via Yigg.de bin ich heute im webdesignblog gelandet, das ich auch manchmal lese.
“100 Usability Tipps” – so die vielversprechende Überschrift. Die ersten drei Tipps sind jedenfalls nicht wirklich ergiebig:

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?

weiterlesen »

• 0 Comments

Bei wetpaint wird an noch schnelleren wikis gebaut! Als Ward Cunningham damals (1995) sein wikiwikiweb startete, wollte er nichts weiter, als mit anderen Entwicklern schnell und einfach online dokumentieren. Heute revolutionieren Wikis kollaboratives Arbeiten in Unternehmen und sind aus dem Web nicht mehr wegzudenken. 2005 galt u.a. als “Jahr des Wikis”, insbesondere durch den Boom der Wikipedia. Klar, ein Wiki ist eine Webseite, die es jedem Besucher ermöglicht, ihren Inhalt zu bearbeiten. Wirklich jedem? weiterlesen »

• 2 Comments

Durch HASH wurde ich kürzlich auf eine neue Kollaborationsplattform “Rallypoint” aufmerksam. Anfangs dachte ich es wäre ein “vollwertiges” Wiki im Stil von Jotspot oder Confluence. Fünf Benutzer, 25 MB Speicher in der kostenlosen Betaversion, dazu eine hübsche Oberfläche, ein WYSIWYG Editor und ein paar Ajax Features sind aber schon fast alles was man bekommt. Unter der Haube steckt dann doch mehr Wiki als man denkt. weiterlesen »

• 0 Comments

Wie geplant war ich heute auf dem "World Usability Day" im stuttgarter Rathaus.

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.

• 1 Comment