Vor ein paar Tagen habe ich einen sehr interessanten Besuch getätigt. Durch Zufall gelangte ich auf die Webseite von Jonas Hellwig (http://www.kulturbanause.de) der sich offenbar mal so richtig mit Layout auskennt. Wenn Ihr seine Seite mal ansurft werdet Ihr sehen was ich meine. Jonas schrieb in seinem Blog über ein Thema über das ich mir selbst noch nie so richtig Gedanken gemacht habe : Responsive Layouts. Watt ?? So ging mir es auch. Erkläre ich kurz :

Responsive Layouts oder Themen

Früher gab es zwar verschiedene Bildschirmauflösungen jedoch nicht so viele Formate. Ganz früher gab es 4:3 Monitore die meist von 640 x 480 bis hin zu 1280 x 1024 Pixel zeigten, danach gab es noch 16:9 bzw. etwas später 16:10 aber das war es dann auch schon. Heute haben wir aber eine Vielzahl von Geräten und Gerätetypen die unsere Webseiten sehen wollen. Zu der breiten Masse von Computern und Notebooks sind viele Smartphones und Tablets dazugekommen. Und wer sich in einem Handygeschäft umsieht stellt fest : hunderter verschiedener Bildschirmformate. Hier kommen die Responsive Layouts ins Spiel. Diese Ermöglichen nämlich für jedes Device eine eigene Aufteilung der Webseite.

In seinem Artikel beschreibt er das ganz verständlich. Man kann es sich natürlich auch einfacher machen und ein fertiges Theme (so wie ich ) downloaden und benutzen. Auf http://www.elmastudio.de/ gibt es dieses hier welches zudem noch recht komfortabel ist.

Favicons und App Icons

Einen weiteren sehr hilfreichen Tip habe ich im Kultutbanausen-Blog gefunden : Touch Icons. Jeder kennt noch die favicons – das sind die netten kleinen Icons die uns gleich in der Adressleiste des Browser zeigen (sollen) auf welcher Seite wir uns befinden. Praktisch Corporate Design für Webseiten. Auf den iOS Geräten (iPhone, iPad, iPod) kann man Webseiten dem Home Screen hinzufügen. Sofern iOS kein touch-icon findet wird eine art Seitenvorschau als Icon erzeugt. Wir können nun dem iOS Nutzer einen Service bieten indem wir ein für die Webseite typisches Icon vorbereiten. Idealerweise gestalten wir das so, wie wir ein favicon gestalten würden. Dies muss 129 x 129 Pixel groß sein und am ende “apple-touch-icon.png” heißen. Es kommt dan in die obere Verzeichnisebene wie auch das favicon.ico.

Wie es dann aussieht könnt Ihr an meiner Webseite probieren, hier gibt es einen chicen Fisch als App Icon.

Wenn Ihr nun alles befolgt was der Jonas geschrieben hat, dann habt Ihr bald eine Webseite die man auf jedem Gerät drehen und wenden kann, und die trotzdem immer chic aussieht und zudem noch tolle Icon’s auf den Homescreen zaubert.