Mehr als 95 Prozent der Browser im deutschsprachigen Raum beherrschen die Einbettung von Schriften mit der CSS-Funktion @font-face. Was das Format der Schriftdatei angeht, gab es aber lange Zeit keine einheitliche Vorgehensweise: Während der Internet Explorer 6 das Schriftformat Embedded Open Type (.eot) verwendet, setzen Firefox, Chrome, Safari und Opera auf die TrueType (.ttf) und OpenType (.otf), während der Safari am iPhone und iPad nur Schriften im svg-Format darstellte.

.woff macht es wieder gut

Im April 2010 haben nun alle großen Browserfirmen das Web Open Font Format (.woff) beim Gremium zur Standardisierung des World Wide Web, dem World Wide Web Konsortium (W3C) eingereicht. Aktuell gibt es dieses Format in Firefox und Chrome; Internet Explorer, Safari und Opera sollen bald folgen. Mit diesem neuen Standard kann jede Schriftdatei in das notwendige Schriftformat umgewandelt und in die Website eingebaut werden.

Aber Achtung: Nachdem das Darstellen auf einer Website einer Vervielfältigung gleichkommt, könnten gewisse Lizenzen notwendig sein, auch wenn es sich dabei um Freefonts handelt. Bei letzterem ist meistens als Voraussetzung für eine Nutzung die Erwähnung und Verlinkung auf die Website des Schriftenentwicklers Pflicht. Grundsätzlich gilt, sich vor der Verwendung jeder neuen Schrift die Lizenzbestimmungen genau anzusehen.

Fonts-Anbieter

Dieser Schritt fällt weg, wenn man sich mit seinen Seiten an Web Fonts-Anbieter wendet. Die zwei bekanntesten sind Google und Typekit.

Google http://code.google.com/intl/de-DE/apis/webfonts/

Das Google Font-Verzeichnis listet Schriftarten auf, die unter einer Open-Source-Lizenz verfügbar sind und hohe Qualität gewährleisten – derzeit sind es 18 Schriften. Per Klick erzeugt Google mittels des Font API ein HTML-Fragment, welches das Stylesheet von den Google-Servern lädt; dieses macht wiederum die Font-Datei auf der einbindenden Seite verfügbar. Je nach Browser serviert Google dann eine TTF- oder eine EOT-Datei. Sowohl CSS-Datei als auch Schriftdatei liegen dabei zentral auf Google-Servern, dass heißt sie befinden sich im Cache des Nutzers und müssen nicht mehr extra heruntergeladen werden.

Typekit http://typekit.com/

Für einen Betrag von bis zu 100 Dollar ist eine umfangreiche Sammlung von rund 4.000 unterschiedlichen Schriften unter TypeKit erhältlich. Sie reicht von Open Source-Fonts bis hin zu hochwertigen kommerziellen Schriftarten. Typekit war eines der ersten Services in diesem Bereich und ist mit rund 80 Millionen Unique Usern im Monat auch das beliebteste. Typekit ist sehr einfach konfigurierbar und erlaubt eine Integration binnen weniger Minuten. Die gesamte Schriftensammlung ist zu einem recht niedrigen Preis erhältlich (zwei Seiten, fünf Fonts per Seite um 24,99 Dollar pro Jahr), womit man als Entwickler unterschiedliche Schriften auf einer Seite, als auch auf mehreren Seiten ausprobieren kann. Der Nachteil ist, dass Typekit Javascript verlangt und die Fonts nicht für die Verwendung außerhalb des Browsers gedacht sind.

Einen guten Vergleich von zehn unterschiedlichen Schriftenservices findet ihr unter

Welche Fonts für welchen Zweck?

Nachdem es im Web eine Vielzahl von Schriften gibt, stellt sich natürlich immer die Frage, welche denn für welchen Zweck am besten geeignet ist. Während für Blog-Headlines eher auffällige Display-Fonts (wie zum Beispiel Code, FF Meta Web, Museo Sans) passen, sind klassische Firmen-Websiten mit einer dezenten Brotschrift mit dem gewissen Etwas (wie Proxima Nova, Vollkorn) gut beraten. Nutzt man eine Schrift nicht nur für Überschriften oder Menüs sondern auch für Fließtexte, ist ein gutes Hinting http://de.wikipedia.org/wiki/Hint wichtig. Damit werden die Buchstaben bei kleinerer Schrift nicht herunterskaliert, sondern sind auch bei niedriger Auflösung weiterhin gut lesbar. Geeignete Schriften sind zum Beispiel Calluna oder Droid Sans – letztere ist übrigens auch für mobile Seiten gut anwendbar. 

Ein wichtiger Bestandteil meiner früheren Webdesign-Ergüsse war die Optimierung des Screendesigns auf die Bildschirmauflösung 800 x 600 Pixel. Davor entwickelte man die meisten Applikationen sogar auf eine Breite von 640 x 480 Pixeln. Augenscheinlich holt einen die Vergangenheit immer wieder ein, denn mit den modernen Mikrolaptops und Mobile-Devices rücken diese Auflösungen wieder ins Designerlicht, doch dazu später.

Die Großen

Speziell die breiten Flachbildschirme haben sichs auf dem State-of-the-Art-Schreibtisch gemütlich gemacht. Die Formate 16:9 oder 16:10 haben sehr stark angezogen. Hier sind ansteigende Auflösungen 1680 x 1050 und 1440 x 900 Pixel. Den Löwenanteil hat nach wie vor 1024 mal 786 Pixel. Meine Lieblingsauflösung 1280 mal 1024 Pixel folgt danach und wird sicher bald an 1. Stelle rücken. Hier ein kleiner Chart:

Konklusio: Ich bin absoluter Befürworter zentraler Webdesigns, wie es diesem Blog zugrundeliegt. Bei fixen Layouts gibt es somit bei den breiten Formaten keine unschönen Darstellungen. Noch dazu setzen die Browser der Zukunft auf skalierbare Darstellung bei Zoom oder Verkleinerung. Obwohl nie wirklich die gesamte Kontrolle über das Layout möglich ist, die End-Darstellung legt immer der Nutzer fest. Diskussionen zu diesem Thema gibts ja genug. Denn trotz der breiten Bildschirme, haben die meisten User die aufgerufenen Webseiten über den gesamten Screen ausgebreitet.

Die Kleinen

Mobile Internet-Devices sind seit dem iPhone wohnzimmerfähig geworden. Das Apple-Handy hat als Beispiel folgende Auflösung: Im Hochformat: 320 x 356 Pixel und
im Querformat: 480 x 208 Pixel. Muss man deswegen wieder 3 Schritte zurück und an die oben erwähnten kleinen Auflösungen denken? In diesem Fall gibt es Erleichterung. Der mobile Safari Browser auf dem iPhone geht mit gutem Beispiel voran und rechnet die Auflösung um: Eine Webseite wird mit 980px Breite geöffnet. Dieser Ausschnitt wird auf die kleine Auflösung runterskaliert. Webseiten die breiter als die 980px sind werden mit Scrollbalken ausgeliefert.

Man sieht die Kluft der Bildschirmauflösungen geht immer weiter auf, das Webdesign muss solange es richtig gemacht wurde nicht extra angepasst werden. CSS3 bietet hier hervorragende Möglichkeiten alle Devices abzudecken. Hier speziell fürs iPhone. Für die Abdeckung der besonders breiten Bildschirme bevorzuge ich wie gesagt/geschrieben fixe Layouts. Was meint ihr zu dem Thema, mit welcher Auflösung arbeitet ihr am liebsten?

UPDATE: Natürlich sind Displaygrößen nicht gleichzeitig Bildschirmauflösungen. Danke an Twitter für den Hinweis.

Um den Mail-Software Herstellern Standards näher zu bringen und Feuer unter dem Hintern zu machen, gibt es das email standards project. Hauptmitwirkender in diesem Projekt ist die Web-Agentur Freshview, welche die Newslettersoftware Campaign Monitor anbietet. Der Campagin Monitor hat vor kurzem eine aktualisierte Übersicht der CSS-Unterstützung in E-Mail-Programmen oder Web-Clients veröffentlicht. Da wird einem klar wie dünn hier irgendwelche CSS-Standards gesät sind.

Ausschnitt der Übersicht CSS-Unterstützung in E-Mail Programmen

Ist buntes E-Mail Marketing notwendig oder wirksam?

Es gibt immer wieder Diskussionen ob nicht ein Text-Newsletter reichen würde. Dem kann ich nur vehement widersprechen. Erfolgreiches E-Mail Marketing bedarf auch der CI des Unternehmens und muss ansprechend gestaltet sein. Die Zahlen können dies unterstreichen. Bei einigen Tausend Anmeldungen habe ich bei unseren Kampagnen nur 3% Textnewsletter-Abonnenten. Der Rest sind Empfänger der aufbereiteten Newsletter.

Die Befragung ergab auch, dass trotz meiner Vermutung CSS und Webstandards seien mehr verbreitet, noch immer 62,6% der Webseitenbesitzer mit veralteten Tabellenlayouts arbeiten. 32,8% nutzen für den Font-Tag sogar Inline-Styles. Stark verschachtelte Tabellenlayouts führen ebenso zu Ladeverzögerungen weil Browser die Konstrukte richtig zu Rendern versuchen, also bitte Webstandards und CSS büffeln!

84,8% der Web-Seiten haben Java-Script im Einsatz. Die durchschnittliche Größe der Skripte beträgt 9KB unkomprimiert und 6KB komprimiert. Die durchschnittliche Zahl der externen Skripte war 7.

Besonderen Anstieg hatte in den letzten Jahren Streaming-Media, die Verwendung wuchs um mehr als 600%. Interessant ist, dass 88% der Besucher einen Stream nach durchschnittlich 10 Sekunden wieder verlassen, insgesamt haben die Videos eine Laufzeit von 30 Sekunden.

Das "schöne" Web 2.0 hat mit seinen Technologien zu dem Wachstum an Objekten und JavaScripts beigetragen. Mit der Verbreitung von Breitband, wird heute grundsätzlich davon ausgegangen, dass jeder eine solch schnelle Verbindung genießen kann. In US sind noch immer 43% der Internetbenutzer Dial-up User. In Österreich lag 2007 die Breitband-Durchdringung nur bei 27%.

Bitte durchatmen und Webseiten so gut wie möglich auf kürzere Ladezeiten optimieren, der DFÜ-User wird dankbar sein, außerdem kommt bald der Sommer.

Die Abkürzung MoFuse bedeutet “Mobile Fusion”. Ich könnte mir es so vorstellen, dass man mit einem mobile.css den MoFuse-Link an oberster Stelle anzeigt, sozusagen als Mobile-Feed. In der Sidebar bietet das Service die Option eines SMS Widget an, mit dem man den generierten Link per SMS erhält. Nützlich könnte der Dienst für ältere Handys oder Mobile Endgeräte sein, da die Darstellung rein Text-basiert ist.

Grundsätzlich macht dieser Service Sinn, aber sind mobile Surfer mit älteren Geräten unterwegs? bzw. bieten neue mobile Browser bessere Darstellungsmöglichkeit auf dementsprechenden Endgeräten. Als Vorteil sehe ich unter anderem, dass Datenverkehr aufgrund der Textdarstellung sicherlich reduziert wird und das SMS-Feed werde ich ausprobieren.

Weitere Informationen und wer noch mitmacht