6 minutes reading time (1288 words)

Was ist Responsive Webdesign und wie funktioniert es?

responsive-webdesign-funktion

Das Responsive Webdesign mittlerweile unverzichtbar ist, weiss man. Aber wie das funktioniert und was man bei der Planung von Websites beachten sollte, wissen die wenigsten.

 

Unverzichtbar …

Eine Website, die auf mobilen Endgeräten nicht vernünftig funktioniert, ist aus verschiedensten Gründen ein großer Fehler. Überall hört man von diesem „Responsive Webdesign“ und jeder sagt einem, dass man darauf nicht verzichten darf. Warum das so ist, habe ich im Blog Eintrag „6 gute Gründe für Responsive Webdesign“ schon erläutert.
In diesem Beitrag möchte ich darauf nicht näher eingehen - vielmehr geht es mir um die Technik dahinter. Ich möchte zeigen, wie Responsive Webdesign funktioniert und was dabei wirklich passiert. Hat man das mal verstanden, fällt es einem viel einfacher Websites zu planen.

 

Prozent, Break-Points und Media Queries

Die drei Zauberwörter im mobilen Webdesign sind definitiv folgende:

  • Prozent
  • Break-Points
  • Media Queries

Diese möchte ich hier kurz erklären.

 

Prozent

Plant und erstellt man eine Website passiert dies meist vorher in einem Grafikprogramm wie Photoshop, Gimp, InDesign, etc. Dabei erstellt man die Website für eine gewisse Seitengröße und somit auf eine gewisse Breite. Die Aufteilung der Elemente und Bereiche wird hier über Pixel gesteuert - jedes Bild, jeder Bereich hat hier eine gewisse Pixel-Breite.
Am Monitor können diese Pixelangaben aber nur bedingt verwendet werden.
Nehmen wir ein Beispiel:
Es wird ein zweispaltiger Bereich geplant - die linke sowie die rechte Spalte sollen jeweils genau 600 Pixel breit sein. Damit ergibt sich dann eine volle Breite der Website von 1200 Pixel. Möchte man aber, dass die Website responsive ist, können die zwei Spalten nicht mit fixen Pixel-Breiten versehen werden.
Hier kommt der Prozent-Wert ins Spiel. Das heißt bei der Umsetzung der Website werden die zwei Bereiche also mit einer Breite von jeweils 50% versehen. Dadurch teilen die sich schön auf den zur Verfügung stehenden Platz auf und können auch immer auf die Auflösung reagieren. Besitzt der Monitor nur eine Auflösungs-Breite von 800 Pixel, dann wären die beiden Spalten jeweils 400 Pixel Breit (50% des verfügbaren Platzes eben). Bei größeren Auflösungen dann wieder mehr.

prozent responsive webdesign

Das heißt als Webentwickler muss man entscheiden, welche Bereiche der Website man mit fixen Pixelbreiten versehen kann (da diese sich nie anpassen müssen) und welche man mit Prozent Werten versieht. Die Bereiche mit Prozentwerten passen sich dann immer an.

 

Break-Points

Die Formatierungen und Breiten-Definitionen von Bereichen passiert in der Webentwicklung normalerweise im CSS-Code. Für die mobile Optimierung stehen einem hier sogenannte Break Points zur Verfügung. Wie der englische Name schon sagt, geht es darum, dass an gewissen Punkten ein „Bruch“ stattfindet. Damit ist ganz einfach gemeint, dass man in CSS die Möglichkeit hat, Code Bereiche zu definieren, die erst bei einer gewissen Auflösung greifen.

Also zum Beispiel:

  • Bei einer maximal Breite von … Pixel soll dies oder jenes passieren
  • Bei einer mindest Breite von … Pixel soll dies oder jenes passieren
  • Bei einer maximal Breite und einer mindest Breite von … Pixel soll dies oder jenes passieren
  • uvm.

Das heißt, ich kann als Webentwickler eigenen Code für den Fall hinterlegen, dass die Auflösung des Endgerätes zB. kleiner als 1000 Pixel ist. Somit können Elemente ab dieser Auflösung anders platziert werden.
Nehmen wir das Beispiel von oben:
Diese zwei Spalten gehen bis zu einer gewissen Auflösung noch gut. Aber am Smartphone wären zwei Textspalten nebeneinander nicht mehr sinnvoll. Somit kann man mit einem Break-Point die maximal Auflösung definieren, ab der die zwei Spalten untereinander stehen sollen und dann dessen Breite von 50% auf 100% Breite stellen. Somit stehen die nicht mehr nebeneinander sondern untereinander. So lässt sich für jede Auflösung, die optimale Darstellung einrichten. Es wäre somit eigentlich möglich Websites, Bildausschnitte, etc. auf jedem x-beliebigen Endgerät optimal darzustellen. Dies würde aber einen RIESEN Aufwand bedeuten, da es unzählige mobile Endgeräte mit unzähligen verschiedenen Auflösungen gibt. Diesen Aufwand zahlt kein Kunde.

Deshalb hat es sich eingebürgert Break-Points für etwa 4 Auflösungen zu definieren:

  • 1200px (kleinere Displays)
  • 991px (Tablets)
  • 768px (Tablets und größere Smartphones)
  • 578px (Smartphones)

