© Liashko/Shutterstock.com
Entwickler Magazin
Responsive Webdesign für Anwendungen

Einer für alle, alle für einen

Responsive Webdesign ist eines der meistgenutzten Buzzwords in der Webentwicklung. Lesen Sie in diesem Artikel, was Responsive Webdesign ist, was es nicht ist und wie Sie webbasierte Clientanwendungen dank des Responsive-Webdesign-Paradigmas einfach auf allen Plattformen und Devices bereitstellen können.

Thorsten Hans


Bei Responsive Webdesign oder kurz RWD handelt es sich um einen Sammelbegriff für diverse Gestaltungstechniken, der von Ethan Marcotte in seinem Artikel „Responsive Web Design“ [1] geschaffen wurde. In der Praxis wird ein Responsive Layout (RL) dazu verwendet, um die Ziele des RWD zu erreichen. Beim RWD wird eine Webseite oder eine Web-App für die Darstellung auf beliebigen End- und Anzeigegeräten entwickelt. Die Webseiten oder Web-Apps reagieren hierbei dynamisch auf äußere Gegebenheiten (insbesondere auf die Breite des Viewports, siehe Kasten: „Viewports“) und präsentieren dem Benutzer die Daten in einer für die aktuelle Auflösung optimierten Form. Sämtliche Browser respektieren dabei auch das devicePixelRatio (siehe Kasten: „DevicePixelRatio“). Darüber hinaus ist es ebenfalls eines der Aufgabengebiete von RWD, unterschiedlich auf die möglichen Eingabemethoden des Benutzers zu reagieren. So sind an einem Desktop oder Notebook die Oberflächen für die Interaktion mittels Maus und Tastatur optimiert, wohingegen an einem Tablet oder Smartphone die Verwendung von Touch-Gesten in Verbindung mit der Bildschirmtastatur als primäre Interaktionsmöglichkeiten mit der Oberfläche gesehen werden.

Technisch gesehen werden Responsive Layouts durch die Kombination aus HTML5, CSS3 und (falls notwendig) JavaScript realisiert. CSS-Media-Queries dienen hierbei als Gerüst, um die Oberflächen auf den jeweiligen Geräten und Auflösungen unterschiedlich darzustellen.

ViewportsAls Viewport bezeichnet man den Bereich einer Webseite, den ein Benutzer zu einem bestimmten Zeitpunkt sehen kann. Äußere Faktoren wie die Gestaltung des Browserfensters, eine Lesezeichenleiste oder die Größe des Browserfensters haben somit eine direkte Auswirkung auf den Viewport. Der Benutzer kann den Viewport durch diverse Interaktionen wie Scrolling anpassen oder durch Aktiveren/Deaktivieren der Lesezeichenleiste aktiv verändern.

DevicePixelRatioDas DevicePixelRatio ist einfach betrachtet ein Umrechnungsfaktor zwischen den Pixelangaben einer Webseite und der Pixelanzahl des Bildschirms. Notwendig wurde dieser Umrechnungsfaktor wegen extrem hochauflösenden Bildschirmen wie zum Beispiel einem Retina-Display. Auf solchen Bildschirmen wird nicht einfach mehr Inhalt angezeigt, es geht hier vielmehr darum, den gleichen Inhalt in einer höheren Schärfe darzustellen. Um bereits existierende Webseiten, Anwendungen oder Grafiken allerdings weiterhin korrekt anzeigen zu können, musste an dieser Stelle ein neuer Umr...

Entwickler Magazin
Responsive Webdesign für Anwendungen

Einer für alle, alle für einen

Responsive Webdesign ist eines der meistgenutzten Buzzwords in der Webentwicklung. Lesen Sie in diesem Artikel, was Responsive Webdesign ist, was es nicht ist und wie Sie webbasierte Clientanwendungen dank des Responsive-Webdesign-Paradigmas einfach auf allen Plattformen und Devices bereitstellen können.

Thorsten Hans


Bei Responsive Webdesign oder kurz RWD handelt es sich um einen Sammelbegriff für diverse Gestaltungstechniken, der von Ethan Marcotte in seinem Artikel „Responsive Web Design“ [1] geschaffen wurde. In der Praxis wird ein Responsive Layout (RL) dazu verwendet, um die Ziele des RWD zu erreichen. Beim RWD wird eine Webseite oder eine Web-App für die Darstellung auf beliebigen End- und Anzeigegeräten entwickelt. Die Webseiten oder Web-Apps reagieren hierbei dynamisch auf äußere Gegebenheiten (insbesondere auf die Breite des Viewports, siehe Kasten: „Viewports“) und präsentieren dem Benutzer die Daten in einer für die aktuelle Auflösung optimierten Form. Sämtliche Browser respektieren dabei auch das devicePixelRatio (siehe Kasten: „DevicePixelRatio“). Darüber hinaus ist es ebenfalls eines der Aufgabengebiete von RWD, unterschiedlich auf die möglichen Eingabemethoden des Benutzers zu reagieren. So sind an einem Desktop oder Notebook die Oberflächen für die Interaktion mittels Maus und Tastatur optimiert, wohingegen an einem Tablet oder Smartphone die Verwendung von Touch-Gesten in Verbindung mit der Bildschirmtastatur als primäre Interaktionsmöglichkeiten mit der Oberfläche gesehen werden.

Technisch gesehen werden Responsive Layouts durch die Kombination aus HTML5, CSS3 und (falls notwendig) JavaScript realisiert. CSS-Media-Queries dienen hierbei als Gerüst, um die Oberflächen auf den jeweiligen Geräten und Auflösungen unterschiedlich darzustellen.

ViewportsAls Viewport bezeichnet man den Bereich einer Webseite, den ein Benutzer zu einem bestimmten Zeitpunkt sehen kann. Äußere Faktoren wie die Gestaltung des Browserfensters, eine Lesezeichenleiste oder die Größe des Browserfensters haben somit eine direkte Auswirkung auf den Viewport. Der Benutzer kann den Viewport durch diverse Interaktionen wie Scrolling anpassen oder durch Aktiveren/Deaktivieren der Lesezeichenleiste aktiv verändern.

DevicePixelRatioDas DevicePixelRatio ist einfach betrachtet ein Umrechnungsfaktor zwischen den Pixelangaben einer Webseite und der Pixelanzahl des Bildschirms. Notwendig wurde dieser Umrechnungsfaktor wegen extrem hochauflösenden Bildschirmen wie zum Beispiel einem Retina-Display. Auf solchen Bildschirmen wird nicht einfach mehr Inhalt angezeigt, es geht hier vielmehr darum, den gleichen Inhalt in einer höheren Schärfe darzustellen. Um bereits existierende Webseiten, Anwendungen oder Grafiken allerdings weiterhin korrekt anzeigen zu können, musste an dieser Stelle ein neuer Umr...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang