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.

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!

Learning by Doing

Meiner Ansicht nach ist es immer sinnvoll innovativ zu denken und neue Trends möglichst bald auszuprobieren und umzusetzen. Gerade im Web, wo sich sowieso alles in einer ständigen Dynamik und Weiterentwicklung befindet, ist es wohl nur schwer möglich zu warten, bis sich ein bestimmter Trend etabliert hat. Denn in den meisten Fällen ist bis dahin bereits schon wieder der nächste Trend entstanden.

Inhalte für alle Besucher zugänglich machen

Hinzu kommt natürlich auch noch das wichtigste Argument: Wenn immer mehr Menschen ein Smartphone oder Tablet besitzen und mobil mit ihren Geräten im Web unterwegs sind, sollten diese Besucher doch auch eine optimale Erfahrung beim Besuch einer Webseite haben. Ständiges Zoomen auf kleinen Bildschirmen ist eine Qual und in vielen Fällen kann auf Inhalte und Funktionen von einem mobilen Browser aus überhaupt nicht zugegriffen werden (Formulare können beispielsweise oft nur sehr schlecht bedient werden).

Ein Blick auf die Statistiken

Um ein deutlicheres Bild davon zu bekommen, wie viele Besucher tatsächlich schon mobil im Web unterwegs sind, habe ich mir die Google Analytics Daten von Elmastudio und unserem zweiten Blog Gertis PC-Tipps einmal genauer angeschaut. Hier die wichtigsten Zahlen von Oktober 2010 und Oktober 2011 im Vergleich:

Gertis PC-Tipps:

• 2,65% Besuche von mobilen Geräten im Oktober 2010 (ca. 550 Besuche im Monat, davon an erster Stelle über das iPhone, darauf folgend Android und iPad)
• 5,51 % Besuche von mobilen Geräten im Oktober 2011 (immerhin fast 7000 Besuche im Monat)

Anmerkung: Seit der Umstellung von »Gertis PC-Tipps« auf ein responsive WordPress-Theme Anfang November ist die Besuchszahl über mobile Geräte noch einmal auf 6,42% gestiegen.

Elmastudio:

• 1,98% Besuche von mobilen Geräten im Oktober 2010 (an erster Stelle das iPhone, dann iPad und Android) (insgesamt 480 Besuche im Monat bei 1.5 Min. Besuchszeit im Durchschnitt)
• 3,5% Besuche von mobilen Geräten im Oktober 2011 (an erster Stelle das iPad, dann iPhone und Android) (ca. 3000 Besuche bei durchschnittlich 2,44 Minuten Besuchszeit)

Bei den Zahlen von Elmastudio ist mir besonders aufgefallen, dass die Besuchszeit sich deutlich erhöht hat. Außerdem kommen die meisten Besucher mobiler Geräte inzwischen über das iPad auf die Seite.

Ich denke das liegt vor allem daran, dass Elmastudio bereits seit einiger Zeit ein responsive Layout hat (seit März 2011). Im Gegensatz zu den Inhalten auf Gertis PC-Tipps sind die Elmastudio-Artikel aber meist länger und viele Beiträge sind technische Erklärungen und Tutorials. Diese werden wahrscheinlich eher selten zwischendurch auf dem Smartphone gelesen, wohingegen bei Gertis PC-Tipps viele kurze Artikel und Tipps zu finden sind. Meiner Ansicht nach kommt es also auch immer stark auf den Inhalt einer Webseite an, wie das Verhalten der Besucher auf mobilen Geräten ist.

Kunden sollten informiert werden

In der letzten Zeit habe ich festgestellt, dass es Kunden gibt, die eine Webseiten-Optimierung für mobile Geräte quasi für selbstverständlich halten. Daher fehlt aber leider auch oft das Verständnis für die Mehrkosten einer solchen Optimierung. Andere Kunden wiederum halten die Anpassung einer Webseite für mobile Geräte noch für Zukunftsmusik und wollen dies lieber auf einen späteren Zeitpunkt verschieben.

Wichtig ist meiner Ansicht nach auf jeden Fall immer, dass man seinen Kunden ehrlich vermittelt welchen Mehraufwand es ausmacht, ein Webdesign (z.B. mit einem responsive Layout) für unterschiedliche Bildschirmgrößen und Geräte zu optimieren. Ich denke es ist sinnvoll, hier etwas Aufklärungsarbeit zu leisten und auch auf die Schwierigkeiten bei einer solchen Webseiten-Optimierung hinzuweisen.

Falls ein Kunde derzeit noch nicht an einer Optimierung für mobile Geräte interessiert sein sollte, ist es meiner Meinung nach aber auch wichtig, dass man als Webdesigner seine Kunden über den zukünftig auftretenden Mehraufwand (eventuelles Redesign oder zusätzliche Optimierungen zu einem späteren Zeitpunkt) und die dadurch entstehenden Kosten informiert.

Da Statistiken oft Überzeugungsarbeit leisten können, schaue dir doch einmal die Artikel und Präsentationen (in Writings und Presentations) auf der Webseite von Mobile-First Buchautor Luke W an.

Wie ist deine Meinung?

Für wie wichtig hältst du die Webseiten-Optimierung für Smartphones und Tablet PCs? Hast du eigene Erfahrungswerte oder Statistiken, wie viele Webseiten-Besucher mobile Geräte nutzen und wie stark diese Zahl steigt? Wie sind deine Erfahrungen als Webdesigner oder Entwickler in der Zusammenarbeit mit Kunden? Möchten diese eine mobil-optimierte Webseite oder sind die meisten Kunden an einer solchen Optimierung noch nicht interessiert?

Über dein Feedback zum Thema freue ich mich sehr!

Im Artikel »Touch Target Sizes« von Luke W findest du hilfreiche Richtlinien für die Gestaltung optimierter Touchscreen-Buttons. Die dort aufgeführten Button-Maße wurden aus verschiedenen Quellen zusammen getragen (die Quellen wie z.B. die iPhone Human Interface Guidelines werden im Artikel mit verlinkt).

Die Richtlinien und Tipps sind wirklich hilfreich, z.B. wenn du an einem responsive Webdesign arbeitest. Denn Buttons für die Bedienung mit dem Finger zu gestalten, ist noch einmal eine ganz andere Aufgabe, als Buttons für die Bedienung mit der Maus.

Schließlich müssen Button-Größen an die Größe einer Fingerspitze angepasst werden. Und auch die Abstände zwischen einzelnen Buttons sollten großzügig bemessen werden, so dass man sich nicht ausversehen vertippen kann. Die Angaben von Apple für einen standardmäßigen Touchscreen-Button sind z.B. 44x44pt. Das wirkt im ersten Moment sehr groß, als Trick kann man aber auch nur die anwählbare Fläche in diesem Maß wählen und den wirklich sichtbaren Button kleiner gestalten.

1. Eine eigenständige mobile Webseiten-Version

Der erste Ansatz ist, eine weitere, speziell für mobile Geräte erstellte Webseiten-Version umzusetzen. Diese wird dann automatisch von einem mobilen Gerät aus erkannt und aufgerufen. Als Option gibt es bei dieser Lösung meist einen Link im Footer, um auch von einem mobilen Gerät zurück auf die Standard-Version der Webseite zu wechseln.

Ein Beispiel für eine solche Lösung ist die Webseite »Zeit Online«. Hier gibt es eine mobile Version (mobil.zeit.de) für die Online-Version der Zeit und eine Desktop-Version der Webseite (zeit.de).

Eine eigens für mobile Geräte erstellte Webseiten-Version hat natürlich den großen Vorteil, dass man sich in Design und Funktion voll auf die mobilen Geräte konzentrieren kann und keine Kompromisse eingehen muss.

Inhalte können in dieser mobilen Webseiten-Version z.B. gekürzt oder anders sortiert angezeigt werden. Navigationsmenüs können speziell für kleine Geräte optimiert werden (z.B. in dem man nur die wichtigsten Navigationspunkte anzeigt, um mehr Platz für den Inhalt zu schaffen).

Die Desktop-Webseite von Zeit Online.

Der größte Nachteil ist wohl, dass der Arbeits- und Verwaltungsaufwand mit einer eigenen mobilen Webseiten-Version sehr viel höher ist, da man ja zwei komplett unabhängige Webdesigns betreuen muss.

Daher kommt diese Lösung wohl vor allem für große Webseiten mit vielen Inhalten und einem großen Budget in Frage. So kann garantiert werden, dass beide Webseiten-Versionen parallel verwaltet und auf einem aktuellen Stand gehalten werden können.

2. Externe Mobile Theme-Plugins für Blog- und CMS-Systeme

Das bekannteste externe Mobile Theme-Plugin für WordPress ist wahrscheinlich WPTouch (weitere Optionen sind das WordPress Mobile Pack oder das Premium Handheld Mobile Theme). Installiert man ein Mobile-Theme Plugin, wird auf mobilen Geräten ein eigenes (vom Standard-Themedesign unabhängiges) Theme genutzt, welches speziell für mobile Geräte optimiert ist.

Screenshot des WPTouch Mobile Theme-Plugins (Flickr Foto von Wesley Fryer)

Gerade für Blogs war diese Option lange Zeit die gängigste Methode, um die Blog-Inhalte auch für mobile Geräte optimiert anzuzeigen. Auf Blog-Systemen wie Tumblr wird die Mobile-Theme Lösung sogar standardmäßig für alle Blogs genutzt.

Ein Vorteil eines eigenen Mobile Theme-Plugins ist, dass auch hier wieder speziell auf die Bedürfnisse und Einschränkungen von mobilen Geräten mit kleinen Bildschirmen eingegangen werden kann. Außerdem muss man sich meist nicht mehr groß, um das mobile Theme kümmern, da es ein Standard-Template ist.

Hier liegt meiner Ansicht aber auch der größte Nachteil der mobile Theme-Plugins. Zum einen wird dem Besucher einer Webseite auf dem mobilen Gerät eine komplett andere Optik geboten, als auf der Desktop-Webseitenversion. Außerdem haben die Mobile-Themes ein sehr standardmäßiges Design und es sind keine oder wenig individuelle Anpassungen möglich, um das CI der eigenen Webseite oder des Blogs beizubehalten.

Die Nutzung eines Mobile-Theme Plugins ist meiner Ansicht nach sicher eine gute vorübergehende Lösung. Längerfristig gesehen gibt es aber sicherlich noch bessere Optionen.

3. responsive Webdesigns

Ein weitere Lösung für die Problematik, Webseiten auch für mobile Geräte zu optimieren, ist responsive Webdesign. Hier wird quasi »Eine Lösung für alles« gefunden und ein flexibles Webdesign wird so erstellt, dass es sich auf die unterschiedlichsten Bildschirmgrößen anpassen kann. Mit Hilfe von eigenen CSS-Styles für die unterschiedlichen Bildschirmgrößen, können so neben dem Grundlayout auch Buttons oder Inhalte wie Videos und Schriften für mobile Geräte optimiert werden.

Jede Menge Bespiele für responsive Webdesigns findest du auf der Webseite mediaqueri.es. Hier kannst du dir die Webseiten-Varianten übersichtlich anschauen.

Auch unser Elmastudio-Blog ist mit einem responsive Webdesign (dem Piha-Theme) umgesetzt. Wenn du dein Browser-Fenster verkleinerst oder unseren Blog auf einem mobilen Gerät aufrufst, kannst du dir die flexible Umsetzung des Layouts anschauen.

Das Piha WordPress-Theme in der iPad-Ansicht.

Ein großer Vorteil von responsive Webdesigns ist, dass man nur ein Webdesign oder ein Theme erstellen muss, welches dann auf den unterschiedlichsten Bildschirmformaten genutzt werden kann.

Natürlich ist dies mit etwas mehr Konzept- und Arbeitsaufwand verbunden, als die Erstellung ein Webdesigns mit festgelegtem Format. Allerdings muss so später auch nur ein einziges Webdesign verwaltet werden. Die Instandhaltung und Optimierung der Webseite bleibt daher übersichtlich.

Ein weiterer Vorteil ist, dass ein Design auf unterschiedlichen Geräten beibehalten werden kann. Der Besucher muss sich so nicht mit einem Standard-Template zufrieden geben, sondern das CI und der Wiedererkennungswert der Webseite bleibt beibehalten.

Da responsive Webdesign noch mitten in der Entwicklung steckt, muss man als Webdesigner und Entwickler sehr flexibel sein. Ständig werden neue Möglichkeiten und Techniken entwickelt und es gibt jede Menge zu lernen und auszuprobieren. Bei einem responsive Webdesign muss daher also auch immer etwas Zeit und Budget für die Weiterentwicklung des Webdesigns mit eingeplant werden.

Ich hoffe meine Gegenüberstellung der verschiedenen Optionen, um Webdesigns »mobile-ready« zu machen, ist hilfreich für dich.

Dein Feedback

Wie ist deine Einschätzung zu den Vor- und Nachteilen der unterschiedlichen Lösungen? Kennst du weitere Möglichkeiten oder Ergänzungen zu den im Artikel besprochenen Methoden? Über den Feedback freue ich mich sehr!

1. Weniger ist mehr – nicht nur für kleine Bildschirme

Da auf einem kleinen Smartphone-Bildschirm wenig Platz zur Verfügung steht, sollte man sich im Design auf das Wesentliche konzentrieren und überlegen, welche Webseiten-Elemente für den Nutzer wirklich wichtig sind. Idealerweise kommt man bei dieser Vorgehensweise auf eine übersichtliche, leicht zu bedienende Designlösung, die dann auch gleich für größere Bildschirme übernommen werden kann.

Denn warum sollte ein Webseiten-Besucher nicht eine ähnlich reduzierte und aufs Wesentliche konzentrierte Information erhalten. Nur weil man auf einem großen Desktop mehr Platz für die Gestaltung hat, muss man diesen schließlich nicht bis auf den letzten Pixel mit ablenkenden Informationen ausfüllen.

Luke W, der Autor des neusten A Book Apart-Buches »Mobile First« erläutert:

Designing for mobile first forces you to embrace these contraints to develop an eleganz mobile-appropriate solution. But the benefits go well beyond mobile. Small screen sizes force you to prioritize what really matters to your customers and business.
Luke Wroblewski, Mobile First

Das Konzept »Mobile First« schlägt also vor, sich die vermeidliche Schwäche (z.B. der Platzmangel auf kleinen Bildschirmen) zum Vorteil zu machen und durch Verzicht auf unwesentliche Informationen und Bedienelemente ein benutzerfreundliche, übersichtliche und optisch angenehm reduzierte Designlösung für alle Bildschirmgrößen zu finden.

2. Entwicklungen des mobilen Webs nutzen

Neben den Vorteilen im Design (durch Konzentration aus Wesentliche Übersichtlichkeit und Benutzerfreundlichkeit schaffen) gibt es auch jede Menge technische Entwicklungen für mobile Geräte, die man zu Nutzen machen kann. Natürlich ist die Technik mobiler Geräte und Browser stark in der Entwicklung und was heute eine Neuheit ist, wird morgen vielleicht schon ein alter Hut sein.

Dennoch sollte man die neuen Möglichkeiten als Webdesigner ausprobieren und beobachten und das ein oder andere Feature lässt sich eventuell sogar schon in einem Projekt verwenden.

So gibt es z.B. schon Bilder-Slider mit dem beliebten Swipe-Effekt (z.B. die Bildergalerie PhotoSwipe) und auch in Navigations-Elementen kann man sich die in mobilen Geräten integrierten Auswahl-Menüs zu nutzen machen.

Mit Photoswipe kannst du eine Touchscreen-optimierte Bildergalerie auf deiner Webseite einbinden.

Ein Select-Menü wird auf Smartphones in einer neuen Ebene angezeigt.

3. Wichtige Tools

Um Webdesigns gleichzeitig für kleine mobile Geräte und große Desktop-Monitore zu optimieren, können ein paar praktische Helfer nützlich sein.

Responsive Webdesign

Mit Hilfe von CSS3 Media Queries und dem Viewport-Tag ist es möglich, einem Element bei verschiedene Bildschirmbreiten unterschiedliche CSS-Styles zuzuweisen. So kannst du dein Webseiten-Design von einem einspaltigen Layout für Smartphone zu einem komplexeren Layout anpassen. Natürlich sind mit Hilfe von CSS3 Media Queries jede Menge weitere Optionen geboten, wichtig ist aber immer, dass ein Layout sich vernünftig, also für den Benutzer nachvollziehbar anpasst. Schließlich soll sich ein Besucher, der eine Seite zum ersten mal am Desktop-Computer aufruft auch noch zurechtfinden, wenn er die gleiche Seite am nächsten Tag auf seinem Smartphone wieder besucht.

HTML5

Ein gutes Beispiel, wie man durch die Nutzung von HTML5 eine Webseite für mobile Geräte optimieren kann, sind die HTML5 Input-Typen. Wenn man z.B. den Input-Typ »email« für ein Email-Eingabeformular angibt, kann auf einem Touchscreen-Gerät gleich die entsprechend optimierte Tastatur mit @-Zeichen aufgerufen werden.

Hilfreiche JavaScript-Plugins

Es gibt etliche Plugins, die bei der Entwicklung eines responsive, mobile-first Webdesigns hilfreich sind. So kannst du z.B. mit Hilfe von jQuery Überschriften (FitText.js) und eingebettete Videos (FitVids.js)für dein responsive Webdesign optimieren. Auch für die Einbindung einer Bildergalerie gibt es Optionen, die sich automatisch an verschiedene Bildschirmgrößen anpassen.

Eine Übersicht nützlicher jQuery-Plugins findest du im Artikel »25 jQuery Plugins to help with responsive Layouts« auf dem Speckyboy-Blog. Bei der Verwendung von JavaScript-Plugins solltest du immer darauf achten, dass das Script nicht zu groß ist und auch eine Alternative zur Verfügung steht, wenn kein JavaScript aktiviert ist.

Adaptive Images

Mit der hier im Blog bereits vorgestellten Lösung „Adaptive Images“ ist es relativ leicht möglich, Bilder für die verschiedenen Bildschirmgrößen vorzubereiten. So müssen auf einem Smartphone mit langsamer mobilen Internetverbindung nicht die gleichen großen Bilder der Desktop-Version genutzt werden.

4. Resourcen zum Weiterlesen

Wenn du mehr über den Webdesign-Trend »Mobile First« erfahren möchtest, sind die folgenden Ressourcen fast schon »Must Reads« und bieten jede Menge weitere Infos über dieses spannende Thema.

• Die Webseite von Luke W: Luke W ist quasi der Erfinder des »Mobile First«-Begriffs und auf seinem Blog findest du viele interessante Artikel, Tipps und Slides seiner Präsentationen zum Thema »Mobile First«.
• Einen umfangreichen Überblick mit vielen praktischen Beispielen bietet das erst im Oktober erschienene Buch »Mobile First« von Luke W bei A Book Apart. Das Buch ist angenehm zu lesen und mit vielen praktischen Webseiten-Beispielen ausgestattet.

5. Mobile First-Webdesigns

Die bekannten amerikanischen Webdesigner Jason Santa Maria und Ethan Marcotte (Autor des Buches »Responsive Webdesign« bei A Book Apart) haben beide ihre Webseiten im Mobile First-Konzept umgesetzt.

Webdesign Jason Santa Maria

Webdesign Ethan Marcotte

Kennst du noch weitere Beispiele für Mobile First- Webdesigns oder hast du hilfreiche Anregungen, Tipps oder Fragen zum Thema »Mobile First«? Über deinen Kommentar freue ich mich sehr!

