Responsywny Web Design

Autor: Damian Chodorek • Opublikowany: 5 lutego 2015 • Kategoria: tworzenie stron www

Opis i praktyczne wykorzystanie technologii.
Artykuł znajdziesz również w wydaniu Software Developer’s Journal.

Po raz kolejny mój artykuł pojawił się na łamach magazynu Software Developer’s Journal. Gorąco zachęcam więc do odwiedzenia strony sdjournal.pl oraz do zapoznania się z treścią magazynu.

Mój artykuł znajduje się na stronie 18, ale warto przeczytać (a przynajmniej przejrzeć) całe wydanie.

Poniżej zamieściłem prawie ten sam artykuł.

Wstęp

W ostatnich latach rynek urządzeń mobilnych eksplodował. Dostęp do internetu z telefonu czy tabletu jest dziś standardem. Ogromna liczba stron internetowych jest jednak nieprzystosowana do małych ekranów, co znacznie utrudnia życie użytkownikom urządzeń mobilnych. W tym artykule postaram się zaprezentować technologie i sposoby, które umożliwiają tworzenie stron przyjaznych właścicielom małych ekranów.

Czym jest responsywny Web Design? To tworzenie stron internetowych, które zaspakajają potrzeby właścicieli urządzeń o różnych rozmiarach ekranów. Oczywiście termin ten dotyczy przede wszystkim użytkowników urządzeń mobilnych.

Jaka jest różnica pomiędzy stroną mobilną a responsywną? Responsywny oznacza zdolny do reagowania na zmiany. Mam tu na myśli głównie zmiany dotyczące rozmiaru ekranu.

Jeżeli mówimy o stronach mobilnych, to przeważnie chodzi o całkowicie oddzielną stronę WWW, przeznaczoną wyłącznie dla urządzeń mobilnych.

Najpopularniejszym podejściem jest jednak responsywny Web Design, który polega na tworzeniu stron dynamicznie zmieniających swój wygląd i zawartość, na ekranach o różnych rozmiarach.

Responsywny Web Design

Tworzenie stron responsywnych można sprowadzić do trzech elementów:

  • elastycznych układów,
  • zapytań mediów,
  • elastycznych mediów.

Połączenie trzech powyższych czynników pozwoli na stworzenie doskonałej strony WWW, która wygląda dobrze i jest czytelna zarówno na komputerze, jak i małym smartfonie.

Flexible layouts

Czyli elastyczne układy. Sztuka tworzenia stron przy ich użyciu polega na korzystaniu z relatywnych wymiarów. Szerokość, wysokość, odstępy oraz marginesy różnych elementów ustawiamy więc przy użyciu %, em lub rem, a nie px.

W CSS3 wprowadzono nowe jednostki, które są związane z rozmiarem przeglądarki i urządzenia. Są to:

  • vw (viewport width) – 1vw odpowiada 1% szerokości obszaru, na którym wyświetlona jest strona,
  • vh (viewport height) – 1vh odpowiada 1% wysokości obszaru, na którym wyświetlona jest strona,
  • vmin (viewport minimum) – 1vmin to mniejsza z wartości 1vw lub 1vh,
  • vmax (viewport maximum) – 1vmax to większa z wartości 1vw lub 1vh.

Powyższe jednostki są wspierane przez większość najpopularniejszych i nowoczesnych przeglądarek. Jeżeli chodzi o tworzenie stron WWW jest to jednak za mało.

Listing 1. CSS’y wykorzystujące jednostkę px.

.parent{
        width: 900px;
        display: table;
}
                
.child-1, .child-2{
        margin: 10px;
}
                        
.child-1{
        float: left;
        width: 580px;
}
                        
.child-2{
        float: right;
        width: 280px;
}

Powyższy przykład prezentuje użycie jednostek sztywnych, niezależnych od rozmiaru przeglądarki. Oczywistym problemem jest to, że strona zbudowana w ten sposób będzie niewygodna w użyciu na urządzeniach mobilnych. Użytkownicy będą musieli dużo przewijać, powiększać i pomniejszać, aby dostać się do interesujących części strony i móc je przeglądać.

