Hier gibt es Artikel rund um Webdesign, Grafikdesign, Photoshop, Flash, TYPO3, CSS, Content-Management-Systeme, jQuery, Windows, 3D-Visualisierung und vieles mehr.

Intelligencefont: Schriftarten im Browser konfigurieren

Das Einstellen und Optimieren einer Schriftart für eine Website kann nicht im Grafik- oder Layout-Programm erfolgen, da noch keine Software existiert, die ein echtes Browser-Rendering simulieren kann (Anwendungen wie Adobe Dreamweaver bilden die Ausnahme) oder eine bestehende Browser-Engine integriert hat — daher besteht die einzige Möglichkeit in der Erstellung entsprechender CSS-Stile. Um den Prozess etwas zu beschleunigen, stehen diverse Tools wie CSS Type Set oder Typetester zur Verfügung. Eine Alternative mit weiteren Einstellungen gibt es mit Intelligencefont. Hier können Schriftbilder online angepasst und abgestimmt werden.

Auf der Website lassen sich Blöcke anlegen, die mit Texten gefüllt werden können. Auf die Makrotypografie bezogen können die Anzahl der Spalten eines Blocks sowie der Abstand zwischen den Spalten festgelegt werden. Wesentlich mehr Optionen stehen hinsichtlich der Mikrotypografie bereit: Hier können Schriftart, Schriftgröße, Zeilenabstand, Laufweite und Wortabstand bestimmt werden. Zusätzlich gibt es noch die Option "OS Version", durch die entsprechende Schriftarten zur Auswahl stehen. Ist man mit dem Schriftbild zufrieden, können die CSS- und XHTML-Codes generiert und kopiert werden.

Firefox 4: Beta 2 mit CSS3-Transitions veröffentlicht

Mittlerweile ist die zweite Beta-Version von Firefox 4 erschienen — ein entsprechender Blog-Eintrag von Mozilla findet sich hier. Während die erste Beta-Version des kommenden Mozilla-Browsers Performance-Verbesserungen, Direct2D-Beschleunigung, HTML5-Features und diverse CSS-Möglichkeiten mit sich brachte, stehen mit der aktuellen Beta-Version CSS3-Transformationen zur Verfügung.

Mit den nativen CSS3-Transitions sind nun also Drehungen, Verzerrungen und Vergrößerungen möglich. Ein Beispiel aus dem Mozilla-Artikel:

• transform: rotate(350deg) scale(1.4) rotate(-30deg);

Weiterhin stehen Demos bereit, die verschiedene SVG-Filter und WebGL-Fähigkeiten zeigen. Neben visuellen Effekten wurde weiterhin die Performance von Firefox verbessert. Dies wird durch die "Retained Layers"-Technik erreicht, bei der Elemente in einer Cache-Ebene abgelegt werden und dadurch nicht immer neu dargestellt werden müssen.
Eine empfehlenswerte Quelle für CSS3-Animationen stellt übrigens Richard Bradshaw mit einer Website bereit.

User Interface Design: Richtlinien und Sammlungen

Um die Benutzerfreundlichkeit einer Website zu verbessern, bieten sich verschiedene Möglichkeiten und Lösungswege an. Inzwischen gibt es sehr gute Quellen im Netz wie etwa die Seite "Usable Efficiency", auf der sich gute Videos zum Thema finden. Eine weitere Seite rund um die Aspekte von User Interface Design stellt Konigi dar. Neben aktuellen Projekten aus der UX-Szene und einer Website-Galerie finden sich auf der Seite mittlerweile viele wertvolle Ressourcen.

Dazu zählen zum einen die User Interface Style Guides, die verschiedene Bereiche abdecken, um das Erscheinungsbild eines Produkts durchgängig zu gestalten. Weiterhin gibt es die User Interface Guidelines, bei denen sich etliche Dokumente zur Herstellung von intuitiven Bedienkonzepten finden (darunter auch Apple, Microsoft oder Nokia). Schließlich gibt es im Konigi-Wiki noch die Seite der Design Pattern Repositories, auf der eine Liste mit diversen Sammlungen enthalten ist. Dazu zählen User Interface-Elemente und Beschreibungen zu deren Gebrauch. Aktuelle Seiten dieser Kategorie sind beispielsweise UI-Patterns.com oder Pattern App.

HTML5: Demos mit 8-Bit Color Cycling

Wer sich an die neunziger Jahre, Amiga-Spiele und die damit verbundenen 8-Bit-Grafiken erinnern kann, wird vermutlich auch die Color Cycling-Technik kennen — dabei wird die Farbpalette einer Grafik animiert, um den Anschein einer Bewegung zu erwecken. Dadurch konnten Effekte wie Rauch, Schnee, Wasser oder Wolken simuliert werden, ohne viel Prozessorlast zu beanspruchen.
Joseph Huckaby von EffectGames hat es sich zur Aufgabe gemacht, die Technik auf HTML5 und das canvas-Element zu übertragen. Fertige Demos gibt es auf dieser Seite zu bestaunen.

Das Projekt ist sehr abgefahren und kann sich auf jeden Fall sehen lassen. Die Demos funktionieren unter allen Browsern, die das canvas-Tag unterstützen. Folglich werden derartige Animationen erst mit Version 9 des Internet Explorers funktionieren.
Die Arbeit des Entwicklers ist bemerkenswert: Um die Original-Grafiken von Mark J. Ferrari (LucasArts) nutzen zu können, musste ein Converter in C++ geschrieben werden, der das alte ILBM-Format (in Zeiten von Deluxe Paint) umwandelt. Über ein PHP-Skript wird anschließend die Palette als JSON-Array ausgegeben, um sie animieren zu können. Der Autor hat zudem die Technik um "BlendShift Cycling" erweitert, so dass durch Überblendungen sanftere Animationen entstehen. Der Quellcode und weitere Details finden sich in diesem Blog-Eintrag.