Podczas tworzenia treści dla różnych użytkowników i urządzeń weź pod uwagę nie tylko treść, ale też układ i projekt graficzny.
Jak ludzie czytają w internecie
Przewodnik po pisaniu dla rządu USA podsumowuje, czego ludzie oczekują od tekstów w internecie:
Badania pokazują, że ludzie nie czytają stron internetowych, tylko je skanują. Średnio ludzie czytają tylko 20–28% treści na stronie internetowej. Czytanie z ekranu jest znacznie wolniejsze niż czytanie z papieru. Jeśli informacje nie będą łatwo dostępne i zrozumiałe, użytkownicy zrezygnują i opuszczą Twoją witrynę.
Jak pisać na urządzenia mobilne
Skup się na temacie i od razu przejdź do sedna. Aby tekst działał na różnych urządzeniach i w różnych widocznych obszarach, upewnij się, że główne punkty są przedstawione na początku – najlepiej w pierwszych 4 akapitach, w około 70 słowach.
Zastanów się, czego ludzie oczekują od Twojej witryny. Czy próbują czegoś się dowiedzieć? Jeśli użytkownicy odwiedzają Twoją witrynę, aby znaleźć informacje, upewnij się, że cały tekst jest zorientowany na pomoc w osiągnięciu celu. Pisz w stronie czynnej, proponuj działania i rozwiązania.
Publikuj tylko to, czego chcą Twoi użytkownicy, i nic więcej.
Badania przeprowadzone przez rząd Wielkiej Brytanii pokazują też, że:
Innymi słowy: używaj prostego języka, krótszych słów i prostych struktur zdań – nawet w przypadku wykształconych odbiorców o specjalistycznej wiedzy. O ile nie ma ważnego powodu, zachowaj konwersacyjny ton. Stara zasada dziennikarstwa mówi, że należy pisać tak, jakby się rozmawiało z inteligentnym 11-latkiem.
Kolejny miliard użytkowników
Uproszczone podejście do pisania jest szczególnie ważne w przypadku czytelników korzystających z urządzeń mobilnych. Ma ono kluczowe znaczenie podczas tworzenia treści na tanie telefony z małymi widocznymi obszarami, które wymagają więcej przewijania i mogą mieć wyświetlacze o niższej jakości oraz mniej responsywne ekrany.
Większość kolejnego miliarda użytkowników, którzy zaczną korzystać z internetu, będzie mieć tanie urządzenia. Nie będą oni chcieli wydawać środków na transmisję danych na przeglądanie długich treści i mogą nie czytać w swoim języku ojczystym. Skróć tekst: używaj krótkich zdań, minimalnej interpunkcji, akapitów o długości nie większej niż 5 wierszy i nagłówków jedno wierszowych. Rozważ użycie tekstu responsywnego (np. krótszych nagłówków w przypadku mniejszych widocznych obszarów), ale pamiętaj o wadach takiego rozwiązania.
Minimalistyczne podejście do tekstu ułatwi też lokalizację i internacjonalizację treści oraz zwiększy prawdopodobieństwo, że Twoje treści zostaną zacytowane w mediach społecznościowych.
Podsumowanie:
- Trzymaj się prostych rozwiązań
- Ogranicz bałagan
- Przejdź do sedna
Usuwanie zbędnych treści
Pod względem rozmiaru w bajtach strony internetowe są duże i stają się coraz większe.
Techniki projektowania responsywnego umożliwiają wyświetlanie różnych treści w mniejszych widocznych obszarach, ale zawsze warto zacząć od uproszczenia tekstu, obrazów i innych treści.
Użytkownicy internetu często są zorientowani na działanie, „pochylają się” w poszukiwaniu odpowiedzi na bieżące pytanie, zamiast sięgać po dobrą książkę.
Jackob Nielsen
Zastanów się, co użytkownicy chcą osiągnąć, gdy odwiedzają Twoją witrynę.
Czy każdy komponent strony pomaga użytkownikom osiągnąć cel?
Usuwanie zbędnych elementów strony
Według HTTP Archive pliki HTML stanowią średnio 70 tys. bajtów i ponad 9 żądań na stronę internetową.
Wiele popularnych witryn używa kilku tysięcy elementów HTML na stronę i kilku tysięcy wierszy kodu, nawet na urządzeniach mobilnych. Nadmierny rozmiar pliku HTML może nie spowalniać ładowania stron, ale duży rozmiar HTML może być oznaką nadmiaru treści. Większe pliki .html oznaczają więcej elementów, więcej treści tekstowych lub jedno i drugie.
Zmniejszenie złożoności HTML zmniejszy też wagę strony, ułatwi lokalizację i internacjonalizację oraz ułatwi planowanie i debugowanie elastycznego projektowania stron. Więcej informacji o pisaniu wydajniejszego kodu HTML znajdziesz w artykule HTML o wysokiej wydajności.
Każdy krok, który użytkownik musi wykonać, zanim zacznie korzystać z Twojej aplikacji, będzie Cię kosztować 20% użytkowników.
Gabor Cselle, Twitter
To samo dotyczy treści: pomóż użytkownikom jak najszybciej dotrzeć do tego, czego szukają.
Nie ukrywaj treści przed użytkownikami mobilnymi. Dąż do równości treści, ponieważ zgadywanie, których funkcji użytkownicy mobilni nie będą tęsknić, na pewno się nie sprawdzi. Jeśli masz zasoby, utwórz alternatywne wersje tych samych treści dla różnych rozmiarów widocznego obszaru – nawet jeśli tylko dla elementów strony o wysokim priorytecie.
Zastanów się nad zarządzaniem treścią i przepływem pracy: czy starsze systemy powodują, że treści są przestarzałe?
Upraszczanie tekstu
Wraz z przejściem internetu na urządzenia mobilne musisz zmienić sposób pisania. Trzymaj się prostych rozwiązań, ogranicz bałagan i przejdź do sedna.
Usuwanie zbędnych obrazów
Obrazy mogą być piękne, zabawne i informacyjne, ale też zajmują miejsce na stronie, zwiększają wagę strony i zwiększają liczbę żądań plików. Opóźnienie pogarsza się wraz z pogorszeniem połączenia, co oznacza, że nadmiar żądań plików graficznych jest coraz większym problemem w miarę przechodzenia internetu na urządzenia mobilne.
Obrazy zużywają też energię. Po ekranie radio jest drugim największym źródłem zużycia baterii. Więcej żądań obrazów, większe zużycie radia, więcej rozładowanych baterii. Nawet samo renderowanie obrazów zużywa energię – i jest to proporcjonalne do rozmiaru i liczby. Zapoznaj się z raportem Stanforda Who Killed My Battery? (Kto rozładował moją baterię?).
Jeśli to możliwe, pozbądź się obrazów.
Oto kilka sugestii:
- Rozważ projekty, które całkowicie unikają obrazów lub używają ich oszczędnie. Sam tekst może być piękny! Zadaj sobie pytanie: „Co użytkownicy chcą osiągnąć, gdy odwiedzają moją witrynę? Czy obrazy pomagają w tym procesie?”
- W przeszłości powszechne było zapisywanie nagłówków i innych tekstów jako grafik. Takie podejście nie sprawdza się w przypadku zmian rozmiaru widocznego obszaru i zwiększa wagę strony oraz opóźnienie. Używanie tekstu jako grafiki oznacza też, że tekst nie może być znaleziony przez wyszukiwarki i nie jest dostępny dla czytników ekranu ani innych technologii wspomagających. Tam, gdzie to możliwe, używaj „prawdziwego” tekstu – czcionki internetowe i CSS mogą zapewnić piękną typografię.
- Używaj CSS zamiast obrazów w przypadku gradientów, cieni, zaokrąglonych rogów i tekstur tła – funkcji obsługiwanych przez wszystkie nowoczesne przeglądarki. Pamiętaj jednak, że CSS może być lepszy niż obrazy, ale nadal może powodować obniżenie wydajności przetwarzania i renderowania, szczególnie na urządzeniach mobilnych.
- Obrazy tła rzadko sprawdzają się na urządzeniach mobilnych. Za pomocą zapytań multimedialnych możesz uniknąć obrazów tła w małych widocznych obszarach.
- Unikaj obrazów ekranu powitalnego.
- Do animacji interfejsu używaj CSS.
- Poznaj swoje glify. Zamiast obrazów używaj symboli i ikon Unicode, a w razie potrzeby czcionek internetowych.
- Rozważ użycie czcionek ikon. Są to grafiki wektorowe, które można skalować w nieskończoność, a cały zestaw obrazów można pobrać w jednej czcionce. (Pamiętaj jednak o tych kwestiach).
- Elementu
<canvas>można używać do tworzenia obrazów w JavaScriptu z linii, krzywych, tekstu i innych obrazów. - Obrazy SVG w treści lub obrazy Data URI nie zmniejszą wagi strony, ale mogą zmniejszyć opóźnienie, zmniejszając liczbę żądań zasobów. SVG w treści jest dobrze obsługiwany w przeglądarkach mobilnych i komputerowych, a narzędzia do optymalizacji mogą znacznie zmniejszyć rozmiar SVG. Podobnie dobrze obsługiwane są adresy URL danych. Oba formaty można umieścić w treści CSS.
- Zamiast animowanych GIF-ów rozważ użycie elementu
<video>. Element wideo jest obsługiwany przez wszystkie przeglądarki na urządzeniach mobilnych (z wyjątkiem Opera Mini).
Więcej informacji znajdziesz w artykułach Optymalizacja obrazów oraz Usuwanie i zastępowanie obrazów.
Projektowanie treści tak, aby dobrze działały w różnych rozmiarach widocznego obszaru
„Twórz produkt, a nie jego wersję dla małych ekranów. Świetne produkty mobilne są tworzone, a nie przenoszone”.
Mobile Design and Development, Brian Fling
Świetni projektanci nie „optymalizują pod kątem urządzeń mobilnych”, ale myślą responsywnie, aby tworzyć witryny, które działają na różnych urządzeniach. Struktura tekstu i innych treści na stronie ma kluczowe znaczenie dla sukcesu na różnych urządzeniach.
Wielu z kolejnego miliarda użytkowników, którzy zaczną korzystać z internetu, będzie używać tanich urządzeń z małymi widocznymi obszarami. Czytanie na ekranie o niskiej rozdzielczości i przekątnej 3,5 lub 4 cali może być trudne.
Oto zdjęcie obu urządzeń:
Na większym ekranie tekst jest mały, ale czytelny.
Na mniejszym ekranie przeglądarka prawidłowo renderuje układ, ale tekst jest nieczytelny, nawet po powiększeniu. Wyświetlacz jest rozmazany i ma „przebarwienia” – biel nie wygląda na białą – co utrudnia czytanie treści.
Projektowanie treści na urządzenia mobilne
Podczas tworzenia treści dla różnych widocznych obszarów weź pod uwagę nie tylko treść, ale też układ i projekt graficzny. Projektuj z użyciem prawdziwego tekstu i obrazów, a nie treści zastępczych.
„Treść jest ważniejsza niż projekt. Projekt bez treści to nie projekt, tylko dekoracja”.
Jeffrey Zeldman
- Najważniejsze treści umieść u góry, ponieważ użytkownicy zwykle czytają strony internetowe w kształcie litery F.
- Użytkownicy odwiedzają Twoją witrynę, aby osiągnąć cel. Zastanów się, czego potrzebują, aby osiągnąć ten cel, i pozbądź się wszystkiego innego. Zrezygnuj z ozdobników wizualnych i tekstowych, przestarzałych treści, nadmiaru linków i innych elementów.
- Uważaj na ikony udostępniania w mediach społecznościowych. Mogą one zaśmiecać układy, a ich kod może spowalniać ładowanie strony.
- Projektuj układy responsywne dla treści, a nie dla stałych rozmiarów urządzeń.
Testowanie treści
- Sprawdź czytelność w mniejszych widocznych obszarach za pomocą Narzędzi deweloperskich w Chrome i innych narzędzi do emulacji.
- Testuj treści w warunkach niskiej przepustowości i dużego opóźnienia. Wypróbuj treści w różnych scenariuszach połączenia.
- Spróbuj czytać treści i wchodzić z nimi w interakcję na tanim telefonie.
- Poproś znajomych i współpracowników, aby wypróbowali Twoją aplikację lub witrynę.
- Zbuduj proste laboratorium testowe urządzeń. W repozytorium GitHub dla Mini Mobile Device Lab Google znajdziesz instrukcje, jak zbudować własne laboratorium. OpenSTF to prosta aplikacja internetowa do testowania witryn na wielu urządzeniach z Androidem.
Oto OpenSTF w akcji:
Urządzenia mobilne są coraz częściej używane do przeglądania treści i uzyskiwania informacji, a nie tylko do komunikacji, gier i multimediów.
Dlatego coraz ważniejsze jest planowanie treści tak, aby dobrze działały w różnych widocznych obszarach, oraz ustalanie priorytetów treści podczas projektowania układu, interfejsu i interakcji na różnych urządzeniach.
Rozumienie kosztów transmisji danych
Strony internetowe stają się coraz większe.
Według HTTP Archive średnia waga strony w przypadku miliona najpopularniejszych witryn wynosi obecnie ponad 2 MB.
Użytkownicy unikają witryn i aplikacji, które uważają za wolne lub drogie, dlatego ważne jest, aby zrozumieć koszt ładowania komponentów strony i aplikacji.
Zmniejszenie wagi strony może też być opłacalne. Chris Zacharias z YouTube zauważył, że gdy zmniejszyli rozmiar strony odtwarzania z 1,2 MB do 250 KB:
Innymi słowy, zmniejszenie wagi strony może otworzyć zupełnie nowe rynki.
Obliczanie wagi strony
Istnieje wiele narzędzi do obliczania wagi strony. Panel Sieć w Narzędziach deweloperskich w Chrome pokazuje łączny rozmiar w bajtach wszystkich zasobów i umożliwia określenie rozmiarów poszczególnych typów zasobów. Możesz też sprawdzić, które elementy zostały pobrane z pamięci podręcznej przeglądarki.
Firefox i inne przeglądarki oferują podobne narzędzia.
WebPagetest umożliwia testowanie pierwszego i kolejnych wczytań strony. Testowanie możesz zautomatyzować za pomocą skryptów (np. do logowania się w witrynie) lub interfejsów API RESTful. Poniższy przykład (ładowanie developers.google.com/web) pokazuje, że buforowanie się powiodło i że kolejne wczytania strony nie wymagały dodatkowych zasobów.
WebPagetest podaje też zestawienie rozmiaru i żądań według typu MIME.
Obliczanie kosztu strony
W przypadku wielu użytkowników dane nie tylko kosztują bajty i wydajność, ale też pieniądze.
Witryna What Does My Site Cost? umożliwia oszacowanie rzeczywistego kosztu finansowego ładowania Twojej witryny. Poniższy histogram pokazuje, ile kosztuje (przy użyciu przedpłaconego pakietu danych) wczytanie strony amazon.com.
Pamiętaj, że nie uwzględnia to przystępności cenowej w stosunku do dochodów. Dane z blog.jana.com pokazują koszt transmisji danych.
| Pakiet danych 500 MB koszt (USD) |
Minimalna stawka godzinowa (USD) |
Liczba godzin pracy potrzebnych do opłacenia pakietu danych 500 MB |
|
| Indie | 3,38 USD | 0,20 USD | 17 godzin |
| Indonezja | 2,39 USD | 0,43 USD | 6 godzin |
| Brazylia | 13,77 USD | 1,04 USD | 13 godzin |
Waga strony to nie tylko problem rynków wschodzących. W wielu krajach ludzie korzystają z planów mobilnych z ograniczoną ilością danych i będą unikać Twojej witryny lub aplikacji, jeśli uznają ją za ciężką i drogą. Nawet „nielimitowane” plany komórkowe i Wi-Fi mają zwykle limit danych, po przekroczeniu którego są blokowane lub ograniczane. Z tych powodów najlepiej jest jak najbardziej przejrzyście informować o tym, ile danych zużywa Twoja strona. W tym poście na blogu znajdziesz konkretne sprawdzone metody: Nurture trust through cost transparency (Budowanie zaufania przez przejrzystość kosztów).
Podsumowanie: waga strony wpływa na wydajność i kosztuje pieniądze. Optymalizacja wydajności treści pokazuje, jak zmniejszyć ten koszt.