Großzügige Fließtexte und riesige Überschriften

Diesen aktuellen Trend zu immer größeren Schriften (sowohl für Fließtexte, als auch für Überschriften) kann man wohl vor allem der immer wichtiger werdenden Webseiten-Optimierung für mobile Geräte zuschreiben.

Erst vor ein paar Tagen haben die Webdesigner Jeffrey Zeldman und Elliot Jay Stocks neue Redesigns ihrer Webseiten mit deutlich größerer Typografie veröffentlicht.

Die Schrift von Zeldman.com ist auf deim iPad sehr angenehm lesbar (Fließtext Georgia, 24px).

Das neue Webdesign von Elliot Jay Stocks spielt mit riesigen Überschriften.

Auf der Webseite von Webdesigner Tim van Damme kommt ebenfalls eine große Schriftgröße (Elena, 24px) für den Fließtext zum Einsatz.

Auf der Webseite Maxvoltar.com wird eine großzügige Schriftgröße für den Fließtext verwendet.

Schriftgrößen neu überdacht

Auch wenn diese Tendez vielen Webdesignern anfangs etwas ungewöhnlich erscheint, ist der Trend zu großen Schriften meiner Ansicht nach auf jeden Fall ein Schritt in die richtige Richtung. Den schließlich werden täglich immer mehr hochwertige Inhalte im Web veröffentlicht und gerade beim längeren Lesen auf mobilen Geräten strengen zu kleine Schriftgrößen die Augen unnötig an.

Das Lesen eines Artikels auf der Spiegel Online Webseite ist dagegen sehr anstrengend.

Da responsive Webdesign sich immer mehr durchsetzt sind hoffentlich auch die Zeiten des ständigen Heran-Zoomens von Webtexten möglichst bald vorbei. Der Bedarf Schriftgrößen im Webdesign für die verschiedensten Geräte individuell zu optimieren, dürfte damit also noch weiter wachsen.

Typografie als wichtiges Stilelement

Große Typografie ist natürlich nicht nur sehr viel angenehmer lesbar. Sie kann, wenn richtig eingesetzt auch sehr stylisch und schick daher kommen.

Schließlich wird große Typografie nicht nur für Kinderbücher eingesetzt, sondern kann auch einen kreativen und künstlerischen Charakter haben. Und da es mit Hilfe von Google Webfonts oder Typekit Schriften auch immer mehr Auswahl an schönen und individuellen Schriften gibt, kann Typografie derzeit mehr denn je als wichtiges Stilelement im Webdesign verwendet werden.

Webdesigner Trent Walton gestaltet jeden einzelnen Artikel mit einer riesigen, individuellen Überschrift.

Wie ist deine Meinung?

Wie gefällt dir der aktuelle Trend zu immer größeren Schriften im Webdesign? Kennst du weitere Webseiten-Beispiele, die diesem Trend ebenfalls bereits folgen? Über deine Meinung und weitere Webdesign-Beispiele mit großer Typografie freue ich mich sehr!

Was macht ein gutes Blank-Theme aus?

Wichtig ist, dass du mit dem Blank Theme gut zurecht kommst und es deine Arbeitsweise bei der Theme-Entwicklung unterstützt. Zu viele Extras sind zwar verlockend, doch ein Blank-Theme ist meiner Ansicht nach eher mit einer leeren Leinwand zu vergleichen und weniger ist da bekanntlich meist mehr.

Natürlich kommt es immer auch auf das jeweilige Projekt an und welche Features benötigt werden und welches Blank-Theme diese eventuell schon integriert hat. Es kann sich also lohnen vor Projektgebinn noch einmal zu vergleichen, welches Blank-Theme am besten für das aktuelle Projekt passt.

Relevante Features eines modernen Blank-Themes sind meiner Ansicht nach:

• HTML5/CSS3
• eine saubere Template-Dateistruktur
• gute Dokumentation (im Code und als Online oder zum Download)
• vorbereitete Theme-Optionen (wenn benötigt)
• responsive CSS (z.B. eine vorbereitete responsive Navigation)
• Reset CSS
• grundlegenende CSS-Struktur und Styles für Typografie-Elemente oder Alignment
• vorbereitete jQuery Plugins (z.B. für Tabs oder Dropdowns, wenn für das Projekt benötigt)

