Was ist Responsive Webdesign?
Fast alle sind heutzutage mit dem Smartphone im Internet unterwegs. Gleichzeitig bevorzugen viele jedoch den Desktop-Browser, um Bestellungen zu tätigen, etc. Da es dort etwas bequemer ist. All das muss man im Webdesign berücksichtigen.
Im Beitrag mehr dazu wie Responsive für Smartphones, andere mobile Endgeräte und Desktop Browser funktioniert.
Einführung
Am Anfang war das Internet.
Klassischerweise nutze man einen Desktop Rechner und einen Browser wie den Internet Explorer, um das Internet zu erreichen.
Damals war die Arbeit für jemanden der ein Webdesign umsetzt, relativ einfach. Man musste nur für einen sogenannten “Viewport” ein Design erstellen. Der Viewport ist vereinfacht gesagt, dass was der Nutzer im Browser sieht – das Sichtfenster. Es gab auch nicht viele unterschiedliche Monitorgrössen. Der Webdesigner musste also im Idealfall nur ein Design erstellen, um alle Monitorgrössen, Webbrowser und Desktopsysteme abzudecken.
Mit dem Erscheinen des iPhones im Jahr 2007 sollte sich jedoch alles ändern.
Seit dem Release dieser Innovation, sind viele neue mobile Endgeräte erschienen. Auch die Medium Versionen namens Tablets und Phablets wurden kreiert.
Die Entstehung von Android hat zu noch mehr Diversität geführt. Anders als das iPhone und iOS, wird Android von unterschiedlichsten Firmen genutzt, um deren mobile Endgeräte zu bespielen.
Zudem haben viele auch ihre eigenen Browsersysteme herausgebracht. Neben dem Internet Explorer gibt es jetzt starke Browser wie Google Chrome, Mozilla Firefox und einige mehr.
Eine unendlich grosse Zahl an Bildschirmgrössen, Betriebssystemen und Browsern
Die Zahl der Bildschirmgrössen ist fast unendlich. Da fast jeder seine eigenen Dimensionen für seine Smartphones und Tablets hat. Keines gleicht dem anderen zu 100 Prozent.
Zudem hat nicht jeder Internetnutzer die neueste Version des Browsers installiert. Manche haben alte Versionen.
All das hat den Bereich Webdesign verändert. Und eine neue Kategorie in der Webentwicklung war geboren, das sogenannte Responsive Webdesign.
Wie kann man so eine Internetseite erstellen?
Der erste Schritt im Design Prozess ist es, mehrere Versionen der Website in Photoshop oder Sketch zu erstellen (beide Werkzeuge werden von Designern genutzt, um die Bildschirme darzustellen). In den meisten Fällen sind es drei Versionen. Eine für Smartphones (kleine Bildschirme), Tablets (mittlere Screens) und Monitore (grosses Design). Oftmals kommt noch eine vierte Variante, Laptops, dazu.
Es werden jedoch nicht drei unterschiedliche Versionen der Website durch den Webentwickler erstellt. Sondern dieser geht wie folgt vor:
Zitat von Siteways, Richard Albrecht:
“Idealerweise hat man den gleichen Inhalt und Aufbau (Content und HTML(5)) und unterscheidet die Darstellung nur anhand unterschiedlicher Formatierungsbefehle (CSS(3)).
Dazu kann man mittels CSS3 Media Queries (was so viel heißt wie „Abfragen der Medien welche die Website anzeigen“) Formatierungsbefehle auf bestimmten Bildschirmgrößen einschränken.”
Mit unterschiedlichen Programmierbefehlen, kann man die Website zudem dazu anweisen, einige Bereiche im kleinsten Responsive Webdesign nicht anzuzeigen. Man könnte zum Beispiel einen grossen Slider, welcher im Desktop-Browser gut aussieht, jedoch im Smartphone nicht zur Geltung kommt, ausblenden.
Im Tablet würden einige Bilder zudem untereinander, anstatt nebeneinander angezeigt.
Responsive vereinfacht damit den kompletten Webdesign Prozess. Anstatt alles dreifach zu entwickeln, wird es nur einmal programmiert, jedoch mit einigen Befehlen in CSS3, um die Darstellung unterschiedlich anzuzeigen.
Besonderheiten dieses Ansatzes
Das Responsive Design gilt als moderne Methode, um Webseiten auf vielen Webvarianten anzeigen zu können. Ohne alles doppelt und dreifach zu entwickeln.
Dieser Ansatz hat jedoch auch seine Einschränkungen. Es ist zum Beispiel nicht zu 100 Prozent für mobile Endgeräte optimiert. Denn in Smartphones oder Tablets, gibt es Funktionalitäten, wie Touch oder die vertikale und horizontale Ansicht (wenn man den Bildschirm dreht, zum Beispiel). All das kann ein solches Webdesign nicht optimal abdecken.
Nicht ohne Grund stellen grosse Internetportale fast immer eine Android und eine iOS App zur Verfügung, wo diese Funktionalitäten optimal umgesetzt werden.
Eine mobile, sogenannte Native, App lohnt sich jedoch nur bei sehr grossen Projekten. Bereits bei Webseiten die jeweils “nur” für die Aussendarstellung einer grossen Marke genutzt werden, ist der Aufwand für mehrere Mobile Apps zu hoch. Denn um eine Native App zum Beispiel für Android zu entwickeln, benötigt es den Gleichen oder mehr Aufwand, als die Website-Variante zu erstellen.
Zudem wird auch die Bereitschaft der Nutzer sehr gering sein, die Mobile App einer Marke herunterzuladen.
Der Responsive Ansatz ist hier um ein vielfaches besser. Nur muss man davon ausgehen, dass die Mobilen Ansichten nicht zu 100 Prozent optimal sein werden, wie das bei Apps der Fall ist.
Mobile App versus Webdesign
Hier noch einige Punkte die man beachten sollte, wenn man eine App mit einem Webdesign, welches man über einen Browser aufruft, vergleicht.
- App greift auf CPU/ Rechner des Smartphones zu: Damit ist es um einiges performanter als eine Website über den Internetbrowser, welches dadurch keinen direkten Zugang zur CPU hat.
- Native Apps sind auf Touch optimiert: Auch die Bedienung durch berühren ist in Nativen Apps direkt mit dem Betriebssystem wie iOS oder Android abgestimmt. HTML5 (welches man im Webdesign nutzt) ist zwar schon sehr modern, kann aber nicht alle Funktionalitäten eines Smartphone Gerätes abrufen.
Adaptive?
Neben dem Begriff Responsive hat sich auch Adaptive etabliert.
Bei Responsive ist alles sehr flüssig und es gibt keinen starken “Brüche” von einer Variante zur nächsten (zum Beispiel von Desktop zu Tablets).
Bei dem Adaptive Webdesign ist das anders. Hier werden bis zu sechs Versionen der Website designt. Die Programmierung erkennt, welche Grösse das Endgerät hat und spielt die passendste Version aus. Die üblichsten Breiten in Pixel sind dabei: 320, 480, 760, 960, 1200, und 1600 Pixel.
Abbildung: Laut Designers Insights sind die besten Grössen: Desktop – 1200 Pixel (Breite), Tablet – 768 Pixel (Breite), Smartphone – 320 Pixel (Breite). Die Abmessungen, wenn man das Tablet oder das Smartphone horizontal hält, findet man in der Abbildung.
Der Aufwand ist hier wiederum höher, da auch hier separate Designs für jedes dieser Grössen erstellt werden.
Der Vorteil ist hier, dass die Darstellung besser sein wird, als bei dem zuerst genannten Ansatz.
Jedoch, welcher Entscheider in Webprojekten möchte seinen Vorgesetzten um die Freigabe von 6 oder mehr Designs fragen?
Die Entscheidung fällt dann am Ende doch auf das einfachere Responsive Webdesign.
Fazit
Der Responsive Ansatz wird in den meisten Webseiten-Projekten, ob klein oder mittelgross, verwendet. Er gibt den optimalsten Output für die vielen Browser, Bildschirme und Systeme.
Denn mit der Zeit wird es nur mehr Bildschirmgrössen, Betriebssystem und ähnliche geben, und nicht weniger. Damit ist man auch für die Zukunft gerüstet.
Was sind Ihre Erfahrungen?
Interessante Links:
Responsive auf Wikipedia beschrieben
Auf selfhtml eine Tutorial zu dieser Art des Webdesign
Bilder: Canva, designersinsights.com
Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.
Schreibe einen Kommentar