Im Printbereich werden Pull Quotes häufiger verwendet. Doch auch im Web können Pull Quotes genutzt werden, um lange Texte spannender zu gestalten und die Botschaft eines Textes noch besser zu vermitteln. Für die Umsetzung von Pull Quotes kannst du ein individuelles CSS Styling anlegen. Falls du mit WordPress arbeitest, gibt es sogar praktische Plugins, mit denen sich Plull Quotes leicht umsetzen lassen.

Eigene Plull Quotes erstellen

Indem du eine eigene CSS-Klasse für Pull Quotes verwendest (z.B. pull), kannst du standardmäßige Block Quotes <blockquote> ganz leicht zu Pull Quotes umfunktionieren.

<blockquote class="pull">Das ist ein Plull Quote.</blockquote>

Um die Position des Pull Quotes zu bestimmen, kannst du zusätzlich CSS-Klassen für Rechts- oder Linksbündigkeit nutzen (alignright und alignleft).

<blockquote class="pull alignright">Plull Quote rechts.</blockquote>
<blockquote class="pull alignleft">Plull Quote links.</blockquote>

Die benötigten CSS-Styles kannst du dann in deinem Stylesheet ungefähr so aussehen (du kannst das Styling deiner Pull Quotes natürlich mit Rändern, Schriftarten oder anderen Styles noch individualisieren):

blockquote.pull {
	margin: 0 0 1.4em;
	text-align: center;
}
blockquote.pull.alignleft {
	width: 33%;
	margin: 0 1.4em 0.5em 0;
	padding:0;
	float:left;
	display:inline;
	font-size:1.1em;
	text-align: right;
	border:none;
}
blockquote.pull.alignright {
	width: 33%;
	margin: 0 0 0.5em 1.4em;
	padding:0;
	float:right;
	display:inline;
	font-size:1.1em;
	text-align: left;
	border:none;
}

WordPress-Plugins für Pull Quotes

Wenn du WordPress nutzt, kannst du alternativ zu einer individuellen Umsetzung auch eines der vorbereiteten Pull Quote-WordPress Plugins nutzen. Ich habe folgende Plugins getestet:

Simple Pull Quote Plugin

Simple Pull Quote nutzt den Shortcode [pullquote], um Pull Quotes umzusetzen. Im visuellen Editor steht ein Icon zur Verfügung, um die Pull Quotes zu markieren. Es ist ein Style vorbereitet. Um diesen individuell anzupassen, müsstest du das Stylsheet aus dem Plugin-Ordner kopieren und in dein eigenes HauptStylesheet einfügen. Anpassungsoptionen gibt es beim Plugin ansonsten keine. Der Nachteil des Plugins ist, dass nach der Deaktivierung die Shortcodes im Artikel stehen bleiben.

Graceful Pull-Quotes Plugin

Etwas praktischer finde ich daher das Gracefull Pull-Quote Plugin. Hier gibt es eine Settings-Seite (unter Design / Pull Quotes), auf der du einige Einstellungs-Optionen für die Darstellung der Pull Quotes hast. Es gibt beispielsweise mehrere Pull Quote-Styles zur Auswahl, die man sich sogar in einer kleinen Vorschau anschauen kann. Außerdem kannst du bestimmen, ob du den HTML-tag <blockquote> + eine CSS-Klasse oder einen div-tag + CSS-Klasse für die Umsetzung der Pull Quotes nutzen möchtest. Auch die Bezeichnung der CSS-Klasse ist frei wählbar.

Einstellungs-Optionen des Gracefull Pull Quote WordPress-Plugins

Auf diese Weise hast du etwas mehr Kontrolle über die Integration deiner Pull Quotes. Und wenn du das Plugin später deaktivueren möchtest, werden deine Quotes entweder zu Zitaten (blockquotes) umgestylt oder bei der Nutzung eines Div’s nicht mehr für den Leser sichtbar angezeigt.

Tipps zum Weiterlesen

• Einen interessanten und umfangreichen Artikel zum Thema Block- und Pull Quotes kannst du dir bei Smashing Magazine anschauen: »Block Quotes and Pull Quotes: Examples and Best Practices«.
• Ein tolles kleines Einsteigerbuch zum Thema Typografie allgemein ist außerdem »Buchstaben kommen selten allein: Ein typografisches Handbuch« von Indra Kupferschmid.

Kennst du weitere Ergänzungen zum Thema Pull Quotes beitragen oder kennst du besonders schöne Umsetzungen von Pull Quotes im Web? Über dein Feedback freue ich mich sehr!

Lesen im Web

Anders als beim Lesen eines Buches, werden beim Lesen im Internet Texte meist nur kurz mit dem Auge abgescannt oder überflogen. Erst dann entscheidet der Leser, ob er sich länger auf einer Webseite aufhält oder einen Blog-Artikel vollständig lesen möchte.

Dieses Abscannen von Texten wird beim Lesen auf mobilen Geräten sogar noch verstärkt. Hier sitzt der Leser meist nicht konzentriert am Schreibtisch, wie bei der Nutzung eines Desktop-Computers. Ein Smartphone oder Tablet nutzt man vor allem in der Freizeit oder unterwegs, und dort ist man noch schneller abgelenkt oder unaufmerksam.

Lesen erleichtern

Daher sollte man es seinen Lesern nicht noch unnötig schwer machen, lange Texte zu lesen. Durch das Auflockern von längeren Texten kann das Auge entlastet und die Aufmerksamkeit und der Spaß beim Lesen gesteigert werden. Hier ein paar Tipps, um lange Texte spannender und angenehm lesbar zu gestalten.

1. Ausreichende Schriftgröße

Als erstes sollte man auf eine ausreichende Schriftgröße achten. Eine kleine Schriftgröße für Fließtexte sieht zwar schick aus, strengt aber das Auge beim Lesen unnötig an. Besonders längere Texte werden unangenehm zu lesen. Schlimmstenfalls bricht der Leser den Text sogar komplett ab.

Eine angenehme Schriftgröße vs. eine zu kleine Schriftgröße (Neue Helvetica, Roman 55, 16px und 13px)

Die Größe der Schrift fällt bei jeder Schriftart etwas anders aus. Als Richtlinie kann man aber von einer Fließtext-Schrift ausgehen, die mindestens 16 Pixel haben sollte. Ein geniales Tool zum Abmessen von Schriftgrößen im Browser ist »What the Font« (als Bookmarklet, Chrome oder Safari Browser-Extension).

2. Lange Texte in kurze Abschnitte gliedern

