ksi
consulting

Responsives Web-Design

Responsives Web-Design ist nicht nur eine Technik, Webseiten für mobile Endgeräte zu gestalten, sondern es ist ein neuer Ansatz für das Web-Design überhaupt, ein Ansatz der zur Kenntnis nimmt, dass Geräte hinsichtlich Bildschirmgröße und Fähigkeiten heutzutage sehr heterogen sind.

Responsive Web-Design
In den frühen Jahren des World Wide Web gab es noch wenig Möglichkeiten, das Aussehen der Webseiten zu gestalten. Das Layout von Seiten wurde weitgehend mit Hilfe zweckentfremdeter Tabellen gestaltet. Die zweite Phase des Web ist geprägt durch vom Inhalt unabhängige Style-Sheets (CSS) und oftmals überladene aufwändig pixelgenau gestaltete Seiten. Die sehr dynamische Entwicklung des Web mit der explodierenden Vielfalt an Geräten erzwingt ein anderes Vorgehen. Es wird in den meisten Fällen gar nicht wirtschaftlich sein, für die unterschiedlichen Gerätevarianten speziell gestaltete Web-Seiten zu bieten. Responsives Design ist darauf nur eine konsequente Antwort.

Intelligentes responsives Design geht dabei über eine rein CSS-gesteuerte alternative Darstellung für unterschiedliche Gerätegrößen hinaus.

Warum Responsives Design?

Zusammengefasst sind die Vorteile des Responsive Web-Deisgns:

  • Zukunftssichere Lösung für heterogene Entwicklung des Web
  • Priorität auf Nutzerzufriedenheit und Bedienkomfort
  • Suchmaschinengerechte Gesaltung; Google empfiehlt responsives Web_Design (Offizieller Google Webmaster-Blog)
  • Barrierefreie Web-Seiten
  • Wirtschaftliche Lösung für alle Gerätetypen
  • Gute Wartbarkeit durch eine einheitliche Basis.

Intelligentes Responsives Design

Fortschrittliches Web-Design ermöglicht an die vorhanden unterschiedlichen Geräten angepasste, komfortable Web-Seiten. Dem Konstrukteur und den Redakteuren der Webseiten wird ermöglicht, gerätespezifisch unterschiedliche Inhalte (unterschiedliche Größen und Formate etwa bei Grafiken und Multimediadateien) bereit zu stellen, Layout-und Typograhie-Varianten vorzugeben und automatisch die unterschiedlichen Inhalte und Definitionen an die entsprechenden Geräte auszuliefern.

DEMO:
Rufen Sie diese Seite und andere Seiten von ksi-cms.de auf unterschiedlichen Endgeräten und mit verschiedenen Bildschirmauflösungen auf, und vergleichen Sie!

 

Intelligentes Responsives Design nutzt eine Reihe von Techniken, mit denen der überwiegende Anteil der gerätespezifischen Anpassungen automatisch geschieht. Redakteure sollten jedoch für gezielte Effekte gewisse Einwirkungsmöglichkeiten haben. Die eingesertzten Techniken umfassen Web-Standards (HTML5 und CSS 3), Javascript-Bibliotheken, die Rücksicht auf die Besonderheiten der Betriebssysteme und Web-Browser nehmen, und Komponenten für eine zielgerätabhängige Vorverarbeitung auf der Serverseite. Das ist eine sehr komplexe programmtechnische Aufgabe, die durch Design „per Hand“ nicht wirtschaftlich zu lösen ist, sondern nur mit den geeigneten Werkzeugen, so wie es mit dem CMS Drupal möglich ist.

Für die Gestaltung der Webseiten sind, neben der Bildschirmauflösung, die Eigenheiten der Geräte (insbesondere zur Eingabe) und gegebenenfalls auch der Verwendungszweck zu berücksichtigen.

Ursprünglich wurde mit dem Begriff Responsive Web-Design (lediglich) die Technik verstanden, durch spezifische Formatierungsangaben (mittels CSS) für die unterschiedlichen Gerätetypen und entsprechende Gestaltung mittels der Auszeichnungssprache (HTML-Source) ein angepasstes Layout zu erreichen. In verschiedenen Publikationen finden sich unterschiedliche Begriffe, die einen bestimmten Aspekt beschreiben.

Die Begriffe Adaptive Design und Fluid Design bezeichnen die Art der Layoutanpassung: im ersteren Fall eine Anpassung des Layout an die Bildschirmgröße in wenigen Stufen, während im zweiten Fall eine kontinuierliche, gleitende Anpassung gemeint ist. Auch hier ist eine Kombination möglich, so wie es auf www.ksi-cms.de auch gemacht wurde. Innerhalb bestimter Grenzen findet eine gleitende Anpassung von Breiten statt und bei deren Überschreiten eine Änderung des Aufbaus. Mit RESS (für „Responsive Design and Server Side Components“) wird betont, dass zusätzlich zum durch spezifisches CSS angepassten Layout eine Verarbeitung auf dem Server stattfindet, um alternative Elemente zum Endgerät zu senden.

Blog-Kategorie: 

Begriffe: 

Kommentare

Super

Two thumbs up my friend, what a great post and worthy of my comment of praise.
Responsive design will become more and more important.

Neuen Kommentar schreiben

Plain text

  • Keine HTML-Tags erlaubt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
  • Es werden typographische Verfeinerungen vorgenommen.
CAPTCHA
Diese Frage soll automatisierten Spam verhindern und überprüft, ob Sie ein menschlicher Besucher sind.
9 + 10 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.