Responsive web design (skrót z języka angielskiego – RWD) to pojęcie oznaczające responsywne strony internetowe. Termin ten określa tworzenie stron www dostosowanych do urządzeń mobilnych. Innymi słowy, strony responsywne są elastyczne, ich układ zmienia się w zależności od typu urządzenia, na którym jest dana strona wyświetlana. Prawidłowo zaprojektowana strona responsywna powinna wyświetlać swoją treść adekwatnie do urządzenia. Bez względu na to, czy to będzie smartfon, tablet, laptop, czy komputer stacjonarny.
Czy warto posiadać stronę responsywną?
W zależności od strony internetowej, ruch jaki generują użytkownicy urządzeń mobilnych, może osiągać od 20 do 30 procent odwiedzin, więc nie jest to mała liczba. Warto więc zastanowić się nad posiadaniem wersji mobilnej Twojej strony internetowej i nie zniechęcać użytkowników (czyli potencjalnych klientów w przypadku biznesu) do opuszczenia strony w przypadku jej braku. Dodatkowo strony responsywne wpływają na poprawę Twojej pozycji w wyszukiwarce i osiągają wyższe miejsca na liście, z jednego prostego względu – Google promuje posiadanie mobilnej wersji strony www. Kolejną zaletą jest po prostu wygoda. Łatwe, dostępne i odpowiednio przeskalowane treści zachęcają i uproszczają korzystanie z serwisu. W przeciwnym wypadku dostęp do treści jest utrudniony i użytkownik może przeoczyć istotne informacje, a co za tym idzie – nie przeczytać ich w ogóle. Zaniedbanie to może przełożyć się na utratę klientów i odwiedzających, a tego z pewnością nie chce nikt. Strony responsywne przeciwdziałają takim kwestiom.
Kilka wskazówek, o których musisz pamiętać projektując strony responsywne:
- Użytkownik nie powinien powiększać i pomniejszać widoku strony. Powinna ona sama poprawnie się wyświetlić, odpowiednio dopasowując swój układ do rozdzielczości ekranu.
- Odwiedzający nie powinien mieć możliwości przesuwania widoku w poziomie, przewijanie strony winno się odbywać w pionie.
- Menu strony należy „zwinąć” w jeden przycisk (np. w charakterystyczne trzy poziome linie, zwane nawet przez niektórych hamburgerem), który dopiero po kliknięciu rozwija całe menu.
- Strony responsywne, w wersji mobilnej, nie mogą wyświetlać wyskakujących okienek, takich jak np. pop-up newslettera, z powodu utrudnionego przeglądania treści. Dodatkowo często takie okienko trudno jest zamknąć, co może irytować odwiedzających.
- Należy unikać stosowania dużych widoków reklam, które utrudniają korzystanie z serwisu. Lepszym zastosowaniem jest przygotowanie reklamy, którą można wbudować w treść strony.
- Czcionki (zwane też fontami przez językowych purystów) powinny być odpowiednio skalowane w zależności od rozdzielczości ekranu.
- Bardzo ważne jest, by witryna była zoptymalizowana pod kątem szybkości wczytywania treści. Długie wczytywanie strony irytuje odbiorcę, ale również powoduje większy transfer danych na urządzeniu mobilnym. Nikt chyba nie chce, aby użytkownicy jego strony marnowali na darmo cenne zasoby pakietów internetowych.
- W związku z tym, że przeglądarki mobilne zazwyczaj mają problemy z odczytywaniem zawartości flash (animowane treści), należy unikać stosowania tejże technologii. Zresztą i tak jest ona już po prostu wypierana przez nowsze rozwiązania.
- Należy zadbać o odpowiednie rozmieszczenie elementów, by były od siebie oddzielone, łatwo „klikalne” i bez zbędnych dodatków utrudniających korzystanie z serwisu.
Strony responsywne i testowanie mobilności
Jakże ważnym czynnikiem podczas tworzenia rozwiązań mobilnych jest ich testowanie. Dostępnych ekranów mobilnych, a właściwie ich rozdzielczości jest całkiem sporo, więc trzeba przetestować ich możliwie jak najwięcej. Do poprawnego przeprowadzenia testów przydadzą się takie cechy jak skrupulatność oraz spostrzegawczość. Cechy te ułatwiają wyłapywanie niepoprawnie wyświetlanych elementów. To, że na Twoim tablecie wszystko wygląda perfekcyjne, nie oznacza, że wygląda równie dobrze na Twoim telefonie. Dlatego testowanie i strony responsywne powinny iść razem w parze.
Samo sprawdzenie, czy strona jest dostosowana do urządzeń mobilnych, jest stosunkowo łatwe i możesz to wykonać samodzielnie. Wystarczy, że skorzystasz z narzędzia dostarczanego przez Google i podasz tam adres swojej strony internetowej. Po wykonaniu analizy otrzymasz wynik – pozytywny bądź negatywny. Przy negatywnej ocenie dostaniesz wskazówki z błędami oraz rady odnośnie do tego, co należy poprawić i w jaki sposób odpowiednio dostosować. Jeśli sam wynik testu to dla Ciebie za mało i chcesz zobaczyć, jak Twoja strona prezentuje się w różnych rozdzielczościach, nie musisz posiadać kilkunastu telefonów do przeglądania swojego serwisu. Możesz posłużyć się własną przeglądarką internetową. Jeżeli używasz Firefoxa, kombinacja klawiszy CTRL + SHIFT + M przełącza widok okna na responsywny. Korzystanie z widoku responsywnego możliwe jest też naturalnie w Google Chrome. Voila!
Strony responsywne to obecnie standard. Pomijając ten aspekt, tracimy na jakości, zniechęcamy odbiorców, a co najgorsze – tracimy pozycję w wyszukiwarce Google (dla wyszukiwań mobilnych). Warto nie ignorować tego czynnika przy projektowaniu strony internetowej i wykorzystać technologie czyniące Twoją stronę responsywną.
Jak widzisz, wniosek jest prosty – responsywna strona to konieczność. Nie zastanawiaj się i napisz do nas, a otrzymasz ofertę stworzenia profesjonalnej, responsywnej strony internetowej.
Bądź pierwszą osobą, która skomentuje ten artykuł! 😉