Aus meinen eigenen Erfahrungen ist eine der Problematiken bei der Verwendung CSS3 beispielsweise, dass die CSS3-Eigenschaften in der CSS-Validierung von W3C immer noch als Fehlermeldungen ausgegeben werden.

Außerdem ist es meiner Ansicht nach oftmals schwierig für Webdesigner und Entwickler dem eigenen Kunden zu vermitteln, warum eine Webseite nicht in jedem Browser exakt gleich aussehen muss. Denn gerade aus dem Print-Bereich ist man es natürlich gewohnt, mit millimetergenaue Maßen zu arbeiten. Da ist es für Webdesigner oftmals schwierig zu vermitteln, warum das Design im Internet Explorer 7 auf einmal keine abgerundeten Ecken mehr haben sollte.

Kunden von den neuen Möglichkeiten überzeugen

Dennoch denke ich persönlich, dass es ganz wichtig ist mit den neuen Möglichkeiten von CSS3 und HTML5 bereits heute schon zu arbeiten und auch die eigenen Kunden von diesen tollen, neuen Optionen zu überzeugen.

Denn schließlich kann man nur so die Entwicklung voran treiben und sich auch selbst neue Techniken beibringen. Eine Möglichkeit ist es z.B. die eigene Webseite mit HTML5 und CSS3 »Schmankerln« auszustatten, um so die eigenen Kunden besser von den Vorteilen der neuen Features überzeugen zu können.

Die Unterstützung alter Browser-Versionen

Inwieweit man alte Browser weiterhin unterstützt muss, hängt sicherlich immer stark vom jeweiligen Projekt, der Zielgruppe der Webseite und auch vom Budget für das Webseiten-Projekt ab. Vor allem der Internet Explorer lässt einen da immer wieder ganz schön ins Schwitzen kommen.

Aus meiner Erfahrung kann der IE6 inzwischen aber zum Glück meist vernachlässigt werden (immerhin ist dieser Browser inzwischen immerhin 10 Jahre alt, siehe Internet Explorer 6 Countdown Kampagne). Für IE7 und auch IE8 halte ich eine vereinfachte aber funktionierende Webseiten-Ansicht in den meisten Fällen für ausreichend.

Browser-Tests sind ein hilfreiches und wichtiges Tool, um sich zu vergewissern, wie die Webseite in den verschiedenen Browsern dargestellt wird. Im Artikel »Webseiten Cross-Browsertests: Ein kleiner Überblick praktischer Tools und Tipps« findest du nützliche Anregungen zu diesem Thema.

Mögliche Fallback-Lösungen

Für die Unterstützung älterer Browser-Versionen gibt es außerdem sehr nützliche Fallback-Lösungen, wie z.B. die JavaScripts Modernizr (für HTML5 und CSS3 Fallback-Lösungen), html5shim (HTML Fallback für IE) oder respond.js (IE6-8 Fallback für CSS3 Media Queries). Alternativ kannst du auch HTML5 Boilerplate als Projekt-Grundlage für deine Webseiten-Entwicklung nutzen. HTML5 Boilerplate bietet quasi ein Komplettpaket an, auf dessen Grundlage du dann deine Webseiten-Programmierung mit MHTL5 und CSS3 starten kannst.

Mit diesen Optionen ausgestattet, könnte man eigentlich loslegen und die tollen Möglichkeiten von HTML5 und CSS3 für neue Webseitenprojekte nutzen. Oder was denkst du?

Wie ist deine Meinung?

Wie sind deine Erfahrungen bei der Nutzung von HTML5 und CSS3? Sind Kunden deiner Ansicht nach bereits offen für die Verwendung der neuen Features? Oder denkst du, man sollte mit dem Einsatz von HTML5 und CSS3 besser noch warten, bis alle Browser die neuen Techniken gleichermaßen unterstützen?

Über deine Einschätzung und dein Feedback zum Thema freue ich mich sehr!

Die Photoswipe Bildergalerie mit Vor- Zurück-, Play- und Galerie-Schließen Button.

1. Photoswipe downloaden und Galeriebilder vorbereiten

Auf der Webseite photoswipe.com von Codecomputerlove kannst du dir den Code für die kostenlose Galerie (MIT-license) herunterladen. Auf der Webseite findest du auch verschiedene Live-Demos von Photoswipe.

Im Ordner »examples« findest du verschiedene Beispiele der Galerie, z.B. default, jQuery oder jQuery-mobile. In der readme-Textdatei unter »Getting Started« kannst du genau nachlesen, welches Beispiel als Vorlage für deine Verwendung am besten geeignet ist. Ich habe mich für das jQuery-Beispiel entschieden, um die Galerie z.B. auch im Internet Explorer nutzen zu können.

Die Galeriebilder werden in zwei Varianten benötigt. Einmal in der vollen Größe und ein zweites mal als Thumbnails (Größe 150x150px). Die Thumbnails speicherst du dir in einem Ordner namens »thumb« und die großen Bilder in einem Ordner namens »full« ab.

2. Die JavaScript-Dateien einbinden

Jetzt musst du alle benötigten Scripte für Photoswipe innerhalb des head-tags (bei WordPress in header.php Datei) einbinden.

Du benötigst die Dateien klass.min.js und code.photoswipe.jquery-2.0.3.min.js (beide findest du in Download-Ordner von Photoswipe). Am besten speicherst du diese Dateien in einem eigenen Ordner namens »js« ab.

Innerhalb des head-tags fügst du jetzt folgenden Code ein:

<script type="text/javascript" src="deinPfad/js/klass.min.js"></script>
<script type="text/javascript" src="deinPfad/js/code.photoswipe.jquery-2.0.3.min.js"></script>

»deinPfad« ersetzt du dabei jeweils mit dem Pfad zu deinem Dateien-Ordner. Wenn du WordPress verwendest kannst du am besten < ?php echo get_template_directory_uri(); ?> einsetzen, also:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/klass.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/code.photoswipe.jquery-2.0.3.min.js"></script>

Jetzt musst du darunter noch folgenden Code integrieren, um das Script für deine Bildergalerie nutzen zu können:

<script type="text/javascript">
//jQuery version
$(document).ready(function(){

	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: true});

});
</script>

Weitere Konfiguartions-Möglichkeiten wie z.B. fadeinSpeed, autostartSlideshow oder allowUserZoom findest du in der Dokumentation auf der Photoswipe-Seite.

Falls du jQuery nicht bereits aufrufst, kannst du die Google Library API nutzen und jQuery von dort aufrufen (jQuery muss aber unbedingt vor den Scripts für Photoswipe geladen werden):

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js?ver=1.6.2'></script>

3. CSS einbinden

Im nächsten Schritt musst du noch die benötigte CSS-Datei photoswipe.css (im Photoswipe Download-Ordner vorbereitet) für Photoswipe innerhalb des head-tags einbinden (am besten direkt unterhalb deines Hauptstylesheets).

<link href="deinPfad/photoswipe.css" type="text/css" rel="stylesheet" />

Um alle für Photoswipe benötigten Images in einem »images«-Ordner aufgeräumt unterbringen zu können, musst du in der photoswipe.css Datei noch bei allen background-Images den Ordner images/ hinzufügen, also z.B.:

background: url(images/loader.gif) no-repeat center center;

Für das Styling der Galerie in der Standard-Ansicht musst du außerdem noch die folgenden Styles hinzufügen:

/* Gallery styling */
.gallery { list-style: none; padding: 0; margin: 0; }
.gallery:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.gallery li { list-style: none !important; float: left; width: 33.33333333%; }
.gallery li a { display: block; margin: 5px; border: 1px solid #3c3c3c; }
.gallery li img { display: block; width: 100%; height: auto; }

Diese zusätzlichen Styles kannst du z.B. ganz unten in der photoswipe.css Datei ergänzen oder auch direkt in dein Haupt-Stylesheet einbinden.

4. Alle benötigten Images einbinden

Als letzten Schritt für die Integration von Photoswipe musst du jetzt nur noch alle benötigten Images in deinen »images«-Ordner einfügen. Du benötigst die im Photoswipe-Ordner zur Verfügung gestellten Images loader.gif, icons.png und icons@2x.png sowie deine in Schritt 1 vorbereiteten Bilderordner »full« und »thumb«.

5. Der HTML-Code für die Galerie

Jetzt kannst du, z.B. in einem Artikel deines Blogs den HTML-Code für eine Bildergalerie einfügen. Hast du deine Bilder in der Reihenfolge 001.jpg, 002.jpg, 003.jpg usw. benannt (die Bilder in der vollen Größe werden übrigens gleich benannt wie die Thumbnails) lautet der HTML-Code:

<ul id="Gallery">
	<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
	<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
	<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
	<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
	<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
	<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

Über das alt-Attribut kannst du außerdem noch Titel für deine Bilder in der Galerie bestimmen. Wenn du deine Galerie jetzt im Desktop-Browser anschaust, öffnet sich die Photoswipe-Galerie beim Anklicken eines der Thumbnail-Vorschaubilder.

Die Photoswipe-Bildergalerie in einem WordPress-Artikel integriert (Desktop-Broswer Ansicht).

Photoswipe ist responsive, so dass die Galeriebilder auch für ein kleines Smartphone-Screen angepasst sind.

Auf einem Touchscreen kannst du die Galeriebilder jetzt bequem mit Hilfe der Swipe-Funktion anschauen.

Die Swipe-Funktion für Touchscreens.

Hast du Fragen, Optimierungsvorschläge oder Probleme bei der Integration von Photoswipe? Über dein Feedback freue ich mich sehr!

Das MediaElement.js WordPress-Plugin

Das WordPress-Plugin MediaElement.js ist eine praktische Option, um Audio- und auch Video-Dateien in einem WordPress-Artikel oder auf einer Seite anzeigen zu können und dabei die modernen HTML5 Elemente <audio> und <video> zu nutzen. Für ältere Browser kommen dann als Fallback-Lösung individualisierte Flash und Silverlight-Plugins zum Einsatz, die an die Funktion der modernen HTML5 MediaElement-Payer angeglichen sind.

Der Video- und Audio-Player von MediaElement.js in der Standard-Ansicht.

Auf der Webseite MediaElement.js kannst du die Player in einer Live-Demo testen.

Mit Hilfe der WordPress-Plugin Lösung von MediaElements.js kannst du dann also deine Dateien in den Formaten MP3, MP4, OGG, WebM, WMV, WAV und WMA über die Media-Uploadfunktion in WordPress hochladen, die URL deiner Datei kopieren und diese dann mit Hilfe der Shortcodes [audio] oder [video] in eine Seite oder einen Artikel deines Blogs integrieren.

Eine Audio-Datei mit Hilfe der Media-Uploadfunktion in WordPress hochladen.

Die Shortcodes

Diese Standard-Shortcodes für Audio und Video kannst du jetzt in einen Artikel oder eine Seite einfügen:

[video src="http://meinedomain.de/videodatei.mp4"]

Zusätzlich stehen dir noch weitere Shortcode-Optionen zur Verfügung: Mit volume=»false« kannst du z.B. den Volumenslider des Players deaktiveren, mit duration=»false« die Zeitangabe ausschalten, mit fullscreen=»false« die Vollbild-Option deaktiveren, mit autoplay=»true« deine Datei automatisch abspielen lassen usw.

Eine komplette Auflistung aller Shortcode-Optionen findest du in der MediaElement.js Plugin-Beschreibung bei WordPress.org.

Die Plugin-Einstellungen

In den Einstellungen des Plugins in deinem WordPress-Adminbereich kannst du außerdem noch die Standard-Maße für Videos und Standard-Dateiformate für Audio- und Video-Dateien festlegen.

Plugin-Einstellungen des MediaElement.js WordPress-Plugins.

Neben der bereits für WordPress vorbereiteten Plugin-Lösung kannst du das JavaScript-Element natürlich auch selbst auf einer Webseite integrieren. Auf der Webseite MediaElementjs.com findest du hierfür alle wichtigen Infos.

Weitere HTML5 Audio- und Video-Player

Natürlich gibt es nicht nur die MediaElement.js Lösung. Eine Übersicht verschiedene HTML5 Player und ihrer Funktionen findest du z.B. auf der Seite »HTML5 Video player comparison«.

Hier werden 20 Player nach den Kriterien Lizenz, JavaScript Library, Flash Fallback, iOS, FullScreen, Keyboard, Subtitles, leicht zu integrieren und leicht zu stylen in einer übersichtlichen Liste verglichen.

Ein weiterer HTML5 Audio und Video Player mit WordPress-Plugin Lösung ist außerdem der jPlayer. Die WordPress-Plugin Lösung für den jPlayer MP3-jPlayer bietet beispielsweise jede Menge Einstellungsmöglichkeiten und ein Sidebar-Widget an. Auch das ebenfalls beliebte Haiku minimalist audio player-Plugin baisiert auf dem jPlayer als Lösung.

Hintergrund-Infos zum HTML5-Tag audio

Ein sehr hilfreicher Artikel zum Thema HTML5 mit Hintergrund-Infos zu den Möglichkeiten des HTML5-Tags <audio> ist »Native Audio in the browser« bei HTML5 Doctor.

Kennst du weitere Artikel, Plugin-Lösungen oder Tipps, um einen modernen Audio- oder Video-Player in WordPress zu integrieren? Über deine Erfahrungen, dein Feedback und weitere Tipps freue ich mich sehr!

1. So funktioniert Modernizr

Um Modernizr verwenden zu können, musst du dir als erstes das aktuelle Script (derzeit 1.6, letztes Update am 25.10.2010) auf der Webseite von Modernizr herunterladen.

Am besten du sortierst das Script modernizr-1.6.min.js in einen extra Ordner (z.B. mit dem Namen js) ein. Dann lädst du diesen Ordner auf deinen Serverplatz hoch. Innerhalb des head-Tags deiner Webseite musst du jetzt noch das Script aufrufen. Dazu fügst du folgenden Code-Schnipsel innerhalb deines head-Tags ein (vergiss dabei nicht den Pfad auf deinen eigene Dateipfad anzupassen):

<script src="/js/modernizr-1.6.min.js"></script>

Jetzt musst dem html-Tag deiner Webseite noch die CSS-Klasse »no-js« geben:

<html class="no-js">

Diese no-js CSS-Klasse wird dann mit Hilfe des Scripts automatisch in die CSS-Klasse js geändert. Außerdem prüft das Script, welche HTML5 und CSS3 Features unterstützt, bzw. nicht unterstützt werden. Die Auswertung diese Browser-Überprüfung durch Modernizr wird dann in Form von CSS-Klassen im html-Tag angegeben. Hier ein Beispiel:

<html class="js canvas canvastext no-geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity cssanimations no-csscolumns no-cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">

Eine genaue Beschreibung aller verwendeten CSS-Klassen findest du in der Modernizr-Dokumentation. Hier kannst du dir auch jeweils ein Code-Beispiel für das jeweilige Feature anschauen.

Die Beschreibung zur Verwendung der CSS3-Eigenschaft box-shadow.

Entsprechend dieser CSS-Klassen kannst du jetzt dein Stylesheet anlegen. Möchtest du also einen box-shadow verwenden, falls der jeweilige Browser diese Eigenschaft unterstützt, kannst du deine Styles mit der CSS-Klasse .boxshadow angeben. In der Standard-Ansicht kannst du dem Div dann stattdessen einen einfachen Rand mit Hilfe der CSS-Eigenschaft border geben. Hier ein Code-Beispiel:

div.box {
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
}
.boxshadow div.box {
   border: none;
   box-shadow: #666 1px 1px 1px;
   -moz-box-shadow: #666 1px 1px 1px;
   -webkit-box-shadow: #666 1px 1px 1px;
}

Wie du siehst kannst du also mit Hilfe von Modernizr jede Menge HTML5 und CSS3 Features nutzen, und dann in deinem Stylesheet definieren, wie sich die Webseiten-Elemente verhalten sollen, falls ein Browser die Features noch nicht unterstützt.

2. HTML5 Elemente im Internet Explorer

Modernizr ermöglicht dir auch verschiedene HTML5-Elemente wie <section>, <header>, <aside> oder <video> zu nutzen. Diese Elemente werden zwar nicht vom Internet Explorer 6-8 unterstützt, du kannst die Elemente aber nutzen und mit CSS stylen.

3. Die Modernizr-Library nach deinen Bedürfnissen anpassen

Falls du genau weisst, welche HTML5 und CSS3-Elemente du für dein Projekt nutzen möchtest, kannst du Modernizr jetzt auch ganz deinen Bedürfnissen anpassen. Derzeit allerdings nur in der Modernizr 2 Beta-Version. Das hat den Vorteil, dass du die Größe des Modernizr-Scripts verringern kannst.

Mit einem Häkchen kannst du alle Elemente selbst markieren, die du für dein Webseiten-Projekt benötigst.

4. Fazit

Das von Paul Irish und Faruk Ateş Modernizr-Projekt ist natürlich nur eine vorübergehende Lösung. Doch es ermöglicht, moderne Webelemente schon jetzt einsetzen zu können, auch wenn die Unterstützung aller Browser heute noch nicht gegeben ist. So kannst du deine Webseiten mit modernen Elementen ausstatten und für ältere Browser dennoch eine akzeptable Lösung finden. Dieses Prinzip der Webentwicklung, wird auch als Progressive Enhancements bezeichnet.

Hast du bereits eine Webseite mit Hilfe von Modernizr umgesetzt? Was hältst du von der JavaScript-Library und welche Vor- oder Nachteile siehst du darin, HTML5 und CSS3 Features heute schon zu verwenden? Über dein Feedback freue ich mich sehr!

1. So funktioniert Lettering.js

Das jQuery-Plugin fügt automatisch span-Tags mit unterschiedlichen CSS-Klassen für einzelne Buchstaben (.char1, .char2, .char3), Wörter (.word1, .word2, .word3) und Absätze (.line1, .line2, .line3) ein. So kannst du den einzelnen Elemente dann im Stylesheet unterschiedliche CSS-Eigenschaften (z.B. color, font-family, font-size) geben.

Um Lettering.js zu nutzen, musst du als erstes die jQuery-Library im head-Tags deines Codes aufrufen. Dies kannst du z.B. über die Google Libraries API tun (so musst du jQuery nicht auf deinen eigenen Server hochladen).

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

Wenn du eine WordPress-Seite hast, kannst du die hilfreiche Beschreibung von Frank Bültge nutzen, um jQuery über die functions.php Datei deines Themes aufzurufen.

Dann fügst du, am besten direkt darunter aber auf alle Fälle ebenfalls innerhalb des head-Tags den Code für das Lettering jQuery-Plugin ein.

<script type="text/javascript" src="deinpfad/jquery.lettering.min.js"></script>

Die Datei jquery.lettering.js findest du im Download-Ordner des Plugins. Den Link zum Download bei Github findest du ganz oben auf der Lettering.js-Webseite.

Es gibt drei verschiedene Möglichkeiten, das Lettering-Plugin einzusetzen.

1.1. Einzelne Buchstaben stylen

Zum einen kannst du span-Tags mit den durch nummerierten CSS-Klassen .char1, .char2, .char3 usw. einfügen. Dieser Stil eignet sich z.B. für ein speziell gestyltes Webseiten-Logo.

Ist der HTML-Code für dein Webseiten-Logo:

<h1 class="logo">Rainbow</h1>

Fügst du folgenden JavaSript-Code unterhalb des jQuery und lettering.js Scripts innerhalb des head-Tags:

<script>
$(document).ready(function() {
$(".logo").lettering();
});
</script>

Alle Buchstaben werden so automatisch mit einem span-Tag und einer Klasse belegt:

<h1 class="logo">
	<span class="char1">R</span>
	<span class="char2">a</span>
	<span class="char3">i</span>
	<span class="char4">n</span>
	<span class="char5">b</span>
	<span class="char6">o</span>
	<span class="char7">w</span>
</h1>

Jetzt kannst du die CSS-Klassen mit eigenen Styles belegen:

.char1 {
	color: red;
}
.char 2 {
	color: orange;
}
usw.

1.2. Einzelne Wörter mit Lettering.js beeinflussen

Die zweite Option ist es, Lettering anzuwenden, um einzelne Wörter mit speziellen CSS-Styles anzusprechen zu können.

Das Prinzip ist das gleiche, allerdings musst du jetzt im JavaScript-Code noch das Wort word in die Klammer hinter lettering einfügen:

<script>
$(document).ready(function() {
$(".logo").lettering(word);
});
</script>

Einsatzmöglichkeiten für diese Option könnte ebenfalls ein Logo, aber auch ein Webseiten-Slogan sein.

1.3. Einzelne Absätze unterschiedlich gestalten

Die dritte Möglichkeit kannst du das Lettering jQuery-Plugin auch das individuelle Styling einzelner Text-Absätze verwenden. So kannst du spezielle Absätze (markiert mit br-Tags) eines Textes hervorheben.

Aus dem HTML-Code:

<p class="slogan">This is an amazing<br/> Revolution in Typography. <br/> The possibilities are endless: <br/> Coloring, Vertical spacing, and Kerning.</p>

wird mit Hilfe folgender JavaScript-Angabe im head-Tag:

<script>
$(document).ready(function() {
$("p.slogan").lettering(lines);
});
</script>

dieser HTML-Code:

<p class="slogan">
<span class="line1">This is an amazing</span>
<span class="line2">Revolution in Typography.</span>
<span class="line3">The possibilities are endless:</span>
<span class="line4">Coloring, Vertical spacing, and Kerning.</span>
</p>

Die einzelnen Absätze im Text kannst du jetzt also über die CSS-Klassen .line1, .line2, .line3 und .line4 individuell stylen.

Die drei Beispiele sind nur die einfachsten Möglichkeiten lettering.js zu nutzen. In der Beispiel-Datei des Download-ZIP Ordners (examples / index.html) findest du noch weitere, fortgeschrittene Optionen, wie du beispielsweise zwei Wörter und die einzelnen Buchstaben der Wörter stylen kannst. Eine ausführliche Erklärung zu lettering.js kannst du außerdem auf der Webseite des Lettering.js-Entwicklers Dave Rupert nachlesen.

2. Einsatzmöglichkeiten und Inspirationen

Seit der Veröffentlichung des Plugins im Herbst 2010 haben etliche Webdesigner das Plugin für ihre kreative und innovative Webseiten-Projekte verwendet. Um die Möglichkeiten des Plugins noch besser kennenzulernen, und Inspirationen für die Verwendung in deinen eigenen Projekten zu bekommen, habe ich einige sehr schöne Beispiele zusammen gestellt.

Atlantis World’s Fair, gestaltet von Frank Chimero

Eldorado World’s Fair, gestaltet von Naz Hamid

Sex Lettering, Typografie-Experiment mit Lettering.js von Andreas Hommel

Moon World’s Fair Webseite, gestaltet von Jason Santa Maria

Typografie auf der Webseite von Designing Monsters

Weitere schöne Inspirationen zum Umgang mit dem Plugin findest du auch in der Showcase-Galerie von Lettering.js.

3. Gibt es eine alternative Lösung zur Verwendung von JavaScript?

Das Lettering.js Plugin ist meiner Meinung nach als eine Art experimentelle Lösung zu sehen, um die Gestaltungs-Möglichkeiten von Typografie im Webdesigns voranzubringen, und so eventuell auch die Entwicklung von reinen CSS-Alternativen voran zu treiben.

Can we replace Lettering.js with CSS? I hope so. Lettering.js is a solution, but perhaps it’s not the ultimate solution.
Trent Walton, in Controlling the Web

In der Zukunft wäre sicher eine Browser-kompatible, reine CSS-Lösung optimal. Trent Walton spricht in seinem Artikel Controlling Web Typography über den Umgang mit Typografie im Web, aktuelle Entwicklungen und seine Einstellung zum Lettering.js Plugin.

Wie gefallen dir diese experimentellen Ansätze mit Typografie im Web umzugehen? Wie findest du die Lettering-Plugin Lösung, und hast du selbst schon Erfahrungen mit dem Plugin gemacht? Über dein Feedback, sowie weitere Tipps und Einsatzmöglichkeiten zum Plugin freue ich mich sehr!

1. Den jQuery-Code selbst einfügen

Allgemeine Infos und Demos für jQuery slide.Toggle kannst du auf der jQuery-Webseite nachlesen. Auf dieser Code-Vorlage aufbauend habe ich eine einfache Demo-Version erstellt, die demonstriert wie man den Code für ein Element nutzen kann, dass bei Button-Klick oben in der Webseite aufslidet.

1.1. Demo-Version 1 (auch ohne JavaScript sichtbar)

Der Slider im geschlossenen Zustand. Nur der Open/Close Button ist sichtbar.

Der Slider im offenen Zustand. Das versteckte Webseiten-Element ist jetzt sichtbar.

Hier kannst du dir die Demo des Slider-Elements und den Code live anschauen.

• Live-Demo
  Query Toggle-Slider 01

Als ersten Schritt musst du die jQuery-Bibliothek aufrufen. Das kannst du praktisch über die Google Libraries API machen.

Füge dazu folgenden Code innerhalb des head-tags deiner Datei auf:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Als nächsten Schritt fügst du deinen HTML-Code für das verstecke Element (#content) und den Öffnen / Schließen Button (a.open-close) innerhalb deines body-tags ein. Den Inhalt kannst du dann natürlich ganz nach Belieben selbst füllen.

<div id="content">
<p>Dein Inhalt kommt hier rein...</p>
</div>
<a class="open-close" href="#">Open / Close</a>

Für dein CSS kannst du jetzt folgende Styles verwenden und an dein Layout anpassen.

body {
	margin:0 auto;
	width:500px;
	font-family:Helvetica, Arial, sans-serif;
}
a.open-close {
	margin:0px;
	padding:15px;
	text-align:center;
	background:#FF9933;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	display:block;
	color:#fff;
	text-decoration:none;
}
a.open-close:hover {
	background:#FF0000;
}
#content {
	width:460px;
	margin:0px;
	background:#FFFF99;
	padding:20px;
	color:#663300;
	line-height:23px;
}

Um dein Element jetzt mit dem Toggle-Effekt sliden zu lassen, fügst du noch folgenden Code in deinen head-tag ein:

<script type="text/javascript">
$(document).ready(function(){
    	$("#content").hide();

    $("a.open-close").click(function () {
      $("#content").slideToggle("slow");
    });

});
</script>

Dieser jQuery-Code versteckt deinen Div mit der ID content (hide), und slidet den Content dann bei Klick des Anchor-Tags a.open-close auf.

Wenn du den JavaScript-Code in WordPress nutzen möchtest, ist der Artikel »WordPress und jQuery - einige Tipps« auf dem Blog von Frank Bültge sehr hilfreich. Hier erfährst du genau, wie du den benötigten jQuery-Code am besten in dein Theme integrierst.

1.2. Demo-Version 2 (ohne JavaScript unsichtbar)

Als Alternative zu dem ersten Code-Beispiel habe ich eine zweite Demo nach der Slider-Vorlage auf dem Blog Webdesigner Wall erstellt. Dieses Beispiel ist nicht sichtbar, sobald JavaScript im Browser deaktiviert ist. Dafür ist der Öffnen / Schließen Button hier animiert, und du könntest z.B. ein Hintergrund-Image mit einem Pfeil nach oben und einem nach unten im Button integrieren. Auch den zweiten Demo-Slider kannst du dir hier live anschauen.

• Live-Demo
  jQuery Toggle-Slider 02

Die jQuery-Bibliothek fügst du genau wie im ersten Beispiel mit folgendem Code über die Google Libraries in deinen head-tag ein:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Folgenden HTML-Code benötigst du für den Inhalt deines versteckten Elements:

<div id="content">
<p>Deinen Inhalt kannst du hier einfügen...</p>
</div>
<p class="button"><a href="#" class="open-close">Open / Close</a></p>

Für dein CSS-Stylesheet kannst du folgenden Code als Basis für dein eigenes Layout verwenden. Wichtig ist, dass hier der Content-Div mit display:none; unsichtbar gemacht wird.

body {
	margin:0 auto;
	width:500px;
	font-family:Helvetica, Arial, sans-serif;
}
a:focus {
	outline: none;
}
#content {
	display: none;
	color:#663300;
	line-height:23px;
}
#content p {
	padding:20px;
	background: #FFFF99;
	margin:0px;
}
.button {
	margin:0px;
}
.open-close {
	padding:15px;
	text-align:center;
	background:#FF9933;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	display:block;
	color:#fff;
	text-decoration:none;
}
.open-close:hover {
	background:#FF0000;
}
.active {
	background:#FF0000;
}

Um die Animation zu starten fügst du für diese Variante noch folgenden JavaScript-Code in den head-tag deiner Seite ein:

<script type="text/javascript">
$(document).ready(function(){

	$(".open-close").click(function(){
		$("#content").slideToggle("slow");
		$(this).toggleClass("active");
	});

});
</script>

Mit diesem Code hast du deinen versteckten Seiteninhalt animiert. Deinen Öffnen / Schließen Button kannst du dir für den Zustand des geöffneten Elements mit dem CSS-Style .active entsprechend gestalten.

2. Das WordPress-Plugin »Sliding Panel«

Für alle WordPress-Nutzer gibt es ein praktisches Plugin, mit dem der gleiche Effekt erzieht werden kann. Das Plugin Sliding Panel funktioniert mit Widgets, du kannst also beliebige Inhalte in dein Slider-Element einfügen.

Über WordPress-Widgets kannst du Inhalt in dein Slider-Element einfügen.

Um den Slider in deinem Theme zu nutzen, kannst du einfach den folgenden Template Tag in die gewünschte Theme-Datei einfügen:

<?php get_sliding_panel(); ?>

Der Plugin-Autor Justin Tadlock hat die Funktion des Panel Sliding-Plugins auch noch einmal in einem extra Blog-Artikel erklärt.

3. Tipps und Tutorials zum Weiterlesen

Jede Menge weitere Inspirationen für Ein- und Ausblenden-Effekte mit jQuery findest du auch in den folgenden Blog-Artikeln und Tutorials.

• »jQuery Tutorials for Designers« auf Webdesigner Wall
• »Simple Accordion with CSS and jQuery« von Soh Tanaka
• »Nice & Clean Sliding Panel Built With Jquery« Tutorial von Web-kreation
• »10 Transition Effects: The Art of Showing/Hiding Content« bei DevSnippets

Wie gefällt dir dieser jQuery-Effekt? Kennst du weitere praktische Einsatzmöglichkeiten oder Webseiten-Beispiele für slidenede Elemente? Über dein Feedback und deine Tipps freue ich mich sehr!

Hier kannst du dir unsere Demo-Version des Sliders anschauen

• Demo-Version
  des Carousel-Sliders

1. Den caroufredsel-Slider verwenden

Du kannst nicht nur Bilder mit Hilfe des Carousel-Sliders »caroufredsel« animieren, sondern auch ordered oder unordered Listen-Elemente, sowie Bilder mit Bildunterschriften. Außerdem kannst du deine Slider-Bilder sogar mit einem Lightbox-Effekt kombinieren. Auf dieser Demo-Seite des Plugins kannst du dir die verschiedenen Beispiele anschauen.

Eine tolle Möglichkeit der Plugin-Webseite ist, dass du dir zu jedem Beispiel den entsprechenden JavaSCript, HTML und CSS Code anschauen kannst.

Zu jedem Slider-Beispiel kannst du dir es den entsprechenden Code kopieren.

1.1. Die JavaScript-Dateien aufrufen

Nachdem du dir den Plugin-Ordner heruntergeladen hast (siehe Download-Button im Webseiten-Header), lädst du die JavaScript-Datei des Plugins (derzeit jquery.carouFredSel-2.1.3.js) am besten in einen Ordner »js« auf deinen Server hoch und rufst die Datei innerhalb des head-tags deiner Webseite auf.

<script type="text/javascript" src="deinPfad/js/jquery.carouFredSel.js"></script>

Außerdem benötigst du (falls du diese noch nicht aufrufst) die jQuery-Version. Diese musst du nicht unbedingt auf deinen Server hochladen, sondern du kannst sie einfach über die Google Libraries API aufrufen.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Möchtest du weitere JavaScript-Animationen nutzen, kannst du noch Easing einfügen. Hierzu findest du Infos auf der Installations-Seite von CarouFredSel.

1.2. Den HTML-Code erstellen

Als nächstes kannst du den HTML-Code für den Inhalt deines Sliders erstellen. Dabei orientierst du dich am besten wieder an den Code-Beispielen der Webseite. Ich habe für meine Slider-Demo eine Reihe von Bildern verwendet. Der Code sieht dann ungefähr so aus:

<div id="wrap">
<div class="image_carousel">
	<div id="foo2">
		<img src="deinPfad/slider-pics/01.jpg" alt="image01" width="170" height="170" />
		<img src="deinPfad/slider-pics/02.jpg" alt="image02" width="170" height="170" />
		<img src="deinPfad/slider-pics/03.jpg" alt="image03" width="170" height="170" />
	</div>
	<div class="clearfix"></div>
	<a class="prev" id="foo2_prev" href="#"><span>prev</span></a>
	<a class="next" id="foo2_next" href="#"><span>next</span></a>
</div>
</div>

Du kannst so viele Bilder einfügen, wie du möchtest. Über die JavaScript-Konfiguration kannst du dann später bestimmen, wie viele Bilder deines Sliders angezeigt werden sollen. Die Anchor-tags bilden den Vor- und Zurück Button des Sliders.

1.3. Das CSS-Styling deines Sliders

Jetzt fügst du noch den CSS-Code für deinen Slider ein. Am besten du kopierst wieder den Code des Beispiel-Sliders auf der Plugin-Webseite und veränderst ihn nach deinen Wünschen.

Für den Demo-Slider habe ich mir z.B. ein eigenes Hintergrund-Image, sowie ein Sprite-Image für meine Buttons erstellt. Beim Aufrufen der Images im CSS musst du wieder darauf achten, dass du den richtigen Ordner-Pfad angibst.

Die CSS-Styles für den Demo-Slider sieht so aus:

body {
	margin:0 auto;
	width:900px;
}
#wrap {
	margin: 100px 0px 0px 0px;
	width:840px;
	height:250px;
	background:url(carousel-slider/bg.jpg) 0 0 no-repeat;
}
.image_carousel {
	padding: 30px 0 15px 50px;
	position: relative;
}
.image_carousel img {
	padding: 0px;
	margin: 7px;
	display: block;
	float: left;
}
a.prev, a.next {
	background: url(carousel-slider/sprite.png) 0 0 no-repeat transparent;
	width: 45px;
	height: 170px;
	display: block;
	position: absolute;
	top: 40px;
}
a.prev {
	left: -60px;
}
a.prev:hover {
	background-position: 0 -170px;
}
a.next {
	right: -60px;
	background-position: -45px 0px;
}
a.next:hover {
	background-position: -45px -170px;
}
a.prev span, a.next span {
	display: none;
}
.clearfix {
	float: none;
	clear: both;
}

Natürlich kannst du deinen eigenen Slider ganz individuell gestalten. Wieder findest du tolle Inspirationen in den vielen schönen Beispielen auf der Plugin-Webseite.

1.4. Den Slider mit JavaScript aufrufen

Als letzten Schritt musst du noch den entsprechenden JavaScript-Code für deinen Slider aufrufen. Dazu fügst du folgenden Code innerhalb des head-tags deiner Webseite ein:

<script type="text/javascript">
$(document).ready(function() {
$("#foo2").carouFredSel({
	auto : false,
	items : 4,
	prev : {
		button	: "#foo2_prev",
		key		: "left"
	},
	next : {
		button	: "#foo2_next",
		key		: "right"
	},
});
});
</script>

Der div-container meines Sliders hat die ID von foo2.

Du hast jede Menge Möglichkeiten den Slider ganz nach deinen Wünschen anzupassen. Auf der Configuration-Site des Plugins findest du eine gut dokumentierte Übersicht aller Optionen. Ich habe in meinem Demo-Slider z.B. den das automatische Sliden deaktiviert und den Anzahl der angezeigten Bilder auf 4 gesetzt. Außerdem habe ich einen Vor- und Zurück Button in meiner Animation verwendet.

Benötigst du weitere Hilfe für deine Plugin-Einstellungen findest du praktische Tipps auf der Tips & Tricks Seite des Plugins. Als extra-Feature gibt es sogar einen Configuration-Roboter auf der Webseite, der dir bei den Einstellungen deines Sliders weiterhilft.

Wie gefällt dir das Carousel-Slider Plugin CarouFredSel? Hast du bereits Erfahrungen mit diesem Plugin, oder kennst du weitere hilfreiche JavaScript-Slider Plugins? Über deine Tipps und dein Feedback freue ich mich sehr!

1. Back-to-Top Button in WordPress integrieren

1.1. Top-Button mit Smooth Scroll, ohne Fading

Da die Smooth Scroll-Funktion mit jQuery funktioniert, musst du als erstes jQuery in deiner WordPress header.php Datei aufrufen (falls du dies nicht schon getan hast).

Dazu kannst du folgenden Code in die header.php Datei deines Themes einfügen:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Dieser Code-Schnipsel ruft jQuery von der Google Libraries API auf.

Im nächsten Schritt legst du eine neue JavaScript-Datei (z.B. mit dem Namen Custom) in deinem Editor an, und fügst diesen Code ein:

// Smooth Scroll to Top
$(document).ready(function() {
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 700);
                return false;
            }
        }
    });
});

Diese legst du am besten in deinem Theme-Order in einen neuen js-Ordner an. Jetzt rufst du diese Datei ebenfalls in der header.php Datei auf.

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/custom.js"></script>

Jetzt kannst du deinen Back-to-Top Button mit einem ganz normalen anchor-tag und CSS-Styling gestalten.

<a href="#header">Back to Top</a>

Die einfachste Möglichkeit, um den Button an den Seitenanfang zu leiten ist, wenn du auf die ID deines obersten Divs linkst. So musst du keinen »leeren« Link erstellen.

1.2. Smooth Scroll Back-to-Top Button mit Fading

David Walsh stellt auf seinem Blog ein tolles jQuery toplink-Plugin vor. Mit Hilfe des Codes kannst du dir einen Button einrichten, der erst beim Herunterscrollen der Seite einfadet. Hier kannst du dir eine Demo des Buttons anschauen.

Eine ausführliche Beschreibung zum Plugin-Code findest du in diesem Blog-Artikel von David Walsh.

1.3. Dynamic to Top WordPress-Plugin

Falls dir Fade-In Effekt gut gefällt, du aber nicht selbst den Code in den Theme integrieren möchtest, kannst du auch das praktische Dynamic-to-top WordPress-Plugin verwenden. Das Plugin bietet die Möglichkeit einen Text- oder Imagelink zu erstellen. Den Button kannst du auch noch selbst mit Hilfe von CSS anpassen.

So sieht der Standard-Button des Plugins aus.

Die Plugin-Optionen ermöglichen eine einfache Anpassung des Buttons.

Möchtest du ein eigenes Image für deinen Button verwenden, kannst du im Plugin-Ordner unter CSS / img das Standard-Image des Buttons austauschen. Auch die Css-Datei im Ordner CSS kannst du den Button z.B. in der Größe anpassen.

Du kannst den Standard-Button an dein Theme-Layout anpassen.

Um deine individuellen Styles nicht zu bei einem Plugin-Update zu verlieren, ist es sinnvoll die CSS-Styles in deine Theme style.css Datei einzufügen, und das Button-Image in deinen image Ordner (vergiss dabei nicht, den Pfad des Button-Image im CSS anzupassen).

2. Back-to-Top Button Inspirationen

Um dich zu inspirieren, und auf neue Ideen für die Gestaltung von Back-to-Top Buttons zu bringen, habe ich einige schöne und neuartige Top-Buttons mit unterschiedlichen Features zusammen gestellt.

Icelab

Der Back-to-Top ist mittig im Footer platziert, auf alle Fälle ein Design-Erlebnis und bestimmt nicht zu übersehen.