Bei langen Texten ist es ideal, diesen in kürzere Absätze zu unterteilen. Bei Web-Texten kann man diese Technik noch viel intensiver betreiben, als bei Print-Texten. So kann der Leser auch beim flüchtigen Überlesen eines Textes Anhaltspunkte finden und verliert sich nicht in einem langen, zähen Textfluss.

Beim Setzen von Textabschnitten solltest du immer darauf achten, das der Texte auch inhaltlich logisch getrennt wird. Eine willkürliche Trennung (z.B. nachdem der Text bereits fertig geschrieben ist), macht natürlich weniger Sinn.

3. Textabschnitte durch Überschriften trennen

Eine weitere Gliederung deines Textes kannst du durch das Setzen von Überschriften erreichen. Der Leser bekommt so eine Vorstellung, was ihn im nächsten Absatz zu erwarten ist. Wird ein Text nur flüchtig abgescannt, kann der Leser auch viel leichter mitten im Artikel mit dem Lesen beginnen, z.B. wenn ihn eine Überschrift besonders interessiert.

4. Gesamtbreite des Textes

Wichtig ist auch, dass die Gesamtbreite eines Textes nicht zu lang ist. Die ideale Breite hängt immer etwas von der Schriftgröße ab. In den meisten Fällen ist es aber nicht angenehm, wenn ein Text auf einem Desktop-Bildschirm breiter als 700-800 Pixel ist.

5. Mehrspaltigkeit

6. Listen

Ein weiteres tolles Tool zum Gliedern und Auflockern von Texten ist eine Liste. Listen lassen sich leicht überfliegen und sind angenehm zu lesen, da die einzelnen Punkte klar unterteilt sind. Einen langen Webtext durch eine (auch nur kurze) Auflistung zu unterbrechen ist ein hilfreiches Mittel, um einen Text aufzulockern.

• Listenelement 1
• Listenelement 2
• Listenelement 3
• Listenelement 4

7. Bilder

Bilder als auflockernde Elemente in einem langen Text zu nutzen, ist ebenfalls sehr effektiv. Bilder sind immer ein Hingucker und können daher einen Text für den Leser interessanter machen. Du solltest allerdings darauf achten, das du nicht zu viele Bilder in einem Text integrierst. Wenn der Textfluss zu stark unterbrochen wird, kann der Leser dem Text nicht mehr flüssig folgen und das Lesen des Textes wird anstrengend.

8. Zitate und Pullquotes

Wenn es inhaltlich Sinn macht, kannst du auch Zitate in einen Text einbinden. Diese Unterstreichen und Hinterlegen noch einmal die Botschaft deines Textes und bieten außerdem eine grafisch spannende Abwechslung zum normalen Standard-Fließtext.

Wenn du dich an die Form des Löffels erinnerst, mit dem du die Suppe gegessen hast, dann war es eine schlechte Form. Löffel und Letter sind Werkzeuge: das eine nimmt Nahrung aus der Schale, das andere nimmt Nahrung vom Papierblatt. Die Schrift muss so sein, dass der Leser sie nicht bemerkt…
Adrian Frutiger

Mit Pullquotes einen Textabsatz hervorheben

Mit einem Pullquote (auch Seitenansprache genannt) kannst du einen wichtigen, aussagekräftigen Text-Absatz oder Satz deines Textes noch einmal hervorheben und den Leser so auf deinen Inhalt neugierig machen. Im Gegensatz zum Zitat wird der Text beim Pullquote doppelt angezeigt, einmal hervorgehoben und dann noch einmal ganz normal im Fließtext.

9. Text auf Hintergrundflächen

Ähnlich wie bei einem Zitat oder Pullquote kannst du wichtige Textabschnitte auch durch einen farbigen Hintergrund hervorheben. Dies kann z.B. eine bestimmte Info sein oder eine Auflistung.

Damit der hervorgehobene Text als etwas besonderes im Text hervorsticht, solltest du den Text in der Fläche aber nicht zu lang werden lassen.

Deine Vorschläge zur Text-Optimierung

Fallen dir noch weitere typografische Elemente ein, um einen langen Text aufzulockern und attraktiver zum Lesen zu machen? Über dein Feedback und weitere Tipps freue ich mich sehr.

1. Konzentration auf die wichtigsten Menüpunkte

Um die eigene Webseite für den Leser überschaubarer zu machen ist es hilfreich, nicht zu viele Navigationspunkte einzurichten. Durch die Konzentration auf die wesentlichen Punkte kann sich der Leser schneller auf der Webseite zurecht finden, was gerade auf mobilen Geräten ein wichtiger Aspekt ist.

Denn von einem Tablet oder Smartphone aus, surft man oft nur mit halber Aufmerksamkeit (z.B. in der U-Bahn auf dem Weg nach Hause, in der Mittagspause, abends auf der Couch während der Fernseher läuft, im Fitness-Studio auf dem Laufbahn usw.). Aus diesem Grund ist eine klare, übersichtliche Navigation sinnvoll.

2. Nicht zu viele Sub-Menüs anlegen

Die Option mehrere Unter-Menüs anzulegen, ist bei WordPress sehr verbreitet und oftmals sind diese Untermenüs für die Navigation einer Webseite auch nötig. Falls diese Untermenüs nicht wirklich benötigt werden, solltest du überlegen auf sie zu verzichten. So kann die Navigation noch übersichtlicher werden. Alternativ kannst du eine Such-Funktion, Kategorien oder Schlagwörter anbieten, um eine intuitivere Navigation auf der Webseite zu ermöglichen.

Allgemein sollte man darauf achten, dass der wichtigste Inhalt der Webseite auf mobilen Geräten sofort sichtbar ist. Denn die Besucher möchten sich nicht gerne durch eine ewig lange Navigation scrollen, bevor sie z.B. die neusten Blogartikel sehen können. Das Motto heißt also: »Zuerst der Inhalt, dann die Navigation« (content first - navigation second).

3. Die Anzahl der Artikel auf der Blog-Startseite reduzieren

Unter Einstellungen / Lesen kann man in WordPress die Anzahl der Blog-Artikel auf der Startseite bestimmen. Damit die Startseite auf einem Smartphone nicht zu lang wird und man die Seite ewig herunterscollen müsste, sollte man die Gesamtanzahl der Artikel etwas reduzieren.

4. Nur relevante Widgets anzeigen

Widgets sind eine tolle WordPress-Funktion und man kann die unterschiedlichsten Inhalte anzeigen. Doch um den Widgetbereich auf den kleineren Smartphone- und Tablet-Bildschirmen nicht zu lang werden zu lassen, sollte man sich auf die für den Blog wirklich wichtigen Widgets beschränken.

