Cufón

Cufón entwickelt sich mehr und mehr zu einer echten Alternative zu sIFR. Es setzt nicht auf Flash sondern nutzt JavaScript um Schrift als Vectorobjekte in VML bzw. Canvas darzustellen. Keine Lösung aber eine Alternative.

@font-face

Die Möglichkeiten für den Einsatz von Web Fonts wachsen. Alle nennenswerten Browserhersteller habe oder werden in Kürze mit der At-Regel umgehen können und die Einbindung von OpenType und TrueType Schriften ermöglichen. Genauer:

• Safari: Seit Version 3.1
• Chrome: Nächster Release, in der Dev Channel Version bereits seit Version 2.0.157.0 funktionstüchtig
• Firefox: ab Version 3.5
• Opera: ab Version 10

Nur der Platzhirsch Microsoft klammert sich noch an das EOT Format. Dafür unterstützt der Internet Explorer Web Fonts schon seit Version 4. Und auch beim W3C und den Schriftenhäusern ist man sich noch uneins.

Ein Hybrid aus Cufón und Web Fonts versucht Kilian Valkhof zu finden. Er setzt auf ein jQuery Plugin welches testet ob entsprechender Schrift auf dem Client vorhanden ist. Ist dies nicht der Fall wird erst auf @font-face und als letztes auf Cufón zurückgegriffen.

Aktuelle Links zum Thema:

• Web Font Optimizer - Schriftdateien für das Web komprimieren
• Exploring Cufón, a sIFR alternative for font embedding - Cufón Artikel von Cameron Moll
• Web Typographie Vortrag auf der SxSW - Richard Rutter berichtet über seinen Vortrag der er zusammen mit Jon Tan, Ian Coyle und Elliot Jay Stocks gehalten hat

Links zum Thema Webtypografie veröffenliche ich übrigens regelmäßig in meinem Twitter-Zweitaccount @font (für alles Andere bleibt @stereobit).

• Europäisches Accessibility Forum

  Das Europäisches Accessibility Forum ist eine von Martin Kliehm initiierte Konferenz zum Thema Webstandards und Barrierefreiheit. Das Programm verspricht Beiträge auf höchsten Niveau.

  Termin: 27. März 2009, Frankfurt am Main - eafra.de

• Re:publica 09

  Zum dritten Mal findet die Re:publica in Berlin statt. Die Konferenz über Blogs, die digitale Gesellschaft und soziale Medien trägt dieses Jahr den Untertitel "Shift happens" und thematisiert positive Beispiele des Medienwandels.

  Termin: 01. - 03. April
  Berlin - re-publica.de/09/

• next09

  Termin: 05. / 06. Mai, Hamburg - next-conference.com/next09/

• SEMSEO & ABAKUS Pubkonferenz 2009

  Zum dritten Mal nach 2007 und 2008 findet die SEMSEO Konferenz in Hannover statt. Die 1-tägige Konferenz bietet Einblicke in die Bereiche Suchmaschinenmarketing und Suchmaschinenoptimierung. Namhafte Referenten präsentieren und diskutieren top-aktuelle Branchenthemen.

  Termin: 15. Mai 2009, Hannover - semseo.abakus-internet-marketing.de

• TYPO Berlin 2009

  Zur TYPO Berlin, der größten europäischen Designkonferenz, die 2009 zum 14. Mal stattfindet, werden wieder rund 1.200 Typografen, Designer und Mediengestalter aus der ganzen Welt erwartet.

  Vom plastischen Button einer iPhone-Applikation bis hin zu raumfüllen- den Installationen - der Aspekt der Räumlichkeit spielt in den Entwürfen vieler visueller Gestalter eine zunehmend wichtige Rolle. Der Trend ist Folge der Digitalisierung des Designs:Die einen nutzen neue Werkzeuge zur Perfektionierung ihrer Entwürfe, andere treibt es - oft aus Verweigerung - aus der virtuellen Realität zurück ins echte Leben. Diese beiden Pole - und vieles dazwischen - sind das Thema der TYPO Berlin 2009 »SPACE«.

  Termin: 21. - 23. Mai, Berlin - typoberlin.de/2009/

