201214Feb

Webdesign: Responsive Layouts mit jQuery

Moderne Webbrowser ermöglichen durch CSS3 Media Queries dynamische, also reagierende (engl. "responsive") Layouts. Dadurch lassen sich unterschiedliche Bedingungen definieren, die auf bestimmte Bildschirmauflösungen bzw. Fenstergrößen zugeschnitten sind. Wer noch etwas weitergehen möchte und auch DOM-Elemente mit reagierenden Eigenschaften ausstatten möchte, greift zu Response.js. Dabei handelt es sich um ein jQuery-Plugin, mit dem sich verschiedene Codeblöcke anhand von Haltepunkten (Breakpoints) an der entsprechenden Stelle in der DOM-Hierarchie ausgeben lassen.

Response JS - mobile-first progressive enhancement in HTML5

Mit dem jQuery-Plugin werden Webentwicklern erweiterte Möglichkeiten an die Hand gegeben, da durch HTML5-Attribute (data) beliebige Bedingungen gesetzt werden können. Der Fokus liegt dabei auf DOM-Elementen, die sich nicht oder nur schwer per Media Queries erreichen lassen. Ein Beispiel:

  • <img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />

Mit dieser Bedingung wird die Grafik je nach Viewport-Größe ausgegeben. Bei einer Breite von 480 Pixeln wird also eine kleinere Grafik angezeigt als bei einer Breite von mehr als 1025 Pixeln.
"Responsive Webdesigns" sind ein aktueller Trend, ziehen jedoch auch einen gewissen Mehraufwand mit sich: Layouts müssen dynamisiert werden, damit sie bei unterschiedlichen Fenstergrößen noch ein gutes Bild abgeben. Das lässt sich mit einem guten Design nicht immer vereinbaren und so ist es wieder von den Anforderungen des Projekts abhängig, ob sich ein dynamisches Design (jetzt schon) lohnt.

Kommentarfunktion für diesen Artikel geschlossen.