Responsive Webdesign

 

Responsive Webdesign

Seit einigen Jahren sind Begriffe wie Responsive Design und Responsive Website in aller Munde. Doch was hat es damit auf sich und warum wird das Thema ausgerechnet jetzt, im Jahr 2020 wieder aktuell und wichtig? Diesem Thema wollen wir im folgenden Artikel ein wenig auf den Grund gehen.

 

Was ist Responsive Design und wie funktioniert es? 


Das Responsive Design ist ein gestalterisches und technisches Modell für Webseitenentwicklung aus den frühen 2010er Jahre, das durch die gesteigerte Beliebtheit mobiler Endgeräte wie Smartphones oder Tablets entstand. Dabei handelt es sich keineswegs um eine Norm, sondern eher um eine Art Leitbild. Grundaussage ist dabei, dass eine Webseite nicht mehr wie früher eine festgelegte Fläche einnimmt und sich stattdessen an den vorhandenen Platz anpasst.


Dies kann auf der technischen Ebene auf unterschiedliche Art und Weise realisiert werden. Dabei wird entweder direkt auf die Bildschirmgröße reagiert (Beispielsweise erhalten alle Elemente nur prozentuale Größenangaben anstatt fester Pixelwerte), oder es werden feste Stufen definiert, ab welcher Bildschirmgröße welches Styling verwendet werden soll. Die beiden Ansätze können auch gemeinsam verwendet werden, etwa feste Pixelgrenzen für die Textgröße und prozentuale Größenangaben für die einfassenden Boxen oder Bildelemente.


Heutzutage kommen dazu meist CSS (Cascading Style Sheets) zum Einsatz. Diese werden auf die unterschiedlichen Elemente der Webseite angewandt, um diese entsprechend auf die Bildschirmgröße reagieren zu lassen:


Texte


Bei Texten muss für ein gutes Responsive Design vor allem auf zwei Dinge geachtet werden: Erstens sollte das Element, das den Text enthält, nicht über den Bildschirmrand hinauslaufen. Hierzu ist eine prozentuale Größe in Bezug auf die Bildschirmbreite sinnvoll. Zweitens ist natürlich die Textgröße wichtig: Auf kleinen Bildschirmen mit meinst recht hoher Auflösung sind Schriftgrößen, wie sie auf dem Desktoprechner üblich sind meist zu klein.


Bilder


Bei Bildern wird im Responsive Design hauptsächlich die Ausrichtung und Größe der Grafik angepasst. Während auf einem Desktoprechner Bilder in Artikeln gerne rechts- oder linksbündig in den Text integriert werden, ist diese Darstellung auf mobilen Geräten weniger optimal. Oft wird der Text aufgrund erhöhter Schriftgröße silbenweise am Rand des Bildes angezeigt.


Um dem entgegenzuwirken, kann die Darstellung von Bildinhalten so angepasst werden, dass diese bei kleineren Bildschirmen die komplette Breite einnehmen und Texte, in die das Bild gegebenenfalls eingebunden wurden darüber oder darunter angezeigt werden.


Menüs

Menüstrukturen stellen einen Entwickler für Responsive Design vor besonders große Herausforderungen, da diese insbesondere bei größeren Webseiten äußerst raumfüllend gestaltet sein können.


Hier hat sich vor allem das sogenannte Sandwich Menu durchgesetzt: Die Menüstruktur wird auf einen einzelnen Button reduziert (dieser zeigt meist drei übereinanderliegende Balken, woher der Name Sandwich Menu sich ableitet). Durch einen Klick darauf öffnet sich die oberste Ebene der Menüstruktur, wobei jede Zeile einen Menüpunkt darstellt, der die komplette Breite der Webseite einnimmt. Über die einzelnen Elemente wiederum kann nun auf die darunterliegenden Ebenen zugegriffen werden.


Seitenspalten und Menüs am Bildrand


Ein verbreitetes Element in der klassischen Webentwicklung sind Menüs oder Informationsspalten am Bildschirmrand. Hier werden allerhand Informationen eingeblendet, etwa der Autor des Textes, Stichworte, Beitragskategorien oder Menüs für eine Unternavigation im aktuellen Seitenkontext.

 

Der Vorteil einer solchen Struktur liegt auf der Hand: Wichtige Informationen zum Kontext der aktuellen Seite sind sofort greifbar und eine Unternavigation ist unkompliziert zu erreichen. Allerdings nimmt dieser Aufbau gerade auf kleinen Bildschirmen wichtigen Platz auf dem Bildschirm ein, der ansonsten deutlich sinnvoller mit Inhalten gefüllt worden wäre.


Welche Vorteile bietet Responsive Design für eine Webseite?


Responsive Webseiten sind aus dem heutigen Onlinemarkt nicht mehr wegzudenken. Aber welche Vorteile bringt der Mehraufwand in der Entwicklung solcher Seiten mit sich, der das ganze Thema so beliebt macht?