Eine Möglichkeit, um für die Anzeige von Kategorien und Archiv im Widget-Bereich Platz zu sparen, ist die Dropdown-Option der beiden Standard-Widgets. Auf mobilen Geräten werden die Dropdowns in praktischen Auswahl-Menüs angezeigt.

5. Nicht zu lange Artikel-Introtexte

Wenn du den more-tag in WordPress verwendest, um deine Artikel-Introtexte zu kürzen, solltest du darauf achten, dass du die Introtexte nicht zu lang anlegst. Kürzere Introtexte sind auf mobilen Geräten generell sinnvoller. Um den Textfluß aufzulockern, kannst du dann ab und zu Bilder oder Vorschau-Bilder in den Introtexten deiner Artikel einbinden.

6. Bilder in möglichst kleiner Auflösung

Weiter solltest du darauf achten, Artikel-Bilder in möglichst kleiner Dateigröße abzuspeichern. Die Dateigröße kannst du bei jpgs z.B. über die Auflösung regulieren. Eine mittlere Auflösung reicht in vielen Fällen völlig aus.

7. Apadative Images nutzen

Außerdem kannst du die Adaptive Images-Lösung nutzen, um alle Bilder deines Blogs automatisch in verschiedenen Größen abzuspeichern. Auf mobilen Geräten kann dann mit Hilfe von »Adaptive Images« auf die kleineren Bildgrößen zugegriffen werden. Eine Anleitung für die Integration von »Adaptive Images« findest du im Artikel »Mit Adaptive Images Bilder für responsive Webdesigns optimieren«.

8. Eine Such-Funktion anbieten

Eine Such-Funktion auf einem Blog zu integrieren, ist natürlich nicht nur auf mobilen Geräten wichtig. Aber gerade hier kann der gesamte Inhalt einer Webseite nicht auf einer großen Fläche übersichtlich angezeigt werden. Daher ist es besonders hilfreich, ein gut zugängliche Suche anzubieten. Auf vielen mobilen Webseiten und Apps wird die Suche sogar direkt im Headerbereich angeboten (oftmals sogar anstelle einer Navigation).

Fazit

Generell heißt das Schlüsselwort für die mobile Optimierung also reduzieren. Denn durch den begrenzten Platz auf den kleinen Smartphone- und Tablet-Displays wird es besonders wichtig, sich auf die wichtigsten Elemente und Inhalte einer Webseite zu konzentrieren.

Across all your mobile layouts, aim for the minimum amount necessary to help people meet their needs wether they are looking up or finding information, exploring and playing, checking in on important updates, or editing and creating content. Not only will reduction make putting mobile layouts together easier, it will also give people focused ways to get things done.
Luke Wroblewski in »Mobile First«

Von dieser Philosophie des Reduzierens kann dann aber auch gleichermaßen die Desktop-Ansicht deines Blogs profitieren. Denn nur weil dort mehr Platz zur Verfügung steht, muss dieser Platz ja nicht unbedingt bis auf den letzten Winkel mit Information ausgefüllt werden. Die Konzentration auf die wesentlichen Inhalte eines Blogs ist meiner Ansicht nach für alle Bildschirm-Formate und Geräte eine Bereicherung.

Fallen dir weitere Möglichkeiten ein, um WordPress-Webseiten und -Blogs für die Ansicht auf mobilen Geräten zu optimieren. Über deine Tipps und dein Feedback freue ich mich sehr!

1. WordPress.org vs. WordPress.com

Als keine Anmerkung vorab möchte ich dir noch kurz den Unterschied zwischen WordPress.org und WordPress.com erklären. Bei WordPress.com kannst du dir einen kostenlosen Blog mit einer Adresse im Format deinblog.wordpress.com einrichten. Dieser Blog wird dann auf dem Server bei WordPress.com gehostet und du musst keine Kosten für einen eigenen Webspace und eine eigene Domain ausgeben. Dies ist vor allem für kleine private Blogs eine tolle Option. Allerdings hast du bei einem WordPress.com Blog auch nur eine bestimmte Anzahl von Themes (WordPress Design-Vorlagen) und Plugins (zusätzliche Erweiterungen) zur Verfügung.

Im Gegensatz dazu kannst du dir bei WordPress.org (oder auf der deutschsprachigen WordPress-Webseite wordpress-deutschland.org) die aktuelle WordPress-Version kostenlos herunterladen und diese dann für deine eigene Domain und deinen eigenen Webspace nutzen. Mit dieser selbst-gehosteten WordPress-Seite hast du mehr Möglichkeiten der Anpassung und individualisierung deiner WordPress-Webseite.

Du kannst eine riesige Anzahl kostenloser und kostenpflichtiger WordPress-Themes und -Plugins einsetzen oder sogar dein eigenens WordPress-Themedesign erstellen. Über ein FTP-Programm (z.B. Filezilla) kannst du auf alle WordPress-Dateien auf deinem Webspace zugreifen und diese bearbeiten. Einen solche selbst-gehosteten WordPress-Seite einzurichten, ist gar nicht so schwierig. Allerdings solltest du ein wenig Zeit mitbringen, um dich in WordPress einzuarbeiten und die vielseitigen Optionen von einer eigenen WordPress-Webseite dann auch wirklich nutzen zu können.

2. Was du benötigst, um WordPress zu installieren

Webspace

Bevor du mit deiner WordPress-Seite loslegen kannst, musst du dir einen Webspace und eine eigene Domain-Adresse kaufen. Die Gebühren sind nicht teuer, vor allem wenn deine Webseite noch neu ist oder du nur eine kleine, private Webseite einrichten möchtest. Dann reicht ein kleineres Hosting-Paket völlig aus. Es gibt jede Menge Anbieter, wir selbst haben bisher immer sehr gute Erfahrungen bei WordPress-Seiten mit »domainfactory« gemacht (die MyHome-Pakte, wichtig mit PHP und MySQL sollten am Anfang ausreichen).

Wenn du dir nicht ganz sicher bist, ob dein gewählten Webhosting-Paket WordPress unterstützt, frage am besten vor der Buchung beim Hosting-Anbieter deiner Wahl nach. Eine Auflistung der WordPress-Voraussetzung findest du auf der WordPress-Deutschland Webseite.

Oft ist WordPress auch schon für die Installation direkt aus dem Hosting-Kundenmenü vorbereitet (z.B. bei domainfactory der Fall). Das ist besonders praktisch, denn so musst du die WordPress-Dateien nicht mehr selbst via einem FTP-Programm auf deinen Webspace hochladen.

