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!

1. CSS box-shadow kurz erklärt

Es gibt zwei Varianten der CSS-Eigenschaft box-shadow: Schatten nach außen und Schatten nach innen. Standardmäßig wird der Schatten nach außen angezeigt.

Schatten nach außen

Du musst die folgenden Werte im Stylesheet angeben:

box-shadow mit Hex-Farbwert:
-webkit-box-shadow: 0px 4px 10px 4px #999;
-moz-box-shadow: 0px 4px 10px 4px #999;
box-shadow: 0px 4px 10px 4px #999;

Und für einen box-shadow mit RGBA-Farbwert:

-webkit-box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, 0.3);

Erklärung der Angaben:

1. horizontaler Versatz des Schattens (positiver und negativer Wert möglich)
2. vertikaler Versatz des Schattens (positiver und negativer Werte möglich)
3. Stärke der Unschärfe (blur)
4. Ausweitung des Schattens (spread)
5. Farbwert oder RGBA-Wert. Bei RGBA ist der letzte Wert die Transparenz (alpha) und liegt zwischen 0.1 und 1.

Schatten nach innen (inset)

In der Variante „inset“ für box-shadow wird der Schatten nach innen angezeigt.

CSS box-shadow mit inset-Wert

Im Stylesheet sieht der box-shadow mit inset dann so aus:

-webkit-box-shadow: inset 0px 4px 8px 2px , 0.4);
-moz-box-shadow: inset 0px 4px 8px 2px , 0.4);
box-shadow: inset 0px 4px 8px 2px , 0.4);

Mit Hilfe des Online-Tools CSS3 Generator kannst du dir übrigens deinen CSS-Code praktisch erstellen lassen. Über die Live-Vorschau kannst du deinen Schatten direkt überprüfen.

Im Artikel über CSS box-shadow bei CSS-Tricks findest du auch eine Fallback-Lösung für dein Internet Explorer.

2. Input-Feld mit CSS box-shadow und Gloweffekt

Für die Erstellung von Eingabefeldern kannst du den box-shadow sehr schön verwenden, vor allem wenn du bei der CSS Pseudoklasse :focus den Wert des box-shadows änderst. So wird dem Nutzer des input-Feldes sehr benutzerfreundlich verdeutlicht, in welchem Feld er sich gerade mit der Maus befindet. Hier ein Beispiel:

Der CSS-Code für das Beispiel Input-Feld:

input {
	width: 260px;
	margin:30px 30px 40px;
	padding: 10px 5px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	border: 1px solid #cfcfcf;
	-webkit-box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
	-moz-box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
	box-shadow: inset 0 0 4px 2px rgba(0,0,0, 0.1);
}
input:focus {
	outline:0;
	border:1px solid #95D2DF;
	-webkit-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
	-moz-box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
	box-shadow: 0 0 5px 4px rgba(36,184,194, 0.10);
}

Zusätzlich zur box-shadow Eigenschaft, die im Beispiel bei :focus von innen nach außen wechselt, habe ich im Beispiel noch den Rahmen (border) des Eingabefeldes bei :focus in einer blauen Farbe angepasst. So wird der Effekt sogar noch deutlicher.

Ich hoffe dir gefällt dieses kleine CSS-Beispiel und du kannst den Code für deine eigenen Programmierung gebrauchen. Wenn du weitere schöne Beispiele für Eingabefelder mit box-shadow kennst oder hast du weitere Vorschläge, wie Inputfelder zusätzlich optimiert werden können? Über deiner Tipps freue ich mich sehr!

Nilmini bietet außerdem jede Menge praktische Theme-Optionen. Du kannst z.B. ein Headerbild oder ein Intro-Slogan einbinden, serifen oder serifenlose Schrift wählen, die Linkfarbe und den Theme-Hintergrund wechseln, individuelle Menüs und Widgets anlegen (es gibt einen dreispaltigen Footer-Widgetbereich und eine Social Links Widget-Option im Header) oder dein eigenes Logobild nutzen.

Auch die WordPress-Artikelformatvorlagen (Post Formats) werden bei Nilmini wieder unterstützt, so dass du (ähnlich wie bei Tumblr-Blogs) einzelne Bilder, Videos, Zitate, Links oder Bildergalerien veröffentlichen kannst. Und da im Nilmini-Theme komplett auf eine Sidebar verzichtet wird, bietet das Theme besonders viel Platz um Bilder, Videos und auch längere Artikel sehr schön zu featuren.

