Responsive Webdesign ist eine Darstellungstechnik, die es ermöglicht mit Hilfe von Webtechnologien wie HTML5 und CSS3 das einheitliche Anzeigen von Inhalten einer Website auf unterschiedlichen Endgeräten zu gewährleisten. Hierbei wird das Layout bzw. das Gestaltungsraster einer Website so flexibel gestaltet, dass es auf dem PC, Laptop, Tablet und Smartphone eine für das jeweilige Endgerät optimierte Darstellung und bestmögliche Benutzerfreundlichkeit bietet.

 

In diesem Artikel erfahren Sie

  1. Wie und wodurch es zur Entwicklung des Responsive Webdesign kam
  2. Wie Responsive Webdesign funktioniert und was es für Möglichkeiten bietet
  3. Warum Responsive Webdesign auf einem modernen Internetauftritt dingend angewendet werden sollte
  4. Wie viele Besucher Ihres Internetauftritts die Webseiten mit einem Endgerät betrachten, dass auf ein gutes Responsive Webdesign angewiesen ist

Der Weg zum Responsive Webdesign

Die iPhones und iPads von Apple sorgten für den Wandel

 

Früher war Webdesign noch eine klare Angelegenheit – es gab PC mit Monitoren, die irgend etwas um die 1024 x 768 Pixel darstellten und Laptops, die zumeist etwas kleinere Monitore hatten. Internetinhalte wurden dementsprechend aufgebaut, dass sie auf den meisten Monitoren bestmöglich dargestellt wurden. War der Monitor des Endgerätes kleiner, als diese optimale Darstellung, erschienen Scrollbalken am Rand des Browsers. In den meisten Fällen nach unten und oben, im ungünstigsten Fall auch nach rechts und links.

 

Später kamen im PC-Bereich immer größere Monitore zum Einsatz sowie neue Formate wie das 16:9 Seitenverhältnis, während im Laptop-Bereich immer kleinere Produkte wie die sogenannten Netbooks Einzug hielten. Schließlich gesellten sich noch die Smartphones und Tablets hinzu, die die Webseitenentwickler vor völlig neue Herausforderungen stellten. Nun gab es nicht nur eine riesige Bandbreite an unterschiedlichen Auflösungen und Formaten, sondern obendrein noch zwei neue Aspekte:

  1. Smartphones und Tablets lassen sich im Hochformat wie im Querformat einsetzen
  2. Die Geräte verwenden sogenannte Touchscreens, die sich durch das typische Tippen und Wischen sehr von der Anwendungstechnik  des Klicken und Srcollens eines Mauszeigers unterscheiden.

 

Spätestens jetzt musste eine neue Lösung her. Während es früher noch als besonderer Service galt, wenn ein Unternehmen seinen Internetauftritt neben der normalen PC-Darstellung außerdem in einer Mobile-Variante präsentierte, war nun das Endgerät und dessen Darstellung nicht mehr kalkulierbar.

Young woman working with a mobile phone above the contract

Ungefähr ab Ende 2013 war der Einsatz der neuen Technik Responsive Webdesign (RWD) im Internet nicht mehr zu übersehen. Natürlich hat auch 2015 noch nicht jedes Unternehmen seinen Internetauftritt auf ein Responsive Webdesign umgestellt, denn RWD bedeutet nicht, ein paar Änderungen vorzunehmen – RWD bedeutet technisch gesehen einen kompletten Neuaufbau der Internetpräsenz. Eines kann jedoch mit Sicherheit behauptet werden: Wer heute einen neuen Internetauftritt erstellt oder beauftragt und nicht auf diese Technik setzt, begeht eine große Fehlentscheidung.

[nextpage title=”Warum Responsive Webdesign heute so wichtig ist”]

 

Warum ist Responsive Webdesign heute so wichtig?

Die Bandbreite der möglichen Endgeräte und deren Bildschirmauflösungen vom Smartphone über das Tablet zum Laptop bis zum riesigen 30-Zoll-Bildschirm ist heutzutage so groß, dass eine nicht RWD-fähige Internetseite entweder auf einem Großteil der Bildschirme eher ungünstig dargestellt wird, oder im schlimmsten Fall sich nicht mehr vernünftig bedienen lässt. Auf einem sehr kleinen Bildschirm wird wird man entweder nur einen Ausschnitt sehen und mit der Maus hin- und herscrollen müssen, so dass man die Gesamtheit des Internetauftritts gar nicht mehr erfassen kann, oder die Seite wird auf einem Bildschirm so stark verkleinert, dass man die Texte nicht mehr lesen, geschweige denn das Menü und andere Bedienfelder bedienen kann.

 

