Responsive Webdesign wird wegen der zunehmenden Verbreitung von Smartphones und Tablet-Computern immer wichtiger. Dabei ist es natürlich auch wichtig, dass sich die einzelnen Komponenten der Website an die aktuelle Auflösung anpassen.

Die meisten Websites haben sich von Flash in den letzten Jahren verabschiedet und viele Flash-Animationen wurden durch jQuery-Slider ersetzt. Flash hatte aber zumindest den Vorteil, dass es beliebig skaliert werden kann, die meisten JavaScript Slider und Slideshows bieten diese Möglichkeit nicht. Hier nun eine Auswahl an guten jQuery responsive Plugins und Scripts (die Reihenfolge stellt hierbei keine Wertung dar):

Responsive Slider jQuery Plugins

1) Unoslider:

2) Flexslider:

3) Elastislide:

4) Seamless Responsive Photo Grid

Responsive Lightbox

5) fancybox 2:

Meine derzeitig favorisierte Lösung ist das jQuery Plugin BackStretch.

Das Plugin skaliert ein beliebiges Bild auf die Größe der gesamten Hintergrundfläche und passt es automatisch auf die Fenstergröße an, sobald sich diese ändert.  Die Bilder werden erst geholt, nachdem die gesamte Seite geladen wurde. Somit müssen Seitenbesucher nicht warten bis die oft sehr großen Bilder fertig geladen sind.

jQuery-Slider werden häufig für die dynamische Darstellung von Beiträgen, Produkten und Galerien verwendet und vor allem auf modernen Webseiten eingesetzt. Früher wurde diese Art der Darstellung meist mit Flash umgesetzt. Da JavaScript und Html jedoch bei weitem suchmaschinenfreundlicher sind, haben sich die zahlreichen JavaScript Frameworks und allem voran jQuery inzwischen durchgesetzt.

Schön ist auch, dass es für fast jedes Vorhaben bereits fertige jQuery Plugins gibt. Eine schöne Zusammenstellung verschiedenster jQuery Slider ist nun auf antsmagazine.com zu finden. 50 der besten Slider wurden hier in einer Übersicht zusammengestellt:

http://www.antsmagazine.com/50-jquery-sliders-you-will-love-to-use

Rotating Image Slider With Jquery [DEMO]

Beispiel jQFullscreen Gallery With Thumnail Flip [DEMO]

Beispiel jQuery-Slider ImageFlow [DEMO]:

URL: http://www.antsmagazine.com/50-jquery-sliders-you-will-love-to-use

html2canvas ist ein eindrucksvolles Skript, das Screenshots von Webseiten (oder Teile davon) erzeugen kann und das clientseitig, nur mit Hilfe von JavaScript.

html2canvas

Wie  jeder Browser rendert das Script Seiten unterschiedlich und das Ergebnis ist manchmal nicht ganz perfekt. Die Bibliothek ist noch experimentell, da es noch verschiedene CSS3 Eigenschaften gibt, die nicht unterstützt werden. Allerdings funktioniert es dennoch recht gut, wovon man sich auf der Demoseite überzeugen kann.

Voraussetzungen: jQuery
Website: http://html2canvas.hertzen.com/
Demo: http://html2canvas.hertzen.com/screenshots.html

The Wall ist ein MooTools Plugin zur Erstellung eines Inhaltsbereichs, der vertikal sowie horizontal verschoben werden kann.

Das Plugin bietet eine hohe Flexibilität und kann auf jedes Element angewandt werden, egal ob es sich um ein <div> oder ein <image> Tag handelt.

Die Galerie, welche erzeugt wird, kann durch Ziehen in die gewünschten Richtung verschoben werden. Übergänge und die Geschwindigkeit können individuell angepasst werden. Eine Callback-Funktion nach jeder Benutzer Interaktion hilft dabei, das Plugin noch weiter anzupassen.

Außerdem stehen noch weitere andere Funktionen bereit, wie z. B. das “spiegelverkehrte Ziehen”, automatische Slideshow etc.

