tekst zbyt mały do czytania

Tekst zbyt mały do czytania to typowy błąd projektowy szablonów wiadomości na urządzeniach mobilnych.

Dlaczego tekst w wiadomości staje się nieczytelny

Tekst zbyt mały do czytania jest częstym skutkiem nieprawidłowego zaprojektowania szablonu wiadomości HTML. Problem pojawia się zwłaszcza na smartfonie, gdy wiadomość została przygotowana dla szerokiego monitora, a jej zawartość jest następnie zmniejszana do szerokości ekranu telefonu. Litery mogą wtedy mieć niewielki rozmiar, a odbiorca musi powiększać fragmenty wiadomości gestem dwóch palców. Utrudnia to szybkie odczytanie treści, wybór odnośnika oraz naciśnięcie przycisku.

Na czytelność wpływa nie tylko rozmiar fontu. Znaczenie mają również krój pisma, kontrast tekstu i tła, wysokość wiersza, długość akapitu oraz szerokość kolumny. Wąska kolumna z dużą liczbą zawinięć może męczyć wzrok, natomiast zbyt szeroka kolumna utrudnia śledzenie kolejnych wierszy. Dodatkowym źródłem problemów są obrazy zawierające tekst, stałe szerokości tabel oraz style CSS, które nie są poprawnie obsługiwane przez konkretny program pocztowy.

Rozmiar fontu, skalowanie i układ mobilny

Szablon wiadomości powinien mieć responsywną strukturę, która dostosowuje się do dostępnej szerokości ekranu. W praktyce stosuje się płynne szerokości kontenerów, ograniczenie maksymalnej szerokości treści oraz reguły media query dla mniejszych ekranów. Elementy o szerokości określonej wyłącznie w pikselach mogą wymusić przewijanie poziome albo spowodować automatyczne pomniejszenie całej wiadomości przez aplikację pocztową. Takie pomniejszenie zmniejsza jednocześnie tekst, przyciski i odstępy.

W treści HTML warto rozdzielić styl tekstu od grafiki i nie umieszczać istotnych informacji wyłącznie na banerach. Rozmiar fontu powinien pozostać wystarczający po wyświetleniu wiadomości na telefonie, a wysokość wiersza powinna pozwalać odróżnić sąsiednie linie. Przyciski i odnośniki powinny mieć odpowiedni obszar do kliknięcia oraz nie mogą być umieszczone zbyt blisko siebie. Należy też sprawdzić, czy ustawienia powiększania w przeglądarce i systemie nie są blokowane przez niepotrzebne atrybuty lub skrypty.

Standardy dostępności i kontrola w programach pocztowych

Wytyczne WCAG 2.2 zawierają kryterium 1.4.4 dotyczące zmiany rozmiaru tekstu. Zgodnie z nim treść powinna pozostać użyteczna po powiększeniu tekstu do 200 procent, z wyjątkiem określonych elementów, takich jak napisy czy grafiki zawierające tekst. Kryterium 1.4.10 dotyczące reflow wskazuje natomiast na konieczność prezentowania treści bez przewijania w dwóch wymiarach przy szerokości odpowiadającej 320 pikselom CSS dla układu pionowego. Są to wymagania dotyczące dostępności treści internetowych, a nie gwarancja identycznego wyglądu w każdym kliencie pocztowym.

Test powinien obejmować przynajmniej widok na telefonie w orientacji pionowej i poziomej, powiększenie tekstu, zmianę ustawień systemowej wielkości czcionki oraz otwarcie wiadomości w używanych aplikacjach pocztowych. Trzeba sprawdzić, czy tekst nie wychodzi poza ekran, czy odnośniki są rozróżnialne, a przyciski nie tracą treści po zawinięciu. Warto również wyłączyć ładowanie obrazów, ponieważ część odbiorców korzysta z takiego ustawienia. Wiadomość powinna wtedy nadal przekazywać podstawową informację za pomocą tekstu HTML i prawidłowych opisów alternatywnych obrazów.

Znaczenie problemu dla laptopa i komputera

Jeżeli mały tekst występuje tylko w jednej wiadomości, przyczyną najczęściej jest sam szablon albo sposób jego wyświetlania przez konkretny klient pocztowy. Gdy podobny problem dotyczy wielu stron i aplikacji, należy sprawdzić skalowanie systemu, powiększenie przeglądarki, rozdzielczość ekranu oraz ustawienia dostępności. W systemie Windows można zweryfikować skalę wyświetlania w ustawieniach ekranu, a w przeglądarce przywrócić powiększenie strony do wartości domyślnej. Nieprawidłowa rozdzielczość lub sterownik grafiki mogą dodatkowo pogarszać ostrość, ale nie zmieniają błędnego rozmiaru tekstu zapisanego w kodzie wiadomości.

Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i podzespołów, a podczas diagnostyki może sprawdzić ustawienia skalowania obrazu, działanie aplikacji pocztowej, rozdzielczość ekranu oraz poprawność wyświetlania treści. W przypadku wiadomości przygotowywanych przez firmę lub administratora warto równolegle przeanalizować kod HTML szablonu, szerokości tabel, reguły responsywne i zachowanie wiadomości w kilku programach pocztowych. Dopiero porównanie tych elementów pozwala rozstrzygnąć, czy źródłem problemu jest komputer odbiorcy, aplikacja, czy konstrukcja samej wiadomości.