Bei einem Responsive Webdesign erkennt Ihr Internetauftritts auf was für einem System und was für einer Bildschirmgröße es aktuell betrachtet wird und passt die Gestaltung an die Auflösung des Bildschirms an. Dabei werden die Objekte einer Website nicht nur neu angeordnet, sondern sogar völlig anders dargestellt (bspw. das Navigationsmenü) oder es werden Elemente für bestimmte Bildschirmauflösungen komplett weggelassen oder hinzugefügt.

 

PC-Monitor und Touchscreen

Wichtig ist, zu verstehen, dass die Bedienung auf einem Smartphone oder Tablet auf Grund des sogenannten Touchscreens anders funktioniert als auf einem PC, der mit einem Mouse-Curser (Mauszeiger) bedient wird. Denn während man es bei der Bedienung über den Mauszeiger gewohnt ist, eine optische Rückmeldung zu erhalten, sobald man mit dem Mauszeiger über ein interaktives Objekt, wie bespw. ein Menü oder einen Button fährt, so gibt es diese Möglichkeit beim Touchscreen nicht. Eine moderne Website muss also so aufgebaut sein, dass sie auch ohne diese sogenannten „Mouseover“ funktioniert und bedienbar ist.

 

Des Weiteren gibt es zwischen PC und Touchscreen den großen Unterschied, dass beim PC sich zumeist ein kleiner und filigraner Mauszeiger über einen großen Bildschirm bewegt, während der eher kleine Touchscreen mit einem vergleichsweise „klobigen“ Zeigefinger bedient werden muss.

[nextpage title=”Marktanteil der Touchscreen-Geräte”]

 

Wie groß ist der Anteil derer, die meine Website mit einem Touchscreen besuchen?

Eins gleich vorweg: von „verschwindend klein“ oder „vernachlässigbar“ kann schon lange keine Rede mehr sein! Für immer mehr Menschen ist es zunehmend selbstverständlich, mit dem Smartphone oder Tablet ins Internet zu gehen. Und somit erwartet der Anwender auch immer mehr, dass eine Website auf seinem Device (Endgerät) reibungslos funktioniert.

 

Auch wenn das Surfverhalten auf Smartphones sich im Augenblick noch auf einen eingeschränkten Kreis aus Webseiten beschränkt, so erwartet der Anwender in jedem Fall, dass ein Internetauftritt auf seinem Tablet reibungslos läuft. Ein Internetauftritt, der sich auf einem Tablet nicht bedienen lässt, wird einfach wieder verlassen und vergessen. Die Auswahl an Alternativen ist schließlich groß genug.

 

Der Internet Analysedienst StatCounter wertet in nur einem Monat über 15 Milliarden Webseitenbesuche (page views) aus. In der nachfolgenden Grafik können Sie ersehen, wie der Marktanteil von normalen Computern stetig fällt, während die Anteile von Touchscreengeräten mit Betriebssystemen wie Andorid oder iOS in nur einem Jahr kräftig zugelegt haben. Nach dieser Statisitk sind aktuell ca. 65 % der Internetsurfer mit dem PC unterwegs, während Smartphone und Tablet es zusammen auf enorme 35 % bringen.

 

FAZIT:

Die Möglichkeiten, mit einem Endgerät auf eine Website zuzugreifen sind heutzutage sehr vielfältig und die Anzahl der Anwender, die mit anderen Endgeräten als dem typischen PC auf Ihre Website zugreifen wächst von Monat zu Monat. Eine einzige starre Darstellung Ihrer Webinhalte ist daher nicht mehr zeitgemäß und nicht zu empfehlen.

 

INZTITUT medienkompetenz hat die entsprechende Erfahrung mit der Technologie Responsive Webdesign. Wir erstellen Internetauftritte, die auf allen Endgeräten optimal dargestellt werden können und sich mit dem kleinen Mauszeiger ebenso bedienen lassen, wie mit dem Zeigefinger auf einem kleinen Touchscreen. Fragen Sie uns doch einfach mal an! Ein Erstgespräch ist für Sie nicht nur kostenlos, sondern auch völlig unverbindlich. Wir sind uns sicher, dass Sie davon nur profitieren können.

Jetzt unverbindlich und kostenfrei Beratung anfragen!

Responsive Webdesign ist eine Darstellungstechnik, die es ermöglicht mit Hilfe von Webtechnologien wie HTML5 und CSS3 das einheitliche Anzeigen von Inhalten einer Website auf unterschiedlichen Endgeräten zu gewährleisten. Hierbei wird das Layout bzw. das Gestaltungsraster einer Website so flexibel gestaltet, dass es auf dem PC, Laptop, Tablet und Smartphone eine für das jeweilige Endgerät optimierte Darstellung und bestmögliche Benutzerfreundlichkeit bietet.

 

In diesem Artikel erfahren Sie

  1. Wie und wodurch es zur Entwicklung des Responsive Webdesign kam
  2. Wie Responsive Webdesign funktioniert und was es für Möglichkeiten bietet
  3. Warum Responsive Webdesign auf einem modernen Internetauftritt dingend angewendet werden sollte
  4. Wie viele Besucher Ihres Internetauftritts die Webseiten mit einem Endgerät betrachten, dass auf ein gutes Responsive Webdesign angewiesen ist

Der Weg zum Responsive Webdesign

Die iPhones und iPads von Apple sorgten für den Wandel

 

Früher war Webdesign noch eine klare Angelegenheit – es gab PC mit Monitoren, die irgend etwas um die 1024 x 768 Pixel darstellten und Laptops, die zumeist etwas kleinere Monitore hatten. Internetinhalte wurden dementsprechend aufgebaut, dass sie auf den meisten Monitoren bestmöglich dargestellt wurden. War der Monitor des Endgerätes kleiner, als diese optimale Darstellung, erschienen Scrollbalken am Rand des Browsers. In den meisten Fällen nach unten und oben, im ungünstigsten Fall auch nach rechts und links.

 

Später kamen im PC-Bereich immer größere Monitore zum Einsatz sowie neue Formate wie das 16:9 Seitenverhältnis, während im Laptop-Bereich immer kleinere Produkte wie die sogenannten Netbooks Einzug hielten. Schließlich gesellten sich noch die Smartphones und Tablets hinzu, die die Webseitenentwickler vor völlig neue Herausforderungen stellten. Nun gab es nicht nur eine riesige Bandbreite an unterschiedlichen Auflösungen und Formaten, sondern obendrein noch zwei neue Aspekte:

  1. Smartphones und Tablets lassen sich im Hochformat wie im Querformat einsetzen
  2. Die Geräte verwenden sogenannte Touchscreens, die sich durch das typische Tippen und Wischen sehr von der Anwendungstechnik  des Klicken und Srcollens eines Mauszeigers unterscheiden.

 

Spätestens jetzt musste eine neue Lösung her. Während es früher noch als besonderer Service galt, wenn ein Unternehmen seinen Internetauftritt neben der normalen PC-Darstellung außerdem in einer Mobile-Variante präsentierte, war nun das Endgerät und dessen Darstellung nicht mehr kalkulierbar.

Young woman working with a mobile phone above the contract

Ungefähr ab Ende 2013 war der Einsatz der neuen Technik Responsive Webdesign (RWD) im Internet nicht mehr zu übersehen. Natürlich hat auch 2015 noch nicht jedes Unternehmen seinen Internetauftritt auf ein Responsive Webdesign umgestellt, denn RWD bedeutet nicht, ein paar Änderungen vorzunehmen – RWD bedeutet technisch gesehen einen kompletten Neuaufbau der Internetpräsenz. Eines kann jedoch mit Sicherheit behauptet werden: Wer heute einen neuen Internetauftritt erstellt oder beauftragt und nicht auf diese Technik setzt, begeht eine große Fehlentscheidung.

[nextpage title=”Warum Responsive Webdesign heute so wichtig ist”]

 

Warum ist Responsive Webdesign heute so wichtig?

Die Bandbreite der möglichen Endgeräte und deren Bildschirmauflösungen vom Smartphone über das Tablet zum Laptop bis zum riesigen 30-Zoll-Bildschirm ist heutzutage so groß, dass eine nicht RWD-fähige Internetseite entweder auf einem Großteil der Bildschirme eher ungünstig dargestellt wird, oder im schlimmsten Fall sich nicht mehr vernünftig bedienen lässt. Auf einem sehr kleinen Bildschirm wird wird man entweder nur einen Ausschnitt sehen und mit der Maus hin- und herscrollen müssen, so dass man die Gesamtheit des Internetauftritts gar nicht mehr erfassen kann, oder die Seite wird auf einem Bildschirm so stark verkleinert, dass man die Texte nicht mehr lesen, geschweige denn das Menü und andere Bedienfelder bedienen kann.

 

Bei einem Responsive Webdesign erkennt Ihr Internetauftritts auf was für einem System und was für einer Bildschirmgröße es aktuell betrachtet wird und passt die Gestaltung an die Auflösung des Bildschirms an. Dabei werden die Objekte einer Website nicht nur neu angeordnet, sondern sogar völlig anders dargestellt (bspw. das Navigationsmenü) oder es werden Elemente für bestimmte Bildschirmauflösungen komplett weggelassen oder hinzugefügt.

 

PC-Monitor und Touchscreen

Wichtig ist, zu verstehen, dass die Bedienung auf einem Smartphone oder Tablet auf Grund des sogenannten Touchscreens anders funktioniert als auf einem PC, der mit einem Mouse-Curser (Mauszeiger) bedient wird. Denn während man es bei der Bedienung über den Mauszeiger gewohnt ist, eine optische Rückmeldung zu erhalten, sobald man mit dem Mauszeiger über ein interaktives Objekt, wie bespw. ein Menü oder einen Button fährt, so gibt es diese Möglichkeit beim Touchscreen nicht. Eine moderne Website muss also so aufgebaut sein, dass sie auch ohne diese sogenannten „Mouseover“ funktioniert und bedienbar ist.

 

Des Weiteren gibt es zwischen PC und Touchscreen den großen Unterschied, dass beim PC sich zumeist ein kleiner und filigraner Mauszeiger über einen großen Bildschirm bewegt, während der eher kleine Touchscreen mit einem vergleichsweise „klobigen“ Zeigefinger bedient werden muss.

[nextpage title=”Marktanteil der Touchscreen-Geräte”]

 

Wie groß ist der Anteil derer, die meine Website mit einem Touchscreen besuchen?

Eins gleich vorweg: von „verschwindend klein“ oder „vernachlässigbar“ kann schon lange keine Rede mehr sein! Für immer mehr Menschen ist es zunehmend selbstverständlich, mit dem Smartphone oder Tablet ins Internet zu gehen. Und somit erwartet der Anwender auch immer mehr, dass eine Website auf seinem Device (Endgerät) reibungslos funktioniert.

 

Auch wenn das Surfverhalten auf Smartphones sich im Augenblick noch auf einen eingeschränkten Kreis aus Webseiten beschränkt, so erwartet der Anwender in jedem Fall, dass ein Internetauftritt auf seinem Tablet reibungslos läuft. Ein Internetauftritt, der sich auf einem Tablet nicht bedienen lässt, wird einfach wieder verlassen und vergessen. Die Auswahl an Alternativen ist schließlich groß genug.

 

Der Internet Analysedienst StatCounter wertet in nur einem Monat über 15 Milliarden Webseitenbesuche (page views) aus. In der nachfolgenden Grafik können Sie ersehen, wie der Marktanteil von normalen Computern stetig fällt, während die Anteile von Touchscreengeräten mit Betriebssystemen wie Andorid oder iOS in nur einem Jahr kräftig zugelegt haben. Nach dieser Statisitk sind aktuell ca. 65 % der Internetsurfer mit dem PC unterwegs, während Smartphone und Tablet es zusammen auf enorme 35 % bringen.

 

FAZIT:

Die Möglichkeiten, mit einem Endgerät auf eine Website zuzugreifen sind heutzutage sehr vielfältig und die Anzahl der Anwender, die mit anderen Endgeräten als dem typischen PC auf Ihre Website zugreifen wächst von Monat zu Monat. Eine einzige starre Darstellung Ihrer Webinhalte ist daher nicht mehr zeitgemäß und nicht zu empfehlen.

 

INZTITUT medienkompetenz hat die entsprechende Erfahrung mit der Technologie Responsive Webdesign. Wir erstellen Internetauftritte, die auf allen Endgeräten optimal dargestellt werden können und sich mit dem kleinen Mauszeiger ebenso bedienen lassen, wie mit dem Zeigefinger auf einem kleinen Touchscreen. Fragen Sie uns doch einfach mal an! Ein Erstgespräch ist für Sie nicht nur kostenlos, sondern auch völlig unverbindlich. Wir sind uns sicher, dass Sie davon nur profitieren können.

Jetzt unverbindlich und kostenfrei Beratung anfragen!