Auf der Nilmini Theme-Seite kannst du dir eine Live-Demo und Screenshots von Nilmini anschauen und das Theme für 12€ via Paypal kaufen. Außerdem haben wir natürlich wieder hilfreiche Video-Anleitungen und eine ausführliche PDF-Dokumentation (in Deutsch und Englisch) auf der Theme-Seite vorbereitet.

Wir hoffen dir gefällt das Nilmini-Theme. Wenn du Fragen zu den Theme-Funktionen, Verbesserungsvorschläge oder Ideen für weitere Theme-Optimierungen hast, schreibe uns doch einfach einen Kommentar oder eine Nachricht über unser Kontaktformular.

Wir freuen uns schon sehr über dein Feedback!

Außerdem featured das Theme ganz besonders die verschiedlichen Artikel-Formatvorlagen (Post Formats), die es bei WordPress ja seit der Version 3.1 (ähnlich wie bei Tumblr-Blogs üblich) gibt. Mit den Post Formats kannst du deinen Blog noch lebendiger gestalten und neben normalen Standard-Artikeln auch einmal eine Bildergalerie, ein Zitat oder einen Link-Tipp veröffentlichen.

Auf der Bugis Theme-Seite haben wir alle Features und Funktionen unseres Themes noch einmal übersichtlich zusammen gefasst. Außerdem kannst du dir natürlich eine Live-Demo von Bugis anschauen und das Theme auch gleich direkt auf unserer Webseite für 12€ (die Bezahlung erfolgt per Paypal) kaufen.

Jede Menge Video-Tutorials auf Deutsch und Englisch, sowie eine ausführliche PDF-Dokumentation gibt es natürlich auch auf der Theme-Seite.

Wir hoffen, dir gefällt das Bugis-Theme. Über Fragen und Feedback freuen wir uns schon sehr!

Mit dem Online-Tool »Simple Media Queries Tester« kannst du deine Webseite schnell und vor allem übersichtlich in drei verschiedlichen Bildschirmbreiten testen. Die Screen-Formate kannst du selbst anpassen und so z.B. auf 320 Pixel fürs iPhone Hochformat oder 758 Pixel fürs iPad Hochformat einstellen. Ich finde das Tool wirklich praktisch, um Webseiten mit responsive Webdesigns schnell auf einen Blick testen zu können.

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. Responsive Webdesign: Ein kleiner Überblick

Die Herausforderung für Webdesigner, möglichst flexible Webseiten zu gestalten ist recht überwältigend, und im ersten Moment kommt natürlich der Gedanke auf, ob die flexible Gestaltung einer Webseite für so viele unterschiedliche Bildschirmformate und ihre unterschiedlichen Anforderungen (z.B. Touchscreen vs. Mauspfeil) überhaupt möglich ist.

Meiner Ansicht nach ist es erst einmal ganz wichtig, die derzeitigen Möglichkeiten von CSS3 Media Queries nicht als allgemeingültige, beste Lösung zu betrachten. Genau wie die sich ständig weiterentwickelnde, technische Entwicklung von Geräten und Browsern, befindet sich Webdesign in ständiger Bewegung und Weiterentwickelung.

CSS3 Media Queries, wie sie heute schon verwendet werden können, sind also nur eine von vielen Möglichkeiten, um mit den neuen Herausforderungen bei der Gestaltung von Webseiten umzugehen.

2. Wie funktionieren CSS3 Media Queries?

CSS3 Media Queries machen es möglich, eigene CSS-Styles für spezielle Bildschirmformate zu definieren. Man gestaltet also erst einmal eine Standard-Version einer Webseite (dazu wird derzeit meist die große Desktop-Ansicht genommen).

Im nächsten Schritt definiert man mit Hilfe von Media Queries mehrere Unterformate für kleinere Bildschirmformate, z.B. für eine Tablet-PC Version und einer weitere, für die Ansicht auf Smartphones optimierte Webseiten-Version. Für diese weiteren Bildschirmformate kann man dann das CSS-Styling anpassen und entsprechend optimieren.

Besonders gut funktioniert diese Methode, wenn man ein Webdesign von Beginn an flexibel plant. Da man ja alle wichtigen Inhalte, sowohl auf einer großen Desktop-Ansicht von ca. 1000 Pixeln, als auch auf einem kleinen Smartphone-Screen mit ungefähr 320 Pixeln unterbringen möchte, muss man das Layout sehr gut vorbereiten.

Mit einem Rastersystem fällt diese Planung sehr viel leichter. Z.B. kann man so eine Sidebar aus der Desktop-Ansicht im Hochformat der iPad-Ansicht unter den Haupt-Inhalt, also in den Footer rutschen lassen. Mit Hilfe der CSS-Eigenschaft float: none; in den Styles für die Tablet-PC Version ist das leicht möglich.

Eine mögliche Umsetzung für ein Webdesign, dass sich auf unterschiedliche Bildschirmgrößen anpasst ist also, von einem 3-spaltigen Layout in der Desktop-Version, zu einer 2-spaltigen Variante für Tablet-PCs zu wechseln, und die Ansicht auf Smartphones dann einspaltig zu lösen.

Mögliche Layout-Versionen für eine mit CSS3 Media Queries optimierte Webseite.

3. Beispiel-Webseiten mit CSS3 Media Queries

Jetzt aber genug der Theorie! Da in den letzten Wochen wieder etliche, sehr schöne Webdesigns mit Hilfe von CSS3 Media Queries umgesetzt wurden, möchte ich hier noch ein paar praktische Beispiele flexibler Webseiten-Gestaltung mit CSS3 Media Queries zeigen.

CalebAcutiy

Desktop-Ansicht der Webseite CalebAcutiy.

Die schmalere iPad- und Tablet-PC Optimierung.

Die mobile Layout-Version.

City Crawlers Berlin

Die große Bildschirmansicht von City Crawlers Berlin nutzt ein drei-spaltiges Layout.

In der fürs iPad optimierten Hochformat-Ansicht wird das Layout ein-spaltig.

In der ebenfalls ein-spaltigen Smartphone-Ansicht ist der Bilder-Slider unsichtbar.

Mark Boulton

Die Desktop-Ansicht des neuen responsive Redesigns von Mark Boultons Blog.

Für die Ansicht auf kleineren Bildschirmen wird das Layout Dank der Media Queries zwei-spaltig.

Für Tablet-PCs im Hochformat gibt es eine ein-spaltiges Layout mit Header.

Und in der für Smartphones optimierten Ansicht rutscht die Navigation in die Top-Leiste.

Weitere schöne Design-Inspirationen für die Verwendung von CSS3 Media Queries kannst du dir außerdem in unserem Artikel »Webdesign Inspiration: Flexible Design-Layouts mit CSS3 Media Queries« und auf der Galerie-Seite mediaqueri.es ansehen.

Auch unser Ari WordPress-Theme nutzt CSS3 Media Queries, und reagiert so auf die unterschiedlichsten Bildschirmformate. In der Live-Demo von Ari kannst du dir das flexible Layout sehr schön anschauen, indem du dein Browser-Fenster verkleinerst.

4. Pro und Kontra von CSS3 Media Queries

Natürlich ist die ganze Thematik sehr komplex, und da sich die Entwicklung des mobilen Internets, von neuen Geräten, Browsern und Techniken ständig, und in recht rasanter Geschwindigkeit weiter entwickelt, gibt es wohl aktuell noch keine perfekte und für alle Webseiten gültige Lösung.

Daher ist es besonders wichtig, jedes Webseiten-Projekt individuell zu betrachten und die Ausrichtung, Zielgruppe und den hauptsächlichen Zweck der Webseite bei der Planung zu bedenken.

Die Verwendung CSS3 Media Queries ist auf keinen Fall als eine, für alle Webseiten geeignete Allgemeinlösung zu sehen. Und der von Ethan Marcotte in seinem bei A List Apart veröffentlichen Artikel »Responsive Webdesign« ausgelöste Trend birgt natürlich auch gewisse Schwierigkeiten und Problematiken. Hier eine kleine Übersicht:

• Inhalte können mit Hilfe von display: none; zwar in der mobilen Version verborgen werden. Die Inhalte werden aber dennoch in den mobilen Browser geladen, was unnötig lange Ladezeiten zur Auswirkung hat.
• Auch die Verwendung von flexibel skalierbaren Bildern ist zwar möglich, resultiert aber ebenfalls in einer, eigentlich nicht benötigten langen Ladezeit auf mobilen Geräten (da das Ausgangsbild ja die Größe der größtmöglichen Ansicht in allen Versionen haben muss, um nicht aufgepixelt angezeigt zu werden).
• Wenn eine Webseite erst in einer Desktop-Version gestaltet, und dann quasi für die mobile Version »abgespeckt« wird, können viele mobile-Web spezifische Techniken nicht genutzt werden.
• Die unterschiedliche Nutzung eines Mauspfeils im Gegensatz zum Touchscreen ist sehr schwer zu optimieren, wenn man eine Lösung für beide Optionen finden muss. Das Potential der Touchscreens wird so meist nicht voll ausgenutzt.

Etliche weitere Problematiken der CSS3 Media Queries werden außerdem im Artikel »Media Query for Mobile is Fool’s Gold« diskutiert. Die Pro- und Kontra-Stimmen, sowie mögliche Problematiken bei der Nutzung von Media Queries werden hier auch sehr schön in den Kommentaren deutlich.

4.1. Der »Mobile First« Ansatz

Ein sehr interessanter Ansatz ist es auch, zwar auf die CSS3 Media Queries zu setzen, aber den Gestaltung-Prozess umzukehren und die mobile Version der Webseite als bevorzugte Gestaltungsgrundlage zu nutzen. So kann man die neuen Möglichkeiten von mobilen Geräten optimal nutzen, und die Webseiten-Ansicht auf großen Bildschirmen dann nur noch anpassen.

Ein derzeitiger Vorteil dieser Vorgehensweise ist, dass etliche Smartphones (z.B. Blackberry, Nokia und Windows Phones) die CSS3 Media Queries noch nicht unterstützen. Wenn man die mobile Webseiten-Version im Stylesheet als Standard nutzen würde, und die Desktop-Versionen dann mit Media Queries anspricht, könnte man die Webseite für viel mehr mobile Geräte optimieren.

Für die Desktop-Ansicht in Internet Explorer-Browsern Version 8 und kleiner (diese unterstützen ebenfalls keine CSS3 Media Queries), müsste man dann aber auch noch ein extra Stylesheet anbieten.

Der »Mobile First« Ansatz wird besonders vom Webdesigner und Entwickler Luke W. voran getrieben. Hier kannst du dir ein sehr interessantes Video seiner »Mobile First« Präsentation ansehen.

5. Zusammenfassung

Wie bereits erwähnt, denke ich nicht, dass es derzeit eine allgemeingültige Lösung für die Optimierung von Webseiten auf unterschiedliche Bildschirmformate gibt. Daher ist es besonders wichtig, jede Webseite individuell zu betrachten und dann die derzeit flexibelste und effektivste Lösung für das Projekt herauszufinden.

Für eine komplexe Webseite, die jede Menge Informationen und Funktionen bieten muss ist es eventuell weniger sinnvoll, ein Webdesign nur mit Hilfe von Media Queries anzupassen. Z.B. bei der Webseite einer Fluggesellschaft mit Buchungsfunktionen etc. ist eine eigene mobile Webseiten-Version oder eine eigene Webseiten-App vielleicht eher geeignet.

Bei einem Blog, einem persönlichen Portfolio oder der Informations-Webseite einer kleineren Firma macht eine CSS3 Media Queries optimierte Webseiten-Version schon sehr viel mehr Sinn. Die Webseite lebt von ihrem individuellen Design (welches mit Hilfe von CSS3 Media Queries beibehalten werden kann), die Verwendung von Images und speziellen Funktionen (z.B. mit JavaScripts) ist überschaubar oder wird nicht unbedingt benötigt.

Auf alle Fälle bin ich der Meinung, dass man neue Möglichkeiten im Webdesign auf jeden Fall ausprobieren, nutzen, optimieren und mit ihnen experimentieren sollte. Denn nur durch die Neugierde und den Spaß an der Entwicklung, kann sich Webdesign weiterentwickeln und es können neue Lösungen gefunden werden.

Was denkst du darüber, Webdesigns mit Hilfe von CSS3 Media Queries flexibler zu gestalten, um auf diese Weise eine optimierte Ansicht für verschiedene Screengrößen und Geräte anzubieten? Kennst du noch weitere interessante Blog-Artikel oder Webseiten-Beispiele zum Thema? Über deine Meinung und weitere Tipps freue ich mich sehr!

1. CSS3 text-shadow

Die CSS3-Eigenschaften text-shadow ist im Webdesign bereits sehr verbreitet, und neben dem beliebten Effekt, die Schrift leicht in den Hintergrund eingestanzt erscheinen zu lassen (Letterpress-Effekt), lässt sich die Funktion auf für jede Menge kreative Effekte, wie einen Feuer- oder Leuchtschrift-Effekt verwenden.

Die Text-Schatten CSS-Eigenschaft hat 4 Werte. hier ein Beispiel:

text-shadow: 0px 2px 3px #555;

Der erste Wert bestimmt den Versatz des Schattens nach rechts (x-Versatz). Der zweite Wert definiert den Versatz des Schattens nach unten (y-Versatz).