• UXcamp

  Das UXcamp Berlin '09 ist ein Barcamp für User Experience mit den Schwerpunkten Information Architecture, Interaction Design, Usability Engineering, Visual Design und Prototype Engineering. Darüber hinaus sollen auch Product Design und Marketing im Kontext User Experience ihren Platz finden.

  Termin: 23. / 24. Mai 2009, Berlin - uxcamp.mixxt.de

• webinale 09

  Termin: 25. - 27. Mai, Berlin - createordie.de/webinale/

• remix09

  Fachleute aus dem klassischen Marketing-Umfeld treffen die Aktiven des Web 2.0 für einen professionellen und persönlichen interdisziplinären Austausch. Feste Konferenzelemente treffen auf die adhoc-Strukturen von BarCamp und Open Space.

  Termin: 12. / 13. Juni 2009, Hamburg - remixcamp.de

Douglas Bowman beschreibt die Entwicklung der neuen Standardbuttons für Google Applications. Natürlich ist es aus Sicht der Nutzbarkeit bedenklich das vom System vorgegebene Design zu verändern aber in Anbetracht der Schlichtheit ist es nicht abwegig über ein systemübergreifendes Einheitslayout nachzudenken. Leider erfordert die grafiklose Variante recht viel unnützen Quellcode. (via)

Zum Artikel [en]

Komplexität von Netzwerken

Ein wirklich sehr sehenswertes Interview mit Professor Kruse zum Thema komplexe Netzwerke, Kollektiv- und Schwarmintelligenz, Erlaubnis- und Möglichkeitsräume und was das Ganze mit den Veränderungen und Möglichkeiten zu tun hat die uns das Internet bietet.

Zum Video

Barrierefreiheit im Web

Im Chaosradio unterhalten sich unterhalten sich Tim Pritlove, Jan Eric Hellbusch und Tomas Caspers über Barrierefreiheit im Web - Was man bedenken sollte, wenn man Websites plant und gestaltet.

Zum Beitrag

Mehr Linktipps von mir gibt es in unregelmäßigen Abständen auch bei Twitter

The League of Moveable Type hat es sich zur Aufgabe gemacht qualitativ hochwertige, kostenlose, Schriften die die Einbindung in @font-face explizit erlauben zusammenzutragen.

Die erste vorgestellte Schrift ist die Junction.

Eine umfangreichere Sammlung an verfügbaren Schriften für @font-face findet sich bei webfonts.info.

Was die Verbreitung von Schriften auf Seiten des Clients anbelangt gehen Meinungen wie Statistiken weit auseinander. Webmasterpro hat nun eine aktuelle Analyse für den deutschsprachigen Raum veröffentlicht. Als Datengrundlage diente ein Counterservice welcher laut Webmasterpro auf mehr als 100.000, vorwiegend deutschsprachigen, Webseiten zu finden ist.

Es fällt auf dass, neben den üblichen Verdächtigen, auch einige eher selten genutzten Schriften einen hohen Verbreitungsgrad genießen. Die Franklin Gothic Medium hat beispielsweise mit 93,8% einen Wert der sie durchaus „verkaufbar“ macht.

Auch die Werte der ansehnlichen Vista Schriften schauen mittlerweile recht gut aus.

Die Übersicht ist auf jeden Fall eine Fundgrube und lädt zum experimentieren ein. Durch den Fallback auf die nächste vorhandene Schrift können auch kaum verbreitete Schriften in der CSS-Datei definiert werden. Warum keine Gill Sans verwenden? Auch wenn 60% der Nutzer am Ende nur die Arial oder ähnliches sehen - 40% kommen in den Genuss einer wirklich schönen Schrift.

Natürlich gibt es auch Argumente die gegen eine Verwendung von wenig verbreiteten Schriften sprechen: Die mögliche schlechte Lesbarkeit am Bildschirm, Einschnitte bei der Festlegung der optimale Zeilenlänge und dem Durchschuss oder der einfältige Nutzer welcher sich an das Lesen der Standardschriften gewöhnt hat.

Aber da @font-face nicht weit genug verbreitet ist und man nicht immer auf Ersatzmethoden zurückgreifen möchte kann man diese Möglichkeit, selbst wenn nur für Überschriften, durchaus nutzen um ein wenig Farbe in die trostlose Welt der Webtypografie zu bringen.

