Projekt wyświetlany na małym ekranie nie powinien przypominać zmniejszonej wersji układu na duży ekran. Podobnie projekt wyświetlany na dużym ekranie nie powinien wyglądać jak zdmuchnięta wersja układu na mały ekran. Ma ona być na tyle elastyczna, by dopasowywała się do każdego rozmiaru ekranu. Udany projekt responsywny pozwala w pełni wykorzystać każdy format.
Oznacza to, że niektóre elementy interfejsu mogą wyglądać zupełnie inaczej w zależności od kontekstu, w jakim są wyświetlane. Być może trzeba będzie zastosować zupełnie różne CSS do tej samej bazy kodu HTML, aby w pełni wykorzystać różne rozmiary ekranów. To nie lada wyzwanie projektowe.
Oto kilka typowych problemów, z którymi możesz się spotkać.
Nawigacja
Wyświetlanie listy linków nawigacyjnych na dużym ekranie jest całkiem proste. Jest sporo miejsca na takie linki.
Na małym ekranie miejsce jest na wagę złota. Jeśli tworzysz elementy do takiej sytuacji, warto ukryć obszar nawigacji za przyciskiem. Problem polega na tym, że użytkownicy muszą wykonać 2 czynności, aby dostać się w dowolne miejsce: otworzyć menu, a potem wybrać odpowiednią opcję. Dopóki menu nie zostanie otwarte, użytkownik zastanawia się, „co mogę zrobić?”.
Spróbuj znaleźć strategię, która pozwoli uniknąć ukrycia nawigacji. Jeśli masz stosunkowo małą liczbę elementów, możesz dostosować styl nawigacji, aby dobrze wyglądał na małych ekranach.
Jeśli nawigacja z nawigacją zawiera dużo linków, wzorzec nie będzie skalowany. Jeśli linki zawijają się na 2 lub 3 wiersze na małym ekranie, elementy nawigacyjne będą wyglądać nieprzestronnie.
Jednym z rozwiązań jest umieszczenie linków w jednym wierszu, ale skrócenie listy na krawędzi ekranu. Użytkownicy mogą przesuwać palcem poziomo, aby odsłonić linki, które nie są od razu widoczne. To jest wzór przepełnienia.
Zaletą tej metody jest to, że można ją skalować do dowolnej szerokości urządzenia i dowolnej liczby linków. Wadą jest to, że użytkownicy mogą przegapić linki, które nie są na początku widoczne. Jeśli używasz tej metody do głównego menu nawigacyjnego, upewnij się, że kilka pierwszych linków jest najważniejszych i wizualnie podkreślaj, że na liście jest więcej elementów. W poprzednim przykładzie ten wskaźnik używa gradientu.
W ostateczności możesz ustawić opcję domyślnego ukrycia nawigacji i udostępnić użytkownikom możliwość pokazywania i ukrywania zawartości. Nazywamy to progresywnym ujawnieniem danych.
Upewnij się, że przycisk służący do włączania nawigacji jest oznaczony etykietą. Nie czekaj, aż ikona będzie zrozumiała.
Ikona bez etykiety to nawigacja „tajemnicze mięso” – użytkownicy nie będą wiedzieć, co zawiera, dopóki jej nie ugryzą. Podaj etykietę tekstową z informacją dla użytkowników, co wyświetla się po kliknięciu przycisku.
Karuzele
Prawda jest taka, że w przypadku nawigacji jest prawdziwa ta sama treść – staraj się niczego nie ukrywać. Karuzela to typowa metoda ukrywania treści. Wygląda to całkiem dobrze, ale istnieje duża szansa, że użytkownicy nigdy nie odkryją ukrytej treści. Karuzele lepiej sprawdzają się w rozwiązywaniu problemów organizacyjnych (np. tego, jakie treści powinny być prezentowane na stronie głównej), niż w przypadku wyświetlania treści użytkownikom.
Jednak w okresach, w których ilość miejsca na dane jest na wagę złota, karuzele mogą zapobiec zbyt długiemu i bałaganowi na stronie. Możesz zastosować metodę hybrydową: wyświetlać treści w karuzeli na małych ekranach, a te same w siatce na większych ekranach.
Na wąskich ekranach wyświetl elementy z rzędu za pomocą Flexbox. Wiersz elementów wykracza poza krawędź ekranu. Aby zezwolić na przesuwanie w poziomie, użyj overflow-x: auto.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Właściwości scroll-snap umożliwiają płynne przesuwanie elementów. Dzięki scroll-snap-type: inline mandatory elementy wskoczyły na miejsce.
Jeśli ekran jest wystarczająco duży (w tym przypadku szerszy niż 50em), przełącz się na siatkę i wyświetlaj elementy w wierszach i kolumnach bez ukrywania niczego.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Co ważne, element w widoku karuzeli nie zajmuje całej szerokości. Gdyby tak się stało, nie znaczyłoby to, że poza krawędzią widocznego obszaru znajduje się więcej treści.
Karuzele to kolejny przykład działania rozszerzonego wzorca. Jeśli masz wiele elementów, które użytkownicy mogą przeglądać, możesz używać wzorów przepełniających, nawet na dużych ekranach, w tym na telewizorach. Ten narzędzie do przewijania multimediów korzysta z wielu karuzel, aby zarządzać znaczną liczbą opcji.
Jak już wspomniano, właściwości scroll-snap sprawiają, że interakcja jest płynna. Zwróć też uwagę, że do obrazów w karuzeli jest zastosowany atrybut loading="lazy". W tym przypadku obrazy nie są w części strony widocznej po przewinięciu, a nie poza krawędzią, ale obowiązuje ta sama zasada: jeśli użytkownik nigdy nie przesunie palcem aż do samego elementu, zdjęcie nie zostanie pobrane, co zmniejszy wykorzystanie przepustowości.
Dzięki JavaScriptowi możesz dodawać interaktywne elementy sterujące do karuzeli. Możesz nawet włączyć automatyczne przełączanie się między elementami. Zanim to zrobisz, dobrze się zastanów, zanim to zrobisz. Autoodtwarzanie może się sprawdzić, jeśli karuzela jest jedyną treścią na stronie, ale ta karuzela z autoodtwarzaniem jest niezwykle irytująca, jeśli ktoś próbuje wchodzić w interakcje z innymi treściami (na przykład czytaniem tekstu). Poznaj więcej sprawdzonych metod dotyczących karuzeli.
Tabele danych
Element table doskonale nadaje się do porządkowania danych tabelarycznych oraz wierszy i kolumn z powiązanymi informacjami. Zbyt duża tabela może zakłócić układ na małym ekranie.
Wzór rozszerzony możesz zastosować do tabel. W tym przykładzie tabela jest zawarta w elemencie div z klasą table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Wytyczne
W przypadku małych ekranów wzorzec przepełnienia to dobry kompromis, ale upewnij się, że treści widoczne poza ekranem są osiągalne. Rozważ umieszczenie cienia lub gradientu nad krawędzią, gdzie treść jest obcięta.
Stopniowe wyświetlanie informacji to dobry sposób na zaoszczędzenie miejsca, ale pamiętaj, by używać go w przypadku bardzo ważnych treści. Lepiej sprawdza się w działaniach dodatkowych. Upewnij się, że element interfejsu, który wyświetla komunikat, jest wyraźnie oznaczony etykietami – nie polegaj tylko na ikonie.
Projektuj z myślą o małych ekranach. Łatwiej dostosować projekt na małym ekranie do większego ekranu niż na odwrót. Jeśli projektujesz najpierw na dużym ekranie, istnieje ryzyko, że projekt na małym ekranie poczuje się niesprawnie.
Więcej wzorców układu i elementów interfejsu znajdziesz w sekcji Wzorce na stronie web.dev.
Kiedy dostosowujesz elementy interfejsu do różnych rozmiarów ekranu, zapytania o multimedia są bardzo przydatne podczas określania wymiarów urządzenia. Funkcje multimedialne takie jak min-width i min-height to jednak dopiero początek. Na tej karcie poznasz też wiele innych funkcji multimedialnych.