Eine Übersicht aktueller WordPress Blank-Themes

Nachdem du dich für den Einsatz eines Blank-Themes zum Start deines nächsten WordPress Theme-Projektes entschieden hast, folgt die Qual der Wahl. Welches Blank-Theme ist das richtige für mein Projekt? Hier eine kleine Übersicht beliebter, moderner WordPress Blank-Themes, manche schlichter, andere mit jeder Menge Goodies:

Bones Theme

Das Bones Theme ist ein schlichtes, beliebtes HTML5 Starter Theme. Den Code baut das Bones Theme auf der HTML5 Boilerplate auf. Inzwischen gibt es auch eine responsive Version von Bones. Dazu wird die 320 and Up mobile-first Boilerplate genutzt.

BootstrapWP

BootstrapWP ist nur eines der Blank-Themes und Theme-Frameworks die Bootstrap von Twitter als Grundlage nutzen. Bootstrap selbst bietet etliche Features, wie vorbereitete jQuery-Plugins (für Buttons, Tabs, Sliders), Typografie Styles oder eine vorbereitete responsive Navigation (siehe Abbildung). Das BootstrapWP ist daher eher umfangereich und man muss sich ein wenig einarbeiten. Wenn man viele der Features sowieso für das eigene Projekt benötigt, kann BootstrapWP eine tolle Blank-Theme Basis bieten.

Roots Theme

Das Roots Theme baut genau wie BootstrapWP auf Twitter’s Bootstrap auf. Markup und Stylesheet basiert auf HTML5 Boilerplate. Das Roots Blank-Theme eignet sich daher vor allem, wenn du etliche Menge Features sowie ein responsive Grid in deinem Theme benötigst. Außerdem bietet Roots bereits vorbereitete Theme-Übersetzungen an.

Foundation for WordPress

Foundation von ZURB bietet eine ähnliche Code-Grundlage wie Bootstrap. Mit Foundation for WordPress kannst du daher ebenso komplexere Projekte mit JavaScript-Elementen (z.B. dem responsive Orbit Slider) und responsive Layout aufbauen.

Der responsive Slider Orbit von ZURB.

_s Theme

Möchtest du eher eine reduzierteres Blank-Theme für deinen Projekt-Start nutzen, bietet das neue _s Theme eine solide Grundlage. Das Theme wurde vom Automattic-Team entwickelt und bietet ein sauberes, HTML5 Starter Theme ohne jede Menge Features und vorbereitete Styles. Es bietet zwar keine vorbereiteten responsive Styles, diese kannst du aber mit Hilfe von Media Queries recht schnell individuell in deinem Stylesheet einbinden. Das _S Theme bietet übrigens schon eine vorbereitete Theme-Optionenseite an.

Die Template Dateien des _s Blank-Themes.

Ein eigenes Blank-Theme

Wenn du sehr oft mit WordPress-Themes arbeitest ist es sehr wahrscheinlich, dass du nach einer Weile dein eigenes Blank-Theme entwickeln möchtest. Oftmals entsteht ein eigenes Blank-Theme quasi von selbst, da du dich von Projekt zu Projekt sowieso an deinen neusten Themes orientierst. Wenn dir diese Arbeitsweise entspricht lohnt es sich, eine eigene Vorlage ausgehend von deinem aktuellsten Theme zu erstellen.

Ein eigenes Blank-Theme hat den Vorteil, dass du das Theme ganz auf deine Arbeitsweise anpassen kannst und keinen unnötigen Features und Elemente beinhaltet, die erst gelöscht werden müssten, falls sie nicht benötigt werden.

Eine hilfrieche Inspirationen und Tipps zum Thema Starter Theme kannst du auch noch auf dem Themeshaper-Blog im Artikel »What Do You Really Need in a WordPress Starter Theme?« finden.

Deine Erfahrungen und Tipps

Welche Blank/Starker Themes sind deiner Erfahrung nach bei der WordPress-Theme Entwicklung besonders hilfreich und können jede Menge Zeit bei der Entwicklung sparen? Und worauf sollte man bei der Auswahl eines Blank-Themes für das nächste Projekt achten? Über dein Feedback und deine Tipps freue ich mich sehr!