Domain

Eine Domain (deine Webseiten-Adresse) kannst du mit einem Webhosting-Paket dazu kaufen (manchmal ist eine Domain auch bereits inklusive). Wenn du deine lokale Länder-Endung (z.B.deinedomain.de) wählst, sind die jährlichen Gebühren für eine Domain sehr gering (ca. 6€ im Jahr).

Datenbank

Ganz wichtig ist, dass du bei deinem Webspace-Paket die Möglichkeit hast, eine Datenbank anzulegen. Diese benötigst du unbedingt, um WordPress nutzen zu können. Anlegen kannst du eine Datenbank mit Passwort direkt im Kundenmenü deines Hosting-Anbieters. Das ist auch gar nicht so schwierig, wie es sich zuerst anhört (die meisten Hosting-Anbieter bieten in ihren FAQs auch eine Anleitung an). Notiere dir den Namen und das Passwort deiner angelegten Datenbank.

3. WordPress auf einen Webspace installieren

Sobald du du deinen Webspace und deine Domain bestellt hast, kannst du WordPress installieren. Wie bereits erwähnt, kannst du dies bei einigen Anbietern direkt im Kundenmenü deines Hosting-Anbieters (siehe zur Installation vorbereitete, kostenlose Anwendungen).

Ansonsten kannst du dir die aktuelle WordPress-Version auf der WordPress Deutschland-Webseite kostenlos herunterladen. Du kannst zwischen der deutschsprachigen WordPress-Version und der englischsprachigen Version unterscheiden. Am besten du wählst die Sprache aus, in der du später auch deine Webseite führen möchtest. Wenn du die englischsprachige Version wählst, wird dein Admin-Bereich und auch Standard-Wörter wie »Comments« oder»reply« etc. auf deiner Webseite in Englisch angezeigt.

Die wp-config.php Datei

Nach dem Download von WordPress musst du die zip-Datei (latest.zip) entpacken und die Datei wp-config-sample.php im Ordner »wordpress« bearbeiten. Dazu brachst du einen Text-Editor (z.B. das kostenlose Programm Notepad++, Windows-Editor, oder TextEdit und TextMate für Mac).

In der wp-config-sample.php Datei trägst du jetzt bei »MySQL settings« deine Datenbank-Daten (Name, User, Passwort, eventuell Hostname) ein:

Die MySQL Settings in der wp-config.php Datei

Unterhalb von »MySQL settings« musst du außerdem noch individuelle Sicherheitsschlüssel eintragen. Diese kannst du dir auf der Webseite https://api.wordpress.org/secret-key/1.1/salt/ generieren. Kopiere einfach die erstellten Keys und ersetze sie mit dem Beispiel-Code im deiner Datei. Die fertig bearbeitete Datei speicherst du jetzt als wp-config.php Datei ab. Die wp-config-sample.php Datei kannst du aus dem WordPress-Ordner löschen.

Jetzt kannst du alle Dateien des WordPress-Ordners in das zu deiner Domain gehörende Haupt-Verzeichnis mit einem FTP-Programm auf deinen Webspace hochladen. (Falls du dir nicht sicher bis welches Verzeichnis das Richtige ist, frage einfach noch einmal kurz bei deinem Hosting-Anbieter nach.)

Nach dem Upload kannst du die folgende URL zur Anmeldung deiner WordPress-Seite aufrufen:
http://deineurl.de/wp-admin/install.php

Jetzt sollte eine Seite in deinem Browser erscheinen, indem du deine WordPress-Seite und dich als Admin anmelden kannst (wähle am besten einen sichereren Benutzername statt des vorgeschlagenen »admin«). Sobald die Anmeldung beendet ist, kannst du auf deine neue WordPress-Installation zugreifen und mit der Einrichtung deiner Webseite beginnen.

Der Login-Bildschirm deiner WordPress-Installation

Eine Übersicht der WordPress-Installation und ein paar Tipps zur Fehlerbehebung findest du auch auf der WordPress Deutschland-Seite.

Standardmäßig wird derzeit das Twenty Eleven-Theme genutzt, auch einige Plugins sind bereits für dich installiert. Natürlich kannst du für deine Webseite aber auch ein anderes Theme auswählen und weitere Plugins installieren. Außerdem kannst du dir ein individuelles Navigations-Menü und WordPress-Seiten (z.B. Über mich oder eine Kontakt-Seite) anlegen.

4. Themes und Plugins

Mit das Beste an WordPress ist die riesige Community, die sich gegenseitig bei Problemen helfen und neue Produkte (oftmals kostenlos) für WordPress entwickeln. Aus diesen Grund gibt es eine riesige Anzahl von Themes und Plugins für WordPress. So kannst du deine Webseite nach und nach aufrüsten und um bestimmte, hilfreiche Plugins erweitern oder dir ein schönes Theme-Design für deine Webseite aussuchen. Eine Übersicht aller kostenlosen WordPress-Plugins und WordPress-Themes findest du im WordPress Plugin Directory bzw. Free Theme Directory.

Ich hoffe du findest meine kleine Erklärung der wichtigsten Schritte zur ersten selbst-gehosteten WordPress-Webseite hilfreich. Und falls du selbst bereits WordPress-Profi bist, kennst du vielleicht ja einen Bekannten für den diese Info hilfreich sein könnte. Über dein Feedback und weitere Tipps zur Ergänzung des Artikels freue ich mich sehr!

Bestimmt bin ich nicht die Einzige, die sich als guten Vorsatz fürs neue Jahr fest vorgenommen hat, noch mehr auf eine gesunder Ernährung im Arbeitsalltag zu achten. Denn gerade wenn man wie die meisten von uns mehr oder weniger den ganzen Tag am Computer arbeitet, ist es wichtig sich auch im Winter gesund zu ernähren. So bleibt man fit, fühlt sich wohler und kann dementsprechend auch bessere Arbeit leisten.

Da ich großer Fan von Food-Blogs und Koch-Videos bin und auch immer wieder gerne neue Rezepte ausprobiere, möchte ich einige meiner derzeitigen Lieblingrezepte für ein gesundes Webworker-Lunchpaket kurz vorstellen.

1. Wraps als wahre Alleskönner

Wraps sind in ein paar Minuten zubereitet, man kann sie mit so ziemlich allem füllen und auch prima unterwegs essen. Kein Wunder, dass die mexikanischen Fladenbrote auch bei uns so beliebt sind.

Meine Lunchpaket-Wraps sind mit Humus oder Frischkäse bestrichen und mit gedünstetem Wirsing und Tofustreifen (für nicht Veggies auch Puten- oder Hähnchenbruststreifen) gefüllt.

