Projekt wyświetlany na małym ekranie nie powinien wyglądać jak pomniejszona wersja układu na duży ekran. Podobnie projekt wyświetlany na dużym ekranie nie powinien wyglądać jak powiększona wersja układu na mały ekran. Projekt musi być elastyczny, aby można go było dostosować do wszystkich rozmiarów ekranu. Dobry projekt elastyczny w pełni wykorzystuje każdy format.
Oznacza to, że niektóre elementy interfejsu mogą wyglądać zupełnie inaczej w zależności od kontekstu, w którym są wyświetlane. Aby w pełni wykorzystać różne rozmiary ekranu, może być konieczne zastosowanie zupełnie innego kodu CSS do tej samej bazy kodu HTML. Może to być spore wyzwanie projektowe.
Oto niektóre typowe wyzwania, z którymi możesz się spotkać.
Nawigacja
Wyświetlanie listy linków nawigacyjnych jest dość proste na dużym ekranie. Jest wystarczająco dużo miejsca na te linki.
Na małym ekranie miejsce jest na wagę złota. Projektując w takiej sytuacji, możesz mieć pokusę, aby ukryć nawigację za przyciskiem. Problem z tym rozwiązaniem polega na tym, że użytkownicy muszą wykonać 2 czynności, aby gdzieś się dostać: otworzyć menu, a następnie wybrać opcję. Dopóki menu nie zostanie otwarte, użytkownik zastanawia się, „gdzie mogę się udać?”.
Spróbuj znaleźć strategię, która pozwoli Ci uniknąć ukrywania nawigacji. Jeśli masz stosunkowo niewielką liczbę elementów, możesz dostosować nawigację tak, aby dobrze wyglądała na małych ekranach.
Ten wzorzec nie będzie się skalować, jeśli nawigacja zawiera wiele linków. Nawigacja będzie wyglądać niechlujnie, jeśli linki będą zawijać się do 2 lub 3 wierszy na małym ekranie.
Jednym z możliwych rozwiązań jest pozostawienie linków w jednym wierszu, ale skrócenie listy na krawędzi ekranu. Użytkownicy mogą przesuwać palcem w poziomie, aby wyświetlić linki, które nie są od razu widoczne. Jest to wzorzec przepełnienia.
Zaletą tej techniki jest to, że skaluje się do dowolnej szerokości urządzenia i dowolnej liczby linków. Wadą jest to, że użytkownicy mogą przeoczyć linki, które nie są początkowo widoczne. Jeśli używasz tej techniki w przypadku głównej nawigacji, upewnij się, że pierwsze kilka linków jest najważniejszych, i wizualnie wskaż, że na liście jest więcej elementów. W poprzednim przykładzie do tego wskaźnika użyto gradientu.
W ostateczności możesz ukryć nawigację domyślnie i udostępnić użytkownikom mechanizm przełączania, który umożliwia wyświetlanie i ukrywanie treści. Nazywa się to stopniowym ujawnianiem.
Upewnij się, że przycisk, który przełącza wyświetlanie nawigacji, jest oznaczony etykietą. Nie polegaj na ikonie, aby była zrozumiała.
Nieoznaczona ikona to nawigacja „tajemnicza” – użytkownicy nie będą wiedzieć, co się w niej znajduje, dopóki nie klikną. Dodaj etykietę tekstową, aby użytkownicy wiedzieli, co przycisk ujawni.
Karuzele
To, co dotyczy nawigacji, dotyczy też innych treści: staraj się niczego nie ukrywać. Karuzele to popularna metoda ukrywania treści. Może to wyglądać całkiem schludnie, ale istnieje duże prawdopodobieństwo, że użytkownicy nigdy nie odkryją ukrytych treści. Karuzele lepiej sprawdzają się w rozwiązywaniu problemów organizacyjnych – np. jakie treści powinny być wyświetlane na stronie głównej – niż w obsłudze użytkowników.
Gdy jednak miejsce jest na wagę złota, karuzele mogą zapobiec zbyt długiej i niechlujnej stronie. Możesz zastosować podejście hybrydowe: wyświetlać treści w karuzeli na małych ekranach, ale wyświetlać te same treści w siatce na większych ekranach.
W przypadku wąskich ekranów wyświetlaj elementy w wierszu za pomocą flexbox. Wiersz elementów będzie wykraczać poza krawędź ekranu. Użyj overflow-x: auto, aby umożliwić przesuwanie w poziomie.
@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 zapewniają, że elementy można przesuwać w płynny sposób. Dzięki scroll-snap-type: inline mandatory elementy przyciągają się na swoje miejsce.
Gdy 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 czegokolwiek.
@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 było, nie byłoby żadnej wskazówki, że poza krawędzią widocznego obszaru dostępne są dodatkowe treści.
Karuzele to kolejny przykład działania wzorca przepełnienia. Jeśli masz wiele elementów, które użytkownicy mogą przeglądać, możesz nadal używać wzorca przepełnienia nawet na dużych ekranach, w tym telewizorach. Ten przewijak multimediów używa wielu karuzel do zarządzania dużą liczbą opcji.
Ponownie właściwości scroll-snap zapewniają płynność interakcji. Zwróć też uwagę, że do obrazów w karuzeli zastosowano loading="lazy". W tym przypadku obrazy nie znajdują się w części strony widocznej po przewinięciu, ale poza krawędzią, jednak obowiązuje ta sama zasada: jeśli użytkownik nigdy nie przesunie palcem do tego elementu, obraz nie zostanie pobrany, co pozwoli zaoszczędzić przepustowość.
Dzięki dodaniu JavaScript możesz dodać do karuzeli interaktywne elementy sterujące. Możesz nawet sprawić, że będzie automatycznie przełączać się między elementami. Zanim to zrobisz, dobrze się zastanów – automatyczne odtwarzanie może działać, jeśli karuzela jest jedyną treścią na stronie, ale automatycznie odtwarzająca się karuzela jest niezwykle irytująca, jeśli ktoś próbuje korzystać z innych treści (np. czytać tekst). Więcej informacji znajdziesz w sprawdzonych metodach dotyczących karuzel.
Tabele danych
Element table doskonale nadaje się do strukturyzowania danych tabelarycznych – wierszy i kolumn powiązanych informacji. Jeśli jednak tabela będzie zbyt duża, może zepsuć układ na małym ekranie.
Do tabel możesz zastosować wzorzec przepełnienia. W tym przykładzie tabela jest otoczona elementem 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
Wzorzec przepełnienia to dobry kompromis w przypadku małych ekranów, ale upewnij się, że użytkownicy wiedzą, że treści poza ekranem są dostępne. Rozważ umieszczenie cienia lub gradientu na krawędzi, gdzie treść jest obcięta.
Stopniowe ujawnianie to przydatny sposób na oszczędzanie miejsca, ale uważaj, aby nie używać go w przypadku bardzo ważnych treści. Lepiej nadaje się do działań dodatkowych. Upewnij się, że element interfejsu, który wywołuje ujawnianie, jest wyraźnie oznaczony etykietą – nie polegaj tylko na ikonografii.
Najpierw projektuj na mniejsze ekrany. Łatwiej jest dostosować projekty na małe ekrany do większych ekranów niż odwrotnie. Jeśli najpierw zaprojektujesz na duży ekran, istnieje ryzyko, że projekt na mały ekran będzie wyglądał jak dodatek.
Więcej wzorców układu i elementów interfejsu znajdziesz w sekcji Wzorce na web.dev.
Podczas dostosowywania elementów interfejsu do różnych rozmiarów ekranu zapytania o media są bardzo przydatne do określania wymiarów urządzenia. Funkcje multimedialne, takie jak min-width i min-height, to dopiero początek. Następnie poznasz całą gamę innych funkcji multimedialnych.