Responsive Design

Bei unseren Website-Angeboten liest Du immer wieder etwas davon, dass wir Deine Webseite responsiv gestalten.
Was ist dieses ominöse „responsive Design“ und warum ist es für moderne Webseiten so wichtig?

 

Webseiten früher

 

Bei der Entstehung des Internets gab es Webseiten, die praktisch, aber nicht hübsch waren. Es wurde Text dargestellt und die Einführung von Hyperlinks war revolutionär.
Seitdem sind gar nicht so viele Jahre vergangen, aber heutzutage sind Webseiten professionell designt, animiert, bunt und reagieren auf jede Mausbewegung. Aus der einfachen Darstellung von Text ist ein eigener Wissenschaftsbereich und eine boomende Branche geworden.

 

Zwischen Desktop und Smartphone

 

 Die nächste große Veränderung der Webseiten war die Einführung von Smartphones (klar, für die alten Telefone gab es WAP, aber das sei hier einmal vernachlässigt). Während zuvor Webseiten lediglich auf Desktop-Rechnern mit der selben Auflösung angesehen wurden, will man nun auch unterwegs eine übersichtliche und lesbare Seite aufrufen können. Und zwar auf dem Laptop, dem Smartphone, der Mini-Ausgabe des Smartphones, dem Tablet, dem Phablet und zuhause auf dem hoch auflösenden Monitor.
Da reicht eine Webseite für alles lange nicht mehr aus.

 

Responsive und Alternativen

 

Responsive Design

 

Beim responsive Design werden Messpunkte festgelegt (z.B. 500 px), an denen sich die Darstellung der Webseite verändert. Z.B. werden die Elemente der Navigation dann untereinander, anstatt nebeneinander dargestellt. So kann auf schmalen Smartphones alles lesbar dargestellt werden, aber auf dem breiten Desktop-PC wird die Breite genutzt, um dem Besucher eine schöne Übersicht zu ermöglichen.

 

Fluid Design

 

… ist eine Abwandlung des responsive Design. Hier gibt es keine Messpunkte, sondern soweit möglich verhalten sich alle Inhalte der Seite abhängig von der zur Verfügung stehenden Bildschirmbreite. Z.B. nutzt die Überschrift immer 100% der Breite, die Seitenleiste 20% u.s.w.
Eine andere Anordnung von Elementen kann hiermit allerdings nicht erreicht werden.

 

Mobile Seite

 

Besonders große, kommerzielle Webseiten bieten eine separate, mobile Version ihrer Seite an. Damit bekomme Besucher per Smartphone eine schlankere, angepasste Ansicht, die für Mobilgeräte besser geeignet ist. Für ein kleines Unternehmen gibt es hier – neben dem größeren Aufwand – den Nachteil, dass ggf. zwei Seiten gepflegt werden müssen und auch die Besucher sich auf die beiden Seiten verteilen (das ist nachteilig für das Ranking bei Google).
Außerdem stellt sich die Frage, wo die Grenze zwischen mobil- und Desktop-Ansicht gezogen werden soll. Schließlich gibt es kleine Netbooks und große Tablets und sogar Smartphones mit sehr hoher Auflösung.

 

Die Colourful-Seite

 

Als Beispiel für responsive Design fordere ich Dich jetzt einmal dazu auf, mit genau dieser Webseite ein wenig herumzuspielen. Achtung, das geht jetzt leider nur am PC. Schiebe Dein Browserfenster schmaler und beobachte, wie sich die Seite verändert. Der Inhaltstext passt sich flüssig („fluid Design“) der Fensterbreite an. Irgendwann verschwindet die Seitenleiste, um mehr Platz für den Inhalt zu lassen. Bei der schmalsten Einstellung wird die Navigation mobil kompatibel.

Teste gerne auch, wie sich deine Lieblings-Webseite verhält.

25. Mai 2017