Und so funktioniert’s:

Fertige Wraps bekommt man inzwischen in fast jedem Supermarkt oder Biomarkt. Bestreichen kann man sie mit Frischkäse oder Hummus (Kichererbsenpaste aus dem Biomarkt oder besser sortieren Supermärkten).

Als nächsten bereitet man einige Wirsingblätter vor, indem man sie wäscht und größere Bätter in etwas kleinere Streifen schneidet. Die Tofu- oder die Putenbruststreifen kann man auch gleich vorbereiten.

Jetzt wird der Wirsing kurz heiß in der Pfanne angebraten und mit Salz und frischem Pfeffer gewürtzt. Das dauert höchstens 1 -2 Minuten (wichtig ist, dass die Blätter ihr leuchtendes Grün nicht verlieren). Danach kann man gleich auch die Tofu- oder Putenbruststreifen anbraten und mit etwas Sojasosse oder Salz, Pfeffer oder auch Curry (je nach Belieben) würzen.

Ist alles fertig, belegt man die Wraps einfach mit den Blättern und und dem angebratenen Tofu- oder Putenbruststreifen.

Wer möchte kann noch Tomatenscheiben dazu nehmen. Jetzt alles zusammenwickeln und in eine Lunchbox verpacken. Wenn deine Lunchbox zu groß ist, kannst du die Wraps mit Zahnstochern zusammen halten.

Leckere Wraps fertig verpackt und ready to Go in einer praktischen Lunchbox.

2. Hacksalat à la Jamie Oliver

Eine weitere tolle Idee für ein gesundes Mittagsgericht sind Salate. Bei der Zusammenstellung kann man meiner Ansicht nach ruhig etwas kreativ sein und verschiedene Sachen kombinieren. Mein Favorit derzeit ist grüner Salat mit Avocado und grob gehackten Walnüssen.

Eine tolle Methode, um ewiges Salat- und Gemüseschnipseln zu vermeiden und Zeit zu sparen, ist die Hacksalat-Methode à la Jamie Oliver. Dabei werden alle Salat-Zutaten einfach mit einem großen Messer auf einem großen Brett zusammen gehackt. Das Video »Jamie’s Ministry of Food - Everyday Green Chopped Salad« erklärt die Vorgehensweise und Bedarf keiner weiteren Erklärung :)

Um einen Salat mit ins Büro zu nehmen ist es wichtig, dass Dressing erst separat zu verpacken. Für Salatsoßen gibt es übrigens extra kleine, praktische Tupperboxen, in denen man das Dressing dann noch einmal kurz schütteln kann, bevor man es über den Salat verteilt.

3. Green Smoothie to Go

Klar, jeder kennt und liebt Smoothies im Sommer. Aber auch im Winter kann man sich mit leckeren und super gesunden grünen Smoothies fit halten.

Green Smoothie - jetzt schon mein Lieblingsgetränk 2012

Die Green Smoothie Produktion

Für einen Green Smoothie kauft man sich einfach auf dem Wochenmarkt, ja, Samstags früh aufstehen ist hier gefragt ;), einen frischen Grünkohl. Dieses Winter-Powergemüse ist der Grundbestandteil des Smoothies und gilt als extrem gesund und krebsvorbeugend.

Dazu kann man die verschiedensten Obststorten (z.B. Trauben, Bananen, Kiwis) mischen. Orangen passen meiner Ansicht nach besonders gut. Der Grünkohl muss gut gewaschen und die Blätter vom Blattstängel getrennt werden. Bei den Orangen reicht es, wenn sie grob klein geschnitten werden. Wer Ingwer mag, kann auch ein Stück frischen Ingwer dazu schneiden.

Jetzt kommen alle Utensilien mit ein bis zwei Gläsern kaltem Wasser in den Mixer. Vorsicht, Deckel festhalten und los gehts! Da Grünkohl-Blätter recht kräftig sind, sollte der Shake ungefähr 2-3 Minuten auf höchster Stufe gemixt werden. Fertig ist der Power Green-Smoothie, und das Ganze sieht nicht nur extrem gesund aus, sondern schmeckt auch noch richtig lecker.

Wenn du den Smoothie mitnehmen möchtest, kannst du das Getränk einfach in eine Plastikflasche abfüllen und vor dem Trinken noch einmal kräftig schütteln.

Wraps, Salate und Smoothies eignen sich meiner Ansicht nach perfekt für ein Lunchpaket zum Mitnehmen ins Büro oder auch für Freelancer die zu Hause arbeiten und nicht viel Zeit fürs Mittagessen aufbringen möchten. Alle Rezepte können ohne großen Zeitaufwand zubereitet werden, so dass man auch nicht so schnell wieder die Lust verliert, sich ein gesundes Lunch zuzubereiten.

Von Wintergemüse wie Grünkohl oder auch Wirsing bin ich inzwischen richtiger Fan, obwohl ich früher eigentlich nie so recht wusste, was ich mit diesen traditionellen Gemüsesorten anfangen sollte.

Tipps zum Weiterlesen

• Jamie Olivers Koch-Tipps auf YouTube und die Jamie-Oliver Apps
• Stonesoup Food-Blog mit schnellen, gesunden Rezepten, viele leckeren Salaten und tollen Fotos
• Rezepte auf goop, dem Blog von Gwyneth Paltrow

Probiere die Rezepte doch selbst einfach einmal aus und schreibe mir, wie es dir geschmeckt hat. Über weitere Tipps für ein gesundes, schnelles Webworker-Lunch würde ich mich ebenfalls sehr freuen.

Lesbarkeit auf mobilen Geräten

Auf mobilen Geräten (Smartphones und Tablets) ist nicht viel Platz für das Webdesign zur Verfügung. Außerdem ist die Konzentration während der Nutzung eines mobilen Gerätes meist nicht so hoch und die Bedingungen eventuell nicht perfekt. Es kann zum Beispiel sein das der Bildschirm spiegelt, weil man sich gerade draußen aufhält oder das es recht dunkel im Raum ist, z.B. wenn man abends auf der Couch mit seinem Tablet im Web surft. Auf diese meist nicht perfekten Gegebenheiten sollte ein responsive Design möglichst vorbereitet sein.

Schriftgrößen anlegen

Die Schriftgröße kann also ruhig etwas größer angelegt werden, als man es vom Design einer reinen Desktop-Webseite gewohnt ist.

Der Blog des Webdesigners Max Voltar ist meiner Ansicht nach ein gelungenes Beispiel für eine optimierte Schriftgröße auf mobilen Geräten. Die Smartphone-Ansicht seines Webdesigns zeigt die Fließtext-Schrift bei 100% an, auf einem Tablet (z.B. auf dem iPad) im Hochformat werden es dann 125% und auf auf einem Tablet im Querformat (und allen Bildschirmen ab 1024px) 150%.

Schriftfarbe und Kontrast zum Hintergrund

Auch die Schriftfarbe sollte nicht zu blass gewählt und der Kontrast zum Hintergrund nicht zu gering sein. Denn wie bereits oben erwähnt, werden Smartphones und Tablets meist nicht unter perfekten Bedingungen (spiegeln, zu helle oder du dunkle Umgebung) genutzt. Ein hoher Kontrast zwischen Hintergrund und Schriftfarbe ist daher gerade bei Webdesigns für mobile Geräte extrem hilfreich, um die Lesbarkeit zu verbessern.

geringer Farbkontrast / hoher Farbkontrast

Mit Weißräumen arbeiten

Auch wenn auf mobilen Geräten sehr viel weniger Platz zur Verfügung steht, als in der Desktop-Version eines Webdesigns, sollte möglichst großzügig mit Weißraum ungegangen werden. Denn durch Leerräume zwischen den Texten und einzelnen Webseiten-Elementen kann man Inhalte viel besser strukturieren. Diese Übersichtlichkeit hilft dann auch wieder die Lesbarkeit zu verbessern. Das Auge kann sich besser auf einen Text konzentrieren und wird nicht durch unnötige Elemente abgelängt.

Eine tolles Beispiel für ein responsive Webdesign mit stimmig gestalteten Weißräumen ist die Webseite Information Architects. Hier wurde z.B. man auf dem iPad eine angenehme Leseansicht geschaffen, im Querformat des iPads wird die Schriftgröße sogar noch vergrößert und rechts und links entstehen großzügig, bemessende Abstände.

Die Webseite von Information Architects in der iPad Ansicht.

Auf diese Weise wirkt das Webdesign luftig und der Leser kann sich ganz bequem auf das Lesen des Tetes konzentrieren.

Flexible Einheiten em oder Prozent, statt px

Da es bei mobilen Geräten unterschiedliche Pixeldichten gibt (auf dem iPad 132ppi und auf dem iPhone 4 326ppi, im Gegensatz zu 72dpi auf Standard-Desktop Monitoren), sollte man statt fester Pixeleinheiten für Schrift lieber die flexibleren Schrifteinheiten em oder % im Stylesheet verwenden.

So kann man sicher gehen, dass bei 100% oder 1em die Standard-Schriftgröße des jeweiligen Gerätes genommen wird und nicht ein eventuell viel zu kleines oder zu großes Pixelmaß.

Hast du weitere Tipps und Anregungen für die Optimierung von Schriften in responsive Webdesigns? Über dein Feedback und deine Ergänzungen zum Artikel freue ich mich sehr!

Eine solche Vorgehensweise bringt natürlich eine ganz neue Denkweise für Webdesigner und Entwickler mit sich und wir werden gezwungen, uns mit der rasant wachsenden Beliebtheit mobiler Geräte und deren neuen Anforderungen auseinanderzusetzen.

Diese offensichtliche Herausforderung ist meiner Ansicht nach eine große Chance, Webseiten flexibler und damit auch moderner umzusetzen. Während der Konzeption und Umsetzung unseres ersten mobile-first WordPress-Themes Nori in den letzten Wochen haben auch Manuel und ich etliche »Aha-Erlebnisse« gehabt und neue Erkenntnisse dazu gewonnen. Die aus meiner Sicht wichtigsten Tipps und Erfahrungswerte zum Thema »mobile-first Webdesign-Ansatz« habe ich im folgenden Artikel zusammen gestellt:

1. Konzentration aufs Wesentliche

Da auf mobilen Geräten sehr viel weniger Platz als auf herkömmlichen PC-Monitoren zur Verfügung steht, ist es besonders wichtig sich auf die wichtigsten Punkte der Webseite zu konzentrieren. Man sollte sich also vor Beginn des Desingprozesses u.a. mit folgenden Fragen auseinandersetzen: Welche Infos benötigt der Besucher wirklich? Wie kann man diese Infos möglichst klar und übersichtlich präsentieren? Was sind die wichtigsten Inhalte und auf welche Inhalte könnte verzichtet werden?

Das WordPress Theme Nori zeigt das Logo, ein Menü-Button und die neusten Blog-Artikel auf dem Smartphone.

2. Ein gutes Konzept ist wichtig

Es ist immer wichtig, ein gut durchdachtes Konzept für ein Webdesign-Projekt zu erstellen, bevor es mit der eigentlichen Gestaltung losgeht. Da man sich beim mobile-first Ansicht aber zu allererst mit dem Webdesign für mobile Geräte auseinander setzt und dieses Design dann auch noch für eine ganze Reihe anderer Bildschirmformate funktionieren soll, ist eine gute Planung und Konzeption des Design ganz besonders gefragt.

So kann man dann auch vermeiden, dass später für die Umsetzung der verschiedenen Design-Varianten einer Webseite aufwändige Workarounds (z.B. durch den Einsatz von JavaScripts) gefunden werden müssen. Denn je logischer und simpler ein Design-Konzept aufgebaut ist, desto weniger aufwendig sollte später auch der Code für die Umsetzung sein.

3. CSS Media Queries mit min-width statt max-width

Die Umsetzung eines mobile-first Webdesigns funktioniert wieder mit Hilfe von CSS3 Media Queries. Statt wie bisher bei einem responsive Webdesign das breiteste Layout (für Desktop-Monitor) als Standard zu nutzen, wird bei mobile-first mit der kleinsten Design-Version (für Smartphones im Hochformat) begonnen. Anschließend nutzt man z.B. @media screen and (min-width: 480px), um das Design an das nächst größere Format anzupassen. Die Media Queries könnten also ungefähr so aufgebaut sein:

/* smartphones in landscape mode */
@media screen and (min-width: 480px) {
...
}
/* tablets in portrait mode */
@media screen and (min-width: 768px) {
...
}
/* tablets in landscape mode */
@media screen and (min-width: 1024px) {
...
}
/* standard laptop screens */
@media screen and (min-width: 1220px) {
...
}
/* bigger desktop screens */
@media screen and (min-width: 1440px) {
...
}

4. Fluid Layouts