Flexible layout oznacza, że zamienimy wszystkie px na jednostki relatywne. Kontener ma szerokość 900px. Dzieci mają marginesy 10px oraz szerokości 580px i 280px. Liczby te należy podzielić, aby uzyskać wartości relatywne, przykładowo 580px to około 64.4444% z 900px. Po zastosowaniu tych zmian uzyskujemy elastyczny układ.

Listing 2. Przykład elastycznego układu.

.parent{
        width: 100%;
        display: table;
}
                
.child-1, .child-2{
        margin: 1.1111%;
}
                        
.child-1{
        float: left;
        width: 64.4444%;
}
                        
.child-2{
        float: right;
        width: 31.1111%;
}

Teraz dzieci zajmują szerokość proporcjonalną do rodzica. Zmianie ulegają także marginesy. Dla szerokich ekranów będą one większe, dla wąskich mniejsze.

Metoda flexible layout jest relatywnie prosta w implementacji. Ma jednak bardzo poważną wadę – dla zbyt wąskich ekranów, szerokość kolumn stanie się bardzo mała. Zwłaszcza jeżeli jest ich wiele. Najprostszym rozwiązaniem byłoby uczynić wszystkie elementy kolumnowe maksymalnie szerokie i umieszczone jeden pod drugim. Dla różnych ekranów, elementom powinny być więc przypisane różne CSS’y. Tę właśnie funkcjonalność udostępniają Media Queries, które w połączeniu z flexible layouts pozwalają na tworzenie responsywnych, świetnie wyglądających na wszystkich ekranach, stron.

Media Queries

To zapytania, które jak już wspomniałem, umożliwiają przypisywanie elementom różnych stylów, w zależności od przeróżnych parametrów ekranu, takich jak jego rozmiar, orientacja, rozdzielczość itd.

Media Queries można dołączyć na 3 sposoby:

  • wykorzystując regułę @media wewnątrz stylów,
  • importując style przy pomocy @import,
  • dołączając oddzielny plik wewnątrz sekcji HEAD dokumentu HTML.

Listing 3. Media Queries w sekcji HEAD pliku HTML.

<link href="style.css" rel="stylesheet" media="all and (max-width: 800px)">

Listing 4. Reguła @media oraz @import w arkuszu stylów.

/* reguła @media */
@media all and (max-width: 800px){ /*style CSS*/ }

/* reguła @import */
@import url(styles.css) all and (max-width: 800px);

Media Queries składają się z różnych parametrów medium (rozmiar, orientacja, rozdzielczość) oraz operatorów logicznych, które je łączą. Jeżeli postawione warunki są spełnione, to arkusz stylów jest dołączany. W przeciwnym razie zostanie zignorowany.

Jednym z podstawowych parametrów jest typ medium, na którym zostanie uruchomiona strona. Są to m.in.:

  • all – obejmuje wszystkie rodzaje mediów,
  • speech – syntezatory mowy,
  • print – urządzenia drukujące, podgląd wydruku,
  • screen – ekrany komputerowe.

Istnieje możliwość połączenia kilku zapytań mediów przy pomocy operatorów logicznych. Ich zadaniem jest wyprodukowanie finalnej wartości logicznej, która zadecyduje czy dane style będą zignorowane czy też nie. Oto lista dostępnych operatorów:

  • and – operator koniunkcji,
  • , (przecinek)– operator alternatywy,
  • not – operator negacji, może być użyty do zanegowania całego wyrażenia, ale nie wyrażeń cząstkowych,
  • only – sprawia, że starsze przeglądarki internetowe nie zastosują danych stylów (Listing 5).

Kolejne parametry dotyczą wymiarów ekranu. Są one najcześciej wykorzystywane. Wyróżniamy:

  • height – wysokość przeglądarki,
  • width – szerokość przeglądarki,
  • device-height – wysokość ekranu urządzenia,
  • device-width – szerokość ekranu urządzenia.

Każda z powyższych cech może być poprzedzona kwalifikatorem max lub min. Pierwszy, oznacza mniejszy lub równy. Drugi, większy lub równy. Używamy ich zamiast znaków mniejszości i większości, które wprowadziłyby sporo zamieszania do kodu (Listing 5).

Przykładowo, zapytanie @media all and (min-width: 320px) and (max-width: 780px) oznacza, że dane style będą dołączone, jeżeli szerokość przeglądarki jest wartością pomiędzy 320px a 780px.

