Responsive Web Design 101

Design

Zaczynasz swoją przygodę z webdesignem lub chciałbyś zaimponować swoim znajomym albo klientowi fancy słówkami? Przygotowałem dla Ciebie krótki wstęp, z którego dowiesz się, jak i z czym się je to całe modne RWD wraz z odrobiną linków i dobrymi praktykami. Bądź fajnym kumplem (lub kumpelą (◡‿◡✿) ) dla swojego webdevelopera i zobacz, z czym się biedak musi (a przynajmniej powinien) borykać na co dzień.

 

RWD (Responsive Web Design) to nic innego, jak zbiór przemyślanych technik służących tworzeniu stron i aplikacji internetowych dostosowanych nie tylko do urządzeń przenośnych, ale także do takich rozdzielczości, które dopiero się pojawiają. W wolnym tłumaczeniu jest to projektowanie czułych na zmiany projektów dla odbiorców i różnych standardów urządzeń, na których odwiedzają nas być może nasi przyszli klienci. Warto pamiętać, że zawartość podana na stronie nie jest dla nas, a dla osób odwiedzających nas w sieci. Nic tak nie irytuje, jak brak możliwości efektywnego i szybkiego skorzystania z ulubionej strony lub zamówienia czegoś do jedzenia, gdy jesteś w plenerze z kiepskim zasięgiem, a w koszyku już się więcej nie zmieściło.

Na szczęście dostęp do internetu mobilnego w Polsce, a także przepustowość łączy i dostępne nam pakiety są coraz korzystniejsze. Przy projektowaniu RWD trzeba jednak mieć na uwadze wagę strony w kilobajtach i wydajność poszczególnych elementów, skoro ściągamy niemalże takie same informacje na telefon, komputer czy telewizor, a nasza przeglądarka musi to jeszcze wyrenderować.


Śmiało, zrób szybki audyt swojej stronie przez np. pingdom i zobacz, co Ci wyszło. Trzeba mieć na względzie lokalizację serwerów, które obecnie są daleko za Atlantykiem, ale każdy z nas tutaj lubi popodglądać i porównać się z konkurencją, prawda?


Podpowiem, że 2 sekundy i poniżej, to zalecana szybkość ładowania strony. Strona główna Google dla Polski ładuje się około 700ms i jest wydajniejsza niż 95% testowanych stron internetowych. Nie wiem, jak wygląda to u Ciebie, ale gdy nie widzę swojej ulubionej wyszukiwarki w pierwszej sekundzie, zaczynam nerwowo spoglądać na zasięg internetu.

Poniżej postaram się przybliżyć Ci kilka zalet i dobrych (acz nie jedynych) praktyk stosowania RWD.

Korzyści z odpowiedzialnego projektowania stron responsywnych:

1. Jeden adres URL

Ze względu na wszechobecne social media, a także różnego typu reklamy w sieci, umieszczenie jednego linku dla wszystkich urządzeń jest sprytne i tanie. Mniej różnych kreacji, spójniejsza strategia i wydajniejszy czas realizacji to coś, co warto mieć na względzie. Oczywiście czasem trzeba zaserwować dokument lub pliki zależne od danego urządzenia, ale w gruncie rzeczy lepiej dla nas będzie najpierw przygotować całą stronę, a później odpowiednio celować w daną grupę odwiedzających. Naturalnie zależy to od obranej strategii, ale z wdrożeniowego punktu widzenia takie rozwiązanie może zaoszczędzić nam mnóstwo pracy, o ile rzecz jasna przyłożyliśmy się na etapie planowania RWD.

2. Ta sama zawartość

Ogromną zaletą jest dostarczenie tej samej, nie zduplikowanej treści, z tym samym linkiem, acz niekoniecznie z tą samą strukturą. Oczywiście warto pamiętać o odpowiednim modyfikowaniu obrazów i informacji nie spojonych z treścią strony tak, aby użytkownik mobilny nie musiał pobierać kilkukrotnie większego obrazu tylko po to, by ten następnie został zmniejszony przez jego przeglądarkę.

Mimo że HTML5 to wciąż metody eksperymentalne (sic!), to zawsze dobrze jest posiadać szerszą perspektywę. Warto w tym temacie zapoznać się ze znacznikiem <picture>.