Wenn man an die Arbeit mit fixen Layoutbreiten gewohnt ist, fällt es einem anfangs ein wenig schwer sich daran zu gewöhnen, relativ wenig feste Anhaltspunkte bei der Design-Entwicklung zu haben. Je flüssiger das Design sich jedoch an verschiedene Größen anpasst, desto sicherer kann man gehen, dass die spätere Webseite optimal auf den verschiedensten Bildschirmen dargestellt wird. Schließlich erscheinen ständig neue Geräte mit neuen Formaten und Auflösungen. Mit einem solchen, sogenannten »fluid Layout« ist man also so gut es geht auf der sicheren Seite.

Am besten arbeitet man daher auch möglichst mit Prozentwerten, um die Breiten (width) von Designelementen zu bestimmen. Bildern oder eingebetteten Videos (iframe) kann man mit Hilfe von max-width:100% an ein flexibles Format anpassen.

5. Reduzieren, nicht nur für die mobile Webseiten-Version

Der mobile-first Ansatz zwingt einen Webdesigner auch dazu, noch einmal ganz genau zu überlegen, welche Webseiten-Inhalte wirklich relevant für die Besucher sind. Meist kommt man bei dieser Überlegung zur Erkenntnis, dass weniger mehr ist. Man sollte sich fragen: Benötigt man wirklich 10 Unternavigationspunkte oder wird eine solch aufwendiger Navigation nicht eher verwirrend als hilfreich für den Besucher?

Luke W erwähnt in seinem Buch »Mobile First« und auch auf seiner Webseite interesssante Studien und Auswertungen zu diesem Thema. Er macht darauf aufmerksam, dass die meisten Menschen beim Surfen im Web nicht mit ihrer vollen Konzentration bei der Sache sind. Dies ist bei der Nutzung von mobilen Geräten natürlich ganz besonders der Fall. Luke W nennt dieses Verhalten das »one thumb, one eyeball Phänomen« (navigiert wird auf mobilen Geräten mit einem Daumen und meist schaut man nur mit der halben Aufmerksamkeit, also mit einem Auge auf den Display).

Besucher benötigen also nicht zu viele Infos, sondern sollten möglichst schnell auf den für die Webseite wichtigsten Inhalt aufmerksam gemacht werden. Was der jeweils wichtigste Inhalt einer Webseite ist, sollte also in der Konzeptphase intensiv analysiert werden. Weniger aber klare Navigationselemente sind außerdem sinnvoll.

Von diesen Erkenntnissen für mobiles Webdesign kann beim mobile-first Ansatz auch die Desktop-Version einer Webseite profitieren. Denn nur weil mehr Platz zur Verfügung steht bedeutet das nicht, dass die Besucher an einem großen Bildschirm ein weniger klar strukturiertes und übersichtliches Webdesign bekommen sollten.

6. Design für Touchscreens

Noris Smartphone-Menü

Ein weiterer wichtige Punkt beim mobile-first Ansatz ist auch die Design-Optimierung für Touchscreens. Schließlich sind die Anforderungen an ein Webdesign bei der Bedienung mit einem eher groben Finger ganz andere, als wenn ein präziser Mauspfeil zur Navigation auf der Webseite zur Verfügung steht. Auch die Lesbarkeit von Texten sollte für mobile Geräte speziell optimiert werden.

Buttons, Links und Eingabefelder sollten großzügiger und mit ausreichend Zwischenräumen gestaltet werden. Schriftgrößen und Textbreiten sollte man während der Designentwicklung bereits auf so vielen verschiedenen Geräten wie möglich testen, da Schriftgrößen und Farben oft sehr unterschiedlich ausfallen können. Eine Prototyp des Webdesigns ist also so früh wie möglich ratsam. Man kann ruhig auch einmal einen Ausflug in verschiedene Geschäfte unternehmen, um das eigene Design live auf möglich vielen unterschiedlichen Geräten testen zu können.

7. Hilfreiche Tools nutzen

Responsive Webdesign und mobile-first stecken natürlich noch mitten in der Entwicklung und sind mit Sicherheit auch erst der Anfang von vielen neuen Möglichkeiten, um Webseiten auf die neuen Entwicklungen des mobilen Internets vorzubereiten.

Dennoch gibt es bereits etliche Tools und Scripte, die einem bei der Umsetzung eines flexibleren Webdesigns und der Kompatibilität für verschiedene Browser unterstützen können. Diese Tools sollte man auf jeden Fall ausprobieren und für die eigenen Projekte nutzen:

• Mit Hilfe von Respond.js kann man beispielsweise sicher stellen, das auch ältere Internet Explorer Browser (6 bis 8) auf die Media Queries reagieren. Das Script ist bei einem mobile-first Webdesign besonders wichtig.
• Das Script FitVids.js kann eingesetzt werden, um eingebettete Videos automatisch zu skalieren.
• Mit Hilfe von Adaptive Images kann man kleinere Dateigrößen für Bilder auf langsamen mobilen Geräten erzeugen.

Eine sehr umfangreiche Auflistung von Tools und Scripten kannst du im Smashing Magazine Artikel »Responsive Webdesign Techniques, Tools and Design Strategies« finden.

8. Neue Wege gehen

Wie bereits oben erwähnt ist es wichtig, das eigene Design vielseitig zu testen, um eine möglichst kompatible Webdesign-Lösung zu finden. Auch nach neuen Optionen und Tools sollte man daher immer Ausschau halten und diese möglichst bald ausprobieren.

Außerdem ist es wichtig sich zu verdeutlichen, dass die Entwicklung im Web ständig weiter geht und es gerade im Bereich mobiles Internet noch recht wenig Regeln oder »best practices« gibt, bzw. sich diese relativ schnell ändern können. Das klingt zuerst etwas beängstigend, aber eigentlich ist diese ständige Entwicklung ja auch das spannende und besondere am heutigen Webdesign. Jeder hat so die Chance mitzumachen und sich selbst weiterzuentwickeln. Luke W schreibt hierzu:

Welcome to mobile where the only thing you can count on is change. […] So what’s a web designer to do — get swept up in a sea of constant instability? Quite the opposite. Because things continue to be so Wild West out there, you need to be a cowboy. Take risks, try new things, and accept that not all the boundary lines between devices, browsers, and the web have been drawn yet.
Luke Wroblewski

Empfehlungen zum Weiterlesen

• Luke W A Book Apart Buch »Mobile First«
• O’Reilly Media Video-Workshop »Luke Wroblewski on Designing for Mobile First«
• der Blog von Luke W
• Liste mit hilfreichen Tipps von Brad Frost bei Google+

Deine Meinung, Tipps und Erfahrungswerte

