Firefox 3.6 unterstützt WOFF
Die in der vergangenen Woche veröffentlichte Version 3.6 des Firefox unterstützt als erster Web-Browser das WOFF. Viele denken jetzt wahrscheinlich “Das Was?”.
WOFF steht für das Web Open Font Format. Dies ist ein komprimiertes Dateiformat für Schriftarten. So wie etwa auch die Bilder und Fotos des Webs in aller Regel auch in einem komprimierten Dateiformat wie JPG, GIF oder PNG dargestellt werden, soll es in Zukunft auch möglich sein, im Bezug auf ihre Dateigröße schlanke Schriftarten in Web-Browsern zu nutzen.
Interessant ist diese Neuerung, da sich im Zuge von HTML5, der aktuellen Diskussion um das wieder entdeckte @font-face, Schriftarten-Services wie typekit usw., die Webdesigner dieser Welt sich nicht mehr mit den so genannten sicheren Web-Schriften begnügen wollen, und somit mit WOFF ein weiterer kleiner Schrift in Richtung Gestaltungsvielfalt im Web gemacht wurde.
Weitere Beiträge zu WOFF: So kannst Du den ersten .woff-Font testen auf Fontblog und Web Open Font Format for Firefox 3.6 auf hacks.mozilla.org.
von Matthias Zellmer
typekit – kurz angeschaut
Mit der CSS-Regel @font-face kann man mit dem Internet Explorer schon seit langem alternative Schriftarten verlinken. Inzwischen unterstützten fast alle der neuen Browser diese Regel, wodurch man im Web bald nicht mehr auf die Standartschriftarten oder Flash-/Bilderlösungen angewiesen sein wird. Das Problem dahinter ist nur, dass die meisten Lizenzen für Schriftarten die direkte Verlinkung im Web nicht erlauben, da man die Schriftarten leicht klauen kann.
Genau hier kommt typekit ins Spiel. typekit bietet mehrere (JavaScript-)Sicherheitsmaßnahmen, womit Web-Lizenzen möglich sind. Je nach gewähltem bzw. gekauftem Paket kann man unter unterschiedlich vielen Schriftarten die passende auswählen und mittels typekit oder CSS auf die Webseite anwenden.
Das Ganze funktioniert sehr schnell und einfach, der größte Nachteil an der Sache ist allerdings, dass @font-face nur mit dem IE und den neusten der anderen Browsern funktioniert. Die älteren (und noch weit verbreiteten) Versionen von Mozilla & Co bekommen nur eine Fallback-Schriftart zu sehen. Auch ist man auf vorgegebene Schriftarten beschränkt und kann keine Eigenen verwenden. Von daher ist typekit eine gute Lösung in der Zukunft aber mit der momentanen Browserkompatibilität noch nicht zu empfehlen.
von Christopher Frühwirth
Morgendlicher Web-Spaziergang
Was ich heute Morgen gemacht habe, prägte in ähnlicher Form irgendwann einmal den Begriff “durchs Web surfen”. Mit meinem RSS-Reader als Ausgangspunkt, habe ich mich durchs Web treiben lassen. Hier die Wegpunkte meines Web-Spaziergangs:
Mein RSS-Reader führte mich zuerst zum Dr. Web Autorenwettbewerb, genauer gesagt zum heutigen Beitrag Das Kaufhausbummeldesign – Wie der Alltag Ihnen bei Design-Ideen hilft. Besonders gut hat mir darin die Metapher “Das Supermarktregal – auf Augenhöhe sein” gefallen. Damit wollte der Autor Björn Dammann noch mal klar machen, dass das jeweils Wichtigste auf jeder Seite auch wirklich “auf Augenhöhe” platziert werden soll. Im Web ist das: Sichtbarer Bereich, Mitte. Eine Anforderung, die das nur all zu oft uniformierte Design vieler Websites nur bedingt bedienen kann. Wir setzen darum immer häufiger auf das Inhaltselement der Bühne.
In dem Artikel wird auf savethechildren.de hingewiesen, mein nächster Anlaufpunkt. Dies ist eine Kinderrechtsorganisation, die sich Themen verschrieben hat, wie weltweit das Überleben und die Gesundheit zu sichern oder auch die Ausbildung von Kindern zu fördern. Gutes und wichtiges Thema.
Mein nächster Anlaufpunkt ist netzwertig.com, wo sich Marcel Weiss mit Twitters für 2010 angekündigter Echtzeit-API Firehose beschäftigt. Marcel geht stark davon aus, dass das Implementieren auf Basis dieser Firehose-API kostenpflichtig und damit zum ersten richtigen Geschäftsmodell von Twitter wird.
Im Webzeugkoffer Blog beschäftigt sich dann Björn Seibert mit minimalistischem Webdesign und verweist auf einen gelungenen Beitrag When Minimalism Backfires: When Too Little Is Not Enough im Webdesigner Depot. Auf dieser Website gefällt mir, dass beim Überfahren des Logos mit der Maus, eine kleine, aber auffällige Info dargestellt wird. Diese macht deutlich, dass wenn man dem Link folgt, man zur Startseite zurück kommt. Eine angenehme Lösung des Problems, dass auch heute noch viele Leute nicht wissen, dass man in aller Regel nach einem Klick aufs Logo wieder zur Startseite der Website zurückkommt.
Ein weiterer Artikel auf Webdesigner Depot informiert mich darüber, dass es eine Wikipedia Usability Initiative gibt und dass man auf Wikipedia über den Try this-Link zu einer Beta-Version der optimierten Wikipedia-Ansicht gelangen kann. Neugierig geworden, schaue ich nach, ob es das auch auf der deutschsprachigen Wikipedia gibt und werde fündig. Der Link Beta ausprobieren am oberen Rand jeder Seite war mir bisher völlig entgangen. Ich beginne mit dem “Betatesten” und habe schon wieder eine Idee für einen weiteren Blogeintrag im Hinterkopf …
von Matthias Zellmer
iA nennt es: 100% Easy-2-Read
Die international tätige Web-Agentur iA gehört sicher zu den innovativsten Läden was unsere Branche zu bieten hat. Kürzlich haben die Information Architects den Auftritt der ZEIT neu gestaltet und wenn sie die neuste Version ihrer Web Trends Map präsentieren, geht dies auch regelmäßig durch die Blogs der Welt.
Und schon 2006 haben sie in einem Artikel 100% Easy-2-Read veröffentlicht … abgekürzt: 100e2r. Von seiner Aktualität hat dieser Beitrag aber nichts verloren.
Bei 100e2r handelt es sich um einige Dos and Don’ts im Bezug auf die Darstellung von Inhalten auf einer Website. Die iA kritisieren, dass nur all zu oft auf einer Webseite zu viele Inhalte auf zu engen Raum gepackt werden.
Stichpunktartig ihre Kritikpunkte:
- Don’t tell us to adjust the font size
- Don’t tell us busy pages look better
- Don’t tell us scrolling is bad
- Don’t tell us text is not important
- Don’t tell us to get glasses
Als Folge darauf … Fünf einfache Richtlinien:
- Standard font size for long texts
- Active white space
- Reader friendly line height
- Clear color contrast
- No text in images
Die oben aufgeführten Punkte werden auf der Beitragsseite näher erläutert. Eine kurzweilige und lehrreiche Lektüre für alle, die in irgendeiner Form mit der Gestaltung einer Website zu tun haben … ob visuell oder non-visuell.
von Matthias Zellmer
Wordpress-Erweiterung WPtouch optimiert Blog-Ansicht für iPhone
Möchte man seine auf Wordpress basierende Website im typischen Look & Feel einer iPhone-App auf Apples Smartphone anzeigen lassen, sollte man sich mal mit der Wordpress-Erweiterung WPtouch beschäftigen.
Die Installation von WPtouch ist Wordpress-typisch sehr einfach und somit ist die grundlegende Arbeit, um die Erweiterung zum Laufen zu bekommen, in wenigen Minuten erledigt. Wer jetzt noch möchte, kann im Wordpress-Backend einige Einstellungen im Bezug auf Optik und Verhalten vornehmen.
Laut Herstellerseite soll die Erweiterung auch für Android funktionieren … getestet habe ich das jedoch noch nicht.
Kleine Anmerkung am Rande: Ich selbst habe keine iPhone und um euch die Screenshots oben im Bild zeigen zu können, habe ich mal bei Twitter gefragt, ob man mir diese Screenshoots per Mail schicken könnte. Vielen Dank an die mehr als ein Dutzend Mails. So macht Social Web richtig Spaß! Danke.
von Matthias Zellmer
Die neusten Beiträge
Die neusten Kommentare
