Responsive bedeutet aus dem Englischen übersetzt reagierend. Responsives Webdesign reagiert bei der Darstellung einer Website auf die Eigenschaften der verschiedenen Endgeräte, wie z.B. Smartphone, Tablet oder PC/Laptop. Die Darstellung der Website wird so in Abhängigkeit der entsprechenden Bildschirmgrösse richtig eingestellt. Heutzutage sollte jeder Internetauftritt standardmässig responsiv sein, um den modernen Anforderungen gerecht zu werden.
Inhaltsverzeichnis
Einleitung
Bis vor ca. 15 – 20 Jahren war es nur möglich, Websites auf einem PC oder Laptop mit Internetanschluss zu betrachten. Die Darstellung der Websites waren daher nur für PC- und Laptop-Bildschirme optimiert (siehe auch mein Blog-Beitrag Warum eine neue Homepage?)
Mit dem Aufkommen von Smartphones ab ca. 2006, stieg der Zugang zum Internet der Mobilegeräte kontinuierlich an. 2021 wurden bereits 58 % aller Internetseitenaufrufe über mobile Endgeräte getätigt.
Aus diesem Grund bevorzugt Google seit 2016 mobilfreundliche Webdesigns beim Suchmaschinen-Ranking. Zudem indexiert Google seit 2021 nur noch die Inhalte von Mobile-Seiten (Mobile-First Indexing).
Ob eine Website mobilefreundlich ist, kann mit folgendem Tool von Microsoft Bing getestet werden:
Tool zum Testen der Benutzerfreundlichkeit von Webseiten auf mobilen Geräten
Mit folgendem Online-Testtool kann zudem visuell geprüft werden, wie eine Website auf einem PC, Laptop, Tablet und Smartphone dargestellt wird.
Responsives Webdesign
Grösse und Auflösung der verschiedenen Bildschirme und Displays der Endgeräte wie Laptops, Desktop-PC, Tablets, Smartphones, E-Book-Readern und Fernsehgeräten können teilweise erheblich voneinander abweichen. Responsives Webdesign berücksichtigt die entsprechenden Eigenschaften der Endgeräte.
Mit Hilfe von technischen Massnahmen (HTML5 und CSS3-Media-Queries) kann eine Website auf entsprechende Endgeräte reagieren (engl. to respond) und das Design entsprechend anpassen.
Dabei kommt die Abfrage der Medienmerkmale eines Displays aber auch der Eingabemöglichkeiten mittels Medienabfragen (Media Queries) zum Einsatz. Folgende Medienmerkmale und Eingabemöglichkeiten gibt es:
- Höhe und Breite des Browserfensters
- Auflösung des Bildschirms/Displays
- Orientierung (Hoch- oder Querformat)
- Eingabemöglichkeiten (Tastatur, Maus, Finger [Touchscreen], Sprache)
Im Zusammenhang mit den Medienabfragen müssen auch sog. Bildschirmgrösse-Haltepunkte (Breakpoints) definiert werden. Ein Breakpoint definiert die Breite des Bildschirms/Displays, bei dem sich das Layout einer Website für die korrekte Darstellung einer Bildschirmgrösse ändert. In der Regel werden Breakpoints für die Umschaltung auf Tablet- und Smartphone-Ansicht gesetzt. Hier einige Auflösungen von Endgeräten in px (Pixel):
- Computer / Laptop: 1024px und grösser
- Tablets: 768px bis 1024px
- Smartphones: 320px bis 480px
Des Weiteren werden auch sog. Viewports gesetzt, welche die Ausgabeformate (Layout) der jeweiligen mobilen Geräte bestimmen. Mit Viewport ist die Grösse eines Sichtfensters des Displays von mobilen Endgeräten gemeint.
Mit der Verwendung eines CMS (Content-Management-System), z.B. WordPress, wird die Handhabung der oben erwähnten Media Queries, Breakpoints und Viewports wesentlich vereinfacht.
Anpassung des Webdesigns an die entsprechende Bildschirmgrösse
Wie oben beschrieben, wird das Layout automatisch an die entsprechende Bildschirmgrösse oder die Display-Grösse des entsprechenden Endgeräts angepasst. Das untenstehende Bild zeigt diesen Sachverhalt schematisch auf.
Darstellung auf einem PC / Laptop
Untenstehend sind die Dartstellungen der Webseiten-Bereiche Menü (Header), Inhalt (Content) und Fusszeilen (Footer) auf einem PC / Laptop zu sehen. Eine vergrösserte Ansicht kann durch Anklicken der Bilder erreicht werden.
Menü (Header)
Die einzelnen Menüpunkte sind vertikal angeordnet.
Inhalt (Content)
Alle 4 verwendeten Inhalts-Blöcke werden vierspaltig angezeigt.
Fusszeilen-Bereich (Footer)
Die vier vorhandenen Fusszeilen-Blöcke werden vierspaltig angezeigt.
Darstellung auf einem Tablet
Untenstehend sind die Dartstellungen der Webseiten-Bereiche Menü (Header), Inhalt (Content) und Fusszeilen (Footer) auf einem Tablet zu sehen.
Menü (Header)
Das Menü wird in Form von drei Strichen (Hamburger-Menü-Icon) dargestellt. Durch Antippen des Hamburger-Menü-Icons wird das Menü ausgeklappt.
Inhalt (Content)
Alle 4 verwendeten Inhalts-Blöcke werden vierspaltig angezeigt.
Je nach Design werden die Inhalts-Blöcke manchmal auch zweispaltig dargestellt.
Fusszeilen-Bereich (Footer)
Die vier vorhandenen Fusszeilen-Blöcke, welche auf dem PC / Laptop vierspaltig angezeigt werden, werden auf einem Tablet zweispaltig untereinander dargestellt.
Darstellung auf einem Smartphone
Untenstehend sind die Dartstellungen der Webseiten-Bereiche Menü (Header), Inhalt (Content) und Fusszeilen (Footer) auf einem Smartphone zu sehen.
Menü (Header)
Das Menü wird in Form von drei Strichen (Hamburger-Menü-Icon) dargestellt.
Durch Antippen des Hamburger-Menü-Icons wird das Menü ausgeklappt.
Inhalt (Content)
Die vier Inhaltsblöcke, welche auf dem PC / Laptop vierspaltig angezeigt werden, werden auf einem Smartphone einspaltig untereinander dargestellt.
Fusszeilen-Bereich (Footer)
Die vier vorhandenen Fusszeilen-Blöcke, welche auf dem PC / Laptop vierspaltig angezeigt werden, werden auf einem Smartphone einspaltig untereinander dargestellt.
Visuelle Tests des Designs bei verschiedenen Endgeräten
Nicht immer stehen entsprechende Endgeräte zur Verfügung, um die Ansicht einer Website in den verschiedenen Auflösungen der Smartphones und Tablets visuell zu überprüfen. Auf dem PC / Laptop besteht bei den meisten Browsern die Möglichkeit, das Layout nachzubilden, wie es auf den verschiedenen Endgeräten dargestellt wird. Hier eine kleine Anleitung, wie sich dies bei den Browsern Firefox, Chrome und Edge bewerkstelligen lässt.
Firefox:
- Oben rechts auf das Symbol mit drei Strichen (Anwendungsmenü) klicken
- Menüpunkt Weitere Werkzeuge > auswählen
- Menüpunkt Bildschirmgrößen Testen auswählen
- In der Zeile oberhalb kann nun das Endgerät ausgewählt werden und auch zwischen Hoch- und Querformat gewechselt werden
Google Chrome und Edge:
- Oben rechts auf das Symbol mit den drei Punkten klicken
- Menüpunkt Weitere Tools auswählen
- Menüpunkt Entwicklertools auswählen
- Im Menü des Entwicklungstools kann mit dem Symbol Mobile/PC (links neben Menüpunkt Elemente) zwischen der Mobile- und PC-Ansicht gewechselt werden.
- In der Mobile-Ansicht kann in der Zeile oben das entsprechende Endgerät ausgewählt werden und auch zwischen Hoch- und Querformat gewechselt werden
Bemerkung: Durch Drücken der Tastenkombination STRG + Umschalt + I (Windows) oder Befehl + Option + I (MAC) wird die Entwicklungstool-Seite direkt geöffnet.
Fazit
Responsives Webdesign ist zu einem Standard geworden und ist in der heutigen Zeit sogar ein Muss für einen Internetauftritt, der alle Benutzer mit den unterschiedlichsten Endgeräten erreichen soll. Vor allem sollte eine Website auch auf mobilen Geräten wie Smartphones und Tablet entsprechend bedienerfreundlich dargestellt werden. Responsives Webdesign fördert die Bedienerfreundlichkeit (Usability) sowie eine gute Nutzungserfahrung (User Experience), welche beides wichtige Rankingfaktoren bei den Suchmaschinen wie z.B. Google sind.
In eigener Sache:
Jede meiner entwickelten Websites weist ein Responsives Webdesign auf. Mehr Informationen zur Entwicklung von Homepages siehe: Produktübersicht Entwicklung Websites / Kosten.