Kolejną cechą, szczególnie użyteczną jeżeli chodzi o urządzenia mobilne, jest orientacja. Determinuje czy dane urządzenie jest w orientacji pionowej czy poziomej. Orientacja pionowa (portrait) oznacza, że szerokość przeglądarki jest mniejsza niż wysokość, pozioma (landscape) oznacza sytuację odwrotną (Listing 5).

Reguła aspect-ratio dotyczy proporcji szerokości do wysokości przeglądarki. Proporcja jest zdefiniowana przez dwie liczby całkowite w postaci: szerokość/wysokość. Przykładowo, 4/3 pasuje do takich rozmiarów jak 640×480 i 1024×786. Analogiczną regułą jest device-aspect-ratio, która odnosi się do proporcji ekranu urządzenia (Listing 5).

Przy pomocy własności resolution możemy zdefiniować CSS’y, które zostaną użyte w przypadku określonej gęstości pikseli. Można ją zdefiniować korzystając z jednostek takich jak: dpi, dppx, dpcm. Kwalifikatory max i min mogą być tu również wykorzystane (Listing 5).

To tylko wybrane możliwości, które oferują Media Queries. Właściwości mediów i reguł, które je określają, istnieje dużo więcej.

Listing 5. Przykładowe Media Queries.

/* przykładowe użycie operatorów logicznych */
@media all and (min-width: 800px) and (max-width: 1366px) { /*style CSS*/ }
@media not screen and (color) { /*style CSS*/ }
@media only screen and (orientation: portrait) { /*style CSS*/ }

/* przykładowe zastosowanie cech min-width oraz max-width */
@media all and (min-width: 320px) and (max-width: 780px) { /*style CSS*/ }

/* przykładowe zastosowanie cechy orientation */
@media all and (orientation: portrait) { /*style CSS, które będą dołączone jeżeli przeglądarka jest wyższa niż szersza*/ }

/* przykładowe wykorzystanie proporcji */
@media all and (aspect-ratio: 4/3) { /*style CSS*/ }
@media all and (min-device-aspect-ratio: 4/3) { /*style CSS*/ }

/* przykładowe wykorzystanie gęstości pikseli */
@media print and (min-resolution: 300dpi) { /*style CSS*/ }

Wsparcie

Co w przypadku, gdy zależy nam na starszych przeglądarkach, w których Media Queries nie są obsługiwane? Z pomocą przychodzą biblioteki JavaScript.

  • Respond.js – niewielka biblioteka, która obsługuje typ medium oraz reguły max/min width.
  • css3-mediaqueries.js – znacznie większa biblioteka, wspierająca bardziej skomplikowane zapytania mediów. Ze względu na jej rozmiar należy mieć na uwadze potencjalny spadek wydajności.

Technika mobile first

Wyobraźmy sobie, że tworzymy stronę. Piszemy więc kod CSS, który dotyczy przede wszystkim komputerów. Potem, przy pomocy Media Queries, zastępujemy część reguł nowymi, z myślą o małych ekranach. Jaki jest tego efekt? Urządzenia mobilne wczytują i aplikują dużą część stylów tylko po to, aby je potem zastąpić innymi. To duża strata na wydajności.

Technika mobile first, to podejście polegające na dołączeniu arkuszy stylów przede wszystkim dla małych urządzeń, w sposób domyślny, a następnie przy pomocy Media Queries, dodawania stylów dla coraz to większych ekranów.

Przykładowe style CSS mogą więc wyglądać jak na listingu 6.

Listing 6. Technika mobile first.

/* tutaj powinny znaleźć się domyślne style, przeznaczone dla małych ekranów */

/* poniżej dołączamy style dla coraz to większych rozmiarów */
@media screen and (min-width: 600px) { /*...*/ }
@media screen and (min-width: 1000px) { /*...*/ }
@media screen and (min-width: 1400px) { /*...*/ }

Dosyć ważnym aspektem projektowania stron responsywnych jest świadomość wpływu różnych grafik oraz zaawansowanych efektów na urządzenia o małych ekranach i niewielkiej wydajności. Ich użycie może w znaczący sposób spowolnić ładowanie strony, a nawet sprawić, że urządzenie nie będzie w stanie płynnie generować obrazu podczas przewijania.

Jeżeli zastosujemy technikę mobile first do przykładu z początku artykułu, to pozbędziemy się problemu zbyt wąskiej kolumny na małych ekranach.