Wie sind deine Erfahrungen zum Thema »mobile-first«? Hast du weitere Tipps und hilfreiche Tools, die bei der Gestaltung und Entwicklung von responsive, mobile-first Webdesigns nützlich sind. Über dein Feedback und deine Erfahrungen und Tipps freue ich mich sehr!

Besonders als Freelancer macht man sich außerdem oft zusätzliche Gedanken und Sorgen um organisatorische Dinge, die Aquise neuer Kunden, die eigenen Finanzen… Schließlich muss man sich um alles selbst kümmern und so geht die eigene kreative Arbeit oft zwischen Email-Antworten, Kunden-Support oder der Konzeption neuer Projekten verloren.

Mein Aufruf

Daher möchte ich alle Freelancer und Webworker zu mehr Spaß und Kreativität bei der Arbeit aufrufen.

Daher möchte ich alle Freelancer und Webworker zu mehr Spaß und Kreativität bei der Arbeit aufrufen. Der eigene Job sollte einem jeden Tag Freude bereiten und man sollte motiviert sein neue Herausforderungen anzunehmen, um sich selbst und die eigene Arbeit zu verbessern. Genial ist, dass Spaß an der Arbeit eine hervorragende Motivation ist. Stress oder Angst vor neuen noch unbekannten Aufgaben können durch Spaß an und bei der Arbeit verdrängt werden. Wenn man sich also jeden Tag ein wenig Zeit für freie Arbeiten und neue Inspiration (z.B. auf Design- und Kunst-Blogs nimmt), kann man längerfristig bessere und kreativere Arbeit leisten.

Und die Herausforderung sich selbstständig organisieren zu müssen, ist ja auch der große Vorteil bei der Arbeit als Freelancer. Man kann sich seine Arbeitszeit frei einteilen und selbst bestimmen, wann man eine Pause einlegt oder wann man Zeit für eigene, freie Projekte investiert.

Tools für kreatives Arbeiten und Inspiration

Viele kreativ arbeitende Menschen sind beispielsweise leidenschaftliche Hobby-Fotografen. Doch oft vergisst man im Arbeitsalltag die Kamera mit dabei zu haben oder man hat keine Zeit, eigene Fotos oder freie Grafiken und Skizzen nachzubearbeiten oder im Web (z.B. auf Flickr, 500px oder anderen sozialen Netzwerken) zu veröffentlichen. Zeichnen und Skizzieren kommt auch oft zu kurz, besonders wenn man gewöhnlich den ganzen Tag vorm Computer-Monitor sitzt.

Ein Tablet wie das iPad kann ein tolles Tool zum kreativem Arbeiten zwischendurch sein. So kann man seinen normalen Arbeitsplatz auch mal verlassen und z.B. in einem Café Zeit mit Zeichnen, Skizzieren, Brainstorming oder Schreiben verbringen.

Interessante iPad-Apps zum kreativen Arbeiten sind z.B. Bamboo-Paper von Wacom oder der iA Writer. Aber auch ein etwas traditionelleres Moleskine Skizzenbuch ist ein praktischer Begleiter wenn es darum geht, eigene Skizzen und Notizen festzuhalten.

Zum Sammeln von Inspirationen schaue ich außerdem regelmäßig auf Blogs wie designinspiration.net, FFFound oder swissmiss vorbei. Eigene kreative Arbeiten, Skizzen oder Fotos können bei Dribbble, Flickr oder auf einem WordPress- oder Tumblr-Blog veröffentlicht werden. Pinterest ist ein hilfreiches Tool, um digitale Pinnwände mit kreativen Inspirationen zu erstellen.

Ein toller Nebeneffekt von mehr Kreativität und Spaß beim Arbeiten ist auch, dass du deine Kollegen, Mitarbeiter, andere Webworker oder Kunden »mit motivieren« kannst, ebenfalls mehr Freude und Motivation bei der Arbeit zu haben.

Deine Erfahrungen und Tipps

Wie sind deine Erfahrungen als Freelancer und Webworker? Hast du weitere Tipps oder kennst du weitere hilfreiche Tools, um die eigene Kreativität zu fördern und so mehr Spaß und Motivation bei der Arbeit zu haben?

Über dein Feedback und weitere Vorschläge freue ich mich sehr!

Und so funktioniert’s

Als erstes musst du von allen, in deinem Stylesheet verwendeten Bildern, eine zweite, doppelt so große Version erstellen.

Hast du z.B. ein Logobild (logo.png) mit den Maßen 300 x 80 Pixel für die normale Smartphone-Version deiner Webseite angelegt, musst du eine zweite Version deines Logos in der Größe 600 x 160px erstellen. Dieses Bild kannst du dann z.B. logo2x.png nennen.

Lade alle für das Retina-Display optimierten Bilder zu den anderen Bildnern deines Webdesigns (z.B. in den images-Ordner) hoch.

Jetzt kannst du die extra vorbereiteten, vergrößerten Bilder mit Hilfe von CSS Media Queries unterhalb deiner Standard-Styles aufrufen:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

}

Um z.B. ein Retina-Display optimiertes Logo logo.png mit den Maßen 600 x 160 Pixel (als h1 mit der Klasse .logo) einzubinden, benötigst du folgende CSS-Werte innerhalb der geschwungenen Klammern der Media Queries:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
h1.logo a {
background-image: url(images/logo2x.png);
-webkit-background-size: 300px 80px;
}

Indem du die Breite und Höhe der CSS-Klasse mit der »-webkit-background-size« in der eigentlich benötigten, originalen Größe angibst, wird das Retina-Display Logo wieder auf 50 Prozent der Größe reduziert. Mit diesem Trick erhältst du auch auf dem iPhone 4 eine gestochen scharfe Ansicht aller Bilder deines Webdesigns.

Ich hoffe dieser Tipp ist hilfreich für dich. Wenn du Fragen, Ergänzungs- oder Optimierungsvorschläge zu diesem Beitrag hast, schreibe mir doch einfach einen Kommentar. Ich freue mich schon auf dein Feedback.

Ehrlich gesagt freue ich selbst mich dieses mal ganz besonders auf das neue Jahr. Ideen und Pläne für 2012 haben wir bereits jede Menge und ein ganzes, noch herrlich neues Jahr liegt vor uns, um diese Pläne umzusetzen.

Wir möchten die Gelegenheit nutzen, um auch allen Elmastudio-Lesern einen wunderbaren Start ins neue Jahr zu wünschen. Wir sind davon überzeugt, dass 2012 ein erfolgreiches Jahr wird, indem alle guten Vorsätze und neuen Projekte umgesetzt und Träume wahr werden können.