Font Awesome

Die Font Awesome ist eine Piktografische Schriftart die sich extrem gut für Geräte mit hochauflösenden Displays eignet. 150 Icons beinhaltet die Schrift bereits und weitere sollen demnächst folgen. Die Idee ist, dass man durch diese Methode das Erstellen von Icons als Bilder ablösen kann. Folgendes Beispiel soll das ganze verdeutlichen: Durch die Einführung des iPhone 4 mit Retina-Display mussten sämtliche Icons einer Website durch neuere, hochauflösendere Bilder ersetzt werden. Durch das kürzlich veröffentlichte iPad 3 befinden wir uns erneut in dieser Situation. Icons die bisher zum Beispiel 120 * 120 Pixel hatten, müssen jetzt 240 * 240 Pixel aufweisen damit das neue Icon gestochen scharf auf dem neuen Gerät dargestellt wird. Die Icons jeweils zu vergrössern kostet viel Zeit, Geld und vor allem Nerven! :P

Mit der Font Awesome wurden die berühmten Glyphicons, welche auch von Twitter verwendet werden, in eine Schriftart gebaut. Somit sind alle icons sozusagen als Vektorgrafiken verfügbar und können uneingeschränkt und ohne Qualitätsverlust vergrössert werden!

Wie das alles genau funktioniert lest ihr am besten auf der Entwicklerseite nach. ;)

font awesome

Apple iDesk Konzept

Wow! Ob so wohl die Zukunft aussehen wird? Cool wäre es auf jeden Fall! Bei Mac Life habe ich einen Post über einen möglichen iDesk gefunden. Die Idee ist, aus dem ganzen Tisch ein touchbares Gerät zu bauen. Das iPhone würde sich nur durch das Platzieren auf dem Tisch synchronisieren. Der Kalender liegt ebenfalls daneben um Termine und Meetings zu erfassen. Beim Arbeiten mit Photoshop könnte das Werkzeuge-Fenster neben der Tastatur platziert werden um effizienter zu arbeiten…
Apple iDesk Konzept
Bild: www.maclife.com

Neues Web Design Projekt

Letzte Woche habe ich mein neuestes Web Design Projekt fertiggestellt und live geschaltet. Ich gestaltete und programmierte für Bryan Graf ein responsives Layout mit Hilfe der neusten Techniken, den sogenannten CSS3 Media Queries. Einfach gesagt heisst das, dass die Website merkt, mit welcher Bildschirmauflösung der Benutzer die Website aufruft. Durch dieses System lassen sich Weichen zwischen Desktop Bildschirmen und mobilen Geräten wie dem iPhone, dem iPad oder anderen Tablets und Smartphones stellen. Ich habe so die Möglichkeit dem User mit einer kleineren Auflösung (Smartphones und Tablets) eine optimierte Version der Website zur Verfügung zu stellen und ihm ein besonderes Erlebnis der Benutzerfreundlichkeit zu bieten.

Der Inhalt der Website wird via AJAX aus der Datenbank gelesen. Damit wird ein komplettes Neuladen der Website verhindert und stattdessen nur der Inhalt ausgetauscht. Die Homepage bietet ausserdem einen HTML5 Soundplayer an, welcher ebenfalls problemlos auf mobilen Geräten funktioniert.
Bryan Graf
Bryan Graf

Parallax Scrolling

jParallax, oder auch Parallax-Scrolling genannt, ist ein Plugin für die Javascript Library jQuery. Damit lassen sich ziemlich abgefahrene Animationen und Effekte erstellen. jParallax ändert ein HTML Element in einen sichtbaren Bereich (Viewport) und positioniert alle Kindelemente absolut dazu. Die Elemente reagieren dann auf die Bewegung bzw. Position der Maus.

Hier ein sehr gelungenes Beispiel von iutopi. Einfach runterscrollen um den Effekt zu sehen.
iutpoi parallax scrolling
Bild: www.iutopi.com