Hier fallen gleich mehrere Aspekte positiv auf. Die bessere Darstellung auf mobilen Geräten wie Tablets oder Smartphones wurden ja bereits eingangs erwähnt. Außerdem hat Responsive Design Einfluss in den folgenden Bereichen:

 

Anzeige und Lesbarkeit


Wie nun bereits mehrfach erwähnt, steigert Responsive Webdesign die Lesbarkeit und Usability einer Webseite. Ein positiver Nebeneffekt davon ist, dass ihre Besucher die Qualität der Webseite automatisch höher einstufen und so eine höhere Chance besteht, beispielsweise einen Besucher zu einem Kunden zu konvertieren. Responsive Design kann also aktiv beeinflussen, ob potenzielle Kunden ein Produkt kaufen oder nicht.


Inhalte müssen nur einmal gepflegt werden


Eine früher häufig genutzte Möglichkeit, eine mobile Ansicht zu generieren war es, eine separate Webseite mit den für Mobilgeräte optimierten Inhalten bereitzuhalten. Diese wurde dann entweder automatisch geladen, wenn ein mobiler Browser die Webseite besucht, oder aber der Nutzer erhielt eine entsprechende Abfrage.


Beide Optionen lösen das Problem nur teilweise. Zwar kann durch gewisse Automatismen hier der Anschein einer Responsiven Webseite erweckt werden, im Hintergrund ist aber oft eine doppelte Datenhaltung notwendig. Um dem entgegenzuwirken bietet sich eine Internetseite an, die von sich aus auf alle Bildschirmgrößen reagieren kann. So wird doppelte Datenhaltung vermieden und der Pflegeaufwand minimiert.


Gesteigerte Auffindbarkeit bei Suchmaschinen


Google, Bing und viele andere Suchmaschinen arbeiten mit fortgeschrittenen Algorithmen, um die Fähigkeit einer Webseite zur mobilen Darstellung zu erkennen. Dieser Wert wirkt sich ebenfalls positiv auf das Ranking bei der Suchmaschine aus. In Zukunft wird die Relevanz dieses Faktors vermutlich sogar noch steigen.


Ein Ausblick in die nahe Zukunft


Ein Trend, der in den letzten Jahren beobachtet werden konnte ist die immer weiter zunehmende Beliebtheit von mobilen Endgeräten. Immer mehr Smartphones und Tablets werden verkauft und lösen in vielen Haushalten den PC oder Laptop gänzlich ab. Das nahmen viele Suchmaschinenbetreiber bereits jetzt zum Anlass, die mobile Verfügbarkeit und Lesbarkeit von Webseiten in die Bewertungskriterien des Rankings mit aufzunehmen.


In Zukunft wird sich diese Entwicklung weiter fortsetzen. Google hat beispielsweise bereits angekündigt, ab Herbst 2020 mit ihrer Mobile First-Initiative die Priorität noch stärker auf den mobilen Markt zu richten. Spätestens dann wird es für Webseiten schwierig, wenn nicht gar unmöglich, über organisches Suchmaschinenmarketing aufgefunden zu werden.


Fazit


Ein Großteil der Endanwender nutzt bereits heute fast ausschließlich sein Smartphone oder Tablet für den Internetzugriff. Suchmaschinen priorisieren immer stärker auf mobilen Content, während nicht mobile-fähige Webseiten nach und nach aus den Rankings der Branchenriesen wie Google oder Bing verschwinden.


Das Internet ist ein Ort des Wandels, und das ist gut so. Wer in Zukunft auf diesem Markt bestehen will, der wird um gute, mobile Inhalte nicht mehr herumkommen. Responsive Design hat sich in den letzten zehn Jahren als einer der effektivsten und effizientesten Wege erwiesen, dieses Ziel zu erreichen. Daher ist es jedem Webseitenbetreiber angeraten, seine Plattform fit für die Zukunft zu machen. Im Zweifel kann eine professionelle Responsive Webdesign Agentur helfen.

Keine Baukasten-Website. Sondern eine professionelle 

Online-Lösung. Genießen Sie Vorteile und

gewinnen Sie neue Kunden und Mitarbeiter durch:

Beste Technik


Ein Top modernes Kundeportal für einen excellenten  Service und Support.

Hochwertige Optik


Ansprechendes, mobile 

programmiertes Webdesign.

Breite Vernetzung


Lösungen für Landingpages,

Facebook, Linkedin & Co.

Kostenlose Beratung

Wir sind für Sie da

Lernen Sie uns persönlich kennen 

und lassen Sie sich unverbindlich beraten.

Dazu einfach Telefonnummer eintragen und Wunschtermin auswählen. 

Wir melden uns dann zum ausgewählten Termin bei Ihnen.