florian caspar

Für moderne Websites ist Javascript bereits heute ein muss. Mit dem richtigen Einsatz von Javascript lässt sich die User Experience „UX“ für Websites optimieren und das Look&Feel des Internetauftritts für den User verbessern.

Die Einbindung und Darstellung des Inhalts gilt als einer der wichtigsten und einflussreichsten Faktoren für ein gutes Webdesign. Die Einbindung des Contents in ein stylisches Layout ist die Basis jeder Website und sollte bereits in der Web-Konzeption eine wichtige Rolle spielen.

Smashing Magazine stellt 8 Javascript Techniken und Lösungen vor, mit denen der Content in ein funktionelles Layout gebracht werden kann.

Hierzu gehört der Einsatz von Sliders, Navigation mit Reitern, stylische Layers für Registrierung und Anmeldung, Rollover Elemente wie z.B. Tooltips, Progessive Layouts mit dem Einsatz des Scroll-To Plugin von JQuery, die Anwendung von Grids, Arccordion Menus und Drop-Down Menus.

Dabei werden jeweils Referenzbeispiele aufgezeigt und eine Auswahl von Scripts aufgelistet.

Auch Webdesignerwall hat einige interessante JavaScript Frameworks Effekte kategorisiert und auf die entsprechende Script-Demo-Sites verlinkt.

Der Einsatz von JavaScript wird durch Open Source Frameworks erleichtert, die es einem ermöglichen Funktionen nicht jedes Mal komplett neu programmieren zu müssen.

Anbei die bekanntesten Javascript Frameworks:

jQuery
MooTools
Prototype
Script.aculo.us
YUI

Pattern Tap bietet auf deren Website eine Übersicht von interessanten Web-Design Patterns und Wireframes an. Die Übersicht ist momentan in 45 Kategorien unterteilt (z.B. Navigation, Suche, Login usw.) und zeigt aktuelle Praxis-Beispiele von ausgewählten Internet-Seiten.

Für Webdesigner ist diese Seite mit Sicherheit sehr hilfreich, um sich Design-Vorschläge oder Navigations-Interkationen einzuholen und sich für ihr aktuelles Projekt
durch die Patterns insperieren zu lassen. Zudem läßt sich auch immer wieder schnell nachschauen wie andere Designer Teilbereiche der Website gelöst haben.

Das neue Tutorial von Web-Kreation zeigt ein Anwendungsbeispiel, wie sich mit Mootools ein Login-Formular mit Slide-Funktion (Anzeigen und Verstecken) erzeugen lässt. Das Tutorial ist sehr gut und verständlich erklärt. Ein weiteres Tutorial zeigt auch, wie diese Slide-Login-Funktion direkt in WordPress integriert und umgesetzt wird.

Demo: Slide Login Panel

Ein interessantes Tutorial zur Umsetzung eines beweglichen Sliders mit horizontaler Scroll-Funktion stellt woork.blogspot.com zur Verfügung. In diesem Beispiel wird das JavaScript-Framework Mootools verwendet.

In einem weitern Tutorial von cssglobe.com wird ein einfacher Image oder Content Slider mit einem jQuery Plugin umgesetzt.

Für den bereits bekannten Coda Slider gibt es mittlerweile ein  Drupal-Modul welches sehr gut funktioniert.

Stehpen Bau hat für die schnelle Entwicklung eines interaktiven Web-Protoypes ein Fluid System erschaffen.  Dabei baute eine er Bibliothek mit den herkömmlichen verwendeten HTML-Elementen und kombinierte diese mit CSS für entsprechende Typo und Layouts.

Letztendlich kreierte er das Fluid 960 Grid System Template (960 Pixel fixed mit 12-Splaten, 12-Spalten fluid und 16-Spalten fluid) welches auf der Arbeit von Nathan Smith und seinem 960 Grid System basiert. Die Effekte des interaktiven Grids basieren dabei auf der JavaScript Bibliothek von Mootools.

Schicke s3Slider jQuery Slideshow von JonDesign´s. Hierzu wird nur das jQuery Plugin und das erstellte Script benötigt. Das Script ist linzensiert für Crative Commons Attribution 2.5. Somit kann es für alle Projekte (auch kommerzielle) angewendet werden. Das Plugin wurde an Firefox, Opera, Internet Explorer und Google Chrome getestet.

Auf der Website von AVA7 Patterns werden Hintergrundbilder für die Website zum freien Download angeboten. Über 150 design Patterns werden bisweilen zur Verfügung gestellt. Jeweils vier Hintergrundbilder werden dabei immer als Vorschau angezeigt. Wenn man im Firefox Browser (nicht IE)  auf “Preview” klickt, werden die Vorschaubilder gleich im Hintergrund angezeigt.