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.

RSS-Feed abonnieren

Kommentare

Don schrieb am 17.02.2012 #1

hi, nichts gegen deine Post, aber langsam kann ich jaaaaayquerrry nicht mehr hören :)..jedes kleinste bischen Mehraufwand wird ein jQ Plugin gebastelt?
Muss doch nun nicht alles mit jQ gemacht werden, die zwei Zeilen kann man doch mal per Hand coden?
:)

Christina schrieb am 17.02.2012 #2

Ich bin trotzdem dankbar für seine Posts. Also, vielen Dank dafür! Hat mir sehr geholfen. Liebe Grüße aus Hamburg

Matthias schrieb am 17.02.2012 #3

Ja, es stimmt schon, dass es mittlerweile wirklich viele jQuery-Plugins gibt und im Prinzip jede Aufgabe mit einem Plugin gelöst wird. Das oben genannte Response-Framework hätte man sich durchaus auch als Standalone-Lösung vorstellen können. Aber jQuery erfreut sich eben sehr großer Beliebtheit. Ich versuche dennoch, nicht all zu viele Artikel über jQuery zu schreiben, da es auch noch andere Tools gibt und genug native Lösungen entwickelt werden.