Responsive Entwicklung, Navigationen und Inhalte mit jQuery-Plugins
Es ist oft nicht ganz einfach, z.B. Hintergrundbilder, Navigationselemente oder Textgrößen einer Website flexibel an die jeweils angefragte Viewport-Größe anzupassen. Wo man mit CSS nicht weiterkommt, kann JavaScript z.B. über die weit verbreitete jQuery-Bibliothek und seine Responsive-Design-Plugins die Entwicklerarbeit erleichtern. In einem Blogpost bei Gonzo-Blog zu jQuery-Plugins für Fluid-Layouts und Responsive Webdesign werden 16 hilfreiche jQuery-Plugins gelistet. Einige der dort aufgeführten jQuery-Plugins haben wir euch schon mal einzeln vorgestellt. Wie ihr Videos über FitVids.js flexibel einbindet, könnt ihr in unserer News FitVids.js: Videos mit jQuery in responsives Webdesign einbinden nachlesen. Für die dynamische Optimierung von Text haben wir euch unter anderem FitText.js und Lettering.js in jQuery-Plugins: 10 Helfer für schönere Schriften vorgestellt.
Hier als Ergänzung noch 14 weitere jQuery-Plugins, um die Entwicklung von flexiblen Weblayouts mit z.B. dynamischen Code-Blöcken, optimierten Navigationen sowie Text- oder Bildeffekten zu vereinfachen:
1 Response.js
Response.js von Ryan Van Etten kann in Verbindung mit jQuery oder Zepto verwendet werden. Es ermöglicht das Haltepunkt-basierte Tauschen von Code-Blöcken und Medienelementen über HTML5-Data-Attribute. Die Objekt-Methoden von Response.js helfen Entwicklern beim Auslösen von Aktionen und Boolean-Werten zum Testen von Responsive-Design-Eigenschaften. Response.js benötigt jQuery ab Version 1.7.
2 Breakpoints.js
Breakpoints.js von XOXCO sorgt dafür, dass man an selbst definierten Haltepunkten im Website-Quellcode benutzerdefinierte Ereignisse auslösen kann, wenn der Browser diese Stellen aufruft oder verlässt.
3 jQuery Responsive Web
jQuery Responsive Web von Devrim Vardar fügt je nach Betriebssystem, Browser und Auflösung dynamische CSS-Klassen in den <body> ein. Es ist kompatibel mit Internet Explorer v7 und v8, Firefox, Google Chrome, Safari und Opera. Benötigt wird jQuery 1.2 oder höher.
4 Protofluid
ProtoFluid vereinfacht die Entwicklung von Fluid-Layouts und adaptiven CSS über Media-Queries. Es baut bis zu 99 verschiedene Scrollbar-unabhängige Viewports der eigenen Website oder App. ProtoFluid ist nur für die ersten zehn Einsätze kostenlos. Danach muss für uneingeschränkte Nutzung eine Lizenz für 5 Englische Pfund gekauft werden.
5 Heads-Up Grid
Heads-Up-Grid von Jason Simanek vereinfacht die Erstellung von konfigurierbaren Grid-Layouts für unterschiedliche Viewports über Media-Queries.
6 Scrollorama
Scrollorama von John Polacek ist besonders für Texteffekte bei Einzelseiten geeignet. Inhalte werden in Blöcke unterteilt und können dann über vordefinierte Animationsparameter mit schicken Scroll-Effekten wie z.B. Parallax, Zoom oder Rotieren versehen werden. Wie John anmerkt, ist Scrollorama ein experimentelles Projekt, dass noch nicht komplett durchgetestet wurde.
7 TinyNav.js
TinyNav.js von Viljami Salminen vereinfacht die Entwicklung von Navigationen für unterschiedliche Viewports. TinyNav.js wandelt <ul> und <ol> Tags in für kleine Displays optimierte Dropdown-Listen um. Die aktuelle Seite wird dabei automatisch ausgewählt und als "selected" markiert. Viliami merkt an, dass TinyNav.js nicht die meisten Optionen unter den jQuery-Plugins für diesen Zweck bietet, aber wahrscheinlich das kleinste in Hinsicht auf seine Dateigröße ist. Es gibt zusätzlich noch ein schlankes jQuery-Plugin für Slideshows mit Responsive Design von Viljami.
8 Responsive-Menu
Responsive-Menu von Matt Kersley ist ein weiteres jQuery-Plugin für die Navigationsoptimierung auf mobilen Viewports über das Umwandeln der Menüpunkte in eine Dropdown-Liste. Es bietet 7 Optionen bei der Konfiguration.
9 Really Simple Responsive Menu
Really Simple Responsive Menu von Dan Thomas erzeugt ein für kleine Viewports optimiertes Menu nicht über Dropdown-Listen, sondern über das Ergänzen eines neuen, angepassten Menu-Buttons, wenn die Display-Größe oder das Browser-Fenster sich verkleinert. Dan nutzt dafür das neue HTML5-Tag <nav> im Header der Webseite. Dann platziert er einen Menu-Button über jQuery, modernizr und Media-Queries, der auf Klick Untermenupunkte ein- bzw. ausblendet.
10 Molten Leading
Molten Leading von Mat Marquis erleichtert die Anpassung von Textzeilenhöhen für unterschiedliche Media-Queries, um für alle Viewports gute Lesbarkeit zu erreichen.
11 jQuery Anystretch
jQuery Anystretch von Dan Millar erzeugt dynamisch skalierte Hintergrundbilder für Seiten oder Block-Level-Elemente beliebiger Größe. Hintergrundbilder können zudem auf Klick verändert, mit Fade-In-Geschwindigkeit versehen oder mit wenigen Codezeilen zu einer Bildergalerie werden.
12 Backstretch
Backstretch von Scott Robbin erzeugt ebenfalls dynamisch skalierte Hintergrundbilder, die sich an die jeweilige Display-Größe anpassen und es kann auch als Bildergalerie eingesetzt werden. Die Bilder werden nach Seitenaufruf zwischengespeichert, sodass sich Ladezeiten verringern.
13 Doubletake
Doubletake von Graham Bird aktualisiert das <src> Tag von Bildern in Abhängigkeit der Viewport-Größe mit Hilfe von definierten Haltepunkten. Doubletake ist mit Safari 5.1, Chrome 13 and Firefox 5 getestet. Graham verwendet neben jQuery eine lokale Kopie von SLIR und den src.sencha.io Webservice.
14 Hoverizr
Hoverizr von Ilias Iovis macht Bildeffekte wie Graustufen, Unschärfe und Farbinvertierung beim Darüberfahren mit der Maus möglich. Ilias verwendet dafür das HTML5 <canvas> Element.
Für die automatische Optimierung von Bildern für ein Responsive Design ist auch „Adaptive Images“ gut geeignet. Adaptive Images basiert allerdings nicht auf JavaScript und jQuery, sondern arbeitet mit PHP.
Die offizielle Plugin-Seite von jQuery wird gerade überarbeitet, aber eine Übersicht zu allen verfügbaren Erweiterungen findet ihr im Plugin-Archiv.
Kennt ihr noch weitere nützliche jQuery-Plugins für Responsive Webdesigns? Wir freuen uns über eure Kommentare mit Ergänzungen!
Weiterführende Links:
- jQuery
- jQuery Plugins for Fluid Layouts/Responsive Web Design - Gonzo-Blog
- jQuery-Plugins: 10 Helfer für schönere Schriften - t3n News
- FitVids.js: Videos mit jQuery in responsives Webdesign einbinden - t3n News
- Responsive Webdesign: „Adaptive Images” optimiert Bilder automatisch - t3n News
- Responsive Webdesign: Umfangreiche Präsentation mit Tipps und Tricks - t3n News
- Responsive Webdesign mit HTML5 und CSS3 – Grundlagen - t3n News
von jQuery: 14 Plugins für flexible Website… 01.04.2012 (16:26Uhr) 1.
[...] jQuery: 14 Plugins für flexible Website-Layouts » t3n News [...]
von [KW13/12] Themen der Woche » IT::f… 02.04.2012 (08:31Uhr) 2.
[...] Ein paar jQuery-Plugins für flexible Web-Layouts [...]
von Linkhub – Woche 13-2012 03.04.2012 (16:54Uhr) 3.
[...] jQuery: 14 Plugins für flexible Website-Layouts » t3n News [...]