Der dritte Wert ist der Grad der Unschärfe (blur), und der vierte und letzte Wert bestimmt die Farbe des Text-Schattens (Hex-Wert #).

Für den Farbwert (4. Wert) kannst du, neben der Farbangabe als Hex-Wert, auch den RGBA-Farbwert angeben, um den Schatten mit Hilfe des Alpha-Wertes (letzter Wert) in RGBA transparent zu machen. Hier ein Beispiel:

text-shadow:0px 1px 0px rgba(255,255,255,0.75);

Ein sehr hilfreicher Artikel zur Verwendung von RGBA-Farbwerten ist auch Working With RGBA Colour bei 24ways.

Browser-Unterstützung für text-shadow:

- Firefox
- Chrome
- Safari

Die CSS3-Eigenschaft text-shadow wird derzeit leider noch nicht im Internet Explorer unterstützt. Da die CSS-Eigenschaft im IE aber lediglich ignoriert wird, kannst du Text-Schatten durchaus zur grafischen Optimierung deiner Webseite verwenden.

1.1. Eingestanzter Text (der Letterpress-Effekt)

Mit text-shadow lässt sich ganz leicht der Effekt erzeugen, ein Schriftzug sei leicht in den Hintergrund eingestanzt. Hier ein Beispiel:

Der benötigte CSS-Code für dieses Beispiel ist:

.letterpress h2 {
color: #222;
text-shadow: 0px 2px 3px #555;
font: 65px Arial, sans-serif;
text-align: center;
}

Der Letterpress-Effekt ist z.B. bei Logos sehr beliebt (besonders bei App-Webseiten), aber auch bei Webseiten-Slogans oder Fließtext kann er verwendet werden. Jede Menge Beispiele für die Verwendung des Effekts kannst du dir im Artikel Webdesign Trend Showcase: Letterpress Text Effect bei Line25 anschauen.

1.2. Kreative Möglichkeiten mit text-shadow

Neben Letterpress-Text kannst du mit text-shadow aber noch etliche weitere, spannende Text-Effkte erzeugen. Kreative Beispiele sind z.B. Text mit Feuereffekt oder Leuchtschrift-Glow.

Im Artikel Using text-shadow to Create Cool Text Effects bei Line25 findest du jede Menge Beispiele mit Code-Schnipseln.

2. Vertikaler Text mit Text-Rotation

Die Darstellung von vertikalen Texten ist nicht nur mit Hintergrund-Bildern, sondern auch mit einer reinen CSS-Lösung möglich. Der Web-Entwickler Jonathan Snook hat diese Möglichkeit in seinem Artikel Text Rotations with CSS beschrieben.

Angewendet werden kann der Effekt z.B. bei der Darstellung eines Artikel-Datums. Hier ein Beispiel:

Der benötigte HTML-Code:

<div class="example-date">
  <span class="example-day">31</span>
  <span class="example-month">Jan</span>
  <span class="example-year">2010</span>
</div>

Und der dazugehörige CSS-Code lautet:

.example-date {
font-family: Arial, Helvetica, sans-serif;
background-color:#50A72A;
color: #fff;
float:left;
position:relative;
padding:45px 5px 0px;
margin:20px 20px 20px 0;
}
.example-date .example-month {
text-transform: uppercase;
font-size:33px;
}
.example-date .example-day {
font-size:43px;
line-height:45px;
position:absolute; left:5px; top:3px;
}
.example-date .example-year {
display:block;
font-weight: bold;
position:absolute; right:-5px; top:15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}

Und selbst im Internet Explorer kannst du Text-Rotation anzeigen, indem du folgende, zusätzliche Bedingung festlegst:

<!--[if IE]>
<style>
.example-date .example-year {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
right:-15px; top:5px;
}
</style>
<![endif]-->

(Code-Quelle: CSS Text-Rotation von Jonathan Snook)

3. CSS-Styles für Zitate (blockquotes)

Zitate kannst du sehr schön mit einer leichten Hintergrund-Farbe und einem linken Rand (border-left) darstellen.

Blockquote mit nur einem Paragraphen (p-tag).

Problematisch wird es, wenn du längere Zitate mit mehreren Paragraphen (p-tags) anzeigen möchtest. Auf Grund des padding-Wertes des untersten p-tags wird der untere Rand des Zitats länger angezeigt.

Bei mehreren Paragraphen ist der untere Rand des Hintergrundes zu lang.

Um dies zu vermeiden, kannst du bei p-tags innerhalb von blockquote den margin-bottom Wert auf 0px und den margin-top Wert auf ca. 15px setzen. Dann nutzt du den CSS Pseudoklassen-Selektor :first-child (dieser wird im Gegensatz zu :last-child auch im Internet Explorer 7 und 8 unterstützt), um den martin-top Wert des obersten Paragraphs auf null Pixel zu setzen. Mit diesem Trick schaffst du es, dass der Abstand zwischen Text und Hintergrund auf allen vier Seiten gleich angezeigt wird.

Der dazugehörige CSS-Code für die Blockquotes lautet dann:

blockquote {
padding: 20px;
background: #eee;
border-left: 7px solid #ccc;
}
blockquote, p {
margin-top: 15px;
}
blockquote p:first-child {
margin-top: 0px;
}

(Code-Quelle: Simple and Nice Blockquote Styling von CSS-Tricks)

4. Text-Animation mit CSS3 transitions

Eine spannender CSS3-Effekt ist die Animation von Texten. Auf der CSS-Playground Webseite von Benjamin De Cock habe ich mir diese zwei animierten CSS-Buttons entdeckt. Der Effekt funktioniert wirklich klasse!

Am besten du schaust dir die Button-Beispiele in verschiedenen Browsern einmal selbst an. Der rechte Button funktioniert sogar im Internet Explorer (meines Wissens in Version 7 und 8).

Wie du sieht, lassen sich mit einigen CSS-Tipps und Tricks jede Menge jede Menge Lösungen für die Darstellung von Typografie im Web finden.

Hilfreiche Tipps zum Weiterlesen sind auch noch die praktischen Code-Snippets auf der Webseite CSS-Tricks. Wenn du einen umfangreichen Überblick über Web-Typografie und Möglichkeiten der Darstellung in CSS suchst, kannst du auch die Artikel auf der Webseite webtypography.net durchlesen.

Wie gefallen dir die vorgestellten CSS-Tipps? Kennst du noch weitere praktische CSS-Funktionen für die Darstellung von Schrift im Web, oder kennst du weitere hilfreiche Webseiten, Blog-Artikel oder auch Bücher zum Thema CSS?

Über dein Feedback und deine Tipps freue ich mich sehr!

1. Mehrspaltigen Text mit CSS3 Multi-Columns

Leider werden die CSS3-Eigenschaften column-count und column-gap für mehrspaltigen Text derzeit noch nicht von allen Browsern unterstützt. Der Internet Explorer macht mal wieder eine Ausnahme. Allerdings kannst du die praktische Eigenschaft zur Text-Formatierung dennoch nutzen, im IE wird der Text-Abschnitt dann einfach weiterhin einspaltig angezeigt.

Hier ein Beispiel für einen dreispaltigen Text mit Hilfe von CSS3:

Tortor placerat penatibus pid elementum sagittis magna ac porttitor porta parturient augue mus massa lorem. Odio duis ultrices tincidunt facilisis, parturient sociis cras penatibus ac aenean etiam dis! Tristique, dis tincidunt integer ac pid rhoncus lorem, nunc nec ridiculus porta, vel turpis platea nec sit, turpis. Porta pellentesque etiam? Urna, et duis, amet ultrices, elementum dapibus in mauris vut ridiculus, parturient turpis turpis pid porta. Mid diam platea sed mauris odio et. Tortor dapibus phasellus dolor parturient, natoque! A in ultrices nisi, ut parturient! Nascetur nec odio scelerisque augue et amet, vel amet montes porta eu? Et nunc porttitor sit montes natoque odio duis. Natoque. Ac ultrices ac tristique mauris integer platea. Platea cum non enim sagittis magna lundium velit. Velit platea duis! Rhoncus lorem dignissim enim elementum, sagittis, et facilisis eu urna lacus ultricies sit adipiscing augue auctor.

Der dazugehörige CSS-Code für mehrspaltigen Text lautet:

p.three-columns {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}

Mit column-count gibst du dabei die Anzahl der Text-Spalten an. Mit der Pixelangabe bei column-gap die Pixel-Breite der Lücken zwischen den einzelnen Text-Spalten. Die Angaben für Mozilla Firefox werden mit moz angeben, und für Google Chrome und Safari mit webkit.

2. Initiale (engl. Drop Caps) mit dem CSS Pseudoklassen-Selektor :first-child umsetzen

Mit Hilfe von CSS Pseudoklassen-Selektoren kannst du Initialen (Drop Caps) zu Beginn deiner Texte einfügen. Der erste Buchstabe eines Artikels oder Absatzes wird so groß geschrieben, um den Text spannender und ansprechender zu gestalten. Umsetzen kannst du die Drop Caps, indem du die CSS-Pseudoklassen :first-child:first-letter nutzt.

Hier ein Beispieltext mit Initial-Buchstaben:

Dignissim mus pid enim tristique magnis habitasse dolor tincidunt sit montes enim, penatibus, nisi et lectus ac, augue porta pulvinar porttitor massa urna placerat, non, ultrices, in sociis. Non ac, lacus dolor. Sed turpis rhoncus lundium penatibus turpis et in! Porta nunc? Placerat adipiscing integer enim dis ac, urna placerat tincidunt turpis, enim rhoncus odio in in rhoncus est amet a aenean amet mid penatibus augue nec adipiscing amet penatibus, scelerisque.

Der CSS-Code für diesen Drop Caps lautet:

p:first-child:first-letter {
float: left;
color: #F47A2F;
font-size: 75px;
line-height: 50px;
padding: 10px 5px 0px 0px;
}

(Quelle: Code-Snippet von CSS-Tricks)

Leider unterstützt der Internet Explorer bis Version 8 keine CSS-Pseudoklassen. Wenn du die CSS Pseudoklassen-Selektoren auch noch für weitere Elemente nutzen möchtest, kannst du die JavaScript Fallback-Lösung Selectivizr für den IE einsetzen. Im Artikel »Hilfreiche CSS-Tipps: Die CSS Pseudoklassen-Selektoren :first-child, :last-child und :nth-child« wird diese Lösung noch etwas ausführlicher beschrieben.

Alternativ kannst du auch einen span-tag mit der CSS-Klasse .drop-caps nutzen:

<p><span class="drop-caps">N</span>on in facilisis, nascetur dignissim enim tempor risus turpis adipiscing nec magna, a ac vel quis!</p>

Der CSS-Klasse span.drop-caps gibt du dann wieder die bereits erwähnten CSS-Eigenschaften.

3. Eingerückte Absätze mit text-indent

Das leichte Einrücken zu Beginn eines neuen Text-Absatzes ist ein weiteres Stilmittel, um längere Texte übersichtlicher zu gestalten.

Hier ein Beispiel für einen solchen eingerückten Text-Absatz:

Augue sociis elementum turpis turpis. Pulvinar, ut enim turpis. Enim elementum. Turpis placerat ut, vut sed elementum! A cursus. Scelerisque ut sit ac, pulvinar tempor lorem, porta cum nec. Hac et tortor amet dignissim, sed eros penatibus odio porta dictumst tristique, porta. Nunc, proin! Ultrices porta porta? Urna cras, parturient tincidunt!

Mit der CSS-Eigenschaft text-indent kannst du das Einrücken von Texten umsetzen:

p {
text-indent: 25px;
}

Um zu vermeiden, dass bereits der erste Textabschnitt eines Artikels eingerückt wird, kannst du wieder den CSS Pseusoklassen-Selekor :first-child nutzen.

p:first-child {
text-indent: 0px;
}

Da der Internet Explorer diese Eigenschaft wieder nicht unterstützt, kannst du hier ebenfalls auf die Javscript Fallback-Lösung Selectivizr zurückgreifen.

4. Schönere &-Zeichen (Ampersands)

Es gibt jede Menge Fans von &-Zeichen (Ampersands). Um nicht einfach auf das Standard &-Zeichen für deine Texte zurück zu greifen, kannst du einen extra span-tag mit der CSS-Klasse .amp einfügen, und dieser Klasse im Stylesheet folgende CSS-Eigenschaften geben:

span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

Mit Hilfe dieser Extra-Klasse kannst du ein besonders schönes &-Zeichen in deinen Texten nutzen.

Dan Cedernholm von Simplebits hat in seinem Artikel »Use the Best Available Ampersand« außerdem eine Auflistung verschiedener &-Zeichen für Mac und Windows zur Übersicht zusammen gestellt.

Jede Menge &-Zeichen zur Inspiration bei simplebits.com.

Mit dem wp-typography Plugin für WordPress wird die CSS-Klasse .amp für &-Zeichen übrigens automatisch eingefügt. Du musst also die entsprechenden CSS-Eigenschaften nur noch in deinem Stylesheet ergänzen.

5. Text-Verläufe mit CSS3

Eine spannende, neue Möglichkeit für spezielle Text-Elemente (z.B. im Logo oder Header deiner Webseite) sind CSS3-Verläufe (gradients).

Ein Beispiel für einen solchen Text-Verlauf mit CSS3:

Verlauf

Mit folgendem Code kannst du du einen Farbverlauf innerhalb der Buchstaben erzeugen:

h1 {
  font-size: 72px;
  background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#333));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

(Quelle: Gradient Text Snippet von CSS-Tricks)

Dieser Code funktioniert derzeit allerdings nur in Webkit-Browsern (also Chrome und Safari). Am besten nutzt du die CSS-Eigenschaften bei Text-Elementen, die auch ohne Verlauf noch gut funktionieren.

Wie gefallen dir die vorgestellten CSS-Optionen für die Text-Gestaltung? Und was ist deiner Meinung nach die beste Vorgehensweise, um mit der derzeit leider noch sehr uneinheitlichen Browser-Unterstützung umzugehen? Über dein Feedback und deine weiteren Tipp zur Text-Optimierung mit CSS würde ich mich sehr freuen!

1. Das 1140px Grid-System im Überblick

Die Demo-Seite des Grids.

• Das Layout ist 1140px breit, ideal Bildschirmgrößen von 1280px (auf kleineren Monitoren passt sich das Grid entsprechend an).
• 12 Spalten (Spaltenbreiten in Prozent, bei vollen 1140px sind die Spaltenzwischenräume ca. 40 Pixel breit), Layout kann so leicht in 6, 4, 3 oder 3 Spalten unterteilt werden.
• Flexibles Layout durch CSS3 Media Queries (optimiert für Table-PCs und Smartphones).
• Browser-Unterstützung: Chrome, Safari, Firefox, Internet Explorer 7 + 8, bedingt auch auf IE6 (die Bildschirm-Breite wird hier komplett ausgenutzt, da keine Unterstützung für CSS max-width).
• Bisher vom Entwickler getestet auf verschiedenen MacBooks, iMac, PC Laptop, älteren PC, Eee PC, iPad, iPhone 3G, iPhone 4, Android Smartphones, Samsung Galaxy Tab, BlackBerry und einem älterem Nokia.
• Bilder werden je nach Bildschirm-Ansicht flexibel kleiner skaliert.
• Inklusive Photoshop-Vorlage zum Herunterladen.
• Lizenz des Gridsystems: Creative Commens License, Attribution Share-Alike (3.0 Australia)

2. Grid herunterladen

Downloaden kannst du dir das Grid-System entweder direkt auf der Webseite cssgrid.net oder bei GitHub.

Für die Gestaltung des Layouts findest du unter Photoshop-Template auch noch eine praktische PSD-Vorlage zum Herunterladen auf der Webseite.

Die PSD-Vorlage für das 1140er Grids.

3. Und so funktioniert das 1140er Grid

Wenn du dir den .zip Ordner des Grids heruntergeladen hast, findest du die CSS-Dateien 1140.css, ie.css, layout.css, mobile.css, smallerscreen.css und typeimg.css in einem Extra-Ordner. In der beigefügten index.html Datei findest du den benötigten HTML-Code, der die Grundlage für deinen eigenen Code ist. Alle Dateien sind ausreichend und leicht verständlich dokumentiert, so dass eigentlich nichts schief gehen kann, sobald du dich ein wenig ist das System eingearbeitet hast.

In der Beispiel-Datei index.html werden innerhalb des head-tags alle notwendigen Stylesheets mit Hilfe von link-tags aufgerufen.

Beispiel-Code innerhalb des head-tags.

Außerdem findest du hier auch den für die Media Queries benötigten viewport meta-tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Im body-tag von index.html ist eine vierspaltige Vorlage des Grids vorbereitet.

Beispiel-Code innerhalb des body-tags.

Die wichtigsten CSS-Klassen und CSS-Dateien erklärt

Die CSS-Klasse .container wird im Grid genutzt, um den Content der Webseite einzubinden. Der container-Div enthält 20px padding rechts und links.

Die nächste CSS-Klasse .row legt fest, dass alle Elemente zentriert und in voller Breite (max-width: 1140px) angezeigt werden.

Dann kannst du die Spalten definieren, hierzu sind die 12 CSS-Klassen .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol .twelvecol vorbereitet.

Für den Div mit der letzten Spalte benötigst du außerdem noch die CSS-Klasse .last, um den margin-right Wert für diese Spalte auf 0px zurück zu setzen.

Alle Schriften-Styles (Font-Styles von body, h1, h2, h3, p, blockquote), Links (a, a:hover, a img) und img-Styles, kannst du in der typeimg.css Datei im CSS-Ordner anpassen.

Die eigenen Styles deines Themes kannst du dann in der layout.css Datei einfügen.

Wie gefällt dir das 1140px Grid-System? Hast du Fragen zur Verwendung des CSS-Rasters oder hast du bereits eigene Erfahrungen mit dem Grid machen können? Über dein Feedback, Fragen oder weitere Tipps freue ich mich sehr!