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:

table.mit_runden_ecken tr:first-child td:first-child { border-top-left-radius: 15px; }
table.mit_runden_ecken tr:first-child td:last-child { border-top-right-radius: 15px; }
table.mit_runden_ecken tr:last-child td:first-child { border-bottom-left-radius: 15px; }
table.mit_runden_ecken tr:last-child td:last-child { border-bottom-right-radius: 15px; }

Eine noch besser ausgearbeitete Lösung findet man bei Red Team Design:

Zur DEMO-Website

Die Icons sind in Kategorien unterteilt und übersichtlich geordnet. Besonders praktisch ist, dass man die gewünschten Farbwerte auf der Website definieren kann und die Icons werden dann individuell generiert.

Website: http://mapicons.nicolasmollet.com/

plugin.tt_news.displayLatest.image.noImage_stdWrap {
    cObject = IMAGE
    cObject {
        file = fileadmin/img/news_ohne_Bild.gif
        wrap =
    }
}

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

Mobilizer ist eine freie Adobe AIR Applikation, welche eine Vorschau von sämtlichen URL-Adressen oder lokalen Dateien (HTML, Bilder oder Flash) in verschiedenen mobilen Endgeräten darstellt.

Aktuell werden iPhone 4, Palm Pre, HTC Evo sowie Blackberry Storm unterstützt. In Zukunft sollen weitere Geräte hinzugefügt werden.

Ein weiteres nettes Feature ist die Exportfunktion der Vorschaubilder als PNG-Datei, was sehr praktisch ist.

Voraussetzungen: Adobe AIR
Webseite: http://www.springbox.com/mobilizer/

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

Es gibt viele neue und aufregende Sachen die mit HTML5 und CSS3 bei der Website-Entwicklung nun möglich sind.  Aber, wenn es um die Gestaltung von HTML-E-Mails geht, braucht man immer noch Tabellen und Hacks um die Kompatibilität mit verschiedenen E-Mail-Clients zu verbesser.  HTML E-Mail-Boilerplate ist ein Projekt, das hilft die zahlreichen Rendering-Probleme mit den gängigsten E-Mail-Clients zu umgehen.  Der Code ist sehr gut dokumentiert und das Download-Paket enthält eine nicht dokumentierte Version. Der Code hat mir sehr gut geholfen, da es ansonsten sehr viel Zeit kosten kann HTML Newsletter für alle gängigen E-Mail Programme zu optimieren.

Website: http://htmlemailboilerplate.com/
Download: https://github.com/seanpowell/Email-Boilerplate

Als Webdesigner benötigt man für Layoutzwecke oft nicht nur Blindtext, sondern genau so oft Bilder, die man als Platzhalter einsetzen kann ohne Abmahnungen oder sonstige Klagen der Urheber fürchten zu müssen.

Lorempixum ist ein Online-Tool welches genau das bietet: Bildmaterial in den gewünschten Größen, schwarz/weiß oder farbig und nach vordefinierten Kategorien unterteilt. Diese Kategorien sind zur Zeit: abstract, animals, city, food, nightlife, fashion, people, nature, sports, technics, transport.

Alles in allem eine coole Idee und ein interessanter Service.

Website: http://lorempixum.com/

Manchmal benötigt man eine Schrift in einem anderen Format, um sie zum Beispiel auf verschiedenen Betriebssystemen einsetzen zu können oder wenn bestimmte Programme nur mit TrueType Fonts funktionieren.
FreeFontConverter ist eine Webanwendung, mit der man fast alle Schriftarten in ein anderes Format konvertieren kann.

Neben den üblichen Formaten TrueType (. Ttf), OpenType (. OFT) und PostScript (. Ps), unterstützt der Converter auch .Svg .Bin. .Dfont und viele andere.

Ein sehr nützliches Tool das man immer wieder mal brauchen kann.

Website: http://www.freefontconverter.com