Die unglaubliche Bandbreite an Geräten, mit denen heute der Zugriff auf das Internet möglich ist, sorgt dafür, dass das responsive Webdesign so populär ist. Mit diesem kurzen Video möchte ich eine kurze Einführung in das »sich anpassende Webdesign« zur Verfügung stellen.
Sich anpassendes Webdesign (Transkript)
Als der Designer und Programmierer Ethan Marcotte im Mai 2010 seinen Artikel »Responsive Web Design« auf der Seite »A List Apart« veröffentlichte, änderte sich viel für Webdesigner und Programmierer.
Diesen Artikel habe ich an dem Tag, als er veröffentlich wurde, tatsächlich ausgedruckt und intensiv studiert. Alle Zutaten, die man für das responsive – sich anpassende – Webdesign benötigte, gab es zu der Zeit bereits: Flexible Raster, Fluide Bilder und Mediaqueries. Aber Ethan war der Erste, der diese Zutaten vermischt hat und dem fertigen Gericht einen Namen gab, und zwar: Responsive Webdesign.
Diese Demo-Webseite zum Artikel war es, die mich und viele meiner Mitstreiter schnell davon überzeugt hat, dass Responsive Webdesign das ganz große Ding sein wird und auch das Rezept ist, um das Webdesign zu revolutionieren — vor allem, weil die Umsetzung so einfach ist.
Vor dem Responsive Webdesign gestaltete man Webseiten noch meist so, dass die Breite der Seite so gerade auf den damals kleinsten anzunehmenden Bildschirm passte. Da Smartphones und Tablets erst so langsam populär wurden, war der kleinste anzunehmende Bildschirm noch, der eines typisch großen Laptops. Das 960px Raster war damals die Wahl der meisten Designer und Entwickler. Zu dieser Zeit nutzte man für die Betrachtung auf Smartphones, zumindest für Kunden, die es sich leisten wollten, eine eigene, zusätzliche Version der Webseite. Vielleicht erinnert sich noch jemand an die Webadressen, die mit »m.« anfingen.
Da die Bildschirmgröße des Endgerätes, auf dem Webseiten angeschaut werden, für Designer und Entwickler immer unvorhersehbarer wurden, kam Ethan Marcottes Technik genau zum passenden Zeitpunkt. 2010 kam übrigens auch das erste iPad auf den Markt.
Um zu schauen, ob eine Webseite responsiv ist, benötigt man nicht unbedingt ein Smartphone. Jeder moderne Browser besitzt heute die passenden Entwicklertools, die den Programmierern dabei helfen, Webseiten anzupassen. Mit diesen kann man einfach schauen, wie eine Webseite auf einem bestimmten Smartphone oder Tablet aussehen würde.
Ich demonstriere das Verhalten einmal mit meiner aktuellen Webseite und den Entwicklertools im Chrome Browser. Man sieht, wie sich das Layout der Seite entsprechend der Größe des gewählten Bildschirms bzw. Browserfensters ändert. Elemente ändern ihre Position, die Navigation passt sich an und Bilder bleiben immer komplett sichtbar. Die Webseite lässt sich also auf den meisten Geräten optimal nutzen.
Bei nicht responsiven Webseiten würden Scrollbalken erscheinen und man müsste sich durch Wischerei und Doppelgeklicke die Bereiche der Webseite suchen, die einen interessieren. Jeder, der früh ein Smartphone hatte, kennt das noch.
Ich möchte in diesem kurzen Video gar nicht allzu sehr auf die Technik eingehen, die hinter dem resposiven Webdesign steht, aber doch kurz und ganz grob zeigen, wie es umgesetzt wird. Statt fester Maßangaben in Pixel nutzt man bei der Programmierung nun relative Maßangaben. Angenommen wir haben die vier Elemente Kopfbereich, Seitenbereich, Hauptbereich und Fußbereich einer Webseite in HTML-Code programmiert, dann sagen wir in Form von CSS-Angaben: Hey, ihr Vier nehmt jetzt bitte jeweils und grundsätzlich alle erst einmal 100% der Breite des Viewports ein. Die Elemente werden automatisch übereinander gestapelt. Viewport nennt sich übrigens immer der komplette Bereich, auf dem die Seite angezeigt wird. Dann geht man weiter und gibt an, dass ab einer Viewport-Breite von sagen wir 800 Pixeln, der Kopf- und Fußbereich weiterhin 100% der Breite einnehmen sollen, aber der Seitenbereich soll nur noch 33% und der Hauptbereich 66% einnehmen und zwar nebeneinander. Das Ganze ähnelt nun mehr einer Seite, wie wir sie auf dem Schreibtisch-PC erwarten würden. Die Viewportgröße bestimmt durch sogenannte Mediaqueries, wie sich die Elemente der Seite verhalten. So lässt sich z.B auch die Schriftgröße anpassen, die auf großen Bildschirmen, wie z.B. Fernsehern gern größer sein darf, da man nicht so nah davor sitzt.
Das ist eigentlich schon das Grundprinzip, das hinter dem responsiven Design steckt. Schaut man dann aber doch etwas genauer, erkennt man, dass es Elemente auf einer Webseite gibt, die das Prinzip etwas komplizierter machen. Nehmen wir z.B. den Navigationsbereich einer Webseite. Je nach Größe der Präsenz können sehr viele Menüpunkte unterzubringen sein. Da die Navigation auf den meisten Webseiten recht weit oben zu finden sein sollte, würde diese, wenn man die Menüpunkte z.B. auf dem Smartphone einfach übereinander stapeln würde, den eigentlichen Inhalt aus den Sichtbereich drücken. So muss man sich andere Design-Schemata einfallen lassen, die Navigation immer noch leicht nutzbar belassen, aber trotzdem nicht zu viel Platz in Anspruch nehmen. Platz ist Mangelware auf Smartphone-Displays.
Ich würde mich sehr freuen, wenn ich auch für Sie ein responsives Webdesign Projekt realisieren dürfte. Kontaktieren Sie mich gern unter 05242 9089150 oder schreiben Sie mir eine Nachricht.