Archiv

Die richtige Lösung für mobile Kunden - Teil 3 Responsive Web Design



Im ersten Teil dieser Blog-Reihe wurde die App vorgestellt und einzelne Ausprägungen - Native App, Hybride App, Mobile Web App - näher beleuchtet. Sie haben erfahren, wann der Einsatz einer dieser Varianten Sinn ergibt und welche Eigenheiten die einzelnen Lösungen charakterisieren. Den Artikel finden Sie hier: Mobile Lösungen - Apps.

Der zweite Teil dieser Blog-Reihe stellte die Mobile Website vor. Auch hier erfuhren Sie, was man mit einer Mobile Website erreichen kann und wann diese nicht geeignet ist. Den zweiten Teil finden Sie hier: Mobile Lösung – Mobile Website.

Im dritten Teil erfahren Sie nun etwas über Grundlagen und sinnvolle Einsatzbereiche von Responsive Web Design.

 

Responsive Web Design

Beim Responsive Web Design wird eine Webseite automatisch auf die Bildschirmgröße des Geräts angepasst, auf dem sie betrachtet wird. Diese Alternative wurde von Ethan Marcotte ins Leben gerufen. Die Technologien dafür waren schon vorhanden, was er tat, war diese unter einem Namen zu vereinen. Er schreibt, dass es immer mehr unterschiedliche internetfähige Endgeräte gibt und geben wird. Die typischen Bildschirmgrößen werden gleichzeitig kleiner und größer. Ethan Marcotte sagte passend dazu: „The web has moved beyond the desktop, and it`s not turning back.“

Anhänger von Responsive Web Design sehen es als ein verlorenes Unterfangen an, den Inhalt von Webseiten z.B. mittels App manuell auf viele verschiedene mobile Endgeräteanzupassen. Der Arbeitsaufwand für die Entwickler wäre viel zu groß. Doch wie kann Responsive Web Design dabei helfen, mit möglichst wenig zusätzlichem Aufwand seine Inhalte für viele verschiedene mobile Endgeräte zu optimieren?

Responsive Web Design besteht im Grunde aus drei grundsätzlichen Techniken:

• Ein flexibles Raster-Layout
• Anpassungsfähige Bilder und andere Medien
• Media queries

Der Kern ist, dass der Inhalt einer Website in einzelne Zeilen und Spalten aufgeteilt wird, das flexible Raster-Layout. Das Ziel dahinter ist, dass sich die Webseite an den Browser bzw. an den Nutzer anpasst. Das geschieht dadurch, dass keine fixen Werte mehr für Designelemente vergeben werden, sondern nur relative Prozentangaben zur maximalen Größe und zu anderen Elementen.

Bilder und andere Medien werden genauso gehandhabt und passend auf das mobile Endgerät ausgeliefert. Ist also das Endgerät mit einem großen Display ausgestattet, werden die Bilder usw. größer dargestellt, als wenn das Endgerät nur über ein kleines Display verfügt.

Media queries ordnen CSS-Stylesheets einem Medium zu und somit kann die Darstellung eine Webseite für verschiedene Endgeräte festgelegt und optimiert werden. Diese Mechanismen können das mobile Endgerät und dessen Beschaffenheit identifizieren, während ein Nutzer eine Internetseite besucht. Dadurch kann flexibel auf unterschiedliche Bildschirmauflösungen reagiert werden.

Diese drei Techniken sind notwendig, um eine Webseite Responsive erscheinen zu lassen. Beispiele gut entwickelter und umgesetzter Websites sind im Internet schnell gefunden: http://www.webtalkblog.de/responsive-webdesign-beispiele. Des Weiteren ist diese unsere Webseite www.eloum.net auch "Responsive" und kann über verschiedene mobile Endgeräte angeschaut werden.

Ein wichtiges Thema für Unternehmen sind natürlich die Kosten. Hier kann man sagen, dass rund ein Drittel mehr Initialkosten bei Responsive Web Design anfallen, als bei einer herkömmlichen Webseite. Das liegt unter anderem an der komplexeren Konzeption von Aussehen und anzuzeigendem Inhalt. Langfristig jedoch können die laufenden Betriebskosten durch Responsive Web Design um bis zu 50 Prozent gesenkt werden. Außerdem passen sich die Webseiten auch in der Zukunft an veränderte oder neu entwickelte Endgeräte flexibel an. Somit ist man auch zukünftig für neue Bildschirmgrößen und internetfähige Endgeräte gerüstet.

Wann ergibt Responsive Web Design Sinn? Wenn ...

• Sie eine Version der Website für alle Nutzer und Endgeräte bereitstellen wollen.
• Sie viele Nutzer mit vielen unterschiedlichen mobilen Endgeräten zu Ihren Kunden zählen.
• Kosten ein wichtiges Thema sind und der laufende zusätzliche Aufwand für eine Webseite gering bleiben soll.
• Sie flexibel auf zukünftige Smartphones und andere mobile Endgeräte vorbereitet sein wollen.

 

Weiterführende Informationen zu einzelnen Aspekten finden Sie hier

Weiterführende Informationen zu Responsive Web Design, aber auch zu anderen interessanten Themen, finden Sie auf den Seiten des E-Business-Lotsen Oberschwaben-Ulm.

Bei Fragen und Anregungen und natürlich auch bei konstruktiver Kritik können Sie uns entweder einen Kommentar hinterlassen oder eine E-Mail an arne.winterfeldt@eloum.net schreiben.

Keine Kommentare