Responsive Webdesign: Alles kann sich vergrößern oder verkleinern und ist unbedingt flexibel
Tablet-PCs und Smartphones boomen nach wie vor. Idealerweise sollte jede Webseite daher nach Möglichkeit eine mobile für kleine Bildschirmgrößen optimierte Variante zur Verfügung stellen. Tino Urbiks, Webdesigner aus Berlin, hat uns verraten, worauf man achten muss, wenn man seiner Webseite ein responsive Design verpassen möchte.
Was versteht man unter Responsive Webdesign?
Tino Urbiks Der Begriff Responsive kommt aus der Architektur und bedeutet “reaktionsfähig”. Also die Materie passt sich den Gegebenheiten an. Es gibt Experimente mit Wänden die sich verbiegen, wenn man sich darauf zubewegt oder auch Glas das milchig wird, wenn jemand einen Raum betritt, um ungestört zu sein. Übertragen auf das Webdesign bedeutet, dass die Webseite sich dem Endgerät und dem Viewport anpasst und immer gut aussieht, ohne das für jedes Gerät eine extra Version der Webseite erstellt werden muss. Was auch immer schwieriger werden wird, da zunehmend mehr Geräte internetfähig sind und man als Webdesigner nicht nur die gängigen Browser auf Mac und PC sowie Smartphones beachten muss sondern z. B. auch Portable Spielkonsolen. Auch haben moderne Geräte mehr als 72dpi Auflösung – was noch spannend werden wird. Also alle Webdesigner die sich freuen, dass der IE6 zu ziemlich verschwunden ist … es wird nicht leichter. Die Herausforderung hierbei ist nicht mehr das Pixelgenaue arbeiten sondern die Anpassungsfähigkeit und das fängt schon bei der Gestaltung an. Alles kann sich vergrößern oder verkleinern und ist unbedingt flexibel. Gridsyteme haben schon länger ihren festen Bestandteil im Webdesign viele davon gibt es auch als sogenanntes “Fluid Grid” eins der beliebtesten ist dabei es 960gs-Fluid. Durch solch ein System haben wir die Möglichkeit Webseiten zu gestalten die sich anpassen können und dennoch eine klare Gestaltungslinie haben.
Welche Vorteile bietet das?
Tino Urbiks Für den Designer bedeutet es im Vorfeld natürlich erstmal mehr Arbeit und die Vorteile liegen dann klar beim Benutzer nämlich, dass sich die Webseite seinem Verhalten und Endgerät anpasst. Es muss ja nicht mal ein anderes Gerät sein. Es reicht ja schon wenn man mal sein Browserfenster verkleinert dann sollte die Webseite immer noch funktionieren. Der Vorteil beim Webdesigner liegt darin das die modernen Geräte die neuen Technologien auch unterstützen.
Auf was muss man bei der technischen Umsetzung achten?
Tino Urbiks Man muss vor allem sehr genau arbeiten und im Vorfeld die semantische Struktur sowie die Inhalte gut planen. Und es sollte schon beim Design der Webseite ein Umdenken stattfinden. Designer die der Meinung sind jeder Pixel muss in jedem Browser an der gleichen Stelle sitzen, sollten lieber kein Responsive Webdesign gestalten.
Was muss man beim Anlegen von Menüstrukturen beachten?
Tino Urbiks Die Menüstrukturen selber haben damit eigentlich recht wenig zu tun wenn diese sauber angelegt sind. Man sollte bedenken das Flyoutmenüs auf mobilen Geräten weniger praktisch sind.
Welche Programmier-Techniken sollten dabei zum Einsatz kommen?
Tino Urbiks Das wichtigste ist das sogenannte flexible Layout welches auf Prozentualen und nicht auf Pixelwerten basiert. Hinzu kommt noch CSS 3, Javascript und Media Queries. Mit Mediaqueries ist man in der Lage abhängig von der Bildschirmauflösungen Elemente und deren Größen festzulegen. Beispiel: im Bereich bis 500px Bildschirmauflösung mache die Headline 1.5em groß.
@media screen and (max -width: 500px) {
h1 { font-size: 1.5em; }
}
Wie schaut es mit den Seitengrößen beim Responsive Webdesign aus? Sind diese oftmals nicht zu groß für mobile Geräte?
Tino Urbiks Eben nicht das ist ja der Sinn beim Responsive Webdesign. Man sollte sich überlegen, ob auf dem Smartphone alle Informationen übertragen werden sollen, da diese ja meist eine langsamere Internetverbindung haben. So braucht man als Beispiel Bilder und Grafiken im Kopfbereich der Seiten oder auch großflächige Hintergrundgrafiken nicht unbedingt auf dem Smartphone und Verläufe und Schatten können auch mit CSS3 erzeugt werden. Bei einer Webseite die aus einem dreispaltigen Layout besteht kann oft eine Spalte komplett weglassen werden (meistens die rechte Marginalspalte mit Metainformationen) so das nur die wesentlichen Informationen übertragen werden.
Wie sollte man Bilder und Texte auf der Webseite Formatieren?
Tino Urbiks Schriftgrößen müssen relativ angegeben werden also in “em” und diese sind dann immer relativ zum Element das sie umschließt. Um Relative Schriftgrößen zu berechnen benötigt man lediglich eine einfache Formel:
Zielgröße / Kontextgröße = Ergebniss.
Also Beispiel die Standartschriftgröße der meisten Browser ist 16 px. Folgendes stellt sicher das diese auch verwendet wird: “body { font-size: 100%; }. Nun soll die Headline (H1) 26px groß sein. Also lautet die Rechnung:
26/16=1,625
und das CSS:
h1 { font-size: 1,625em;}
Wichtig ist hierbei dem Browser soviel Informationen wie möglich zu geben also den Kompletten errechneten Wert einzutragen und nicht einfach z.B. auf 1,6 em zu kürzen. Da kann es dann zu Pixelfehlern im Layout kommen. Und Bilder können durch Up- bzw. Downscaling angepasst werden. Dies erreicht man auch auch mittels Prozentualen Angaben “img { width: 100%; }” skaliert ein Bild in Beide Richtungen, “img { max-width: 100%; }” hingegen verkleinert das Bild nur.
Verwandte Artikel:
Kommentare
6 Kommentare zu “Responsive Webdesign: Alles kann sich vergrößern oder verkleinern und ist unbedingt flexibel”
Schreibe einen Kommentar
[...] Responsive Webdesign: Alles kann sich vergrößern oder verkleinern und ist unbedingt flex… [...]
[...] Flexibel verkleinern und vergrößern für Tables [...]
Ich bin begeistert und werde diese Tipps bei der Umsetzung meines nächsten Projekts berücksichtigen.
[...] dynamisches Webdesign größer oder kleiner [...]
Yeah! Endlich mal ein ordentlicher, ausführlicher Beitrag über “Responsive Webdesign”… Bin nämlich gerade dabei eine neue Website zu kreieren und da kommen mir die Tipps wie gerufen! Wer suchet, der findet
Klasse Beitrag! Jetzt weiß ich endlich was ich zu tun und zu machen hab. Vielen Dank.