Da die kleinen Bücher von A Book Apart für Webdesigner und Webentwickler sowieso immer ein Highlight sind, haben wir uns besonders über das aktuelle Angebot gefreut, die beiden neusten Bücher »Designing for Emotion« von Aarron Walter und »Mobile First« von Luke Wroblewski in einem Paketpreis kaufen zu können. Die eBook-Version der beiden Bücher kannst du dir so schon für 15 Us-Dollar bestellen. Wir haben unsere Exemplare zwar noch nicht komplett durchgearbeitet, aber die Texte lassen sich trotz Englisch angenehm lesen und die Sprache ist auch nicht zu kompliziert gehalten. Wir finden die Bücher sind für alle Webdesign-Fans auf jeden Fall einen Empfehlung wert.

Wenn du das Bild anklickst, kannst du dir ein größeres Vorschaubild der Dateivorlage anschauen.

So musst du dir die Maße nicht mühselig jedes mal neu anlegen, sondern kannst deine Layout-Blöcke einfach in die Datei einfügen und dein responsive Design testen.

Anwendungsbeispiel

Hier ein Beispiel, wie du mit der Vorlage arbeiten kannst (grobe Layout-Skizze für die iPad-Ansicht eines Designs):

Die Arbeits-Vorlage downloaden:
Screen Resolution Worksheet (.zip, 470KB)

Ich hoffe, dir kann diese kleine Freebie-Datei bei der Arbeit an deinen eigenen Webdesigns weiterhelfen. Falls du findest, dass eine bestimmte Auflösung noch unbedingt mit in der Vorlage aufgenommen werden sollte, schreibe mir deinen Vorschlag doch einfach in einem Kommentar. Ich freue mich auf dein Feedback!

1. Platzsparende Lösungen für mobile Geräte

Besonders die Gestaltung der Smartphone-Version eines responsive Webdesigns ist eine gewisse Herausforderung. Denn schließlich hat man hier nur sehr wenig Platz zur Verfügung. Wichtig ist daher, dass man sich genau überlegt, welche Elemente für die Bedienung der Webseite wirklich relevant sind und auf welche Elemente man eventuell in dieser Ansicht auch verzichten kann.

Natürlich sollte man nicht alle zuvor sichtbaren Elemente einfach durch die CSS Eigenschaft display:none; verbergen. Es ist aber sicherlich eine Überlegung Wert, ob z.B. alle Meta-Daten wirklich direkt auf einer Blog-Startseite sichtbar sein müssen oder ob die Bedienung durch zu viele Infos nicht eher unübersichtlicher wird.

2. Bedienbarkeit auf Touchscreens

Neben dem Platzproblem auf keinen Bildschirmen ist die Bedienung der Webseite auf einem Touchscreen eine weitere Besonderheit, die man bei der Entwicklung eines responsive Webdesigns beachten sollte. Denn auf Touchscreens gibt es ja kein Maus-Hover. Daher muss man sich eine alternative Lösung z.B. für Dropdown-Menüs überlegen, die man dann ab der Größe für Tablet-PCs in den Media Queries einsetzt.

In meinem Artikel »Webseiten-Navigationen in responsive Webdesigns analysiert« hatte ich zu dieser Besonderheit schon einmal verschiedene Lösungsansätze vorgestellt.

Außerdem ist es wichtig, dass alle wichtigen Links standardmäßig schon als solche zu erkennen sind. Am besten mit der Kennzeichnung durch eine Link-Farbe oder einer Unterstreichung. Ansonsten weiss man als Nutzer nicht, wo man auf dem Touchscreen navigieren kann.

3. Responsive Images

Mit dem CSS-Wert max-width:100% kann man Bilder relativ leicht responsive umsetzen. Der Artikel »Fluid Images« von Ethan Marcotte“ bei A List Apart beschreibt diese Einbindung von Bildern in Responsive Webdesigns sehr ausführlich und erklärt auch noch einige wichtige Tricks und Kniffe (z.B. die Einbindung eines responsive Bildschirm-Hintergrundbildes mit Hilfe des jQuery Backstretch Plugins).