Voraussetzungen: MooTools 1.3.2 +
Kompatibilität: Alle gängigen Browsern
Webseite: http://wall.plasm.it/
Demo: http://wall.plasm.it/examples
Download: https://github.com/plasm/the-wall

Die drei wichtigsten Prüfungen (Eingabe erforderlich (required), numerische Eingaben (numeric) und die Überprüfung der Email-Adresse auf korrektes Format (email-format)) sind vordefiniert und es können Weitere per Regular Expressions hinzugefügt werden.

Mit dem integrierten “Invalid Handler” werden invalide Felder direkt angesprochen und die Verhaltensweise kann schnell geändert und verbessert werden.

Website: http://validval.frebsite.nl

Website: http://candrews.net/sandbox/spryMap/

<input onclick="this.type='hidden';" name="blabla" type="button" value="blabla" />

Ein Workaround ist es, das Feld per JavaScript zu entfernen und mit den gleichen Attributen neu zu erstellen. Hierzu kann man eine Funktion nach folgendem Schema verwenden:

function changeInputType(oldObject, Type) {
  var newObject = document.createElement('input');
  newObject.type = Type;
  if(oldObject.size) newObject.size = oldObject.size;
  if(oldObject.value) newObject.value = oldObject.value;
  if(oldObject.name) newObject.name = oldObject.name;
  if(oldObject.id) newObject.id = oldObject.id;
  if(oldObject.className) newObject.className = oldObject.className;
  oldObject.parentNode.replaceChild(newObject,oldObject);
  return newObject;
}

In unserem Beispiel von oben würde das dann so funktionieren:

<input onclick="changeInputType(this,'hidden');" name="blabla" type="button" value="blabla" />

CSS-Dateien verlinken

Per Hotlink lädt man die CSS-Dateien direkt von Google.com.
Anhand der URL-Parameter werden die Schriftarten sowie die Variationen dieser Schriftarten bestimmt.

Einfaches Beispiel:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">

Etwas aufwändiger:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=
Inconsolata:italic,bolditalic|Droid+Sans">

CSS

Im eigenen CSS-File können diese Schriftarten für jedes beliebige Element festgelegt werden:

body { font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; }

FontLoader

Anstelle auf das CSS bei Google.com zu verlinken, kann der JavaScript WebFont Loader verwendet werden. Dies hat Vorteile wie z.B. die Kontrolle über das “Flash of Unstyled Text” (FOUT), aber auch Nachteile, wie die Tatsache, dass die Schriftarten bei deaktiviertem JavaScript nicht geladen werden.

<script type="text/javascript">// <![CDATA[
WebFont.load({
google: {
families: ['Cantarell']
}
});
// ]]></script>

Klassennamen wie .wf-loading werden auf die entsprechenden HTML-Elemente angewendet.
Wenn die Schriftarten geladen werden, können diese Klassennamen verwendet werden, um den Text zu verstecken/auszublenden. Dann wenn sie fertig geladen sind, müssen sie wieder sichtbar gemacht werden. So funktioniert FOUT.

Websites: http://paulirish.com/2010/details-on-the-new-google-webfont-api/
http://code.google.com/webfonts

jQuery.popeye ist ein Bildergalerie-Script basierend auf der JavaScript-Bibliothek jQuery. Hiermit kann platzsparend eine ganze Sammlung von Bildern angezeigt werden. Außerdem können Bilder vergrößert werden, ohne das Layout der Seite zu verlassen.

Es wurde als Alternative zu der oft gesehenen JavaScript Image Lightbox entworfen. Alle Lightbox Versionen benutzen jedoch ein modales Fenster um die großen Bilder anzuzeigen, sodass sie die Interaktion auf der Website stören. jQuery.popeye nimmt einen anderen Ansatz: Es erlaubt alle Thumbnails sowie die großen Bilder an einer festen Position zu durchsuchen und  ermöglicht so ein weniger störendes Benutzererlebnis als bei modalen Fenstern.

Demo: http://dev.herr-schuessler.de/jquery/popeye/demo.html