Responsive Webdesign

Eines der wichtigsten Begriffe, die uns im Bereich Webdesign dieses und nächstes Jahr begleiten wird ist „Responsive Webdesign“. Mit dem Einzug des Smartphones und des Tablett-PCs in den Alltag der User wird die Anforderungen an zukünftiges Webdesign und Website-Entwicklung die sein, dass sich die Inhalte einer Website an die Gegebenheiten der Endgeräte automatisch anpassen. Die Seiten sollten jederzeit benutzbar sein, egal ob Smartphone oder 27″ Monitor. Responsive Webdesign sagt dabei nichts anderes aus als reaktionsfähiges Webdesign.

Durch den Einzug von HTML5, CSS3 und JavaScript ist man in der Website-Entwicklung nun in der Lage, der Website eine gewisse Intelligenz mitzugeben. Dies hat aber nichts damit zu tun, dass die Zeilenbreite an den Monitor angepasst wird, so wie es vor knapp zehn Jahren gehandhabt wurde. Moderne Grid-Systeme wie das 960° Grid ermöglichen der Website auf Basis der Monitorauflösung und der Browsergröße unterschiedliche Layouts anzuzeigen. So kann zum Beispiel eine Internetseite auf dem Smartphone in einer Spalte untereinander angeordnet sein und auf einem Tablett-PC ist dieselbe Seite mit vier Spalten aufgebaut. Dabei kann sich die Darstellung der jeweiligen Spalten zur Monitorauflösung noch unterscheiden. Die Entwicklung geht hier soweit, dass Sie beim Verändern der Browsergröße das Layout der Seite neu anordnet. Auch die Schriftgröße kann sich hierbei wiederum der Auflösung anpassen.

Die modernen Grid-Systeme ähneln in Ihrer Darstellung und Umsetzung teilweise einem Raster-System wie wir diese aus dem klassischen Print-Bereich kennen. Die Anordnung der Inhalte wird hierbei starr nach einem festen Raster vollzogen.

Eine gut und sauber geplante Website kann nun im Kern über ein CMS-System wie zum Beispiel TYPO3 gepflegt und verwaltet werden. Die Programmierung auf einem modernen Grid-System ermöglicht die flexibelste Darstellung der Seite auf vielen Endgeräten. Selbst eine Web-App könnte hier noch in einer Entwicklung abgedeckt werden.

Technologien wie jQuery unterstützen und vereinfachen durch Ihre fertigen Bibliotheken die Programmierung erheblich.

Über die neuen Möglichkeiten in der Programmierung können zukünftig mit einer Website verschiedene Auflösungen abgebildet werden. Früher wären es unterschiedlichste Templates mit unterschiedlichsten Layouts gewesen. Was dies in der Betreuung und Pflege im Vergleich zu flexiblen Layouts bedeutet, steht in keinem Verhältnis.

Beispiele Responsive Website
http://isotope.metafizzy.co/

Beispiele Grid-Systeme und Frameworks
http://www.designinfluences.com/fluid960gs/
http://960.gs/
http://www.blueprintcss.org/
http://www.yaml.de/
http://bluetrip.org/
https://developer.yahoo.com/yui/grids/
http://csswizardry.com/inuitcss/

Hilfetool
http://gridr.atomeye.com/
http://grids.heroku.com/
http://www.gridsystemgenerator.com/
http://www.1kbgrid.com/
http://developer.yahoo.com/yui/grids/builder/
http://www.designbygrid.com/tools

Firefox Grid-Xtension
http://www.puidokas.com/portfolio/gridfox/

Technologien
http://jquery.com/
http://jqueryui.com/themeroller/

Veröffentlicht von

thomass

Thomas Seruset, Geschäftsführender Gesellschafter der zeroseven design studios in Ulm.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.