Znacznik ten to pewnego typu odwołania multimedialne (media queries) dla obrazów.
Więcej na ten temat znajdziesz w linku – Responsive Images Done Right: A Guide To <picture> And srcset

Rzecz jasna przy stosowaniu (relatywnie) nowych znaczników nie można zapomnieć o javascript’owych rozwiązaniach awaryjnych dla przeglądarek (polyfill) – Picturefill 2.0: Responsive Images And The Perfect Polyfill.


Jeżeli jednak goni Cię czas, to na tę chwilę polecam zastanowić się również nad skryptem adaptacyjnych obrazów.

3. Ten sam kod HTML

Bez wątpienia największa zaleta RWD w stosunku do budżetu wdrożeniowego. Oczywiście specjalistyczna wiedza o tego typu projektach kosztuje i kosztować będzie sporo, ale wciąż będzie to mniej niż zrobienie dwóch lub więcej stron i przekierowywanie ich w zależności od odbiorcy. W zasadzie istnieje pewna możliwość, aby dobrze przemyślany kod był używany wielokrotnie nawet przy zmianie kreacji strony.

4. CSS3 Media Queries

Media Queries są stare jak internet. Już w 1994 r. Håkon Wium Lie (pionier kaskadowych arkuszy stylów) zaproponował podobne rozwiązanie. Niestety trzeba było czekać prawie osiem lat i dopiero w 2012 r. zostały one dodane do rekomendacji W3C po wdrożeniu ich w przeglądarki. Do tego czasu stosowane były rozwiązania języków serwerowych i JavaScript do osiągnięcia podobnego efektu.

Odwołania multimedialne traktują sposób, w jaki prezentowana jest strona na komputerze, tablecie, smartfonie, czytniku, telewizorze, a nawet jak zawartość ma być drukowana. Jest to najwygodniejszy sposób tworzenia RWD, ale wymaga odpowiedniego i konsekwentnego podejścia. Aby dowiedzieć się więcej, możesz zacząć od ciężkiej specyfikacji Konsorcjum W3C lub zapoznać się z kilkoma różnymi podejściami do projektowania i kodowania dla metod media queries – A “Readability First” Approach to Media Queries and Layout (Tak bardzo słodki link!)

Metody wdrażania stron RWD

Przez ostatnie cztery lata nastąpił wybuch różnych urządzeń mobilnych i z praktycznego punktu widzenia nie opłaca nam się dostosowywać naszej aplikacji do każdego modelu wyświetlacza. Całe szczęście z pomocą przybyły niezgorsza odświeżone metody:

  • Fluid Grids
  • Fluid Images
  • Media Queries

1. Fluid Grids (siatki adaptacyjne)

Nie tak dawno strony kreowaliśmy na podstawie stale określonych elementów w pikselach i wszechobecnej jeszcze siatki 960px. Oczywiście dziś wiele stron wciąż jest niedostosowana do tego, co mamy, ale na całe szczęście nadchodzą zmiany i u nas.

Siatki adaptacyjne to po prostu struktura strony tak opisana przez kod, by „coś się działo”, gdy strona zostanie wyświetlona na ekranie o pewnej rozdzielczości lub wysłana do urządzenia w celu przeprowadzenia na niej operacji np. druku czy… przeczytania niewidomemu (kolejność czytania). Może być ona określona bardziej na sztywno stosując pewne zależności obranej jednostki lub zostać totalnie uwolniona od pikseli i rozdzielczości. Częściej spotykamy się z połączeniem tych metod.

Gdy rozmiar ekranu użytkownika będzie mniejszy niż obrany przez nas rozmiar, dla tabletu następuje przeskok (dzięki media queries breakpoints) ze sztywnego szablonu na płynny. Świetnym przykładem jest strona http://www.awwwards.com, która nie tylko po zmniejszeniu z 1600px reaguje płynnie na rozmiar i świetnie ogranicza niekluczową zawartość, ale także cieszy oko estetycznymi animacjami przy tych zmianach. Niestety brakuje tam odpowiedniego podejścia do czytelności i wielkości czcionek tak jak w przypadku http://www.buildwindows.com/.

