Berücksichtigen Sie beim Erstellen von Inhalten für eine Vielzahl von Nutzern und Geräten sowohl den Content als auch das Layout und das Grafikdesign.
Wie Nutzer im Web lesen
Im Leitfaden für das Schreiben von Texten für die US-Regierung wird zusammengefasst, was Nutzer von Texten im Web erwarten:
Studien zeigen, dass Nutzer Webseiten nicht lesen, sondern überfliegen. Im Durchschnitt lesen sie nur 20 bis 28% der Inhalte auf einer Webseite. Das Lesen auf Bildschirmen ist viel langsamer als das Lesen auf Papier. Wenn Informationen nicht leicht zugänglich und verständlich sind, geben Nutzer auf und verlassen Ihre Website.
Texte für Mobilgeräte schreiben
Konzentrieren Sie sich auf das Thema und erzählen Sie die Geschichte gleich zu Beginn. Damit Texte auf einer Vielzahl von Geräten und in verschiedenen Darstellungsbereichen funktionieren, müssen Sie Ihre wichtigsten Punkte gleich zu Beginn vermitteln. In der Regel sollten Sie das idealerweise in den ersten vier Absätzen und in etwa 70 Wörtern tun.
Fragen Sie sich, was Nutzer von Ihrer Website erwarten. Möchten sie etwas herausfinden? Wenn Nutzer Ihre Website besuchen, um Informationen zu erhalten, sollten alle Ihre Texte darauf ausgerichtet sein, ihnen dabei zu helfen, ihr Ziel zu erreichen. Schreiben Sie im Aktiv, bieten Sie Aktionen und Lösungen an.
Veröffentlichen Sie nur das, was Ihre Besucher möchten, und nichts weiter.
Studien der britischen Regierung haben außerdem Folgendes ergeben:
Mit anderen Worten: Verwenden Sie eine einfache Sprache, kürzere Wörter und einfache Satzstrukturen – auch für ein gebildetes, technisch versiertes Publikum. Sofern es keinen guten Grund gibt, sollten Sie einen umgangssprachlichen Ton verwenden. Eine alte Regel des Journalismus besagt, dass man so schreiben sollte, als würde man mit einem intelligenten 11-Jährigen sprechen.
Die Next Billion Users
Dieser reduzierte Ansatz beim Schreiben ist besonders wichtig für Leser auf Mobilgeräten und entscheidend, wenn Sie Inhalte für kostengünstige Smartphones mit kleinen Darstellungsbereichen erstellen, die mehr Scrollen erfordern und möglicherweise Displays mit geringerer Qualität und weniger reaktionsschnelle Bildschirme haben.
Die meisten der nächsten Milliarde Nutzer, die online gehen, werden kostengünstige Geräte haben. Sie möchten ihr Datenbudget nicht für das Navigieren durch lange Inhalte ausgeben und lesen möglicherweise nicht in ihrer Muttersprache. Kürzen Sie Ihre Texte: Verwenden Sie kurze Sätze, nur wenige Satzzeichen, Absätze mit maximal fünf Zeilen und einzeilige Überschriften. Sie können responsiven Text verwenden (z. B. kürzere Überschriften für kleinere Darstellungsbereiche), sollten aber die Nachteile berücksichtigen.
Ein minimalistischer Ansatz bei Texten erleichtert auch die Lokalisierung und Internationalisierung Ihrer Inhalte und erhöht die Wahrscheinlichkeit, dass Ihre Inhalte in sozialen Medien zitiert werden.
Das Ergebnis:
- So einfach wie möglich
- Verzichten Sie daher auf überflüssige Informationen.
- Kommen Sie schnell zur Sache.
Unnötige Inhalte entfernen
Webseiten sind groß und werden immer größer.
Mit responsiven Designtechniken können Sie unterschiedliche Inhalte für kleinere Darstellungsbereiche bereitstellen. Es ist jedoch immer sinnvoll, zuerst Texte, Bilder und andere Inhalte zu optimieren.
Webnutzer sind oft aktionsorientiert und suchen nach Antworten auf ihre aktuelle Frage, anstatt sich zurückzulehnen und ein gutes Buch zu lesen.
Jackob Nielsen
Fragen Sie sich: Was möchten Nutzer erreichen, wenn sie meine Website besuchen?
Hilft jede Seitenkomponente Nutzern dabei, ihr Ziel zu erreichen?
Redundante Seitenelemente entfernen
Laut HTTP Archive machen HTML-Dateien für die durchschnittliche Webseite fast 70 KB und mehr als neun Anfragen aus.
Viele beliebte Websites verwenden mehrere Tausend HTML-Elemente pro Seite und mehrere Tausend Codezeilen, auch auf Mobilgeräten. Eine zu große HTML-Datei führt möglicherweise nicht dazu, dass Seiten langsamer geladen werden. Eine große HTML-Nutzlast kann jedoch ein Zeichen für überflüssige Inhalte sein: Größere .html-Dateien bedeuten mehr Elemente, mehr Textinhalte oder beides.
Wenn Sie die HTML-Komplexität reduzieren, wird auch die Seitengröße verringert. Außerdem wird die Lokalisierung und Internationalisierung erleichtert und das responsive Design lässt sich einfacher planen und debuggen. Informationen zum Schreiben effizienteren HTML-Codes finden Sie unter High performance HTML.
Jeder Schritt, den ein Nutzer ausführen muss, bevor er von Ihrer App profitiert, kostet Sie 20% der Nutzer.
Gabor Cselle, Twitter
Dasselbe gilt für Inhalte: Helfen Sie Nutzern, so schnell wie möglich zu dem zu gelangen, was sie möchten.
Blenden Sie Inhalte nicht einfach für mobile Nutzer aus. Streben Sie eine Parität der Inhalte an, da es immer Nutzer geben wird, die bestimmte Funktionen vermissen. Wenn Sie die Ressourcen haben, erstellen Sie alternative Versionen derselben Inhalte für verschiedene Darstellungsbereiche – auch wenn es nur für Seitenelemente mit hoher Priorität ist.
Berücksichtigen Sie das Content-Management und den Workflow: Führen Legacy-Systeme zu Legacy-Inhalten?
Texte vereinfachen
Da das Web immer mobiler wird, müssen Sie Ihre Schreibweise ändern. Halten Sie es einfach, verzichten Sie auf überflüssige Informationen und kommen Sie schnell zur Sache.
Redundante Bilder entfernen
Bilder können schön, unterhaltsam und informativ sein, aber sie nehmen auch Platz auf der Seite ein, erhöhen die Seitengröße und die Anzahl der Dateianfragen. Die Latenz nimmt mit abnehmender Verbindungsqualität zu. Das bedeutet, dass eine übermäßige Anzahl von Bilddateianfragen ein zunehmendes Problem darstellt, da das Web immer mobiler wird.
Bilder verbrauchen auch Strom. Nach dem Bildschirm ist das Funkmodul der zweitgrößte Stromfresser. Mehr Bildanfragen, mehr Funkmodulnutzung, mehr leere Akkus. Schon allein das Rendern von Bildern verbraucht Strom – und zwar proportional zu Größe und Anzahl. Weitere Informationen finden Sie im Stanford-Bericht Who Killed My Battery?
Wenn möglich, verzichten Sie auf Bilder.
Hier einige Vorschläge:
- Verwenden Sie Designs, bei denen ganz auf Bilder verzichtet wird oder Bilder nur sparsam eingesetzt werden. Nur Text kann auch schön sein! Fragen Sie sich: „Was möchten Besucher auf meiner Website erreichen? Helfen Bilder dabei?“
- Früher war es üblich, Überschriften und andere Texte als Grafiken zu speichern. Dieser Ansatz reagiert nicht gut auf Änderungen der Darstellungsbereichgröße und erhöht die Seitengröße und die Latenz. Wenn Sie Text als Grafik verwenden, kann er auch nicht von Suchmaschinen gefunden werden und ist nicht für Screenreader und andere unterstützende Technologien zugänglich. Verwenden Sie nach Möglichkeit „echten“ Text. Mit Webfonts und CSS können Sie eine schöne Typografie erzielen.
- Verwenden Sie CSS anstelle von Bildern für Farbverläufe, Schatten, abgerundete Ecken und Hintergrundtexturen. Diese Funktionen werden von allen modernen Browsern unterstützt. Beachten Sie jedoch, dass CSS zwar besser als Bilder sein kann, aber dennoch eine Verarbeitungs- und Rendering-Strafe anfallen kann, die auf Mobilgeräten besonders hoch ist.
- Hintergrundbilder funktionieren auf Mobilgeräten selten gut. Sie können Medienabfragen verwenden, um Hintergrundbilder in kleinen Darstellungsbereichen zu vermeiden.
- Vermeiden Sie Bilder auf Splash-Screens.
- Verwenden Sie CSS für UI-Animationen.
- Machen Sie sich mit Glyphen vertraut. Verwenden Sie Unicode-Symbole und ‑Icons anstelle von Bildern, bei Bedarf mit Webfonts.
- Erwägen Sie die Verwendung von Symbolschriften. Das sind Vektorgrafiken, die beliebig skaliert werden können. Ein ganzer Satz von Bildern kann in einer Schriftart heruntergeladen werden. Beachten Sie jedoch diese Bedenken.
- Mit dem
<canvas>Element können Sie Bilder in JavaScript aus Linien, Kurven, Text und anderen Bildern erstellen. - Inline-SVG- oder Data-URI-Bilder verringern die Seitengröße nicht, können aber die Latenz reduzieren, indem sie die Anzahl der Ressourcenanfragen verringern. Inline-SVG wird von mobilen und Desktop-Browsern gut unterstützt und mit Optimierungstools lässt sich die SVG-Größe erheblich reduzieren. Ebenso werden Data-URIs gut unterstützt. Beide können in CSS eingebunden werden.
- Erwägen Sie die Verwendung von
<video>anstelle von animierten GIFs. Das Videoelement wird von allen Browsern auf Mobilgeräten unterstützt (außer Opera Mini).
Weitere Informationen finden Sie unter Bildoptimierung und Bilder entfernen und ersetzen.
Inhalte so gestalten, dass sie in verschiedenen Darstellungsbereichen gut funktionieren
Erstellen Sie ein Produkt, aber erfinden Sie es nicht für kleine Bildschirme neu. Großartige mobile Produkte werden erstellt, nicht portiert."
Mobile Design and Development, Brian Fling
Großartige Designer „optimieren nicht für Mobilgeräte“, sondern denken responsiv, um Websites zu erstellen, die auf einer Vielzahl von Geräten funktionieren. Die Struktur von Text und anderen Seiteninhalten ist entscheidend für den geräteübergreifenden Erfolg.
Viele der nächsten Milliarde Nutzer, die online gehen, verwenden kostengünstige Geräte mit kleinen Darstellungsbereichen. Das Lesen auf einem 3,5- oder 4-Zoll-Bildschirm mit niedriger Auflösung kann anstrengend sein.
Hier ist ein Foto der beiden Geräte nebeneinander:
Auf dem größeren Bildschirm ist der Text klein, aber lesbar.
Auf dem kleineren Bildschirm rendert der Browser das Layout korrekt, aber der Text ist unlesbar, auch wenn er vergrößert wird. Das Display ist verschwommen und hat einen Farbstich – Weiß sieht nicht weiß aus – was die Lesbarkeit der Inhalte beeinträchtigt.
Inhalte für Mobilgeräte gestalten
Wenn Sie für eine Vielzahl von Darstellungsbereichen entwickeln, berücksichtigen Sie sowohl den Content als auch das Layout und das Grafikdesign. Verwenden Sie echten Text und echte Bilder, nicht Platzhalterinhalte.
Inhalte gehen dem Design voran. Design ohne Inhalte ist kein Design, sondern Dekoration.
Jeffrey Zeldman
- Platzieren Sie die wichtigsten Inhalte oben, da Nutzer Webseiten in der Regel nach einem F-förmigen Muster lesen.
- Nutzer besuchen Ihre Website, um ein Ziel zu erreichen. Fragen Sie sich, was sie dafür benötigen, und entfernen Sie alles andere. Verzichten Sie auf visuelle und textliche Verzierungen, Legacy-Inhalte, übermäßige Links und andere überflüssige Elemente.
- Seien Sie vorsichtig mit Symbolen für das Teilen in sozialen Medien. Sie können Layouts überladen und der Code dafür kann das Laden der Seite verlangsamen.
- Entwerfen Sie responsive Layouts für Inhalte, nicht für feste Gerätegrößen.
Test-Content
- Prüfen Sie die Lesbarkeit in kleineren Darstellungsbereichen mit den Chrome-Entwicklertools und anderen Emulationstools.
- Testen Sie Ihre Inhalte bei geringer Bandbreite und hoher Latenz. Probieren Sie Inhalte in verschiedenen Verbindungsszenarien aus.
- Lesen Sie Ihre Inhalte auf einem kostengünstigen Smartphone und interagieren Sie damit.
- Bitten Sie Freunde und Kollegen, Ihre App oder Website auszuprobieren.
- Richten Sie ein einfaches Testlabor für Geräte ein. Im GitHub-Repository für das Mini Mobile Device Lab von Google finden Sie eine Anleitung zum Erstellen eines eigenen Testlabors. OpenSTF ist eine einfache Webanwendung zum Testen von Websites auf mehreren Android-Geräten.
Hier ist OpenSTF in Aktion:
Mobilgeräte werden immer häufiger zum Konsumieren von Inhalten und zum Abrufen von Informationen verwendet – nicht nur für Kommunikation, Spiele und Medien.
Daher ist es immer wichtiger, Inhalte so zu planen, dass sie in einer Vielzahl von Darstellungsbereichen gut funktionieren, und Inhalte bei der Gestaltung von Layout, Benutzeroberfläche und Interaktion geräteübergreifend zu priorisieren.
Datenkosten verstehen
Webseiten werden immer größer.
Laut HTTP Archive beträgt die durchschnittliche Seitengröße für die eine Million Top-Websites jetzt über 2 MB.
Nutzer vermeiden Websites oder Apps, die als langsam oder teuer gelten. Daher ist es wichtig, die Kosten für das Laden von Seiten- und App-Komponenten zu verstehen.
Das Reduzieren der Seitengröße kann auch rentabel sein. Chris Zacharias von YouTube hat festgestellt, dass sich die Größe der Wiedergabeseite von 1,2 MB auf 250 KB reduzieren ließ:
Mit anderen Worten: Wenn Sie die Seitengröße reduzieren, können Sie ganz neue Märkte erschließen.
Seitengröße berechnen
Es gibt eine Reihe von Tools zum Berechnen der Seitengröße. Im Bereich „Network“ (Netzwerk) der Chrome-Entwicklertools wird die Gesamtgröße aller Ressourcen in Byte angezeigt. Sie können damit auch die Größe einzelner Asset-Typen ermitteln. Außerdem können Sie prüfen, welche Elemente aus dem Browsercache abgerufen wurden.
Firefox und andere Browser bieten ähnliche Tools.
WebPagetest bietet die Möglichkeit, das erste und nachfolgende Laden von Seiten zu testen. Sie können Tests mit Skripts automatisieren (z. B. zum Anmelden auf einer Website) oder die RESTful APIs verwenden. Das folgende Beispiel (Laden von developers.google.com/web) zeigt, dass das Caching erfolgreich war und dass für das nachfolgende Laden der Seite keine zusätzlichen Ressourcen erforderlich waren.
WebPagetest bietet auch eine Aufschlüsselung der Größe und der Anfragen nach MIME-Typ.
Seitenkosten berechnen
Für viele Nutzer kosten Daten nicht nur Byte und Leistung, sondern auch Geld.
Auf der Website What Does My Site Cost? können Sie die tatsächlichen finanziellen Kosten für das Laden Ihrer Website schätzen. Das folgende Histogramm zeigt, wie viel das Laden von amazon.com mit einem Prepaid-Datentarif kostet.
Dabei wird jedoch nicht die Erschwinglichkeit im Verhältnis zum Einkommen berücksichtigt. Daten von blog.jana.com zeigen die Kosten für Daten.
| 500-MB-Datentarif Kosten (USD) |
Mindestlohn pro Stunde (USD) |
Arbeitsstunden, um für 500-MB-Datentarif zu bezahlen |
|
| Indien | 3,38 $ | 0,20 $ | 17 Stunden |
| Indonesien | 2,39 $ | 0,43 $ | 6 Stunden |
| Brasilien | 13,77 $ | 1,04 $ | 13 Stunden |
Die Seitengröße ist nicht nur ein Problem für Schwellenländer. In vielen Ländern verwenden Nutzer Mobilfunktarife mit begrenztem Datenvolumen und vermeiden Ihre Website oder App, wenn sie als schwer und teuer wahrgenommen wird. Auch bei „unbegrenzten“ Mobilfunk- und WLAN-Datentarifen gibt es in der Regel ein Datenlimit, über das hinaus sie gesperrt oder gedrosselt werden. Aus diesen Gründen ist es am besten, so transparent wie möglich zu sein, wie viel Daten Ihre Seite verbraucht. Im folgenden Blogpost finden Sie konkrete Best Practices: Nurture trust through cost transparency
Das Ergebnis: Die Seitengröße wirkt sich auf die Leistung aus und kostet Geld. Unter Optimizing content efficiency erfahren Sie, wie Sie diese Kosten senken können.