Responsive Web Design to odpowiedź na potrzeby związane z obsługą róznych rozdzielczości wyświetlaczy podczas korzystania z Internetu. Pierwszy raz pojęcie to użył Ethan Marcotte, który w swoim artykule poruszył temat projektu elastycznej siatki i obrazów, a także zapytań medialnych. Czym dokładnie jest RWD i na co zwrócić uwagę, tworząc stronę responsywną?
RWD – co to jest Responsive Web Desing?
Responsive Web Design, czyli projektowanie responsywne, to koncepcja, sposób projektowania. Angielskie słowo „responsive” oznacza „wrażliwy, czuły”. RWD to tworzenie projektu wrażliwego na otoczenie, czyli urządzenie, na którym ma być wyświetlane. W związku z tym na bok należy odsunąć myślenie o sprzęcie i nie brać go pod uwagę jako najważniejszy aspekt podczas projektowania.
Podejście RWD nazywane jest również układem płynnym (ang. fluid desing), projektem adaptacyjnym (ang. adaptive layout) oraz projektem elastycznym (ang. elastic layout). Marcotte zauważył, że metoda ta wykracza poza stosowanie zapytań medialnych, a sposób tworzenia stron responsywnych jest odmienny od tradycyjnego.
Projektowanie stron responsywnych, a przystosowanie do urządzeń mobilnych
Desktopowe strony oglądane na telefonie często wyglądają nieciekawie – są nieczytelne, nawigacja jest problematyczna, treść – ucięta a czcionka – zbyt mała. Aby zapoznać się z publikowaną treścią niejednokrotnie należy powiększać wybrany fragment grafiki lub treści. Bywa to niezwykle irytujące – wówczas użytkownik może zdecydować się na opuszczenie strony i poszukanie materiałów na podobnych stronach. Nikt nie chce tracić czasu i energii na działania, które go drażnią.
Zastosowanie Responsive Web Design umożliwia czytelne wyświetlanie strony na urządzeniach, które posiadają różną rozdzielczość. Układ strony internetowej dostosowuje się automatycznie – użytkownik nie musi niczego zmieniać.
Szerokość strony internetowej projektowana jest w trzech wersjach:
- 480 px – dla smartfonów i telefonów,
- 1024 px – dla tabletów,
- 1200 px – dla monitorów komputerowych i w laptopie.
Aby zwiększyć elastyczność serwisu – można wdrożyć również wersje 320 px, 768 px, 800 px oraz 1366 px. RWD zastosować można dzięki technologii elastycznego skalowania zawartości bądź CSS3 Media Queries. W kodzie responsywnego CSS znajdują się m.in. informacje o układzie strony internetowej, jej szerokości, style i inne.
Zasady projektowania responsywnego
Responsive Web Desing to zbiór zasad tworzenia stron internetowych. Na czym polegają?
Tworzenie od najmniejszego ekranu
Projektowanie responsywne interfejsu i pozostałych elementów warto zacząć od stworzenia strony na telefon. W momencie, gdy prace zaczynane są od najmniejszego ekranu, można zauważyć, że taka wersja nie ma ograniczeń. Wymaga nieco innego ułożenia elementów, przemyślenia układów i user experience. Mniejszy ekran nie oznacza jednak mniejszej ilości miejsca.
Ustalenie najważniejszych elementów
Projektowanie stron internetowych w myśl zasad Responsive Web Design wymaga ustalenia najważniejszych rzeczy do umieszczenia na witrynie. Należy więc dokonać selekcji – co jest niezbędne, a co nie musi znaleźć się w głównych punktach. Wszystkie elementy muszą stanowić spójną całość i pomagać zrealizować cele klienta. Najważniejsze fragmenty strony powinny znaleźć się na górze – mają być widoczne w pierwszej kolejności.
Nawigacja i menu w głównym punkcie
Responsywne menu i nawigacja to mapa strony, która decyduje o łatwości obsługi serwisu. Umożliwia szybkie znalezienie poszukiwanych przez użytkownika informacji. W menu powinny znaleźć się najważniejsze dane. Nie warto na siłę upychać obiektów, które mogą znaleźć się nieco niżej. Sam pasek menu musi znajdować się w rzucającym się w oczy miejscu.
Prostota
W przypadku RWD warto pójść w stronę minimalizmu. Nie oznacza to rezygnacji z większości elementów strony, a ich uproszczenie. Wpływa to na przejrzystość witryny i ułatwia jej użytkowanie.
Odpowiednia wielkość obiektów
Ponieważ ekrany smartfonów mają ograniczoną wielkość – warto pomyśleć o umieszczeniu na stronie elementów odpowiedniej wielkości. Serwis RWD musi być wygodny w użytkowaniu. Łatwo jest trafić w obiekty kursorem, nieco ciężej – kciukiem, dlatego też wszystkie komponenty muszą być dostosowane do szerokości strony internetowej i wielkości urządzenia.
Dobór fontu
Responsive Web Design to podejście, które zakłada tworzenie stron czytelnych dla użytkowników. Istotny jest więc optymalnej wielkości font, który ułatwia zapoznanie się z treścią. Dotyczy to zarówno nagłówków, tekstów na stronie, jak i bulletów.
Responsywne grafiki
Projektowanie responsywne uwzględnia odpowiednie dopasowanie grafik. Często wykorzystywany jest tu format SVG – obrazki są skalowalne i szybko się ładują. Należy pamiętać o prawidłowym rozmiarze grafiki i dopasować go tak, aby serwis ładował się możliwie jak najszybciej.
Widoki
Strony responsywne mają zazwyczaj trzy widoki (komputer, tablet, telefon). Problematyczne okazują się niekiedy telefony większe, gdzie widok najmniejszy jest rozciągnięty. W związku z tym niezbędny może okazać się widok czwarty – zwany „telefon=poziomo”.
Zalety i wady projektowanie responsywnego
Wśród zalet projektowania responsywnego wyróżnić należy:
Ułatwienie konsumentom działań w sieci
Według statystyk – ponad 60% użytkowników Internetu korzysta z niego na urządzeniach mobilnych, czyli smartfonach lub tabletach. Dane odnośnie liczby odbiorców, którzy wchodzą na stronę poprzez urządzenia mobilne znaleźć można w Google Analytics – narzędziu do monitorowania ruchu w witrynie. Responsywne projektowanie stron internetowych pomaga utrzymać użytkowników, zyskać nowych i ułatwić im przeglądanie.
Lepsza widoczność strony w wynikach wyszukiwania dzięki RWD
Projektowanie stron internetowych zgodnie z RWD jest zalecane przez Google. Algorytm wyszukiwarki wyróżnia witryny przystosowane do użytkowania na urządzeniach mobilnych. Umieszcza je wyżej w wynikach wyszukiwania, dzięki czemu łatwiej je znaleźć. Ponadto, Responsive Web Design pomaga uniknąć duplikacji treści w przypadku dwóch wersji stron – desktopowej i mobilnej.
Łatwy dostęp do analityki
W momencie, kiedy istnieją osobno strona internetowa oraz aplikacja mobilna – stanowi to źródło dodatkowej pracy dla marketingowca. Statystyki rozproszone są w kilku miejscach, co zabiera czas na zapoznanie się z nimi. Projektowanie responsywne umożliwia kontrolę konwersji, ruchu i zachowań w jednym miejscu w Google Analytics. Ponadto, mniej czasochłonne jest stworzenie raportów z kampanii.
Mniejsze koszty utrzymania strony
Koszty jednej strony RWD dość szybko zwracają się. Nie ma bowiem potrzeby doglądania i opłacania kilku stron, aplikacji, domen i serwerów. Responsive Web Design daje możliwość stworzenia jednej, optymalnie działającej strony, która obsługuje ruch z różnych urządzeń.
Wzrost dochodu
Responsive Web Design wpływa pozytywnie na współczynnik konwersji i sprzedaż. Użytkownik ma możliwość do skorzystania ze strony bez względu na to, z jakiego urządzenia korzysta. To dla niego wygodna opcja – może dokonać zakupu w dowolnej chwili, w dowolnym miejscu i czasie. Właściciel strony ma natomiast możliwość dokładnego śledzenia zachowań i ruchu, oraz personalizowania reklam dla konkretnych klientów.
Wady stron responsywnych
RWD wydaje się być rozwiązaniem doskonałym w każdym przypadku – ma jednak pewne wady. Przede wszystkim, warto zastanowić się, czy responsywne projektowanie stron internetowych będzie opłacalne.
- optymalizacje dla urządzeń mobilnych są niedostępne – choć część elementów jest odpowiednio dostosowana, należy mieć na uwadze, że strona responsywna wiąże się z wczytywaniem całości zawartości. Bywa, że na urządzeniach mobilnych trwa to dość długo, co może być dla użytkownika irytujące,
- każdy dodatkowy skrypt, którego zadaniem jest obsługa wersji mobilnej, stanowi dla użytkowników dodatkowy transfer,
- jeśli struktura strony jest skomplikowana – wdrożenie RWD może okazać się niemożliwe.
Nowoczesne strony internetowe wyróżniają się minimalistycznym designem i zdjęciami wysokiej jakości. Szablon zbudowany jest za pomocą arkusza CSS, nie jak dotychczas – grafiki rastrowej. Witryna ma być prosta i łatwa w użytkowaniu na każdy urządzeniu – właśnie takie są responsywne strony internetowe.
