Um die ganzen HTML/CSS/Whatever-Spielereien, die ich immer wieder einmal zusammenstelle, auch irgendwo zu sammeln, habe ich mir ein kleines Labor gebaut.
Aktuell enthält es nur meine Doctor Who Timeline und 2 alte Portfolios, aber das wird sich früh genug ändern.
Außerdem kann jetzt keiner mehr behaupten, ich würde nur Webseiten in Graustufen machen 
.
Die Zeit, in denen man eine Webseite einmal entwickelte, einen “Optimiert für 1024×768 und Internet Explorer 6″-Button in die Fußzeile klebte und fertig war, sind lange vorbei. Heute soll eine Homepage nicht nur auf Desktopcomputern, sondern auch auf Tablets und Smartphones gut aussehen. Doch: Erschreckend wenig Webseiten sind auf mobile Geräte optimiert. Der Grund ist einfach: Es gibt nicht einen universellen Weg, solche Optimierungen durchzuführen. Ich möchte heute ein paar Techniken besprechen, mit denen man seinen Blog/seine Webseite für mobile Endgeräte fit machen kann.
Ein Weg, um Webseiten zugänglicher für Smartphones zu machen, sind dedizierte mobile Layouts. Wer jetzt mit Grauen an das immer gleiche WPTouch-Design denkt, hat das größte Problem dieser Lösung bereits erfasst: Die mobile Version einer Webseite hat oft nur wenig mit der “richtigen” Version zu tun und bietet null Wiedererkennungswert. Auch wenn nicht einfach nur ein Plugin verwendet, sondern die mobile Version selbst entwickelt wird, werden dabei häufig visuelle Elemente neu entworfen oder, noch schlimmer, der eigentliche Inhalt der Webseite geändert. Was bei Seiten mit komplexen Layouts, wie z.B. einer Zeitung, durchaus notwendig sein kann, halte ich bei Blogs für stark übertrieben.
/* Fixe Breite */ body { width: 800px; } /* Dynamisch */ body { width: 80%; }
Bei einem flüssigen Layout wird die Breite einzelner Inhalten nicht in Pixeln angegeben, sondern in Prozent. So ist der Text z.B. nicht mehr 800px breit, sondern nimmt 80% des verfügbaren Platzes ein. Wenn das Browserfenster genau 1000px breit ist, ergeben sich wieder 800px. Liest man den Text aber auf einem iPhone 4 im Hochformat sind es nur mehr 512px.
Der große Vorteil hierbei ist, dass sich das Layout jeder Displaygröße anpasst. Am Desktop verhält sich die Seite wie jede andere, und am Smartphone muss man nicht wie verrückt Zoomen. Da aber sowohl der Entwickler als auch der Autor nicht genau wissen kann, wie Breit der Inhalt tatsächlich dargestellt wird, ist es äußerst schwierig, das Design perfekt auf alle Gegebenheiten abzustimmen.
So kann sogar etwas triviales wie das Einbinden eines Bildes innerhalb des Textes zu einem Krampf werden. Bei breiten Bildschirmen passt es, zwischen 600 und 400 Pixel Breite wird der verbleibende Platz neben dem Bild viel zu schmal, wodurch der Text eigenartig aussieht, und bei weniger als 400 Pixel Breite ist das Bild zu groß. Von auf den Pixel genau designten Beiträgen möchte ich gar nicht erst sprechen
/* Normal */ body { width: 1000px; margin: 40px auto; background-color: pink; color: white; font-family: "Comic Sans MS", sans-serif; } /* Tablets */ @media only screen and (min-width: 700px) and (max-width: 1000px) { body { width: 650px; } } /* Smartphones */ @media only screen and (max-width: 700px) { body { width: 350px; margin: 20px auto; } }
Responsive Webdesign ist ein wenig wie die flüssigen Layouts des Jahres 2010. Es stellt einen Kompromiss zwischen der perfekten Kontrolle eines fixen und der Dynamik eines flüssigen Layouts dar. Hierbei wird eine Webseite mit “normaler” – sprich: voller – Breite entworfen. Daraufhin wird mithilfe von CSS3 Media Queries definiert, welche Elemente sich ab einer bestimmten Auflösung anders verhalten sollen.
In dem Codebeispiel wird definiert, dass die Seite generell 1000px breit ist, zentriert dargestellt wird, oben und unten 40px Abstand hat und mit einem pinken Hintergrund für Augenkrebs sorgt. Die Schrift ist Comic Sans MS in weiß . Als nächstes wird definiert, dass die Seite auf Bildschirmen zwischen 700 und 1000 Pixel Breite (=Tablets im Hochformat) nur mehr 650px breit ist. Der Rest bleibt unverändert. Auf mobilen Endgeräten zwischen 700 und 400 Pixeln wird die Seite erneut schmäler, zusätzlich wird der Abstand oben und unten verkleinert.
Ich persönlich halte Responsive Webdesign für die perfekte Lösung bei weniger komplexen Webseiten wie z.B. Blogs, da es die Möglichkeit, Inhalte Pixelgenau zu gestalten mit der Fähigkeit, auf verschiedenen Geräte zu optimieren, verbindet. Natürlich bedeutet es Mehrarbeit, ein Layout 4 mal zu entwerfen, aber wenn man es richtig macht, ist es eine einmalige Arbeit und die Inhalte skalieren automatisch.
Natürlich versuche ich ein gutes Vorbild zu sein, also habe ich diesen Blog mit dem wunderbaren Less Framework ein wenig aufgebessert. Wer es ausprobieren will verkleinert einfach sein Browserfenster und sieht zu, wie sich der Inhalt anpasst.Viel Spaß!