Listing 7. Przykład wykorzystujący technikę mobile first.

.child-1, .child-2{
        margin: 2.2222%;
}

@media all and (min-width: 500px) {
        .child-1, .child-2{
                margin: 1.1111%;
        }

        .parent{
                width: 100%;
                display: table;
        }
                                
        .child-1{
                float: left;
                width: 64.4444%;
        }
                                
        .child-2{
                float: right;
                width: 31.1111%;
        }
}

Układ elementów dla szerokości przeglądarki mniejszej niż 500px. Dla szerokości większej niż 500px układ będzie jak na rysunku pierwszym.

Obydwie kolumny, na małych ekranach, zostaną przetransformowane na wiersze, co znacznie poprawi ich czytelność.

Meta-tag viewport

Jest to znacznik, który określa sposób wyświetlania strony na urządzeniach mobilnych. Pozwala ustawić wielkość strony oraz jej powiększenie (Listing 8).

Zawartością atrybutu content jest para w postaci: dyrektywa=wartość. Istnieje możliwość wpisania po przecinku wielu dyrektyw. Podstawowymi są width oraz height, które określają szerokość i wysokość strony. Ich wartościami mogą być liczby całkowite odpowiadające danemu rozmiarowi lub device-width i device-height, które oznaczają całkowity rozmiar ekranu urządzenia.

Dyrektywa initial-scale pozwala ustawić domyślne powiększenie strony, zaraz po wejściu. Wartość 1 oznacza brak skalowania. Wartości powyżej 1 oznaczają powiększenie strony. Rekomendowane jest oczywiście korzystanie z 1.

Twórcy stron mają także możliwość kontrolowania zakresu w jakim użytkownik może powiększyć i pomniejszyć stronę, przy pomocy dyrektyw minimum-scale oraz maximum-scale. Przykładowo, jeżeli ustawimy maximum-scale oraz minimum-scale na wartość równą initial-scale, to użytkownik nie będzie mógł w żaden sposób powiększać lub pomniejszać strony. Nie jest to zalecane ustawienie, ponieważ odbiera użytkownikowi kontrolę i pozbawia go standardowego zachowania strony.

Współczynniki skalowania muszą być liczbami z przedziału 0 do 10.

Kolejną ważną dyrektywą jest user-scalable. Przyjmuje ona wartości yes lub no i odpowiada za możliwość skalowania strony przez użytkownika. Rekomenduje się używanie wartości yes, aby zapewnić zachowanie strony, do którego przyzwyczajeni są użytkownicy. Uniemożliwienie skalowania znacznie utrudnia korzystanie ze strony osobom, które posiadają bardzo małe ekrany lub słaby wzrok (Listing 8).

Meta-tagu viewport powinno się używać wyłącznie na stronach, które są dostosowane do urządzeń mobilnych. Zaleca się następujące ustawienia:

  • width=device-width,
  • initial-scale=1,
  • user-scalable=yes,

Listing 8. Przykłady użycia meta-tagu viewport.

<!-- przykłady z wykorzystaniem dyrektyw: width, height, initial-scale -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=320, height=480">
<meta name="viewport" content="initial-scale=1">

Elastyczne media

Warto zwrócić szczególną uwagę na grafiki, filmy i inne media osadzone na stronie. Chcemy, aby ich rozmiar był odpowiedni na ekranach o różnych szerokościach. Jednym ze sposobów jest zastosowanie reguły max-width z wartością 100%.

Listing 9. Użycie max-width ze znacznikami mediów.

img, video, canvas {
        max-width: 100%;
}

Zapewnimy tym, że wszelkie media będą maksymalnie duże kiedy zajdzie taka potrzeba. Nie wszystkie elementy współpracują dobrze z max-width. Przykładowo, element iframe, w którym osadzone są filmy z YouTube. Istnieją jednak sposoby, aby sobie z tym poradzić. Dokładny opis tych metod wykracza jednak poza ten artykuł, ale jeżeli chcesz wiedzieć więcej, to zachęcam do przeczytania poradnika: http://alistapart.com/article/creating-intrinsic-ratios-for-video.

Źródła

Mam nadzieję, że ten artykuł był przydatny i wartościowy. Jeżeli tak, to proszę o zalajkowanie i podzielenie się nim ze znajomymi.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.