Damit deckt man die meisten Endgeräte ab. Alles dazwischen wird dann flexibel reagieren.
Genau deswegen unterscheidet sich Webdesign so stark vom klassischen Printbereich. Dort lässt sich jedes Wort und jeder Bildausschnitt ganz genau platzieren. Dies ist im Responsive Webdesign nicht mehr möglich - hier benötigt es einfach mehr Flexibilität. Dies muss man von vornherein einplanen.
Auf was man im Responsive Webdesign (auch schon in der Planung) achten sollte, habe ich in diesem Blog-Eintrag beschrieben: „Darauf sollte man im Responsive Webdesign achten!

 

Media Queries

Die oben beschriebenen Break Points sind eigentlich Media Queries in CSS. Media Queries definieren also Abfragen - welche wiederrum abfragen, ob denn eine gewisse Voraussetzung zutrifft. Diese Voraussetzung ist immer auf das Endgerät (Media) bezogen. So gibt es zum Beispiel eigene Media Queries für Hochformat (Portrait), Querformat (Landscape), Druck (Print), etc.
Hier ein paar Beispiele von Media Queries:

  • @media only screen (trifft nur auf Geräten mit Display zu - nicht für Druck)
  • @media (orientation: landscape) (trifft nur auf Endgeräte im Landscape Modus zu - das wäre dann, wenn man das Smartphone oder Tabelt quer hält)
  • @media (orientation: portrait) (trifft nur auf Endgeräte im Portrait Modus zu - das wäre dann, wenn man das Smartphone oder Tablet im Hochformat hält)
  • @media print (trifft nur zu, wenn es um den Ausdruck geht)
  • uvm.

Eine Liste der möglichen Media Queries gibt es hier: CSS/Media Queries 

Diese Media Queries lassen sich in Kombination mit den Break Points optimal nutzen, um Websites für mobile Endgeräte zu optimieren. So kann zum Beispiel definiert werden, dass die zwei Spalten die am Desktop noch nebeneinander stehen, auch auf Tablets im Querformat noch nebeneinander stehen soll. Aber auf Tablets im Hochformat dann schon untereinander stehen müssen.

 

Die flexible mobile Website - richtig Planen

websiteplanung 

Mithilfe dieser drei Punkte arbeiten Webentwickler um Websites mobil-fähig zu machen. Hat man dieses System verstanden, dann fällt auch die Planung leichter. Plant man also zum Beispiel das Layout einer Website, dann sollte man folgende Punkte im Hinterkopf behalten:

  • Die Elemente, Texte und Bilder werden sich ab gewissen Auflösungen (Break Points) verändern müssen, damit diese noch optimal darstellbar sind. Am besten überlegt man sich auch gleich, wie diese sich verändern könnten und bespricht dies mit dem Webentwickler. Dieser kann einem dann auch sagen, ob das so möglich ist.
  • Texte müssen flexibel eingeplant sein. Eine genaue Textausrichtung mit genau definierten Umbrüchen ist kaum bis gar nicht realisierbar. Hier unterscheidet sich das Web stark vom Print-Bereich. Je nach Browser und Auflösung werden Texte anders dargestellt und anders umgebrochen. Hier muss man also mehr Flexibilität mitbringen.
  • Bilder müssen auch kleiner funktionieren. Damit meine ich, dass Bilder am Smartphone nicht mehr so groß dargestellt werden können, wie am Desktop. Hat das Bild dann in der kleinen Auflösung immer noch die Wirkung die ich erzielen wollte. Oder falls Texte darauf zu lesen waren - kann man die überhaupt noch lesen im Mobilen? Falls nicht, dann muss man hier einplanen, dass man das Bild ab einer gewissen Auflösung austauscht.
  • Bilder im Hintergrund und Bilder die über die ganze Bildschirmbreite gehen müssen sehr flexibel sein. Heutzutage ist es modern und Gang und Gebe, dass Bilder sich über die ganze Bildschirmbreite ziehen. Ist auch verständlich, da dies einen sehr guten Eindruck macht. 
Da Bildschirmgrößen aber sehr unterschiedlich sind und von sehr groß (zB. 27“ Monitore) bis ganz klein (Smartphone) gehen können, wird auch der Bildausschnitt den man sieht immer ein anderer sein. Das bedeutet dann in der Planung, dass man hier Bilder nehmen muss, die auch ohne weiters oben, unten sowie links und rechts beschnitten werden dürfen. 

  • Und noch viele Punkte mehr. Der professionelle Webentwickler deines Vertrauens, kann dir hier sicher noch ein paar Punkte nennen.

Weitere Interessante Artikel zum Thema Responsive Webdesign:
Darauf sollte man im Responsive Webdesign achten
Warum auch der kleine Privatvermieter eine Website fürs Smartphone benötigt
Youtube Videos responsive einbinden
Google maps Karte responsive einbinden

 


Melde dich jetzt für unseren Newsletter an!

 

Oder folge uns auf Facebook:
Lackner Media auf Facebook
Jetzt Facebook-Fan werden

1
Warum ein Newsletter responsive sein muss und wie ...
Bloggen - mehr als nur Geschichten erzählen
 

Kommentare

Derzeit gibt es keine Kommentare. Schreibe den ersten Kommentar!
Bereits registriert? Hier einloggen
Gäste
Dienstag, 23. Oktober 2018

Kostenloser Kurs:

Website Traffic Optimierung E-Mail Kurs

In 5 Schritten zu mehr Website Traffic
Die 5 effektivsten Wege zur Optimierung der eigenen Website-Performance!
Diese 5 Profi-Tipps verhelfen dir zur Optimierung deines Website-Traffics!

Jetzt E-Mail Adresse eintragen und starten: