Responsywność (RWD – Responsive Web Design) – oznacza dopasowanie elementów strony internetowej takich jak grafika czy treści do urządzeń o różnej wielkości (z różną rozdzielczością) wyświetlaczy.
Czym jest responsywność stron?
Często mylone pojęcie ze stroną mobilną. Strona mobilna jest zazwyczaj okrojoną wersją strony desktopowej i jest to przeważnie strona na subdomenie (m.) domeny macierzystej. Np. facebook’owa strona desktopowa ma adres facebook.com, a mobilna wersja ma adres m.facebook.com. Zwróć uwagę również, że będąc na facebook’u, gdy zmniejszymy okno przeglądarki, to w pewnym momencie elementy strony będą niewidoczne, ponieważ nie będą mieściły się na naszym ekranie. Widać zastosowanie pewnych mechanizmów, takich jak automatyczne zwijanie paska z kontaktami, ale to nie jest responsywność. Przykładem strony responsywnej jest bardzo dobrze nam znany YouTube. Przejdź do tego serwisu i zmniejsz pomału okno przeglądarki. Widzisz różnicę? Film na mniejszym ekranie jest wyśrodkowany i wyświetlony na pełnej szerokości, aktualna playlista również przechodzi na dół, dzięki czemu na mniejszym ekranie wszystko jest dobrze widoczne i nie mamy trudności z kliknięciem w jakikolwiek przycisk. Podsumowując – responsywność jest zespołem cech, dzięki którym strona dopasowuje się do wielkości ekranu w celu ułatwienia pracy na ekranach o mniejszej rozdzielczości.
A komu to potrzebne?
Długo się nie zastanawiając, mogę odpowiedzieć, że mi! Przykład z życia: jadę komunikacją miejską do domu, myślę, co mógłbym zjeść. Więc szybko wyciągam telefon i szukam przepisu na szarlotkę. Wybieram pierwszy wynik w wyszukiwarce i jeśli dobrze pamiętam – była to strona kwestiasmaku.com. Znalezienie na niej informacji na temat przyrządzania ciasta było naprawdę proste. Tekst o optymalnej wielkości, grafika, która w tym przypadku również też ma znaczenie – cieszy me oczy, brakuje tylko zapachu świeżego wypieku.
Wybierając pierwszy wynik w wyszukiwarce, nie byłem ani trochę zaskoczony faktem, że strona wygląda dobrze na moim telefonie (że jest responsywna). Wyszukiwarki takie jak google podczas indeksacji stron biorą pod uwagę to, czy strona jest przystosowana do urządzeń mobilnych. Jeśli nie, to taka strona od razu spada na sam dół listy wyszukiwania.
Czas na cyferki.
Ponad 80% użytkowników social mediów takich jak Facebook większość wejść generuje korzystając z telefonów komórkowych. Trochę ponad połowa użytkowników korzysta z aplikacji mobilnej. Zatem ok 30% korzysta z przeglądarki w telefonie. W zasadzie zastanów się – wybierasz się na jakąś podróż i co ze sobą zabierasz? Czy w zestawie twojego podręcznego bagażu znajdzie się miejsce na telefon? Nawet jeśli to jest krótka podróż rowerem do lasu, czy randka w kinie. Zawsze mamy przy sobie telefon. Dzięki dopasowaniu strony do każdego ekranu mamy nie tylko większą liczbę potencjalnych klientów, ale przychód z reklam wyświetlanych na urządzeniach mobilnych jest większy dzięki wyższemu współczynnikowi klikalności – CTR. Innymi słowy, reklamy wyświetlane na urządzeniach mobilnych są bardziej podatne na przypadkowe kliknięcia (tzw. syndrom Pani urzędniczki – “coś mi się kliknęło”). Podsumowując – jeśli nie mamy wersji mobilnej naszej strony lub strona jest nieresponsywna, to tracimy przez to dużą liczbę klientów i jest to jeden z aspektów, który ma spory wpływ na finanse firmy, więc nie powinniśmy go bagatelizować.
Przydatne narzędzie.
W jaki sposób sprawdzić, że nasza strona jest na pewno przystosowana do urządzeń mobilnych? Jest do tego wiele przeróżnych narzędzi. Najpopularniejszym i darmowym narzędziem jest googlowe Mobile-Friendly Test i na nim się teraz skupię. Jego działanie jest proste. Podajemy adres naszej strony i czekamy aż robociki wejdą na naszą stronę i ocenią jej responsywność. Po wykonaniu testu otrzymujemy prosty komunikat o tym, czy nasza strona jest w porządku, bądź też nie, oraz dodatkowe informacje o tym co można w naszej stronie poprawić. Podobnym narzędziem jest np. ready.mobi. Jeśli masz własną stronę, to sprawdź, czy aby na pewno jest responsywna, tak jak zarzekali się jej twórcy.