Um die Ladezeiten für mobile Geräte möglichst gering zu halten, solltest du deine Bilder immer so klein wie möglich abspeichern. Du kannst Bilder z.B. mit Smush.it weiter in der Datenmenge reduzieren, ohne dabei Bildqualität zu verlieren.

4. Adaptive Images

Eine interessante Option für die Handhabung von Bildern in responsive Webdesigns ist die »Adaptive Images«-Lösung. Mit Hilfe von PHP und JavaScript können automatisch verschiedene Bildgrößen angeboten und eingesetzt werden. Eine Demo und weitere Infos findest du auf der Apative-Images-Webseite.

5. FitVids.js für responsive, eingebettete Videos

Mit dem FitVids.js Script kannst du eingebettete Videos (von YouTube, Vimeo, Blip.tv, Viddler und Kickstarter) auf deiner Webseite responsive machen, ohne dass du zusätzlichen HTML und CSS Code einfügen musst. Du kannst dir das Script auf GitHub herunterladen und im head-tag deiner Webseite aufrufen.

Dann musst du nur noch das folgende Script einbinden:

<script type="text/javascript">
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

#things-with-videos ersetzt du dabei mit der Container-ID oder -Klasse, in der deine Videos sich befinden.

6. Auf möglichst geringe Ladezeiten achten

Viel diskutiert wird beim Thema responsive Webdesign auch immer wieder über zu lange Ladezeiten der Webseite. Den auf mobilen Geräten können zu viele integrierte Bilder oder Scripts zu einem sehr langsamen Hochladen der Seite in den Browser führen.

Da alle Bilder bei einem responsive Webdesign normalerweise in der originalen Größe geladen werden (auch dann, wenn diese auf dem Smartphone nur klein angezeigt werden), ist es wichtig alle Dateien so klein wie möglich abzuspeichern. Außerdem kannst du dir natürlich überlegen, Lösungen wir »Adaptive Images« (siehe Punkt 4) auf deiner Webseite einzusetzen.

7. Verwendung von Schriften

Bei der Verwendung von Schriften für responsive Webdesigns ist es auch wichtig, auf eventuelle unnötige Datenmengen zu achten. Wenn man also Webfonts (z.B. Google-Webfonts) einsetzen möchte, sollte man wirklich nur die Fonts einbinden, die man unbedingt benötigt und nicht etwa zusätzliche Schrift-Varianten.

Auch die Lesbarkeit der Schriften auf unterschiedlichen Geräten sollte vorab getestet werden. Vor allem auf kleinen Smartphone-Displays ist nicht mehr jede Schrift gleich gut lesbar.

8. Gestaltung von Formularen

Die Gestaltung von Formularen sollte in responsive Webdesigns auch wieder für Touchscreens optimiert sein. Für kleinere Bildschirmgrößen eignet sich beispielsweise meist keine mehrspaltige Aufteilung der Eingabefelder.

Benutzerfreundlich ist es auch, Eingabefelder immer mit einem Label oberhalb des Eingabefeldes zu gestalten. So kann der Nutzer auch während des Eintippens immer noch erkennen, was in das Feld eingetragen werden soll.

9. Suchformular leicht zugänglich machen

Da auf kleineren Bildschirmgrößen der Inhalt einer Webseite schwieriger zu überblicken ist, ist meiner Ansicht nach eine Suche besonders für mobile Geräte sehr wichtig. Damit die Webseitenbesucher also schneller, die für sie wichtigen Inhalte finden, ist ein Suchformular im Headerbereich sinnvoll.

10. Buch-Tipp

Als Buchtipp zum Thema Responsive Webdesign möchte ich unbedingt noch das Buch »Responsive Webdesign« von Ethan Marcotte empfehlen. Als Ebook kostet das Buch nur 9 US-Dollar und du kannst nach dem Download sofort mit dem Lesen deiner neuen Lektüre loslegen.

Ich hoffe meine Tipps können dir bei der Entwicklung eigener responsive Webdesigns ein wenig weiterhelfen. Über weitere, ergänzende Tipps und Feedback zum Thema freue ich mich sehr!