Zacząć wypada od najbardziej podstawowego pytania: Co to jest Projektowanie Responsywne (RWD - Responsive Web Design)? Czym jest projektowanie stron responsywnych? I udzielić na nie możliwie najprostszej i zwięzłej odpowiedzi.
Responsywny projekt aplikacji webowej (strony internetowej) zmienia swój rozmiar i układ, obsługuje różne rozdzielczości w zależności od przekątnej ekranu, na jakim aplikacja być wyświetlona.
Mówiąc nieco innym językiem, aplikacja webowa będzie wyświetlana w różny sposób na różnych ekranach. Za każdym razem dostosowując się do nich, tak by uzyskać optymalny układ elementów.
Responsive Web Design (responsywna strona internetowa), w najbardziej podstawowym ujęciu, ma dwa podstawowe cele.
Uzyskać możliwie najlepsze doświadczenia użytkownika na każdym urządzeniu oraz uzyskać spójność wizualną.
Wygląd aplikacji webowej wyświetlonej na ekranie monitora, ekranie laptopa, telefonu, tabletu nie powinien znacząco się różnić.
Projektowanie Responsywne (tworzenie stron RWD, technologia RWD) wyrosło z przekonania, że wielkość dostępnej przestrzeni, proporcje i rozdzielczość ekranu stanowią kluczowy kontekst.
Traktowany jako wyzwanie projektowe, którego celem jest wyjście naprzeciw oczekiwaniom użytkowników. Jego popularność wynika także z proporcji udziału urządzeń mobilnych, które z roku na rok zdobywają coraz większą część rynkowego tortu.
Audytujemy. Badamy. Projektujemy.
Responsive Web Design i wyzwania mobilności
Jak mawiał mój profesor od statystyki - “Z liczbami się nie dyskutuje, liczby się interpretuje”. A liczby od wielu lat wskazują, że przyszłość należy do urządzeń mobilnych.
Już w 2015 roku wyszukiwarka Google rekomendowała tworzenie responsywnych aplikacji webowych.
Witryny tworzone w duchu mobile first, dedykowane dla urządzeń mobilnych, mogły liczyć na wyższe pozycje w wynikach wyszukiwania. Zmiana była na tyle rewolucyjna, że w prasie branżowej doczekała się własnej nazwy - Mobilegeddon.
W końcówce 2020 roku ponad 3,5 miliarda osób używa smartfonów. Na używaniu komórek spędzamy średnio prawie 3 godziny. Prawie 70% “smart userów” szuka informacji o produktach za pomocą urządzeń mobilnych.
Podobna ilość dokonuje zakupów w sklepach internetowych za pomocą komórek. I tak dalej i tak dalej. Zainteresowanych kolejnymi statystykami, odsyłam do źródła tych danych. Znajdziecie je tutaj.
Z projektowego punktu widzenia trendy te oznaczają konieczność tworzenia aplikacji RWD (Responsive Website). Mobile First stało się podejściem standardowym. Choć nie jedynym. O konkurencyjnym podejściu (Projektowanie Adaptacyjne) będę jeszcze pisał w tym artykule.
Źródło: Mediaqueri.es
Responsive Web Design wiąże się także ze specyfiką urządzeń mobilnych. Taktylność komórek i tabletów wymusza inne podejście do projektowania (np. interfejsów, menu).
I tutaj dochodzimy do kluczowego podziału na dwa dominujące sposoby tworzenia aplikacji webowych. Responsive Web Design oraz Adaptive Web Design.
Skąd się wziął Responsive Web Design i Adaptive Web Design?
Popularność oba terminy, podejścia, sposoby projektowania zawdzięczają książkom dwóch autorów: Ethana Marcotte'a oraz Aarona Gustafsona. Pierwszy z panów napisał książkę pt. “Responsive Web Design”, drugi natomiast jest autorem “Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement”.
Obie pozycje odcisnęły swoje piętno na tworzeniu aplikacji webowych i podzieliły świat projektantów na dwa obozy - zwolenników Responsive Web Design i Adaptive Web Design. Przy czym stan układu sił na dzień dzisiejszy zdecydowanie wskazuje, że popularniejsze jest pierwsze podejście.
Warto bliżej poznać oba podejścia, bowiem jak to bywa, mają one swoje wady i zalety. A wybór jednej z nich jest kwestią wielu zmiennych. I po prostu zależy od celów, potrzeb i możliwości.
Czym się różni Projektowanie Responsywne od Adaptacyjnego?
Wszystko wskazuje na to, że problem dostosowania projektów aplikacji do obecnych na rynku urządzeń będzie narastał z czasem. Różnorodność wielkości, proporcji, rozdzielczości wymusza podjęcie decyzji w kwestii rodzaju preferowanego projektowania.
Na czym polega różnica między projektem responsywnym a adaptacyjnym? Zacznijmy od projektowania RWD.
Responsywność aplikacji polega na jej płynnym, automatycznym dostosowaniu się do dostępnej ilości miejsca. Styl zmienia się w zależności od urządzenia docelowego, stąd też główną kwestią projektową jest prostota.
Adaptacyjne projektowanie witryn internetowych nie polega na płynnym, automatycznym dostosowaniu się aplikacji do wielkości i rozdzielczości ekranu danego urządzenia. Zamiast jednego “elastycznego” projektu mamy wiele projektów “statycznych”.
Zazwyczaj jest ich 6 - dla 6 najpopularniejszych rozmiarów szerokości ekranu - 320, 480, 760, 960, 1200, 1600 pikseli. Wygląd aplikacji na każdym urządzeniu jest nieco inny, a różnica wynika nie tylko z ograniczeń urządzenia, ale także z potrzeby stworzenia aplikacji zapewniającej bardzo dobre wrażenia użytkownika.
Wady i zalety Projektowania Responsywnego i Projektowania Adaptacyjnego
Oba podejście mają wiele zalet i nie są pozbawione wad. Ocena ich przydatności jest w dużej mierze subiektywna i uzależniona od potrzeb i celów. Aplikacji renomowanych przedsiębiorstw, tworzonych w modelu RWD i AWD znajdziemy, co najmniej tyle samo dla każdej z opcji. Prześledźmy najważniejsze cechy obu podejść.
Projektowanie Responsywne (Responsive Web Design) jest:
- mniej pracochłonne
- relatywnie prostsze, na pewno bardziej jednolite
- mniej problematyczne, aczkolwiek nie bezproblemowe
- problematyczne, jeśli aplikacja ma być modernizowana, a nie budowana od podstaw
- SEO friendly - w większym stopniu - jest rekomendowane przez samą wyszukiwarkę Google
- relatywnie łatwiejsze do wdrożenia
- bardziej efektywne pod kątem User Experience
- umożliwia projektantom zbudowanie najlepszego UX dla danego urządzenia.
- bardziej elastyczne w kwestii mniej typowych wielkości ekranów
- nie zapewnia dużej kontroli - aplikacje nie są jednak aż tak czasochłonne w utrzymaniu
- kodo-chłonny - wymaga więcej pracy od strony programistycznej
- prostsze w modyfikacji i optymalizacji
- oparte na wzorcu średniej wielkości
- w mniejszym stopniu wrażliwe na potrzeby użytkowników.
Projektowanie Adaptacyjne (Adaptive Web Design) jest:
- bardziej pracochłonne
- w mniejszym stopniu elastyczne w przypadku niestandardowych ekranów
- uznawane jako bardziej problematyczne
- bardziej użyteczne do modernizowania, dostosowywania stron już istniejących
- SEO Unfriendly - w wielu przypadkach crawlery Google mogą mieć problem z uznaniem identyczności contentu w różnych wersjach
- trudniejsze do wdrożenia
- zapewnia większą kontrolę - jest bardziej czasochłonne w utrzymaniu
- mniej problematyczne pod względem programistycznym
- trudniejsze - optymalizacja i modyfikacja jest znacznie bardziej problematyczna
- pozbawiona wzorca stanowiącego punktu odniesienia
- w większym stopniu potrafiące sprostać oczekiwaniom userów
Samodzielny projekt mobilny
Dla porządku odnotujmy jeszcze, że istnieje trzecie podejście, a więc tworzenie osobnych wersji mobilnych. Choć jeszcze kilka lat temu wiele firm korzystało z takiego rozwiązania, dziś nie jest ono już ani popularne, ani rekomendowane.
Rozwiązanie nie przyjęło się z kilku powodów. Między innymi za sprawą polityki wyszukiwarki Google, która nie traktowała w sposób uprzywilejowany wersji mobilnych. Kolejnym powodem była problematyczność utrzymania spójności pomiędzy poszczególnymi wariantami.
Zasady Projektowania Responsywnego (The Three Major Principles of Responsive Design)
Projektowanie Responsywne doczekało się nie tylko swoich fanów i popularyzatorów, ale także wzorców dobrych praktyk projektowych. Oto one.
Fluid Grid Systems
Dotychczas strony internetowe projektowane były w sposób zbliżony do projektowania layoutów prasowych. Położenie elementów, ich wielkość, odstępy, hierarchie wyrażane były w wartościach bezwzględnych - w centymetrach, milimetrach.
W przypadku stron internetowych w pikselach. Stare dobre czasy projektowania z myślą tylko o ekranach desktopów minęły i w erze mobilne konieczne jest zupełnie inne podejście do projektowania.
W przypadku Projektowania Responsywnego o wiele bardziej użyteczne jest wyrażanie takich wartości w sposób względny, a więc zależny od dwóch zmiennych - docelowego rozmiaru oraz kontekstu wyświetlania, a więc wartości wymiarów na danym urządzeniu.
Źródło: Mediaqueri.es
Idea jest prosta, ale do zrozumienia wymaga przykładu. Rozmiar względny jest równy stosunkowi docelowego rozmiaru do rozmiaru kontekstu. A więc jeśli projekt został stworzony z myślą o standardowej szerokości strony, czyli 960 pikseli, a będzie wyświetlony na urządzeniu o szerokości 1280 pikseli, to rozmiar względny będzie wynosił 75%. W praktyce oznacza to, że nasz projekt zajmie 75% dostępnego obszaru.
Wszystko, co teraz należy zrobić to określić wartość procentową (szerokości, marginesów itp.) we właściwościach skryptu CSS.
Fluid Image
Projektowanie Responsywne to także problem dostosowywania elementów graficznych do danej wielkości - na przykład zdjęć, czy grafik. Skutecznym sposobem poradzenia sobie z tym problemem jest użycie polecenia CSS:img {max-width: 100%;}.
Dla przeglądarki stanowi to czytelną informację, w jaki sposób obraz powinien być skalowany. Dzięki temu chronimy obrazy przed nadmiernym rozciągnięciem, gdy dostępna przestrzeń jest większa.
Media Queries / Breakpoints
Media Queries pozwalają na określenie w jaki sposób wyświetlać aplikację na danym urządzeniu, w danym rozmiarze. Pozwalają określić po spełnieniu jakich warunków układ witryny może być zmieniony i w jaki sposób ma się to odbyć.
Przykładowo, aplikacja, której layout w wersji desktop oparty jest na 3 kolumnach w wersji mobilnej będzie wyświetlana w wariancie jednokolumnowym. Za pomocą Breakpoints możliwe jest określenie punktów, w których układ ma być zmieniony.
Frameworks
Rozwój idei, podejścia mobile first zaowocował powstaniem szeregu ogólnodostępnych frameworków. Stąd też jedną z dobrych praktyk jest korzystanie z nich. Samodzielne poszukiwanie rozwiązań zazwyczaj oznacza niepotrzebną stratę czasu. Dobrym przykładem poleconego frameworku jest Bootstrap, który można pobrać tutaj.
Podsumowanie
- Projektowanie Responsywne (RWD) polega na dostosowaniu rozmiaru, układ strony do urządzenia, przekątnej, rozdzielczości ekranu na jakim aplikacja być wyświetlona.
- Responsive Web Design jest jednym z dwóch dominujących podejść do projektowania aplikacji webowych. Adaptive Web Design jest podejściem aktualnie (koniec 2020 roku) mniej popularnym.
- RWD jest podejściem rekomendowanym przez wyszukiwarkę Google.
- Oba podejścia - RWD i AWD - mają swoje wady i zalety, a wybór między nimi jest kwestią celów, potrzeb, ale także indywidualnych preferencji.
- Projekty samodzielnych wersji mobilnych z charakterystyczną literką m w adresie (np. m.example.com) są powoli przechodzą do historii i nie są rekomendowane.
- Responsive Web Design doczekał się wzorów dobrych praktyk.
- Do najważniejszych wzorów (The Three Major Principles of Responsive Design), polecanych przez Interaction Design Foundation należą: Fluid Grid System, Fluid Image, Media Queries / Breakpoints.
- Badacze z Interaction Design Foundation rekomendują uzupełniać ww. zasady o kolejną, dotyczącą korzystania z opensource`owych frameworków.