Am 24. und 25. Januar 2009 wird, parallel zur internationalen Möbelmesse, das DesignCamp Köln stattfinden. Es wird im Rahmen der Cologne Design Week veranstaltet und richtet sich an Designerinnen und Designer aller Fachdisziplinen: Vom Interior Design, Produktdesign und der Architektur, bis hin zum Foto-, Grafik-, Web-, Multimedia- und 3d-Design.

Ziel des Camps ist es, zum Austausch von interdisziplinärem Wissen und Kontakten zu ermutigen, diesen zu erleichtern und so ganz neue Formen der Zusammenarbeit zu ermöglichen.

Ich freue mich auf interessante Vorträge abseits der sonst auf BarCamps üblichen Themen. Der Teilnehmerlist nach sind auch einige Webkrauts anwesend, die technische Seite wird also nicht gänzlich aussen vor bleiben.

Weiterführende Links:

• Mixxt Network
• DesignCamp Twitter Account
• Facebook Gruppe
• Flickr Gruppe
• Termin bei Venteria

Armin Schaffrinna hat eine wunderbare Antwort für Leute die bei dem kleinsten Verlauf gleich die „Web 2.0-Klatsche“ raushohlen verfasst.

Zum Artikel

@font-face in Firefox 3.1

Ralf Herrmann hat sich die Umsetzung @font-face-Regel im kommenden Firefox 3.1 schon einmal angesehen.

Zum Artikel

Wikipedia — Time for a Redesign?

Dmitry Fadeyev macht, zu recht, seinen Unmut über das Layout der Wikipedia Luft.

Zum Artikel

Die WCAG sind eine Empfehlung der Web Accessibility Initiative (WAI) des World Wide Web Consortium (W3C) zur barrierefreien Gestaltung der Inhalte von Internetangeboten.

• Zur WCAG 2.0 [en]
• Anleitung von Roger Hudson für zugängliche Formulare [en]
• Anleitung für die Umstellung von WCAG 1.0 zur WCAG 2.0 [en]

via EfA

Think about it: most of the browser development work these days seems to be going into JavaScript performance. Those engines are being overhauled and souped up and tuned and re-tuned to the point that performance is improving by orders of magnitude. Scanning the DOM tree and doing things to it, which used to be slow and difficult, is becoming lightning-fast and easy.

So why not write JS to implement multiple background-image support in all browsers? All that’s needed is to scan the CSS, find instances of multiple-image backgrounds, and then dynamically adding divs, one per extra background image, to get the intended effect.

Just like that, you’ve used the browser’s JS to extend its CSS support. This approach advances standards support in browsers from the ground up, instead of waiting for the browser teams to do it for us.

Artikel weiterlesen: JavaScript Will Save Us All [en]

Der Vorteil liegt hierbei klar auf der Hand — Das Script wird beim Seitenaufruf geladen und ausgeführt, kann somit vom Entwickler jederzeit angepasst werden. Man braucht kein Browserupdate mehr propagieren, der Browser updated sich quasi selbst.

Unmöglich? Dean Edwards hat mit seinem IE7 Script bewiesen das es durchaus möglich ist einem veralteten Browser wie dem IE6 nur durch ein kleines Script auf das Niveau eines (fast) standardkonformen Browser zu heben.

Natürlich gibt es auch einige Kritikpunkte. Neben der schlechte Performance sind die möglichen Anzeigefehler bei deaktiviertem JavaScript ein nicht zu ignorierendes Hindernis.

Doch das Abrunden von Ecken ist mehr als ein einfaches Stilmittel, es kann Zusammenhänge darstellen, Inhalte abgrenzen. Igor Asselbergs hat dies sehr passend vereinfacht dargestellt [en]:

Bei der linken Box fällt es schwer Zusammenhänge zu erkennen. Ist es eine Box mit einem Strich als Trennung? Oder doch zwei unabhängige Boxen? Die rechte Box erscheint hingegen sofort als Einheit.

Fazit: Wer an den richtigen Stellen abrundet muss nicht zwangläufig irgendeinen Trend verpasst haben. Es kann auch einfach nur die Usability verbessert worden sein.

