Podstawy elastycznego projektowania witryn

Jak tworzyć witryny dostosowane do potrzeb i możliwości urządzenia, na którym się wyświetlają.

Korzystanie z urządzeń mobilnych do surfowania w internecie rośnie w zawrotnym tempie, a ich rozmiar jest często ograniczony i wymagają innego podejścia do układu treści na ekranie.

Elastyczne projektowanie witryn, zgodnie z definicją Ethana Marcotte'a z A List Apart, jest dostosowane do potrzeb użytkowników i urządzeń, z których korzystają. Układ zmienia się w zależności od rozmiaru i możliwości urządzenia. Na przykład użytkownicy telefonów zobaczą treści w widoku z jedną kolumną, a tablet – w dwóch kolumnach.

W tym filmie projekt przesuwa się z wąskiego obszaru do szerokiego widocznego obszaru, zgodnie z dostępną powierzchnią ekranu.

Telefony, phablety, tablety, komputery, konsole do gier, telewizory, a nawet urządzenia do noszenia są dostępne w wielu różnych rozmiarach. Rozmiary ekranów stale się zmieniają, dlatego ważne jest, aby Twoja witryna mogła dostosowywać się do każdego rozmiaru ekranu – teraz i w przyszłości. Poza tym urządzenia mają różne funkcje, z których możemy korzystać. Na przykład niektórzy użytkownicy będą używać ekranu dotykowego. Nowoczesne projektowanie responsywne uwzględnia te wszystkie czynniki w celu optymalizacji wygody użytkowników.

Ustaw widoczny obszar

Strony zoptymalizowane pod kątem różnych urządzeń muszą zawierać w nagłówku metatag widoczny obszar. Metatag widocznego obszaru informuje przeglądarkę o tym, jak kontrolować wymiary i skalowanie strony.

Aby zapewnić jak największą wygodę użytkownikom, przeglądarki mobilne renderują stronę na szerokość ekranu komputera (zwykle około 980px, choć zależy to od różnych urządzeń), a następnie starają się poprawić wygląd treści, zwiększając rozmiar czcionki i skalując ją tak, aby pasowała do ekranu. Oznacza to, że rozmiary czcionek mogą wydawać się niespójne dla użytkowników, którzy będą musieli dotknąć dwukrotnie lub rozciągnąć, aby powiększyć treść i wejść z nią w interakcję.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

Użycie wartości meta widocznego obszaru width=device-width informuje stronę, że ma ona pasować do szerokości ekranu w pikselach niezależnych od urządzenia. Piksel niezależny od urządzenia (lub gęstości) reprezentujący pojedynczy piksel, który na ekranie o dużej gęstości może składać się z wielu pikseli fizycznych. Dzięki temu zawartość strony może być przeformatowana tak, aby pasowała do różnych rozmiarów ekranu, niezależnie od tego, czy jest renderowana na małym telefonie komórkowym czy na dużym monitorze komputera.

Zrzut ekranu strony z trudnym do odczytania tekstem, ponieważ jest on bardzo pomniejszony.
Przykład wczytywania strony na urządzeniu bez metatagu widocznego obszaru. Zobacz ten przykład na stronie Glitch
Zrzut ekranu przedstawiający tę samą stronę z tekstem w czytelnym rozmiarze.
Przykład wczytywania strony na urządzeniu z metatagiem widocznego obszaru. Zobacz ten przykład na stronie Glitch

W niektórych przeglądarkach szerokość strony pozostaje taka sama podczas jej obracania w trybie poziomym. Aby wypełnić ekran, wystarczy skorzystać z powiększenia, a nie przeformatowania. Dodanie wartości initial-scale=1 nakazuje przeglądarkom ustanowienie relacji 1:1 między pikselami CSS a pikselami niezależnych od urządzenia niezależnie od orientacji urządzenia. Umożliwia to wykorzystanie potencjału pełnej szerokości w orientacji poziomej.

Audyt Lighthouse nie ma tagu <meta name="viewport"> w width ani initial-scale pomaga zautomatyzować proces sprawdzania, czy dokumenty HTML prawidłowo korzystają z metatagu widocznego obszaru.

Zadbaj o łatwo dostępny widoczny obszar

Oprócz skonfigurowania właściwości initial-scale możesz też ustawić w widocznym obszarze te atrybuty:

  • minimum-scale
  • maximum-scale
  • user-scalable

Ich ustawienie może uniemożliwiać użytkownikowi powiększanie widocznego obszaru, co może powodować problemy z ułatwieniami dostępu. Dlatego nie zalecamy używania ich.

Dopasowywanie rozmiaru zawartości do widocznego obszaru

Zarówno na komputerach, jak i na urządzeniach mobilnych użytkownicy są przyzwyczajeni do przewijania stron w pionie, ale nie w poziomie. Zmuszanie użytkownika do przewijania w poziomie lub pomniejszenia strony w celu zobaczenia całej strony zmniejsza wygodę użytkowników.

Przy tworzeniu witryny mobilnej za pomocą meta tagu widocznego obszaru można łatwo przypadkowo utworzyć treść, która nie mieści się w określonym widocznym obszarze. Na przykład obraz wyświetlany na szerokość większą od widocznego obszaru może spowodować przewijanie widocznego obszaru w poziomie. Należy dostosować treść do szerokości widocznego obszaru, by użytkownik nie musiał przewijać strony w poziomie.

Kontrola rozmiaru zawartości nie jest zgodna z widocznym obszarem Audyt Lighthouse może ułatwić zautomatyzowanie procesu wykrywania przepełniającej się treści.

zdjęcia;

Obraz ma stałe wymiary i jeśli jest większy niż widoczny obszar, powoduje wyświetlenie paska przewijania. Typowym sposobem rozwiązania tego problemu jest nadanie wszystkim obrazom wartości max-width o wartości 100%. Obraz będzie się zmniejszać, aby pasował do przestrzeni, w której się znajduje, jeśli widoczny obszar jest mniejszy niż obraz. Ponieważ jednak max-width, a nie width, ma wartość 100%, obraz nie rozciągnie się do większego rozmiaru niż jego naturalny rozmiar. Możesz bezpiecznie dodać do arkusza stylów te elementy, dzięki czemu nie będzie problemów z obrazami powodującymi pasek przewijania.

img {
  max-width: 100%;
  display: block;
}

Dodaj wymiary obrazu do elementu img

Używając właściwości max-width: 100%, zastępujesz naturalne wymiary obrazu, ale należy nadal używać atrybutów width i height w tagu <img>. Dzieje się tak, ponieważ nowoczesne przeglądarki używają tych informacji do rezerwowania miejsca na obraz przed jego załadowaniem, dzięki czemu unikniesz zmian układu podczas wczytywania treści.

Układ

Wymiary i szerokość ekranu w pikselach CSS znacznie się różnią w zależności od urządzenia (np. na telefonach i tabletach, a nawet między telefonami), dlatego nie należy wyświetlać zawartości zgodnie z określoną szerokością widocznego obszaru.

Wcześniej to wymagane elementy ustawień służyły do tworzenia układu w procentach. Przykład poniżej przedstawia układ dwukolumnowy z elementami pływającymi, których rozmiar jest mierzony w pikselach. Gdy widoczny obszar staje się mniejszy niż łączna szerokość kolumn, musimy przewinąć ekran w poziomie, by zobaczyć treść.

Zrzut ekranu układu dwukolumnowego, w którym większość drugiej kolumny znajduje się poza widocznym obszarem
Układ swobodny wykorzystujący piksele. Zobacz ten przykład na stronie Glitch

Dzięki zastosowaniu wartości procentowych szerokości kolumn zawsze stanowią określony procent zawartości kontenera. Oznacza to, że kolumny zwężą się i nie będą tworzyć paska przewijania.

