Wie man Webseiten so baut, dass sie responsiv sind, also sowohl auf kleinen hochformatigen Telefonen als auch auf querformatigen Desktops gut aussehen. Und warum eine Print-Journalistin mit ihrem Spaltendenken da kaum Probleme hat. 

Wird die Website auch auf Telefonen gut aussehen? Ist sie, so das Zauberwort, «responsiv»? Die Antwort ist selbstverständlich: «Ja, klar!». Denn schliesslich schauen wenigstens privat die Menschen nicht auf die grossen Bildschirme von Computern, sondern auf die kleinen von Smartphones.

Manche Dinge dort funktionieren auch am besten, wenn man das Gerät quer hält. Etwa Kinofilme oder Videos, die das Querformat von Kinoleinwänden nachbilden. Auch Tablets werden gerne mal quer gehalten, manche Spiele etwa verlangen das. 

Ein modernes Webdesign wird das selbstverständlich berücksichtigen. Ein moderner Webdesigner oder eine moderne Webdesignerin entwirft ihr Design auf grossem oder kleinem Bildschirm und denkt den jeweils anderen Bildschirm automatisch mit. Viele Designer sind sogar dazu übergegangen, ihr Design auf kleinen Bildschirm zu beginnen, und sich dann langsam in die Breite und die Grösse vorzuarbeiten.

Webseiten responsiv denken

Das scheint mir eher eine Glaubensfrage als matchentscheidend zu sein. Denn wichtig ist nicht die Reihenfolge. Sondern die Webseiten responsiv zu denken, also gleichzeitig parallel klein-hoch und gross-breit, und weder das eine noch das andere auszuschliessen. Zumal – wenigstens im Moment – die Regel gilt: Je mehr sich das Angebot an eine berufliche Klientel richtet, umso mehr wird es auf grossen Bildschirmen angesehen werden. Und je mehr es ein Freizeitvergnügen ist, umso mehr sollte es für kleine Bildschirme gedacht werden. 

Interessanterweise stellte ich während meiner Ausbildung zur Webdesignerin fest, dass ich mit diesem Umarbeiten von Designs weniger Probleme habe. Manche, die das Business schon seit Jahren betreiben, tun sich zuweilen mit der Umgewöhnung schwer. Das liegt wohl daran, dass mein Design-Auge in der Zeitungsbranche geschult wurde. Dort sind alle Seiten in Spalten aufgeteilt. Dieses «Spaltendenken» habe ich ins Webdesign mitgenommen.

Denken in Boxen hilft für responsives Design

Die Technik für Websites macht nun folgendes, um grosse Designs auf kleine Bildschirme herunter zu brechen: Sie nimmt die in Spalten gruppierten Container der grossen Bildschirme und setzt sie umso mehr untereinander, je schmaler der Bildschirm wird. Ein vierspaltiges Layout auf dem Desktop wird auf einem Tablet zu einem zweispaltigen Layout; und auf dem Smartphone bleibt nur noch die einzelne Box übrig.

Wer sein Design wild und unregelmässig über alle Spaltenbreiten hinwegspringen lässt oder die Spaltenbreite im Laufe einer Seite ständig ändert, bekommt Probleme. Wer aber – wie Print-Journalisten – über die Länge einer Seite hinweg in festen Spaltenbreiten denkt, der ist gewappnet. Und erhält ein Design, das gut aussieht, egal wie breit oder hoch der Bildschirm es darstellt. 

Sicher, feinere Anpassungen sind am Ende trotzdem nötig. Aber dieser Arbeitsschritt ist nur eine weitere Selbstverständlichkeit.  

Mehr erfahren über gutes Design