Dmitry Fadeyev zeigt das Whitespace ein mächtiges Werkzeug ist um optisch die Beziehungen verschiedener Content-Elemente darzustellen.

Zum Artikel [en]

Online-Studie zur Nutzererfahrung

Designer und Nutzer haben häufig unterschiedliche Ansichten was wirklich wichtig ist. Das Institute for Dynamic Educational Advancement hat hierzu eine umfangreiche und aktuelle Studie erstellt.

Zur Studie [en] [pdf]

Mehrfache <label> Elemente & Screenreader

Roger Johansson schreibt über die Probleme die Screenreader haben wenn es für ein Formularfeld mehr als ein <label> Element gibt.

Zum Artikel [en]

Ich arbeite seit nun mehr als 2 Jahren mit webEdition und bin über diese Entwicklung trotzdem hoch erfreut. Wenn es um die Verwaltung von Inhalten größerer Websites ging war und ist webEdition immer die erste Wahl. Nach anfänglichen Schwierigkeiten hat es sich als extrem flexibles und durchdachtes System gezeigt mit dem auch ohne Extensions und Hacks so gut wie alles möglich ist. Besonders wenn man auf Webstandards und Accessibility wert legt.

Natürlich hat das System auch Kritikpunkte, ein schrecklicher WYSIWYG Editor für die Eingabe von Inhalten und eine doch sehr erschlagende Nutzeroberfläche sind nur die Spitze des Eisbergs. Aber durch die neue Lizenzierung und das bald erscheinende SDK werden diese Punkte (hoffentlich) bald der Vergangenheit angehören.

Good projects start with clear, straightforward communication. Unfortunately, some requests for proposals, or RFPs, we receive are anything but. This isn't our clients' fault: our industry hasn't done much to educate them on how to approach studios with their project.

Airbag Industrie arbeitet an einer kleinen Web Application mit der Kundenanfragen konkretisiert werden. Ziel ist es eine offene und direkte Kommunikation zu gewährleisten um von von Anfang an Problemen und Missverständnissen aus dem Weg zu gehen. Ein Demo Video zeigt den Ablauf.

Abgesehen von den Layouttabellen die für das Formular genutzt werden ist dies sicherlich ein guter Ansatz abseits der gewöhnlichen Kontaktformulare.

Stefan Nitzsche schreibt über Semantik, dem nächsten Schritt in der Evolution des Web. Der Artikel beleuchtet, warum dieser Schritt nötig und schwierig ist und seine Folgen unvorhersehbar sind.

Zum Artikel

jParallax

Mit dem jQuery Plugin jParallax lassen sich nette Effekte mit überlappenden Grafiken anlegen.

Zum Plugin

10 Great Free Fonts for @font-face embedding

Ralf Herrmann hat 10 Schriften zusammen getragen die man über @font-face einbinden darf.

Zu den 10 Schriften

CSS Hack für Google Chrome und Safari 3.1

Der CSS Hack für den Safari funktioniert auch in Chrome.

body:nth-of-type(1) p {
color: #333333;
}

via

Diese Technik hat mit der 2. Beta des IE 8 nun auch bei Microsoft Einzug gefunden. Mit dem Präfix -ms- werden alle CSS Eigenschaften versehen die

• eine Microsoft Entwicklung sind (nicht definiert in einer CSS Specification oder einem CSS Modul).
• Teil einer CSS Specification oder eines CSS Modules sind welches noch nicht den Status "Candidate Recommendation" hat.
• noch nicht vollständig implementiert sind.

Folgende Eigenschaften sind hiervon betroffen:

Änderungen der Syntax der filter Eigenschaft

Die Filter Eigenschaft war nie durch das W3C abgesegnet. Trotz allem wird sie recht häufig benutzt, meist um auch im IE 6 CSS Transparenz einzusetzten. Für den neuen, standardkonformen, CSS Parser musste die Syntax leicht angepasst werden.

Aus filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2); wird filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80, FinishOpacity=70, Style=2)"; (Änderungen grün markiert).

Um die filter Eigenschaft browserübergreifend zu nutzen müssen natürlich beide Definitionen angegeben werden.