Letze Woche war »Responsive Week« beim .net magazine. Das bedeutet, dass dort jede Menge aktuelle, spannende Artikel zum Thema responsive Webdesign erschienen sind, die du auf keinen Fall verpassen solltest. Es gibt u.a. Ein 5-teiliges Tutorial »Build a responsive site in a week«, ein Interview mit Ethan Marcotte (Autor von Responsive Webdesign bei A Book Apart), Infos zum 320 and Up Boilerplate von Andy Clarke und einen Artikel mit hilfreichen Tipps, um Fehler bei der Entwicklung eines responsive Webdesigns zu vermeiden.

Als Webworker und Computer-Geek sitzt man so ziemlich den ganzen Tag vorm Rechner und in der Mittagspause bleibt auch oft nur Zeit für einen kleines Mittagessen oder einen Snack unterwegs. Wenn man sich da kein Lunchpaket vorbereitet hat, tendiert man leider viel zu schnell dazu, auf ungesundes Fast-Food oder eher langweilige belegte Brötchen zurückzugreifen. Doch mit ein bisschen Kreativität kann man sich in ein paar Minuten auch einen leckeren Salat für die Mittsgspause vorbereiten. Mit so einem gesunden Lunchpaket arbeitet es sich dann auch gleich viel leichter, versprochen :)

Tomaten Mandel Salat mit Pesto

Zutaten:
-Tomaten (besonders lecker sind kleine Cocktail-Tomaten)
- Mandeln (Menge nach Belieben)
- 1 Glas Pesto
- 1 Zitrone
- Olivenöl, Salz und Pfeffer

Ein Tomaten-Salat ist immer lecker und du kannst die Tomaten ganz einfach schon gewaschen und geschnitten in einer Tupperbox vorbereiten. Dann würzt du deinen Salat direkt in der Box mit Olivenöl, Zitronensaft, Salz und Pfeffer oder wie du dein Dressing am liebsten magst. Die Mandeln kannst du entweder direkt in der Packung oder in einem Zip-Beutel mitnehmen (andere Nüsse, z.B. Walnüsse sind natürlich genauso lecker). Das Pesto kannst du auch leicht im Glas mitnehmen.

In deiner Mittagspause kannst du dann entweder direkt in der Tupperbox oder auf einem Teller die vorbereitetn Tomaten und die Mandeln mischen und mit etwas Pesto (alternativ passt auch Hüttenkäse oder Hummus) essen.

Leckerer Tomaten Mandel Salat mit Pesto

Grüner Salat mit Kichererbsen und Parmesan

Zutaten:
- grünen, gemischten Salat (für Eilige direkt fertig aus der Tüte)
- 1 Dose Kichererbsen (Thunfisch passt ebenfalls)
- 1 Tüte geriebenen Parmesan
- 1 Zitrone
- Olivenöl, Salz und Pfeffer (falls am Arbeitsplatz vorhanden)

Deinen Salat kannst du gewaschen am besten in einer Frischhalte-Tüte oder in einem Gefrierbeutel zum Mitnehmen einpacken. Wenn du es besonders eilig hast, kannst du auch schon fertigen Salat in der Tüte kaufen. Die Kichererbsen (achte darauf, dass du eine Dose mit Lasche zum Öffnen kaufst), den Parmesan und die Zitrone kannst du ebenfalls leicht transportieren.

In der Mittagspause kannst du dann deinen Salat auf einem Teller vorbereiten, indem du die Kischerbsen über dem grünen Salat verteilst und alles mit Zitrone und wenn möglich Olivenöl, Salz und Pfeffer anmachst. Den Parmesan kannst du ganz am Ende über den Salat streuen. Falls du im Büro oder unterwegs gerade kein Geschirr zur Verfügung haben solltet, kannst du deinen Salat sogar auch dikt in der Salattüte mischen und aus der Tüte essen.

Grüner, gemischter Salat mit Kichererbsen und Parmesan, yummy :)

Dein Feedback und weitere Vorschläge

Ich hoffe meine Webworker-Lunch Vorschläge gefallen dir und du hast Lust die Salate selbst auszuprobieren. Alle Rezept-Inspirationen habe ich auf dem Stonesoup-Blog gefunden. Toll ist, dass du in ein paar Minuten alles vorbereiten kannst und nicht auf ungesundes Fast-Food angewiesen bist. Lecker ist das ganze natürlich auch noch. Probiere es doch einfach einmal aus und schreibe mir dein Feedback. Auch über weitere gesunde Webworker-Lunch Ideen freue ich mich sehr!

Wie einige bestimmt bereits mitbekommen haben, sind wir zur Zeit in Neuseeland unterwegs (mehr Infos über unserer Reise findest du auch auf dem Kiwikoo-Blog). Und da letztes Wochenende in Auckland das diesjährige WordCamp New Zealand stattgefunden hat, haben wir die Gelegenheit natürlich genutzt, um beim Treffen der neuseeländischen WordPress-Fans mit dabei zu sein. Hier ein kleiner, zusammenfassender Bericht unserer Erlebnisse.

Ein toller Empfang

Neuseeländer sind unglaublich hilfsbereit und gastfreundlich und so wurden wir schon im Vorfeld des WordCamps via Twitter (@wordcampnz) und WordCamp-Newsletter herzlich Willkommen geheißen. Auch auf dem Event selbst waren wir schnell als die »Two Germans« bekannt und wurden von den Organisatoren, anderen Teilnehmern und einigen WordCamp-Speakern aus Neuseeland und Australien freundlich begrüßt.

Insgesamt war die Amtosphäre sehr herzlich und unkompliziert. Da das WordCamp in Neuseeland nicht so riesig ist, war es möglich eine gemeinsame Veranstaltung zu organisieren, statt der sonst oft üblichen Sessions. Für uns war das klasse, da wir so bei allen Präsentationen zuhören konnten.

Das Programm

Die Themen der zwischen 10 und 40 Minuten langen Reden waren bunt gemischt. Es wurden u.a. verschiedene neuseeländische Blog-Projekte vorgestellt, wie die Maori News-Seite TangataWhenua.com von Nikolasa und Potaua Biasiny-Tule. Der Einblick in die Arbeit der beiden Blogger und ihre Erfahrungen mit WordPress hat uns ganz besonders beeindruckt.

Auch die Panel Diskussion zum Thema »How being Online is transforming business in 2012 incl WordPress & other platforms« war eine interessante Abwechslung. Die Insights des in Neuseeland berühmten Ice Cream-Artist Giapo waren dabei besonders inspirierend und erfrischend.

Ein paar Impressionen

Hier paar Bilder unserer WordCamp NZ-Eindrücke. Neben den Vorträgen hat bei der gesamten Veranstaltung auch das leibliche Wohl und die Musik eine große Rolle gespielt und wir haben starken Auckländer Kaffee, tolle Live-Musik und jede Menge leckeres Essen bei der After Party in der Cassette Numer Nine genießen können.

Weitere Bilder des WordCamp NZ 2012 auf Flickr.

Was haben wir gelernt

Die großzügige, nette und unkomplizierte Art der Neuseeländer hat uns wieder einmal sehr beeindruckt und wir hoffen, dass wir von dieser entspannteren Art als bei uns zu Hause gewohnt lernen können.

Aber auch die Tatsache, dass wir durch das gemeinsame Interesse an WordPress auch am anderen Ende der Welt Teil einer großen Community sein können, war schon ein tolles Erlebnis und wir sind uns sicher, dass dies nur das erste von vielen WordCamps war, die wir noch besuchen werden. Auf der Webseite WordCamp Central findet man den Kalender für alle WordCamps weltweit. Für dieses Jahr hoffen wir endlich auch einmal beim WordCamp Deutschland mit dabei sein zu können, nachdem wir im letzten Jahr den Termin leider nicht wahrnehmen konnten. Darüber würden wir uns auf alle Fälle sehr freuen.

Hast du auch schon einmal an einem WordCamp in deinem Land oder im Ausland teilnehmen können? Wenn ja, wie sind deine Erfahrungen? Über dein Feedback würde ich mich sehr freuen!

1. Placeholder-Inputtext stylen

Um die Standard-Textfarbe Grau eines HTML5 Placeholder-Textes (z.B. Suchbegriff eingeben… in einem Suchformular) individuell anzupassen, kannst du die folgenden CSS-Eigenschaften mit deinem eigenen color-Wert nutzen:

Der CSS-Code:

::-webkit-input-placeholder {color:#999;}
:-moz-placeholder {color:#999;}
.placeholder {color:#999;}

So kannst du einen dunkleren Grauton oder eine andere Farbe für den Placeholder-Text in Formlurfeldern definieren. Da derzeit die unterschiedlichen Browser noch ihre jeweils eigene Eigenschaft nutzen, musst du alle drei Eigenschaften angeben. Der Internet Explorer unterstützt leider noch keine HTML5 Placeholder. Hier kannst du bei Bedarf auf eine JavaScript-Lösung zurückgreifen (z.B. jQuery Placeholder auf GitHub).

2. text-size-adjust: none

Indem man text-size-adjust mit none setzt, kann man das automatische größer Skalieren von gewissen, als wichtig eingestuften Textelementen (z.B. auf dem iPhone bei Navigationsmenüs oder Elementen der Sidebar) verhindern.

Der CSS-Code:

html {
-ms-text-size-adjust: none;
-webkit-text-size-adjust: none;
}

Man sollte zwar etwas vorsichtig mit dieser CSS-Eigenschaft umgehen, da man mit dieser Funktion den Text-Zoom komplett deaktiviert. Eventuell könntest du die Eigenschaft daher nur für die Styles der mobilen Geräte einsetzen.

3. Pseudoklassen :before und :after

Die CSS-Pseudoklassen :before und :after können hilfreich sein, um extra Schriftzeichen, wie z.B. den Gedankenstrich vor dem Zitat-Autor direkt über das Stylesheet zu integrieren. Mit Hilfe der CSS-Eigenschaft content funktioniert das so:

Der CSS-Code:

#content blockquote p cite:before {
	content:"\2212 \0020";
}

Der HTML-Code für ein Zitat mit Zitat-Autor muss dann nur noch in der folgenden Form im Text-Editor eingefügt werden:

<blockquote>Zitattext hier...
<cite><a href="hhttp://LinkZitatAutor.de/">Name des Zitat-Autors</a></cite></blockquote>

4. text-rendering: optimizeLegibility;

Über die CSS-Eigenschaft text-rendering:optimizeLegibility lässt sich die Lesbarkeit von Text optimieren. Besonders sinnvoll ist dies bei größer gesetzten Text-Elementen wie den Überschriften. Die Abstände zwischen den einzelnen Buchstaben werden dann automatisch angepasst (Kerning).

Der CSS-Code:

h1, h2, h3, h4, h5, h6 {
	text-rendering: optimizeLegibility;
}

Die Optimierung sollte allerdings nicht auf alle Texteelemente angewandt werden, da dies die Ladegeschwindigkeit der Webseite im Browser verlangsamen könnte. Die Geschwindigkeit ist vor allem auf mobilen Geräten relevant. Weitere Infos zu text-rendering: optimizeLegibility findest du im folgenden Blog-Artikel »Cross-browser kerning-pairs & ligatures«.

5. word-wrap: break-word

Mit Hilfe der word-wrap Eigenschaft und dem Wert break-word kannst du sicher stellen, dass sehr lange Wörter auf jeden Fall automatisch in die nächste Zeile umgebrochen werden und nicht über den Inhaltsbereich herausreichen.

Dies kann z.B. bei Blogartikel-Überschriften sinnvoll werden oder beim Seiten-Titel eines WordPress-Themes.

Der CSS-Code:

#site-title h1 {
word-wrap: break-word;
}

Welches sind deine Lieblings-CSS-Tipps?

Wie gefallen dir die vorgestellten CSS-Tipps und fallen Dir noch weitere praktische Tipps für die Optimierung des Stylesheets ein? Über dein Feedback und deine weiteren Tipps freue ich mich sehr!

(Bild-Kredit: A Book Apart)

Die neueste A Book Apart-Veröffentlichung »Design is a Job« von Mike Monteiro (Mule Design Studio in San Francisco) ist besonders für alle Designer/Webdesigner interessant, die mehr über den Umgang mit Kunden, die Abrechnung der eigenen Designarbeit, den Arbeitsprozess als Designer oder die Zusammenarbeit mit anderen Freelancern erfahren möchten. Das zweite Kapitel des Buches »Getting Clients« kann als Leseprobe auf dem A List Apart-Blog online gelesen werden. Bestellen kannst du »Design is a Job« als ebook (9 US Dollar) oder Paperback (18 US Dollar + Shipping) auf der A Book Apart-Webseite. Viel Spaß beim Lesen :)

Ständig erreichbar im mobilen Internet

Zugegeben, ich ertappe ich mich selbst viel zu oft dabei, dass ich meine guten Vorstätze nicht streng genug einhalte und auch an Wochenenden z.B. das Bearbeiten von Emails nicht immer sein lassen kann. Gerade wenn man als Freelancer im Web arbeitet, ist man wohl immer schnell dazu verleitet, Blog-Kommentare, Tweets, Facebook-Meldungen oder Emails zu verfolgen und etwas zu oft nach deren Updates zu checken. Schließlich macht die Kommunikation im Web ja auch jede Menge Spaß und außerdem ist es natürlich auch wichtig, informiert zu bleiben und relevante Tweets oder Blog-Artikel der eigenen Branche mit zu verfolgen.

Doch so langsam muss man eventuell ein wenig strenger zu sich werden und sich feste Zeiten für die Beantwortung von Emails, Tweets oder Kommentaren einteilen. Denn spätestens mit den beliebten (und natürlich auch geliebten) Smartphones oder Tablets ist man heute eigentlich immer online und somit auch ständig für Kunden, Kollegen oder Freunde erreichbar. Diese ständige Verfügbarkeit hat meiner Ansicht nach auf jeden Fall jede Menge Vorteile. Doch gerade wenn man nicht nur in der Freizeit Zeit im Web verbringt, sondern auch beruflich mit dem Internet arbeitet, ist es wichtig sich dieser ständigen Erreichbarkeit bewusst zu sein und möglichst geregelt damit umzugehen.

Einige Vorschläge:

Wie schon gesagt, sind feste Regeln für die Kundenbetreuung, Blogpflege und anderen Kommunikationsmedien im Web gerade für Webworker und Freelancer meiner Ansicht nach sehr wichtig.

• Um nicht ständig im eigenen Arbeitsrythmus unterbrochen zu werden, kann man sich feste Zeiten für die Kommunikation im Web einteilen. So kann man z.B. eine Stunde täglich für die Beantwortung von Emails oder Blogkommentaren in den Tagesplan einbinden.
• Aus meiner eigenen Erfahrung ist es außerdem hilfreich, nicht als erste Aufgabe am Tag mit der Bearbeitung von Mails zu beginnen, sondern sich zuvor in aller Frische einer produktiveren oder eher kreativeren Aufgabe zu widmen.
• Auch einen fester Computer-freier Tag ist eine Option. Sonntags bleibt zumindest der Laptop bei mir komplett aus. Emails checke ich zwar weiter über das Smartphone, beantwortet werden sie aber wenn irgend möglich erst wieder montags.

Dies sind natürlich ganz persönliche Regeln und bestimmt bevorzugt jeder eine etwas andere Arbeitsweise. Für mich selbst haben sich diese Tipps auf jeden Fall bereits bewährt und ich habe das gefühlt, wenn ich gewisse Regeln einhalte, wird meine Arbeit insgesamt sehr viel effektiver und am Ende steht einem mehr Freizeit zur Verfügung.

Wie ist deine Meinung?

Wie verfügbar sollte man deiner Meinung nach für Kunden und den Rest der Online-Welt sein? Hast du dir bereits feste Regeln gesetzt, wie schnell und wann du auf Emails & Co antwortest? Gibt es Tage, an denen für dich das Internet komplett tabu ist? Über deine Meinung und deine Erfahrungen freue ich mich sehr!

Mit den kostenlosen, sehr schön vorbereiteten »Style Tiles« von Samantha Warren kannst du deine ersten Webdesign-Entwürfe zur Präsentation für deine Kunden vorbereiten. Da du mit den Style Tiles schnell mehrer Entwürfe erstellen kannst, sind die PSD Projekt-Vorlagen auch besonders für die Präsentation eines flexiblen, responsive Webdesigns geeignet.

»Leaving old Internet Explorer behind«

Den Ansatz, eine JavaScript-freie Lösung für die Unterstützung älterer Internet Explorer in einem mobile-first Webdesign zu finden, habe ich im Artikel »Leaving old Internet Explorer behind« entdeckt. Die Idee hat mich überzeugt, da sie eine simple und praktische Alternative zur Verwendung von JavaScripts bietet.

Und so funktioniert die Umsetzung:

1. Conditional Comments

Glücklicherweise kann man für die älteren Internet Explorer-Versionen Conditional Comments einbinden. Mit Hilfe dieser praktischen Funktion, hat man die Möglichkeit extra CSS-Klassen zu zuweisen, wenn ein älterer Internet Explorer Browser im Einsatz ist. Die Conditional Comments werden innerhalb des head-tags (in einem WordPress-Theme also in der header.php Datei) eingefügt.

Du kannst entweder eine gemeinsame CSS-Klasse (.ie) für alle älteren Browser-Versionen einfügen:

<!--[if lte IE 8]><html class="ie"><![endif]-->

Oder die einzenen Internet Explorer-Versionen separat ansprechen:

<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->

»lte« steht hier für »gleich oder kleiner als«, »lt« für »kleiner als«. Im Beitrag »About Conditional Comments« auf der msdn-Webseite findest du eine ausführliche Übersicht zur Verwendung von Conditional Comments für ältere Internet Explorer Browser.

2. Die zusätzliche CSS-Klasse

Um die Unterstützung ältere Internet Explorer in einem responsive, mobile-first Webdesign nicht unnötig kompliziert zu machen, reicht in den meisten Fällen eine gemeinsame CSS-Klasse z.B. .ie für alle älteren IEs aus.

.ie #container {
	width:980px;
}

Bevor die Media Queries für das responsive Layout in deinem Stylesheet beginnen, kannst du jetzt also alle benötigten .ie Styles integrieren, um das Webdesign auch in den älternen Internet Explorern anständig aussehen zu lassen.

Damit das eigentlich für kleine Smartphone-Bildschirme angelegte Layout eines mobile-first Webdesigns nicht über die komplette Bildschirm-Größe gestretched wird, solltest du dem Layout also als erstes eine maximale Gesamtbreite in Pixel zuweisen (z.B. width: 980px für die CSS-Klasse .container).

Je nachdem, was für einen Layout-Aufbau dein Webdesign hat, kannst du jetzt eine Gesamtbreite für deinen Contentbereich und eine Gesamtbreite für eine eventuelle Sidebar hinzufügen. Die benötigten float-Werte musst du natürlich auch noch hinzufügen. Wenn es das Layout deines Webdesign erlaubt, kannst du auch überlegen, ob du für die älteren Internet Explorer-Versionen eine vereinfachte, vielleicht einspaltige Webdesign-Version beibehältst. Auf diese Weise müssen nicht unnötig viele zusätzliche CSS-Eigenschaften extra für die alten IEs im Stylesheet addiert werden.

Es kommt wohl immer ein wenig auf den individuellen Webseiten-Aufbau an, in wie weit man das Layout für die alten IEs vereinfachen kann, um so die Größe des Stylesheets möglichst gering zu halten. Aus meiner eigenen Erfahrung sollte man die Ansicht möglichst oft live testen oder einen IE Test-Browser (z.B. IE NetRenderer oder IETester) zum Testen des Layouts einsetzen. Hilfreiche Tipps für deine Browsertests findest du auch noch im Artikel »Webseiten Cross-Browsertests: Ein kleiner Überblick praktischer Tools und Tipps«.

Wie gefällt dir diese Alternative?

Meiner Ansicht nach ist die Lösung, mit Hilfe von Condtional Comments die älteren IE Browser anzusprechen und so eine Media Queries unabhängige Layout-Version für diese Browser zu erstellen, eine praktische Alternative, um auf aufwendigere JavaScripts verzichten zu können. Wie gefällt dir diese Alternative und hast du weitere Lösungen für die Unterstüztung der älternen Internet Explorer 6-8 in einem responsive Webdesign? Über dein Feedback und deine Tipps freue ich mich sehr!