W zasadzie można opierać się tylko na określonych szerokościach w pikselach tworząc jeszcze więcej punktów składania niż dotychczas, ale nigdy nie będziesz mógł być pewien, że gdzieś nie zabraknie Ci tych 20-40 pikseli na ikonkę Facebooka 😉 Niemniej już na 100% nie możesz być pewny, że te rozdzielczości będą się dobrze wyświetlały na urządzeniach za dwa-trzy lata. Grunt to przewidzieć tak swój projekt, aby nie wydawać kolejnych pieniędzy co roku na nową stronę. Osobiście jestem zwolennikiem w pełni płynnych szablonów, bo gdy zarobię w końcu na monitor 8k nie chciałbym aby dwie trzecie strony zabierały mi dwa białe pasy 😉 Oczywiście takie szablony wymagają o wiele więcej pracy niż takie określone na sztywno lub elastyczne – ale dobrze zaprojektowane i wykonane strony są bardziej odporne na zmiany standardów. Tak z ciekawostek to fluid grids istniało jeszcze przed internetem w Polsce.

Poniżej znajdziesz ogromną bazę poradników na temat płynnych i elastycznych szablonów:
70+ essential resources for creating liquid and elastic layouts.

2. Fluid Images (adaptacyjne obrazy)

Płynne obrazy to metoda, która sugeruje nadanie obrazom takich rozmiarów, aby były one zależne od szerokości wyświetlanego bloku i raczej nie przekraczały naturalnego natywnego rozmiaru grafiki. Więcej o tej zasadzie w tutaj: http://alistapart.com/article/fluid-images.

3. Media Queries (odwołania multimedialne)

Oczywiście możesz spróbować użyć innych metod do osiągnięcia efektu składania strony przy danej rozdzielczości, ale bardzo mocno rekomenduję zacząć od tego, co już staje się solidnym standardem i dopiero wtedy wdrożyć rozwiązania awaryjne dla przeglądarek nie obsługujących CSS3.

Podsumowanie

Jak każde rozwiązanie, tak i RWD ma swoje wady i zalety. Trzeba się z tym liczyć i mieć to na uwadze już na etapie projektowania, ustalania budżetu i wybierania ludzi do realizacji. Osobiście uważam, że o ile w 2014 r. posiadanie serwisu dostosowanego do wielu obecnych i przyszłych urządzeń jest niemalże krytyczne dla prowadzenia biznesu (urządzenia mobilne już pół roku temu wyprzedziły urządzenia stacjonarne), o tyle koszta i kompetencje nie zawsze mogą iść z tym w parze.

Zalety

  • Jedna strona do zaprojektowania, wdrożenia, utrzymywania i promocji (w zasadzie to cztery osobne podpunkty)
  • Duże wsparcie dla różnego rozmiaru ekranów i urządzeń. Większy dostęp do użytkowników (których wcześniej mogłeś/aś nie brać pod uwagę).
  • Możliwość wykorzystania nowoczesnych technologii i urządzeń, które zwiększą miodność korzystania z Twojej strony lub aplikacji.
  • Rozmiar ma znaczenie.

Wady

  • Wczytywana zawartość jest często tylko wyłączona lub zmniejszona, choć przeglądarka i Twój internet wykonuje taką samą pracę.
  • Dłuższy czas realizacji w przypadku wykonania kompletnego i odpowiedzialnego projektu.
  • Stare przeglądarki są stare i boją się zmian.

Przykłady i zasoby

Co dalej?

Zdaję sobie sprawę, że mój artykuł dość pobieżnie traktuje kwestie kreacji responsywnych stron internetowych, od której w zasadzie zaczynamy spotkanie z klientem. Niemniej jeżeli jesteś grafikiem, polecam przynajmniej w minimalnym stopniu zapoznać się z technologią i jej ograniczeniami przed przystąpieniem do projektu. Jeżeli oczywiście nie chcesz zostać pominięty przez Twojego web developera przy zaproszeniu na grilla J Mam nadzieję, że znajdę dłuższą chwilę na poruszenie tematu projektowania graficznego RWD w kolejnym artykule. W międzyczasie jestem jednak niezmiernie ciekaw Twojego zdania na ten temat oraz tego, co Twoim zdaniem pominąłem 😉