Jetzt kommentieren!

  1. Responsive Design Fan 8. Juni 2015 at 8:34 - Reply

    Danke für den ausführlichen Blogbeitrag. Ich lese mich zur Zeit auch in das Responsive Webdesign rein und probiere auch schon die ein oder andere Anwendung aus. Das Responsive Web Design ist ja mittlerweile schon ein fester Bestandteil in Web und des Responsive Design wird auch die ganzen mobilen Versionen und APPs von Webseiten ablösen. Es ist einfach viel sinnvoller eine zentrale Quelle für das Aussehen einer Webseite zu haben. Und das lässt sich ja auch Prima mit den Klassen in CSS realisieren.

  2. Sascha Wichert 10. Juni 2015 at 17:23 - Reply

    Sehr gerne, wir bemerken dass nicht nur auf unseren eigenen Seiten, sondern zugleich in allen Kundenprojekten das responsive Webdesign einfach ein großer Zugewinn für alle ist.

    Für den Nutzer durch den gesteigerten Komfort und für den Webseitenbetreiber indem alle positiven Onlinemarketing-Effekte sich vollends positiv entfalten.

  3. Wengenroth 24. Juli 2015 at 13:59 - Reply

    Hey,
    ich kann dem nur zustimmen. Ich selber bin auch im Bereich Webdesign tätig. Fast alle Kunden wünschen sich nicht nur einfach eine neue Homepage, sondern eben ein responsive Webdesign. Ich denke es dauert nicht mehr lange, und es wird eine Seltenheit sein eine Seite ohne responsives Design zu finden.
    Lieben Gruß

  4. Sascha Wichert 26. Juli 2015 at 18:35 - Reply

    Hallo Herr Wengenroth,
    es freut uns, dass Ihnen unser Fachartikel zum Thema responsive Webdesign gefällt. Allerdings glaube ich aus Erfahrung aus der Praxis nicht daran, dass es bereits in naher Zukunft ausschließlich Unternehmenswebsites im einem für die mobile Darstellung optimal aufbereiteten Responsive Webdesign geben wird.

    Dafür gibt es zwei Gründe: Zum einen scheuen noch viele Unternehmen den Relaunch ihrer Unternehmenswebsites in das responsive Webdesign zu überführen. Zum anderen wird es immer Webseiten von Unternehmen geben, die nicht einmal heute eine robuste Browserdarstellung erreichen. Zudem erfüllen auch eine Vielzahl von Unternehmenswebseiten – auch nahmhafter Mittelstandunternehmen – bis heute immer noch nicht die unverzichtbaren Qualitätskriterien für Onlinemarketing, Nutzerfreundlichkeit und Suchmaschinenoptimierung.

Weitere Artikel:

Jetzt kommentieren!

  1. Responsive Design Fan 8. Juni 2015 at 8:34 - Reply

    Danke für den ausführlichen Blogbeitrag. Ich lese mich zur Zeit auch in das Responsive Webdesign rein und probiere auch schon die ein oder andere Anwendung aus. Das Responsive Web Design ist ja mittlerweile schon ein fester Bestandteil in Web und des Responsive Design wird auch die ganzen mobilen Versionen und APPs von Webseiten ablösen. Es ist einfach viel sinnvoller eine zentrale Quelle für das Aussehen einer Webseite zu haben. Und das lässt sich ja auch Prima mit den Klassen in CSS realisieren.

  2. Sascha Wichert 10. Juni 2015 at 17:23 - Reply

    Sehr gerne, wir bemerken dass nicht nur auf unseren eigenen Seiten, sondern zugleich in allen Kundenprojekten das responsive Webdesign einfach ein großer Zugewinn für alle ist.

    Für den Nutzer durch den gesteigerten Komfort und für den Webseitenbetreiber indem alle positiven Onlinemarketing-Effekte sich vollends positiv entfalten.

  3. Wengenroth 24. Juli 2015 at 13:59 - Reply

    Hey,
    ich kann dem nur zustimmen. Ich selber bin auch im Bereich Webdesign tätig. Fast alle Kunden wünschen sich nicht nur einfach eine neue Homepage, sondern eben ein responsive Webdesign. Ich denke es dauert nicht mehr lange, und es wird eine Seltenheit sein eine Seite ohne responsives Design zu finden.
    Lieben Gruß

  4. Sascha Wichert 26. Juli 2015 at 18:35 - Reply

    Hallo Herr Wengenroth,
    es freut uns, dass Ihnen unser Fachartikel zum Thema responsive Webdesign gefällt. Allerdings glaube ich aus Erfahrung aus der Praxis nicht daran, dass es bereits in naher Zukunft ausschließlich Unternehmenswebsites im einem für die mobile Darstellung optimal aufbereiteten Responsive Webdesign geben wird.

    Dafür gibt es zwei Gründe: Zum einen scheuen noch viele Unternehmen den Relaunch ihrer Unternehmenswebsites in das responsive Webdesign zu überführen. Zum anderen wird es immer Webseiten von Unternehmen geben, die nicht einmal heute eine robuste Browserdarstellung erreichen. Zudem erfüllen auch eine Vielzahl von Unternehmenswebseiten – auch nahmhafter Mittelstandunternehmen – bis heute immer noch nicht die unverzichtbaren Qualitätskriterien für Onlinemarketing, Nutzerfreundlichkeit und Suchmaschinenoptimierung.

Weitere Artikel: