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.

Wer jedoch Skype und Dreamweaver (CS5) (oder auch andere Editoren) verwendet, könnte dabei seltsame Resultate feststellen. Zumindest war das bei uns der Fall: Der aus Skype nach Dreamweaver kopierte CSS Code wurde vom Browser komplett ignoriert. Kein Witz! Der CSS Code wurde per Copy-Paste in das Dreamweaver Dokument kopiert, gespeichert und hochgeladen. Auch Firebug zeigte den Code nicht komplett an, d.h. nur die CSS Klasse wurde angezeigt, die CSS Eingenschaften jedoch nicht. Wenn man den gleichen Code manuell eingegeben hat, funktionierte wieder alles.

Eine Erklärung hierfür haben wir momentan noch nicht. Falls jemand weiß woran das liegen könnte, kann er uns das gerne per Kommentar mitteilen.

Nachtrag:

Wie mir ein Kollege mitteilte liegt das Problem nicht bei Dreamweaver, sondern tritt auch bei anderen Editoren auf wenn der CSS Code aus SKype kopiert wird. Der kopierte Code wird nicht interpretiert.

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

“Not Just a Grid” ist ein flexibles und modulares CSS-Framework, das bei der Entwicklung von Websites hilfreich sein kann. Es ist zukunftsorientiert für größere Bildschirmdiagonalen und den Einsatz von CSS3 konzipiert worden. Wie der Name schon sagt, bietet es nicht nur ein CSS-Grid-System sondern darüber hinaus auch Vorlagen für Buttons, Tabellen, Formulare, Alert Boxen und vieles mehr.

Website: www.notjustagrid.com

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

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

Das css3-click-chart bietet eine übersichtliche Darstellung der Möglichkeiten die sich mit CSS3 für den Webdesigner eröffnen. Für jede CSS Eigenschaft kann durch Klick auf die Überschrift der Quellcode angezeigt werden. Also beispielsweise für HSLA-Farbwerte, mehrspaltige Layouts, Text-Effekte oder abgerundete Ecken:

Website: http://www.impressivewebs.com/css3-click-chart/

Instant Blueprint ermöglicht  das schnelle Erstellen von Webprojekten  in validem HTML / XHTML und CSS. Mit dem Online-Tool kann man die Reset-, Layout- und Print- Styles  generieren, eigene IDs und den gewünschten DOCTYPE definieren und auch gleich noch das gewünschte JavaScript Framework einbinden.

Nette Geschichte, die den Entwicklungsaufwand dautlich verringern kann.

Website: http://instantblueprint.com

0to255 ist ein einfaches Tool, das Webdesignern hilf hellere und dunklere Farben basierend auf jeder beliebigen Farbe zu finden. Es macht Spaß, ist einfach und erspart viel Zeit.

Wähle einfach die Farbe, mit der du beginnen willst und 0to255 gibt dir eine Farbreihe angefangen von schwarz bis weiß mit einem Intervall das für Webdesign optimiert ist. Dann klickst du einfach auf die Variation, die du verwenden willst und der Hex-Code wird automatisch in die Zwischenablage kopiert.

Website: http://0to255.com/