Tworzenie tych elastycznych siatek znacznie ułatwia korzystanie z nowoczesnych technik układu CSS, takich jak Flexbox, Grid Layout i Multicol.

Flexbox

Ta metoda układu jest idealna, gdy masz zestaw elementów o różnych rozmiarach i chcesz, aby wygodnie mieściły się w rzędach lub rzędach – mniejsze elementy zajmują mniej miejsca, a większe – więcej miejsca.

.items {
  display: flex;
  justify-content: space-between;
}

W elastycznym projekcie możesz za pomocą Flexbox wyświetlać elementy w jednym wierszu lub zawijać je do wielu wierszy w miarę zmniejszenia dostępnego miejsca.

Więcej informacji o Flexbox.

Układ siatki CSS

Układ siatki CSS umożliwia proste tworzenie elastycznych siatek. Jeśli weźmiemy pod uwagę poprzedni przykład kreacji pływającej, zamiast tworzyć kolumny z wartościami procentowymi, możemy użyć układu siatki i jednostki fr, która odpowiada części dostępnego miejsca w kontenerze.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Siatka może też służyć do tworzenia zwykłych układów siatki z dowolną liczbą elementów. Liczba dostępnych ścieżek będzie zmniejszana w miarę zmniejszania się rozmiaru ekranu. W poniższej wersji demonstracyjnej znajduje się tyle kart, ile zmieści się w każdym wierszu. Minimalny rozmiar to 200px.

Więcej informacji o układzie siatki CSS

Układ wielokolumnowy

W przypadku niektórych typów układu możesz użyć układu wielokolumnowego (wielokolumnowego), który pozwala tworzyć elastyczne liczby kolumn za pomocą właściwości column-width. W poniższym przykładzie widać, że kolumny zostały dodane, jeśli wystarczy miejsce na kolejną kolumnę 200px.

Więcej informacji o Multicol

Używanie zapytań o media CSS w celu zapewnienia elastyczności

Czasami aby umożliwić obsługę określonego rozmiaru ekranu, konieczne będzie wprowadzenie większych zmian w układzie, niż pozwalają na to opisane powyżej metody. W takich sytuacjach przydatne mogą się okazać zapytania o multimedia.

Zapytania o media to proste filtry, które można stosować do stylów CSS. Ułatwiają zmianę stylów w zależności od typu urządzenia renderującego treść lub funkcji urządzenia, takich jak szerokość, wysokość, orientacja, możliwość najechania oraz to, czy urządzenie jest używane jako ekran dotykowy.

Aby określić różne style drukowania, musisz ustawić kierowanie na typ wyjściowego, dzięki czemu możesz dodać arkusz stylów ze stylami drukowania:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

Możesz też uwzględnić style wydruku w głównym arkuszu stylów za pomocą zapytania o media:

@media print {
  /* print styles go here */
}

W przypadku elastycznego projektowania witryn zwykle pytamy o funkcje urządzenia, aby dostosować układ do mniejszych ekranów lub gdy wykryjemy, że użytkownik korzysta z ekranu dotykowego.

Zapytania o multimedia na podstawie rozmiaru widocznego obszaru

Zapytania o multimedia umożliwiają nam tworzenie responsywnych rozwiązań, w których określone style są stosowane do małych i dużych ekranów oraz do dowolnych z nich. Wykryta tutaj funkcja to rozmiar ekranu i możemy przetestować następujące elementy.

  • width (min-width, max-width)
  • height (min-height, max-height)
  • orientation
  • aspect-ratio

Wszystkie te funkcje są doskonale obsługiwane w przeglądarkach. Więcej szczegółów, w tym informacje o obsłudze przeglądarek, znajdziesz na stronach width, height, orientation i aspect-ratio w MDN.

Zapytania o multimedia na podstawie możliwości urządzenia

Biorąc pod uwagę szeroką gamę dostępnych urządzeń, nie możemy zakładać, że każde duże urządzenie to zwykły komputer stacjonarny lub laptop albo że na mniejszych urządzeniach użytkownicy korzystają tylko z ekranu dotykowego. Po wprowadzeniu kilku nowszych zmian w specyfikacji zapytań o multimedia możemy testować takie funkcje jak typ wskaźnika używanego do interakcji z urządzeniem oraz to, czy użytkownik może najeżdżać na elementy kursorem.

  • hover
  • pointer
  • any-hover
  • any-pointer

Wyświetl tę wersję demonstracyjną na różnych urządzeniach, np. na zwykłym komputerze oraz telefonie lub tablecie.

Te nowsze funkcje dobrze działają we wszystkich nowoczesnych przeglądarkach. Więcej informacji znajdziesz na stronach MDN dotyczących hover, najeżdżania kursorem, wskaźnika dowolnego punktu.

Używasz any-hover i any-pointer

Funkcje any-hover i any-pointer sprawdzają, czy użytkownik może najeżdżać kursorem i używać tego wskaźnika, nawet jeśli nie jest to główna metoda interakcji użytkownika z urządzeniem. Korzystając z nich, zachowaj ostrożność. Zmuszanie użytkownika do przełączania się na mysz podczas korzystania z ekranu dotykowego nie jest zbyt przyjazne. any-hover i any-pointer mogą jednak być przydatne, jeśli chcesz dowiedzieć się, jakiego rodzaju urządzenia ma użytkownik. Na przykład laptop z ekranem dotykowym i trackpadem powinien obsługiwać precyzyjne i dokładne wskaźniki, a także możliwość najeżdżania kursorem.

Jak wybrać punkty przerwania

Nie definiuj punktów przerwania na podstawie klas urządzeń. Zdefiniowanie punktów przerwania na podstawie konkretnych urządzeń, produktów, nazw marek lub systemów operacyjnych, które są obecnie używane, może spowodować koszmar związany z konserwacją. Zawartość powinna wskazywać sposób, w jaki układ dostosowuje się do kontenera.

Wybierz główne punkty przerwania, zaczynając od małych kroków i dopiero później

Najpierw zaprojektuj treść tak, aby zmieściła się na małym ekranie, a potem rozwijaj ekran, aż będzie potrzebny punkt przerwania. Pozwala to zoptymalizować punkty przerwania na podstawie treści i utrzymać ich minimalną możliwą liczbę.

Przyjrzyjmy się przykładowi, który widzieliśmy na początku, czyli prognozie pogody. Najpierw sprawdź, czy prognoza wygląda dobrze na małym ekranie.

Zrzut ekranu aplikacji pogodowej na szerokość ekranu urządzenia mobilnego
Aplikacja ma małą szerokość.

Następnie zmień rozmiar okna przeglądarki, aż między elementami będzie za dużo pustej przestrzeni, a prognoza będzie po prostu niezadowalająca. Decyzja jest nieco subiektywna, ale wartość powyżej 600px jest zdecydowanie za szeroka.

Zrzut ekranu aplikacji pogodowej z dużymi przerwami między elementami
Aplikacja w sytuacji, w której naszym zdaniem powinniśmy zmienić jej wygląd.

Aby wstawić punkt przerwania w punkcie 600px, utwórz na końcu kodu CSS 2 zapytania o media dla komponentu: jedno używane, gdy przeglądarka ma 600px lub mniej, i drugie, gdy jest szersza niż 600px.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

Na koniec refaktoryzuj CSS. W zapytaniu o media dla elementu max-width z 600px dodaj kod CSS przeznaczony tylko do małych ekranów. W zapytaniu o media dla elementów min-width z 601px dodaj kod CSS na potrzeby większych ekranów.

W razie potrzeby wybieraj drobne punkty przerwania

Poza wybieraniem większych punktów przerwania przy znacznej zmianie układu pomocne jest również dostosowanie się do drobnych zmian. Na przykład między głównymi punktami przerwania warto dostosować marginesy lub dopełnienie elementu albo zwiększyć rozmiar czcionki, aby układ wyglądał bardziej naturalnie.

Zacznijmy od optymalizacji układu na małym ekranie. W tym przypadku zwiększmy czcionkę, gdy szerokość widocznego obszaru przekracza 360px. Po drugie, gdy mamy wystarczającą ilość miejsca, możemy rozdzielić wysokie i niskie temperatury, aby znajdowały się w tej samej linii, a nie jedna nad drugą. Zwiększmy też nieco rozmiary ikon pogody.

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

Podobnie w przypadku dużych ekranów najlepiej jest ograniczyć panel prognozy do maksymalnej szerokości, tak aby nie zajmował on całej szerokości ekranu.

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

Zoptymalizuj tekst do czytania

Klasyczna teoria czytelności sugeruje, że idealna kolumna powinna zawierać 70–80 znaków w wierszu (około 8–10 słów w języku angielskim). Dlatego za każdym razem, gdy szerokość bloku tekstowego przekroczy około 10 słów, zastanów się nad dodaniem punktu przerwania.

Zrzut ekranu strony z tekstem na urządzeniu mobilnym
Tekst jako przeczytany na urządzeniu mobilnym.
Zrzut ekranu strony z tekstem w przeglądarce na komputerze
Tekst odczytany w przeglądarce na komputerze z punktem przerwania dodanym w celu ograniczenia długości wiersza.

Przyjrzyjmy się bliżej przykładowi opisanego powyżej posta na blogu. Na mniejszych ekranach czcionka Roboto w 1em działa idealnie, podając 10 słów w wierszu, ale na większych ekranach wymaga ona punktu przerwania. W tym przypadku, jeśli szerokość przeglądarki przekracza 575px, idealna szerokość treści to 550px.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

Staraj się nie ukrywać treści

Zachowaj ostrożność przy wyborze treści, która ma być ukryta lub wyświetlana w zależności od rozmiaru ekranu. Nie należy po prostu ukrywać treści tylko dlatego, że nie mieszczą się one na ekranie. Rozmiar ekranu nie jest wyczerpującym wskaźnikiem tego, czego użytkownik może oczekiwać. Na przykład eliminacja stężenia pyłków z prognozy pogody może być poważnym problemem dla alergików wiosennych, które potrzebują informacji, aby określić, czy mogą wyjść na zewnątrz.

Wyświetlaj punkty przerwania zapytań o multimedia w Narzędziach deweloperskich w Chrome

Po skonfigurowaniu punktów przerwania zapytań o multimedia warto sprawdzić, jak będzie wyglądać z nimi Twoja witryna. Możesz zmienić rozmiar okna przeglądarki, aby aktywować punkty przerwania, ale Narzędzia deweloperskie w Chrome mają wbudowaną funkcję, która ułatwia sprawdzanie, jak strona wygląda w różnych punktach przerwania.

Zrzut ekranu przedstawiający Narzędzia deweloperskie z otwartą aplikacją pogodową i szerokością 822 pikseli.
Narzędzia deweloperskie pokazujące aplikację pogodową w większym widocznym obszarze.
Zrzut ekranu przedstawiający Narzędzia deweloperskie z otwartą aplikacją pogodową o szerokości 436 pikseli.
Narzędzia deweloperskie pokazujące aplikację pogodową wyświetlane w węższym widocznym obszarze.

Aby wyświetlić stronę pod różnymi punktami przerwania:

Otwórz Narzędzia deweloperskie, a potem włącz Tryb urządzenia. Ta opcja otwiera się domyślnie w trybie elastycznym.

Aby zobaczyć zapytania o multimedia, otwórz menu Tryb urządzenia i wybierz Pokaż zapytania o multimedia. Spowoduje to wyświetlenie punktów przerwania w postaci kolorowych słupków nad stroną.

Kliknij jeden z pasków, aby wyświetlić swoją stronę, gdy zapytanie o media jest aktywne. Kliknij pasek prawym przyciskiem myszy, aby przejść do definicji zapytania o media.