Webseiten ohne Responsive Design gelten nicht mehr als zeitgemäß und bedürfen einer Überarbeitung. Nicht nur in der nachhaltigen Webentwicklung ist es heutzutage essenziell, dass eine Webseite sowohl auf dem Desktop als auch auf mobilen Endgeräten einwandfrei funktioniert und benutzerfreundlich ist.
Responsive Design
Responsive Design ist entscheidend für die Energieeffizienz einer Webseite. Der Design-Prozess sollte mit einem Mobile-First-Ansatz beginnen, bei dem zuerst für den kleinsten Bildschirm gestaltet wird. Dieses Design beinhaltet nur die notwendigsten Funktionen und Inhalte. Funktioniert die Webseite auf einem mobilen Gerät einwandfrei, verbessert dies auch die Darstellung auf größeren Geräten. Wichtiger noch ist, dass der Mobile-First-Ansatz gleichzeitig ein Content-First-Ansatz ist, der zu einem benutzerzentrierten Design führt. Inhalte bilden das Kernstück einer Webseite und sind der Hauptgrund für den Besuch der Nutzer.
Responsive Design trägt zur Schonung des Akku von Geräten bei, besonders bei Mobilgeräten, und fördert ein umweltfreundlicheres Surferlebnis.
Folgende Aspekte sind beim Responsive Design wichtig:
- Bilder müssen responsiv sein und mit festgelegter Höhe und Breite definiert werden.
- Stellen Sie verschiedene Bildgrößen für unterschiedliche Bildschirmauflösungen bereit, nutzen Sie dafür <picture><source srcset=““> im HTML-Code, anstatt große Desktop-Bilder auf Smartphones zu laden und sie per CSS auf unsichtbar zu stellen.
- Das Design muss hinsichtlich der Benutzerfreundlichkeit an verschiedene Bildschirmgrößen angepasst werden.
- Komplexe Layouts, die übermäßiges Reflow (Neuberechnung des Layouts) und Re-Rendering durch den Browser benötigen, sollten vermieden werden.
Eine weitere Alternative könnte sein, unterschiedliche Webseiten für Desktop und Mobile (Smartphone) bereitzustellen, anstatt nur die Darstellung durch CSS zu optimieren. Das bedeutet, dass analysiert wird, welche Inhalte für den Mobile-Nutzer relevant sind und welche nicht. Entsprechend wird unterschiedlicher Inhalt ausgeliefert, was den Vorteil hat, dass nur notwendiger Inhalt geladen wird und der Stromverbrauch reduziert wird.
Fazit: Responsive Design ist nicht nur für eine nachhaltige Webseite wichtig. Responsive Design kann aber bei der Energieeffizienz einen großen Beitrag leisten und sollte sowohl in der UX als auch im UI berücksichtig werden.