Vorheriger Artikel Nächster Artikel

jQuery: 13 Plugins für euer nächstes Webprojekt

ohne , im Besonderen , ist heute fast nicht mehr vorstellbar. Deswegen zeigen wir euch 13 jQuery-Plugins, die ihr vielleicht noch nicht kennt, aber unbedingt kennenlernen solltet. Viel Spaß damit!

jQuery: 13 Plugins für euer nächstes Webprojekt

Bei der Entwicklung von Webprojekten kann man fast nicht mehr auf jQuery verzichten. Gerade im Bereich des User-Interface-Designs und der User-Experience, also dem Anwendererlebnis, kommt man ohne JavaScript kaum über die Runden. Gerade das Responsive Webdesign stellt hier eine besondere Herausforderung dar. Die Verkleinerung des Viewports zum Beispiel bei Smartphones erhöht die Anforderungen an das nutzerorientierte Design, es muss zwischen wichtigen und weniger wichtigen Informationen unterschieden werden. Wenn wir responsive entwickeln, legen wir den Fokus auf bestimmte Elemente, sonst würden wir ja die gesamte Website skaliert im Viewport anzeigen lassen. Folglich sind die Entscheidungen das Responsive Design betreffend eng mit der Informationsarchitektur verknüpft. Die folgende Liste zeigt euch einige jQuery-Plugins, die euch in Zukunft dabei helfen können.

Minimalistisch und effizient: ResponsiveSlides.js

Das winzige jQuery-Plugin erstellt euch einen minimalistischen Slider, der sich jeder Auflösung optimal anpasst. Wenn ihr einen Bild-Slider haben wollt, der automatisch die Bilder animiert und dabei responsive ist, wird Responsiveslides.js euer Favorit sein.

Bessere Usability mit Ladda

Ein Hingucker! Ladda ermöglicht euch einen animierten Spinner in einem Button beziehungsweise in einem Link anzeigen zu lassen. Ladda gibt es übrigens auch für Bootstrap.

jQuery Ladda Animation

Naver: Schönes Navigationsmenü im Responsive Webdesign

Naver lässt euch eure Navigationsmenüs auf kleinen Auflösungen darstellen. Dabei wird das „Menu-Overlay“-Pattern umgesetzt, das es euch erlaubt, ein Menü-Icon am oberen Rand des Gerätes darstellen zu lassen, das sich bei Interaktion wie ein Dropdown-Menü verhält.

jQuery Naver

Der Name ist Programm: Responsive Carousel.js

Dieses jQuery-Carousel bietet euch eine Vielzahl von verschiedenen Darstellungsoptionen und ist natürlich responsive.

Responsive-Measure mit jQuery

Die Darstellung von Fließtext kann im Responsive Webdesign eine Hürde darstellen. Mit Plugins wie Fittext könnt ihr dieses Problem beseitigen. Responsive-Measure bezieht in diesen Kontext noch die ideale Zeichenanzahl pro Zeile mit ein. Auf jeden Fall einen Blick wert!

Probleme mit der Höhe im responsive Webdesign?

Das jQuery-Plugin responsiveheight errechnet euch pro Element die Höhe relativ zur Breite.

Textfelder mit jQuery Autosize

Das Plugin jQuery Autosize lässt Textfelder stilvoll, zusammen mit dem eingegebenen Text, wachsen.

Layout-Bibliothek: Freewall

Mit Freewall könnt ihr verschiedenste Grid-Layouts umsetzen. Natürlich ist Gridwall vollkommen responsive.

Multiple Desktops mit FerroSlider

Dieser Slider erinnert an die von Linux und Mac bekannten multiplen Desktops. Das jQuery-Plugin ist derzeit in Version 2.2 und wird weiterentwickelt. Ihr könnt einen ähnlichen Effekt auch mit reveal.js umsetzen, allerdings wird dabei im Gegensatz zu FerroSlider der gesamte Viewport für die Animation genutzt.

Succinct.js

Dieses jQuery-Plugin ermöglicht es euch, Fließtexte automatisch zu verkürzen. Dadurch wird ein einfaches Verkürzen von Texten auf kleinen Viewports ermöglicht. Readmore erlaubt euch sogar ein automatisches Hinzufügen des Textes „Mehr lesen“ pro gekürztem Text.

JVFloat

Mit JVFloat könnt ihr Labels von Input-Feldern bei einem Touch-Event über dem Input-Feld schweben lassen. So kann auch während des Tippens erkannt werden, welches Formularfeld gerade ausgefüllt wird. Eine Demo gibt es hier.

JVFloat
JVFloat, ein jQuery-Plugin für Input-Felder. (Screenshot: JVFloat)

Loadie.js

Kennt ihr den neuen Ladebalken von YouTube? Mit dem Loadie.js könnt ihr einen ähnlichen Effekt erzeugen. Ein sehr dezenter Ladebalken am oberen Ende der Website gibt euren Besuchern auf eine nicht aufdringliche Art und Weise über den Systemfortschritt Bescheid.

Sidr

Facebook hat in der mobilen Variante ein ziemlich gutes Menü entwickelt, das sich außerhalb der Website befindet. Nach Interaktion kommt es zum Vorschein, indem die eigentliche Website auf der anderen Seite aus dem sichtbaren Bereich geschoben wird. Dieses Menü könnt ihr jetzt ähnlich mit Sidr umsetzen.

Wenn ihr mehr über Responsive Webdesign im Detail erfahren wollt, dann seht eucht die „Responsive-Webdesign“-Serie hier auf t3n.de an.

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Sven am 09.11.2013 (17:00 Uhr)

    Eine super Sammlung, Speziell Naver werde ich mir mal genauer anschauen. Bin schon lange auf der Such nach einer neuen Navigation für meinen Blog. Schöne Auflistung, danke dafür.

    Gruß Sven

    Antworten Teilen
  2. von RollingWebdesign am 10.11.2013 (09:37 Uhr)

    Schöne Liste. Ich würde Owl Carousel hinzufügen.

    Antworten Teilen
  3. von Jens am 10.11.2013 (09:47 Uhr)

    Sehr schöne Sammlund, danke dafür!
    Solche Sammlungen decken immer wieder Perlen pfiffiger Entwickler auf, das finde ich wichtig. Wenn man selber sucht, finde man sicher euin past Dinge, aber alkes brstimmt nicht.

    Gruß,
    Jens

    Antworten Teilen
  4. von Papa Bodehase am 10.11.2013 (13:47 Uhr)

    Da sind schöne Plugins dabei.
    Gut gemacht!

    Antworten Teilen
  5. von Finn Hillebrandt am 10.11.2013 (16:35 Uhr)

    Tolle Sammlung! Einige Plugins kann ich gut gebrauchen ;)

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
FocusPoint: jQuery-Plugin für fokales Cropping
FocusPoint: jQuery-Plugin für fokales Cropping

Der Einsatz von Bildern im Responsive Webdesign bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das … » weiterlesen

Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt

ContentBuilderJS ist ein jQuery-Plugin, mit dem sich Webseiten aus vorgefertigten Blöcken einfach zusammenklicken lassen. Die Inhalte der jeweiligen Blöcke lassen sich anschließend direkt Inline … » weiterlesen

Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code
Hilfe für Einsteiger: JavaScript-Guides und Best-Practice-Code

Du bist Anfänger und setzt keine oder kaum Coding-Conventions ein? Dann solltest du diesen Artikel lesen, denn darin lest ihr wie ihr die Qualität eures JavaScript-Codes verbessern könnt: mit … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen