Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Podstawy elastycznego projektowania witryn

Liczba urządzeń mobilnych używanych do surfowania po sieci rośnie w astronomicznym tempie, jednak większość stron internetowych nie jest zoptymalizowana do działania na tych urządzeniach. Częstym ograniczeniem urządzeń mobilnych jest rozmiar wyświetlacza, dlatego wymagają one stosowania innych sposobów rozmieszczania treści na ekranie.

Responsive Web Design

In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between.

You’ll start by exploring what makes a site responsive and how some common responsive design patterns work across different devices. From there, you’ll learn how to create your own responsive layout using the viewport tag and CSS media queries. As you proceed, you’ll experiment with major and minor breakpoints, and optimizing text for reading.

This is a free course offered through Udacity

Take Course

Ekrany mogą być w wielu różnych rozmiarach – na telefonach, fabletach, tabletach, komputerach, konsolach do gier, telewizorach, a nawet urządzeniach do noszenia. Zawsze będą pojawiać się nowe, dlatego witryna powinna dostosowywać się do każdego rozmiaru ekranu – teraz i w przyszłości.

Elastyczne projektowanie witryn, pierwotnie zdefiniowane przez Ethana Marcotte`a w czasopiśmie A List Apart to odpowiedź na potrzeby użytkowników i ich urządzeń. Układ strony zmienia się w zależności od rozmiaru i możliwości urządzenia. Na przykład na telefonie użytkownik widzi treści w jednej kolumnie. Z kolei na tablecie te same treści są już wyświetlane w dwóch kolumnach.

Ustawianie tagu viewport

Strony zoptymalizowane pod kątem działania na rozmaitych urządzeniach muszą w nagłówku dokumentu zawierać metatag viewport. Przekazuje on przeglądarce instrukcje, jak sterować wymiarami i skalowaniem strony.

TL;DR

  • Użyj metatagu viewport, by sterować szerokością i skalowaniem widocznego obszaru w przeglądarkach.
  • Dołącz tag width=device-width, by dopasować stronę do szerokości ekranu w pikselach niezależnych od urządzenia.
  • Dołącz tag initial-scale=1, by utworzyć relację 1:1 między pikselami CSS a pikselami niezależnymi od urządzenia.
  • Nie wyłączaj skalowania strony przez użytkownika, by nie ograniczać jej dostępności.

Aby strona działała jak najlepiej, przeglądarki mobilne renderują ją w szerokości ekranu komputera (zwykle około 980 pikseli, choć zdarzają się też inne wartości), a potem próbują poprawić wygląd treści, zwiększając czcionki i skalując zawartość, by pasowała do ekranu. W takiej sytuacji rozmiary czcionek mogą być niespójne, a użytkownik musi kliknąć dwukrotnie lub inaczej zmienić powiększenie, by zobaczyć treści i wejść z nimi w interakcję.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Wartość metatagu viewport width=device-width powoduje, że strona dopasowuje się do szerokości ekranu w pikselach niezależnych od urządzenia. Dzięki temu jej zawartość może zostać ułożona odpowiednio do danego rozmiaru ekranu – zarówno małego w telefonie komórkowym, jak i dużego w monitorze komputera.

Strona bez ustawionego tagu viewport Strona z ustawionym tagiem viewport

Niektóre przeglądarki utrzymują stałą szerokość strony podczas obrotu do trybu poziomego i powiększają widok zamiast na nowo ułożyć zawartość na ekranie. Atrybut initial-scale=1 poleca przeglądarce ustanowić relację 1:1 między pikselami CSS a pikselami niezależnymi od urządzenia, bez względu na jego orientację. To pozwala wykorzystać pełną szerokość strony w trybie poziomym.

Ułatwianie dostępu do treści w widocznym obszarze

Oprócz initial-scale możesz też ustawić te atrybuty tagu viewport:

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

Po ustawieniu mogą one uniemożliwić użytkownikowi powiększanie widocznego obszaru, powodując problemy z dostępnością.

Dostosowywanie rozmiaru treści do widocznego obszaru

Zarówno na komputerach, jak i urządzeniach mobilnych użytkownicy są przyzwyczajeni do przewijania stron w pionie, ale nie w poziomie. Zmuszanie użytkownika do przewijania w poziomie lub pomniejszania widoku, gdy chce zobaczyć pozostałą część strony, obniża wygodę obsługi.

TL;DR

  • Nie używaj dużych elementów o stałej szerokości.
  • Prawidłowe renderowanie treści nie powinno zależeć od konkretnej szerokości widocznego obszaru.
  • Użyj zapytań o media CSS, by zastosować różne style na małych i dużych ekranach.

Podczas tworzenia witryny mobilnej z metatagiem viewport łatwo przypadkowo dodać do strony treści, które nie pasują do określonego widocznego obszaru. Na przykład obraz szerszy niż widoczny obszar powoduje konieczność przewijania w poziomie. Elementy tego typu trzeba dopasować do szerokości widocznego obszaru, tak by użytkownik nie musiał przewijać ich w bok.

Wymiary ekranu i szerokość w pikselach CSS mogą bardzo się różnić na poszczególnych urządzeniach (np. telefonach i tabletach czy nawet różnych telefonach), dlatego prawidłowe renderowanie treści nie powinno zależeć od konkretnej szerokości widocznego obszaru.

Ustawienie dużych bezwzględnych szerokości CSS elementów strony (tak jak w przykładzie poniżej) spowoduje, że element div będzie zbyt szeroki dla widocznego obszaru na węższym urządzeniu (np. iPhonie, który ma 320 pikseli szerokości CSS). Zamiast tego użyj względnych wartości szerokości, na przykład width: 100%. Podobnie pamiętaj, by nie używać dużych bezwzględnych wartości pozycji, które mogą spowodować, że element znajdzie się poza widocznym obszarem na małym ekranie.

Strona z elementem o stałej szerokości 344 pikseli na iPhonie Strona z elementem o stałej szerokości 344 pikseli na Nexusie 5.

Zwiększanie elastyczności dzięki zapytaniom o media CSS

Zapytania o media to proste filtry, które można zastosować do stylów CSS. Ułatwiają zmianę stylów na podstawie cech urządzenia, które renderuje treści, takich jak typ wyświetlacza, szerokość, wysokość, orientacja, a nawet rozdzielczość.

TL;DR

  • Zapytań o media możesz używać, by stosować style na podstawie cech urządzenia.
  • Użyj min-width zamiast min-device-width, by interfejs był jak najszerszy.
  • Użyj względnych rozmiarów elementów, by uniknąć zniekształcenia układu.

Na przykład możesz umieścić wszystkie style potrzebne do drukowania w zapytaniu o media print:

<link rel="stylesheet" href="print.css" media="print">

Istnieją jeszcze dwa inne sposoby (oprócz atrybutu media w linku arkusza stylów) użycia zapytań o media stosowane w pliku CSS: @media i @import. Ze względu na wydajność zamiast instrukcji @import zalecamy dwie pierwsze metody (przeczytaj sekcję Unikanie importu CSS).

@media print {
  /* print style sheets go here */
}

@import url(print.css) print;

Reguły logiczne stosowane przy zapytaniach o media nie wykluczają się nawzajem i każdy filtr, który spełnia kryteria danego bloku CSS, zostanie zastosowany zgodnie ze standardowymi regułami pierwszeństwa w CSS.

Stosowanie zapytań o media na podstawie rozmiaru widocznego obszaru

Zapytania o media umożliwiają tworzenie elastycznych interfejsów, w których wybrane style są stosowane na małych, dużych i wszystkich pośrednich ekranach. Składnia zapytań o media pozwala opracowywać reguły stosowane w zależności od cech urządzenia.

@media (query) {
  /* CSS Rules used when query matches */
}

Jest kilka różnych elementów, których może dotyczyć zapytanie, jednak przy elastycznym projektowaniu witryn najczęściej używa się min-width, max-width, min-height i max-height.

Atrybut Wynik
min-width Reguły obowiązują w każdej przeglądarce, której szerokość przekracza wartość podaną w zapytaniu.
max-width Reguły obowiązują w każdej przeglądarce, której szerokość jest poniżej wartości podanej w zapytaniu.
min-height Reguły obowiązują w każdej przeglądarce, której wysokość przekracza wartość podaną w zapytaniu.
max-height Reguły obowiązują w każdej przeglądarce, której wysokość jest poniżej wartości podanej w zapytaniu.
orientation=portrait Reguły obowiązują w każdej przeglądarce, której wysokość jest równa szerokości lub większa.
orientation=landscape Reguły obowiązują w każdej przeglądarce, której szerokość jest większa niż wysokość.

Przyjrzyjmy się przykładowi:

Podgląd strony, która korzysta z zapytań o media, by zmieniać właściwości podczas skalowania widoku.
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>
  • Gdy przeglądarka ma szerokość od 0 do 640 pikseli, stosujemy plik max-640px.css.
  • Gdy przeglądarka ma szerokość od 500 do 600 pikseli, stosujemy style z bloku @media.
  • Gdy przeglądarka ma szerokość co najmniej 640 pikseli, stosujemy plik min-640px.css.
  • Gdy przeglądarka ma szerokość większą niż wysokość, stosujemy plik landscape.css.
  • Gdy przeglądarka ma wysokość większą niż szerokość, stosujemy plik portrait.css.

Uwaga o min-device-width

Zapytania o media można też tworzyć, korzystając z atrybutu *-device-width, jednak zdecydowanie odradzamy tę metodę.

Różnica jest niewielka, ale bardzo ważna: min-width zależy od rozmiaru okna przeglądarki, a min-device-width – od rozmiaru ekranu. Niektóre przeglądarki (w tym starsza przeglądarka w Androidzie) mogą nie zgłaszać prawidłowo szerokości urządzenia – zamiast oczekiwanej szerokości widocznego obszaru podają rozmiar ekranu w pikselach urządzenia.

Oprócz tego użycie *-device-width może uniemożliwiać dostosowywanie układu treści na komputerach i innych urządzeniach, które pozwalają zmieniać wymiary okien. Powodem jest to, że zapytanie dotyczy rzeczywistej szerokości urządzenia, a nie rozmiaru okna przeglądarki.

Korzystanie z jednostek względnych

Podstawowa zaleta, która odróżnia projektowanie elastyczne od układów o stałej szerokości, to płynność i proporcjonalność. Stosowanie jednostek względnych miary pomaga uprościć układy i zapobiega przypadkowemu tworzeniu komponentów, które wychodzą poza widoczny obszar.

Na przykład ustawienie width: 100% w elemencie div najwyższego poziomu gwarantuje, że rozciągnie się on na szerokość widocznego obszaru i nigdy nie będzie zbyt duży ani zbyt mały. Element div będzie zawsze pasować – zarówno na iPhonie o szerokości 320 pikseli, Blackberry Z10 o szerokości 342 pikseli, jak i na Nexusie 5 o szerokości 360 pikseli.

Jednostki względne pozwalają też przeglądarkom renderować treści zgodnie z poziomem powiększenia ustawionym przez użytkownika, bez potrzeby dodawania poziomych pasków przewijania strony.

Not recommended — fixed width

div.fullWidth {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

Recommended — responsive width

div.fullWidth {
  width: 100%;
}

Jak wybierać punkty graniczne

Podczas definiowania punktów granicznych można kierować się klasami urządzeń, jednak lepiej zachować ostrożność. Utrzymanie punktów granicznych utworzonych pod konkretne, używane obecnie urządzenia, produkty, marki czy systemy operacyjne, może okazać się wyjątkowo pracochłonne. Sposób dostosowywania układu do kontenera powinien zależeć od samych treści.

TL;DR

  • Utwórz punkty graniczne na podstawie treści, nigdy pod konkretne urządzenia, produkty czy marki.
  • Projektowanie zacznij od najmniejszego urządzenia mobilnego, a potem stopniowo powiększaj interfejs wraz ze wzrostem rozmiaru ekranów.
  • Postaraj się, by długość wierszy tekstu nie przekraczała 70-80 znaków.

Określ główne punkty graniczne, zaczynając od małego rozmiaru i stopniowo go powiększając

Najpierw zaprojektuj treści tak, by pasowały do ekranu o małym rozmiarze, a potem powiększaj go, aż trzeba będzie utworzyć punkt graniczny. W ten sposób zoptymalizujesz punkty pod kątem treści i uzyskasz najmniejszą ich liczbę.

Opracujmy przykład pokazany na początku – prognozę pogody. W pierwszej kolejności postaraj się, by prognoza dobrze wyglądała na małym ekranie.

Podgląd prognozy pogody na małym ekranie.

Następnie powiększaj okno przeglądarki, aż między poszczególnymi elementami będzie tyle pustego miejsca, że prognoza przestanie wyglądać dobrze. Ocena jest dość subiektywna, ale ponad 600 pikseli szerokości to z pewnością za dużo.

Podgląd prognozy pogody po poszerzeniu strony

Aby wstawić punkt graniczny przy 600 pikselach, utwórz dwa nowe arkusze stylów: jeden stosowany wtedy, gdy szerokość przeglądarki nie przekracza 600 pikseli, a drugi – powyżej tej wartości.

<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" media="(max-width:600px)" href="weather-2-small.css">
<link rel="stylesheet" media="(min-width:601px)" href="weather-2-large.css">

Na koniec popraw style CSS. W tym przykładzie umieściliśmy wspólne style (takie jak czcionki, ikony, podstawowe pozycjonowanie oraz kolory) w pliku weather.css. Konkretne układy na mały ekran są w pliku weather-small.css, a style na duży – w pliku weather-large.css.

Preview of the weather forecast designed for a wider screen.

W razie potrzeby określ dodatkowe punkty graniczne

Oprócz głównych punktów granicznych, przy których układ znacznie się zmienia, warto też wyznaczyć miejsca wprowadzania drobnych zmian. Na przykład między głównymi punktami granicznymi możesz dostosowywać marginesy lub odstępy elementu czy zwiększać rozmiar czcionki, by wyglądała ona bardziej naturalnie w układzie.

Zacznijmy od zoptymalizowania układu na małym ekranie. Gdy szerokość widocznego obszaru przekroczy 360 pikseli, powiększymy czcionkę. Jeśli na ekranie będzie dość miejsca, rozdzielimy najniższą i najwyższą temperaturę – będą w tym samym wierszu zamiast jedna nad drugą. Powiększymy też nieco ikony symbolizujące warunki pogodowe.

@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;
  }
}

Before adding minor breakpoints. After adding minor breakpoints.

Podobnie na dużych ekranach warto ograniczyć maksymalną szerokość panelu prognozy, by nie zajął całej szerokości ekranu.

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

Zoptymalizuj tekst do czytania

Według klasycznych zasad gwarantujących czytelność tekstu idealna szpalta powinna zawierać 70-80 znaków w wierszu (około 8-10 wyrazów). Dlatego za każdym razem, gdy wiersz w bloku tekstu przekroczy 10 wyrazów, należy rozważyć utworzenie punktu granicznego.

Przed utworzeniem dodatkowych punktów granicznych Po utworzeniu dodatkowych punktów granicznych

Przyjrzyjmy się dokładniej powyższemu przykładowi posta na blogu. Na mniejszych ekranach czcionka Roboto o rozmiarze 1 em działa idealnie, dając 10 wyrazów w wierszu, ale na większych wymaga punktu granicznego. Jeśli szerokość przeglądarki przekroczy 575 pikseli, idealna szerokość treści to 550 pikseli.

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

Nigdy nie ukrywaj zupełnie treści

Przy podejmowaniu decyzji, które treści ukryć lub pokazać w zależności od rozmiaru ekranu, zachowaj ostrożność. Nie ukrywaj treści tylko dlatego, że nie mieszczą się na ekranie. Rozmiar ekranu nie jest ostatecznym wyznacznikiem oczekiwań użytkownika. Na przykład usunięcie liczby pyłków z prognozy pogody może być bardzo kłopotliwe dla osób, które wiosną cierpią na alergie i potrzebują informacji, czy mogą bez obaw wyjść z domu.