Tahoe Tech Talk 2010

Da die Webseite von Tahoe Tech Talk sehr lang ist, kommt dieser hilfreiche Button mit Fading-Effekt sehr gelegen.

David Hellmann

Ein echter Hingucker ist auch dieser mittig platzierte, kreative Back-to-Top Button von David Hellmann.

Armitage

Eine innovative Design-Idee ist auch der mitten im Footer platzierte Top-Button mit Smooth Scroll.

Paul Benett

Auf der Webseite von Paul Benett gibt es gleich mehrere Back-to-Top Button, diese faden sich ein, je nachdem wo man sich auf der Seite gerade befindet.

Hull digital Live 10

Die Webseite der HDLive Konferenz hat einen sehr ästhetischen, runden Back-to-Top Button.

Drexler

Eine grafische und innovative Lösung ist auch der Top-Button auf der Webseite von Dexler.

Wie gefallen die die animierten Back-to-Top Buttons? Kennst du weitere praktische Möglichkeiten den Button auf der eigenen Webseite zu integrieren, oder Bespiele besonders kreativ gestalteter Back-to-Top Buttons? Über dein Feedback und weitere Tipps freue ich mich sehr!

1. Demo-Version des ContentFlow-Sliders

Schau dir den Slider live bei Elmastudio an.

• Demo-Version
  ContentFlow

2. Verschiedene Möglichkeiten des Plugins

Mit ContentFlow kannst du die unterschiedlichsten Varianten des CoverFlow-Effekts erzeugen. Mit Hilfe von vorbereiteten Addons kannst du deine Bilder z.B. horizontal oder vertikal sliden, in einem Kreis anordnen, Bilder von einer hinteren Reihe nach vorne sliden lassen und vieles mehr. Eine ganze Demo-Seite mit allen Varianten findest du auf den Addon-Seite des Plugins.

Neben Bildern gibt es auch die Möglichkeit Texte und Links anzuzeigen, oder zwischen einer dunklen und einer hellen Style-Variante des Sliders wählen. Auf der Plugin-Webseite findest du auch eine hilfreiche Liste der Browser-Kompatibilität des Slider-Effekts.

3. Das ContentFlow-Plugin im Einsatz

Die Verwendung des Plugins ist auf der Webseite ausführlich in der »Documentation« beschrieben. Da es aber jede Menge Optionen und Varianten des Plugins gibt, möchte ich kurz die wichtigsten Funktionen vorstellen und zeigen, wie du den CoverFlow-Effekt in WordPress verwenden kannst.

4. ContentFlow in WordPress einbinden

Das Standard-Style des Plugins ist auf einem dunklen Hintergrund zu sehen. Dieser Style hat daher eine helle Schrift und Scrollbar. Nachdem du dir das Plugin auf der Webseite heruntergeladen hast, legst du dir am besten innerhalb deines Theme-Ordners einen »ContentFlow«-Ordner an. Hier fügst du die contentflow.js, die contentflow.css Datei und den Ordner »img« aus dem Download-Ordner ein. Dann fügst du in die header.php folgenden Code ein.

<script language="JavaScript" type="text/javascript" src="<?php bloginfo('url'); ?>/DEINPFAD/ContentFlow/contentflow.js"></script>

Für »DEINPFAD« musst du eventuell noch den Pfad der Ordner angeben, in der dein ContentFlow-Ordner eingefügt hast.

Als nächstes kannst du den HTML-Code für deinen ContentFlow-Slider anlegen. Die einfachste Variante ist folgender Code-Schnipsel.

<div class="ContentFlow">
<div class="loadIndicator"><div class="indicator"></div></div>
<div class="flow">
<img class="item" src="someImageFile.jpg" title="Your_Image_Title"/>
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar"><div class="slider"><div class="position"></div></div></div>
</div>

In meinem Demo-Slider habe ich noch eine Unterüberschrift (Caption) unter jedes Bild eingefügt. Dazu kannst du deine Bilder in folgenden Code einfügen.

<div class="item">
<img class="content" src="http://www.elmastudio.de/wp-content/uploads/2010/09/ContentFlow/pics/coverflow-01.png"/><div class="caption">Music Tweetie<br/><a href="http://goo.gl/sKfm">by Elmastudio</a></div>
</div>

Möchtest du jetzt noch den Style des Sliders anpassen (z.B. Farbe und Schriftart der Caption) kannst du die contentflow.css im ContentFlow-Ordner anpassen.

5. ContentFlow auf einem hellen Hintergrund nutzen

Um den ContentFlow-Slider auch auf einem hellen Hintergrund zu nutzen, kannst du das praktische White-Addon nutzen. Hierzu lädst du dir das Addon auf der Webseite (ganz unten auf der Seite) herunter.

Die ContentFlowAddOn_white.js und die ContentFlowAddOn_white.css Datei fügst du jetzt in den ContentFlow-Ordner deines Themes ein. Auch die Bilder in »img« des Download-Ordners fügst du in den img-Ordner von ContentFlow ein. Jetzt öffnest du noch einmal die header.php Datei deines Themes, und erweiterst den Aufruf der JavaScript-Datei durch das »load white«-Attribut.

<script language="JavaScript" type="text/javascript" src="ContentFlow/contentflow.js" load="white"></script>

6. Weitere Anpassungen von ContentFlow

Jede Menge weitere Anpassungen, z.B. die Geschwindigkeit des Bild-Wechsels, die Reflexion, die maximale Größe der Bilder, oder die Anzahl der rechts und links angezeigten Bild-Vorschauen kannst du anpassen, indem du ein neues ContentFlow-Objekt in der header.php deines Themes anlegst. Dazu fügst du z.B. folgenden Code-Schnipsel ein.

<script tyle="text/javascript">
            var myNewFlow = new ContentFlow('contentFlow', { reflectionHeight: 0 } ) ;
</script>

Indem du den Wert »reflectionHeight« auf 0 setzt, werden die Bilder ohne Reflexion dargestellt.

Gibst du deinem neuen Element, wie hier im Code-Beispiel den neuen Namen »contentFlow«, musst du jetzt noch deinem CoverFLow HTML-Element mit der css-Klasse »ContentFlow« die ID id=»contentFlow« geben.

Die Slider-Bilder der Demo werden so ohne den Reflexions-Effekt angezeigt.

Du kannst jede Menge weitere Optionen (mit Komma und Leerzeichen getrennt) hinzufügen. Eine Liste möglicher Konfigurationen mit Beschreibungen kannst du dir in der ContentFlowAddon_DEFAULT.js Datei des Plugin Download-Ordners anschauen.

Ich hoffe dich hat diese kleine JavaScript-Plugin Beschreibung inspiriert, und der Beitrag hilft dir bei deiner eigenen Arbeit mit dem ContentFlow-Plugin weiter. Über dein Feedback und deine Tipps zum CoverFlow-Effekt allgemein, und dem ContentFlow-Plugin freue ich mich sehr!

1. Slidedeck kurz vorgestellt

Auf der Webseite von Slidedeck kannst du dir den jQuery-Slider und die verschiedenen Möglichkeiten der Verwendung genauer anschauen. Ich finde den Slider z.B. sehr geeignet, um spezielle Artikel auf einem Blogs oder die Angebote auf einer Firmenseite zu präsentieren. Hier sind ein paar Webseiten, aus denen du dir den Slidedeck-Slider in Aktion anschauen kannst.

Eine schöne Umsetzung des Sliders kannst du dir bei Q-This anschauen.

Eine individuelle Anpassung des Sliders in der Pro-Version gibt’s bei OpenCandy.

Auf dem Blog Techington siehst du die Standard-Version des WordPress-Featured Content Sliders.

Wie ja bereits erwähnt, gibt es eine Lite- und eine kostenpflichtige Pro-Version des jQuery-Plugins und des Plugins für WordPress. Bei der kostenlosen Lite-Version ist ein kleiner Button von Slidedeck rechts unten am Slider zu sehen.

Der Werbe-Button von Slidedeck ist recht dezent gestaltet.

Hier kannst du die Pro- und Lite Version von Slidedeck miteinander vergleichen.

2. Das Slidedeck Lite WordPress-Plugin

Falls du eine WordPress-Seite hast, kannst du das praktische Slidedeck Lite WordPress-Plugin verwenden. So kannst du deinen Slider bequem im WordPress-Adminbereich einrichten. Dazu benötigst du keine großen Programmierkenntnisse, und es gibt bereits mehrere schöne Style-Versionen zur Auswahl, sowie die Option einen automatisch erstellten Featured Content-Slider für deine Blog-Artikel einzurichten.

Diese 6 verschiedenen Slider-Styles sind beim WordPress-Plugin bereits mit dabei.

Am besten installierst du das WP-Plugin direkt über deinen Admin-Bereich oder vom WordPress.org Plugin-Verzeichnis, da man auf der Slidedeck-Webseite aufgefordert wird, den Newsletter zu bestellen.

Hast du das Plugin installiert gibt es in der kostenlosen Lite-Version zwei unterschiedliche Verwendungsmöglichkeiten. Du kannst den automatischen Featured Content Slider verwenden, um deine neusten, beliebtesten oder Artikel einer bestimmten Kategorie auf deinem Blog anzuzeigen. Dazu wählst du »Add Smart Slide Deck« aus dem Slidedeck-Menü aus. Dabei kannst du die Anzahl der angezeigten Artikel bestimmen, Autoplay aktivieren, und aus zwei verschiedenen Styles (Hell und Dunkel), sowie drei unterschiedlichen Navigations-Stylen wählen.

In der Lite-Version des Plugins hast du allerdings mit dieser Funktion nicht allzu viele Einstellungs-Möglichkeiten. Daher ist die zweite Möglichkeit für die individuelle Anpassung des Sliders besser geeignet.

2.1. Den Slider individuell einrichten

Um deinen eigenen Slidedeck-Slider zu erstellen, gehst du auf »Add New« im Slidedeck-Menü deines Admin-Bereichs. Hier kannst du deine einzelnen Slides, entweder über einen visuellen oder den HTML-Editor mit Inhalt füllen.

Du kannst mehrere Slides anlegen, und z.B. Text, Videos oder Bilder einfügen.

Außerdem kannst du festlegen, welche der Inhalte zuerst geöffnet erscheinen soll, wie schnell die Animation der Slides sein soll, und ob du Loop (der Slider beginnt immer wieder von neuem) oder Autoplay (die Animation startet automatisch) verwenden möchtest.

Den Style deines Sliders kannst du in der Sidebar des Slider-Adminbereichs unter »Skin« anpassen. In dein Theme einfügen kannst du deinen Slider entweder, indem du in über den Adminbereich direkt in einen Artikel einsetzt, oder (falls du den Slider z.B. auf deiner Blogstartseite anzeigen möchtest) indem du den Code-Schnipsel in der Admin-Sidebar in dein Theme-Template (z.B. in die index.php Datei) einfügst.

Den Codeschnipsel für deinen Slider kannst du direkt in deine Theme-Datei einfügen.

2.2. Eine eigene CSS-Vorlage für deinen Slider erstellen

Eine tolle Möglichkeit, um den Slider optisch an deine Webseite anzupassen ist die Option, eine eigene CSS-Skin für deinen Slider zu erstellen. Dazu rufst du mit einen FTP-Programm den Slidedeck Plugin-Ordner unter wp-content/plugins auf. Hier findest du den Ordern »Skins«. Am einfachsten hast du es, wenn du einen der bereits vorhandenen Skin-Order herunterlädst, und deinen eigenen Style nach diesem Vorbild aufbaust.

Ich habe als Beispiel eine eigene Skin nach Vorlage des Voyager-Templates erstellt.

So sieht mein individuelles Skin-Design des Slidedeck-Sliders aus.

Wichtig ist, dass du die Angaben in der skin.css Datei genau übernimmst. Ich habe meine Skin »color« genannt, und daher alle CSS-Styles mit dem Vorwort color umbenannt. Auch die Details in der Beschreibung der CSS-Datei ganz oben habe ich angepasst. Anschließend erstellt du deine eigenen Slider-Images. Corner, falls du einen kleinen Pfeil anzeigen willst, slides falls du ein Image für den Hintergrund deiner Slides verwenden möchtest, und spines für die Slider-Elemente. Auch hier ist es wieder sehr hilfreich, wenn du dir als Vorlage die Images der anderen Skins genau anschaust.

Anschließend erstellt du einen neuen Ordner mit dem Namen deiner Slider-Skin (z.B. color), und lädst diese ebenfalls in den Skin-Ordner des Plugins hinein.

Jetzt kannst du in den Einstellungen deines Sliders unter »Choose Skin« deine neu erstellte Skin auswählen und den Slider updaten.

Wähle deine eigene Skin aus dem Dropdown-Menü aus.

So einfach kannst du also deinen Slidedeck-Slider individuell gestalten. Falls du dir die Ordnerdateien noch einmal genau anschauen möchtest, kannst du dir meine Slider-Vorlage hier herunterladen.

• Download ZIP
  .zip, 3,16 KB

Eine schöne Zusammenstellung weitere Silder-Optionen für WordPress findest du auch auf dem Speckboy-Blog.

Wie gefällt dir der Slidedeck-Slider? Hast du noch Fragen zum Plugin oder kennst du weitere schöne Slider, die die für WordPress-Webseiten geeignet sind? Über dein Feedback und deine Slider-Favoriten Tipps freue ich mich sehr!