Webrocker Blog

Ich habe gestern Nachmittag und heute Vormittag mal Bastelei hier im Quellcodekeller betrieben und das Frontend der Seite ein wenig "responsive" gemacht. Wer mit dem Begriff "Responsive Webdesign" nichts anfangen kann, dem empfehle ich als Einstieg diesen nun auch schon zwei Jahre alten Artikel bei Alistapart.

Im Grunde genommen geht es "nur" um die Problematik, dass mit immer mehr mobilen Endgeräten die Vielzahl an möglichen Bildschirmgrößen, Auflösungen und Seitenverhältnissen explodiert und "starre" Seitenlayouts, die z.B. mit festen Breitenangaben arbeiten, immer nur für ein Bruchteil der Geräte gut funktionieren.
Was auf den ersten Blick lediglich nach einem Layoutproblem aussieht, ist bei genauerer Betrachtung aber viel mehr; je geringer der zur Verfügung stehende Platz (zum Beispiel auf einem älteren internetfähigen "Business"handy) ist, umso wichtiger wird die Frage, welche der Inhalte einer Webseite werden denn gezeigt, welche können auf einen Platz wandern, der nur durch scrollen zu erreichen ist, und welche können komplett entfallen?
Sehr schnell ist man dem Punkt, an dem es eben nicht nur um das Aussehen geht, sondern um Inhalte. Hier tut sich gerade eine Kluft auf, denn seit Jahren wird eigentlich von der Oberfläche kommend gedacht - "zeig' mir mal einen Entwurf, wie meine Seite aussieht, gerne auch mit Blindtext und Platzhalterbildern…", und erst zu einem viel späteren Zeitpunkt kommen die "richtigen" Inhalte.
Für mobiles und zukunftssicheresfreundliches Webdesign ist es aber zunehmend und immer zwingender notwendig, dass sich zunächst unabhängig von der letztlichen Optik Gedanken über die Inhalte und deren Hierarchie gemacht wird und man ausgehend von den wirklich wichtigen Inhalten "nach aussen" arbeitet, diese "Kern"-Inhalte Schicht um Schicht mit flankierenden Elementen und opulenterer Inszenierung versieht. Das ist mal ganz ganz kurz zusammengefasst und vereinfacht, was mittlerweile als "Mobile First"-Ansatz die Runde macht.

Ich will hier und heute nicht tiefer in das Thema einsteigen, da mich das auch beruflich gerade sehr beschäftigt und momentan auch ein kultureller Konflikt zwischen zukunftssicherem Webdesign und der Art, wie bislang Entwurfs- und Entscheidungsprozesse zwischen Kunden und Designern laufen, heraufdämmert.

Think more responsively. Responsive web design isn’t about creating squishy websites, it’s to create a more optimal experience across an increasing number of contexts. Unfortunately, many people, both proponents and opponents, miss the point.
- Brad Frost

Zurück zum Webrocker; ich habe hier zunächst mal nur an der Oberfläche gekratzt, im wahrsten Sinne des Wortes. Da die Seite im momentanen Look schon seit einer Weile am Start ist, ich nicht in die Vergangenheit reisen und dort Inhalte noch mal neu strukturieren kann und ich schliesslich auch was lernen will, habe ich nicht einfach ein "Responsive WordPress" Theme genommen und hier draufgeknallt, sondern habe "nur" die CSS-Angaben und einige wenige Auszeichnungen im Code der Templates verändert. Aus diesen Gründen konnte ich auch nicht wie oben beschrieben einen "Mobile First" Ansatz gehen, wie ich es bei einer neuen Seite versuchen würde, sondern muss von einem "Desktop First" mich runterarbeiten bis auf die mini-Mobile Darstellung.

Das Ganze ist wie immer noch Work in Progress und ich bin mir sicher, es wird sich auch noch einiges verändern müssen.

Wichtig war mir erst einmal, von den festen Pixelbreitenangaben wegzukommen und den "Setzkasten" der Seite fluid mit prozentualen Angaben zu machen. Dann habe ich mit ein paar media-queries Breakpoints (768px, 480px, 320px max-width; zb @media screen and (max-width: 768px)) die Anordnung der Elemente (Header, Logo, Navigation, rechte Spalte) je nach Platz definiert.
Zum Glück habe ich damals, als ich das Layout der Seite baute, schon weitestgehend auf relative Angaben mit em und % gesetzt, so dass die grundsätzliche Änderung auf das fluide Verhalten gar nicht so schwer war. Ich musste noch ein paar Angaben machen, um die Bilder und Videos (naja, so einigermassen) flexibel zu bekommen. Über "responsive images" kann man derzeit ganze Bücher schreiben, das Thema ist noch nicht ausgereift. Ich habe mir mit Angaben zu max-width:100% und height:auto beholfen.

Zu einem wirklich mobil optimierten Ansatz würde auch gehören, über die Schriftgrössen auf kleinen Screens nachzudenken, dass habe ich hier nur ganz grob für die Darstellung bei 320 max-width gemacht, dort wird alles ca 20% grösser dargestellt.

Selbst bei meiner eigenen Seite, wo ich die CSS Dateien auswendig kenne, ich die Templates alle selbst beeinflussen kann und mir niemand reinredet, selbst hier ist das bisschen "mobil machen" schon eine ewige try-and-error und Test-Orgie und es dauert echt lange, bis man zu einem halbwegs funktionierenden Ergebnis kommt - ich bin mal gespannt, wie das bei Kundenseiten so läuft, vor allem in der Entwurfs- und Abstimmungsphase. Zu sehr ist das Denken in fixen Screens verhaftet, das merke ich immer wieder, da kommt man auch mit Moodboards und Design-Tiles nicht gegen an. Es ist gerade eine sehr spannende Zeit, aber auch sehr anstrengend…