Wiemy, że warto projektować elastycznie, aby zapewnić jak największą wygodę na wielu urządzeniach, ale też elastyczne projektowanie stron jest też skuteczne w przypadku ułatwień dostępu.
Weźmy np. witrynę Udacity:
Niedowidzący użytkownik, który ma problem z czytaniem drobnym drukiem, może powiększyć stronę, a może nawet 400%. Ponieważ witryna jest zaprojektowana elastycznie, interfejs zmienia się w „mniejszym widocznym obszarze”. (właściwie dla większej strony), szczególnie przydatną dla użytkowników komputerów, którzy potrzebują powiększenia ekranu. jak i użytkowników urządzeń mobilnych. To świetny układ. Ta sama strona została powiększona do 400%:
Elastyczne projektowanie sprawia, przestrzegamy reguły 1.4.4 listy kontrolnej WebAIM, Według niego strona „...powinna być czytelna i funkcjonalna po dwukrotnym zwiększeniu rozmiaru tekstu”.
Ten przewodnik nie obejmuje całego projektowania responsywnego, ale oto kilka ważnych kwestii, które pomogą Ci zadbać o dobre wrażenia użytkowników elastycznych i zapewnić użytkownikom lepszy dostęp do Twoich treści.
Używanie meta tagu widocznego obszaru
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ustawienie width=device-width spowoduje dopasowanie szerokości ekranu do szerokości ekranu w pikselach niezależnych od urządzenia.
a ustawienie initial-scale=1 tworzy relację 1:1 między pikselami CSS a pikselami niezależnymi od urządzenia.
Instruuje to, że przeglądarka dopasuje treść do rozmiaru ekranu,
aby użytkownicy nie widzieli tylko kilku zwiniętych tekstów.
Więcej informacji znajdziesz w artykule Dopasowanie rozmiaru do widocznego obszaru.
Zezwalaj użytkownikom na powiększanie
Można użyć meta tagu widocznego obszaru, by zapobiec powiększaniu,
przez ustawienie: maximum-scale=1 lub user-scaleable=no.
Unikaj tego i w razie potrzeby pozwól użytkownikom powiększyć widok.
Projektowanie z elastycznością
Unikaj kierowania na konkretne rozmiary ekranów i korzystaj z elastycznej siatki, i wprowadza zmiany w układzie zgodnie z zawartością. Jak widzieliśmy w przykładzie powyżej w Udacity, dzięki takiemu podejściu mamy pewność, że projekt od tego, czy mniejsza ilość miejsca jest wynikiem mniejszego ekranu czy większego powiększenia.
Więcej informacji o tych technikach znajdziesz w artykule Podstawowe informacje o elastycznym projektowaniu witryn.
Używaj jednostek względnych w tekście
Optymalne wykorzystanie elastycznej siatki używaj jednostek względnych, takich jak „em” lub „rem” do określania rozmiaru tekstu, a nie wartości w pikselach. Niektóre przeglądarki obsługują zmianę rozmiaru tekstu tylko w preferencjach użytkownika, a jeśli używasz w tekście wartości w pikselach, to ustawienie nie będzie miało wpływu na kopiowanie. Jeśli jednak używasz jednostek względnych, treść witryny zostanie zaktualizowana zgodnie z preferencjami użytkownika.
Dzięki temu podczas powiększania strony cała witryna będzie się przeformatowywać. by ułatwić im korzystanie z Twojej witryny.
Unikaj odłączenia widoku wizualnego od kolejności źródłowej
Użytkownik, który przegląda witrynę za pomocą klawisza Tab będzie stosował się do kolejności treści dokumentu HTML. Podczas korzystania z nowoczesnych metod układu, takich jak Flexbox i Grid, łatwo odwzorować sposób renderowania wizualnego w kolejności źródłowej. Może to powodować niepokojące przeskakiwanie po stronie przez osoby, które poruszają się po stronie za pomocą klawiatury.
Pamiętaj, aby przetestować projekt w każdym punkcie przerwania. W tym celu klikaj treści za pomocą tabulatora. Czy przepływ informacji na stronie nadal ma sens?
Dowiedz się więcej o odłączaniu źródła od wyświetlacza wizualnego.
Kieruj się wskazówkami przestrzennymi
Podczas pisania mikrokopii nie używaj języka, który wskazuje lokalizację elementu na stronie. np. gdy mówimy o nawigacji „po lewej stronie”. nie ma sensu w wersji mobilnej, gdy nawigacja znajduje się na górze ekranu.
Upewnij się, że elementy dotykowe są wystarczająco duże na urządzeniach z ekranem dotykowym
Na urządzeniach z ekranem dotykowym elementy dotykowe muszą być odpowiednio duże. dzięki czemu można je łatwo aktywować bez klikania innych linków. Dobry rozmiar każdego elementu klikalnego to 48 pikseli, przeczytaj więcej o elementach docelowych kliknięcia.