Zacznij od treści i zadań odwiedzającego
Projektowanie na różne ekrany warto zacząć od pytania, po co ktoś wchodzi na stronę. Na witrynie firmowej może szukać zakresu usług i sposobu kontaktu, na blogu konkretnego artykułu, a w katalogu właściwej kategorii. Zapisz te najważniejsze zadania i sprawdź, czy da się je wykonać bez przeglądania całej strony. Ten sam priorytet powinien być widoczny na telefonie, tablecie i komputerze, nawet jeśli elementy są rozmieszczone inaczej.
Ułóż zawartość w logicznej kolejności: zrozumiały nagłówek, krótki wstęp, najważniejsze informacje, a potem szczegóły. Mały ekran szybko pokazuje, czy strona nie zaczyna się od zbyt dużego zdjęcia lub kilku podobnych komunikatów. Nie oznacza to usuwania przydatnych treści z wersji mobilnej. Lepiej podzielić je na krótsze części i nadać im jasne nagłówki, dzięki którym odbiorca może znaleźć potrzebny fragment.
Buduj układ, który dopasowuje się do dostępnego miejsca
Responsywny układ zmienia rozmieszczenie elementów wraz z szerokością dostępnego obszaru. Na komputerze dwa bloki mogą stać obok siebie, a na telefonie jeden pod drugim. Tablet nie musi być tylko powiększonym telefonem ani pomniejszonym komputerem: sprawdź, czy przy jego szerokości kolumny nadal mają miejsce na tekst, a przyciski nie stają się ciasne. O układzie powinien decydować moment, w którym treść przestaje być wygodna w użyciu, nie sama nazwa urządzenia.
Unikaj elementów o sztywnej szerokości, które wypychają stronę poza ekran. Dotyczy to zwłaszcza szerokich tabel, długich ciągów znaków i obrazów. Jeśli porównanie wymaga tabeli, rozważ uproszczenie jej na małym ekranie lub umożliwienie przewinięcia samej tabeli, a nie całej strony w poziomie. Zachowaj też odstępy między blokami: pomagają rozróżnić treści, lecz nie powinny zmuszać do długiego przewijania przed dotarciem do pierwszej ważnej informacji.
Zadbaj o tekst, kontrast i obrazy
Tekst powinien dać się przeczytać bez powiększania strony. Wybierz prosty krój pisma, czytelną wielkość liter i odstępy między wierszami, a następnie oceń efekt na rzeczywistym ekranie. Zbyt szerokie wiersze męczą wzrok na komputerze, zbyt wąskie powodują częste przenoszenie pojedynczych słów na telefonie. Dziel dłuższe wypowiedzi na akapity i używaj nagłówków, które opisują zawartość sekcji, zamiast jedynie ją ozdabiać.
Sprawdź, czy tekst wyraźnie odróżnia się od tła, również na przyciskach i zdjęciach. Nie przekazuj znaczenia wyłącznie kolorem: komunikat o błędzie powinien także wyjaśniać, co trzeba poprawić. Obrazy dopasuj do szerokości ekranu i wybieraj je ze względu na użyteczność, nie tylko efekt wizualny. Zdjęcie o istotnym znaczeniu potrzebuje opisu alternatywnego; czysto dekoracyjny obraz nie powinien utrudniać odbioru treści osobom korzystającym z czytnika ekranu.
Ułatw nawigację palcem, myszą i klawiaturą
Menu ma pomagać w wyborze drogi, a nie zajmować większość ekranu. Na telefonie można je zwinąć, ale jego przycisk powinien mieć zrozumiałą nazwę, być łatwy do zauważenia i działać przewidywalnie. Ogranicz liczbę pozycji do tych, które rzeczywiście pomagają dotrzeć do ważnych miejsc. Linki nazywaj konkretnie: „Zobacz cennik” mówi więcej niż „Kliknij tutaj”, szczególnie gdy ktoś przegląda listę odnośników poza kontekstem akapitu.
Przyciski i pola formularzy powinny mieć dość miejsca, by można było trafić w nie palcem bez przypadkowego wybierania sąsiednich elementów. Jednocześnie sprawdź obsługę klawiaturą: czy można przejść do menu, otworzyć je, wypełnić formularz i wysłać go bez użycia myszy? Widoczne zaznaczenie aktualnie wybranego elementu pomaga śledzić tę drogę. Etykiety pól oraz zrozumiałe komunikaty o błędach są ważne na każdym urządzeniu.
Testuj całą drogę, nie tylko widok strony głównej
Podgląd kilku szerokości ekranu jest dobrym początkiem, ale nie zastąpi wykonania zwykłych zadań. Otwórz artykuł, znajdź dane kontaktowe, przejdź między kategoriami katalogu albo wyślij formularz testowy. Sprawdź stronę w pionie i poziomie oraz powiększ tekst. Zwróć uwagę, czy nic się nie nakłada, nie znika i nie wymaga przewijania całej witryny na boki.
Warto sprawdzić przynajmniej jeden telefon, tablet i komputer, jeśli masz do nich dostęp. Różne rozmiary ekranów to także różne sposoby obsługi, dlatego przetestuj dotyk, mysz i klawiaturę. Po publikacji powtarzaj te próby przy większych zmianach treści lub układu. Nowy nagłówek, dłuższa nazwa kategorii czy dodatkowe pole formularza mogą ujawnić problem, którego nie było w pierwszym projekcie.
