Strony responsywne i RWD – co oznaczają te terminy?

Strony responsywne i RWD – co oznaczają te terminy?

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.

Spodobał Ci się ten tekst?

Jeśli sądzisz, że moglibyśmy Tobie pomóc, odezwij się do nas. Wypełnij bardzo prosty formularz szybkiej wyceny. Gwarantujemy szybką odpowiedź.

Bądź pierwszą osobą, która skomentuje ten artykuł! 😉

Oświadczam, że akceptuję postanowienia zawarte w polityce prywatności. *

Bartłomiej Kiljan

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Mało czytania? Nie ma problemu!

Sprawdź inne teksty powiązane z tym artykułem

Michał Ziółkowski

5 lat temu

Porady dotyczące user interface – 7 ważnych kwestii

Oto nasze porady dotyczące user interface, których wcielenie w życie sprawi, że Twoja strona internetowa będzie bardziej przyjazna odbiorcom. Sprawdź je!

Jakub Ozorowski

5 lat temu

Brak konwersji w sklepie internetowym – 10 typowych przyczyn

Brak konwersji w sklepie internetowym to niewątpliwie ogromny problem dla właścicieli stron e-commerce. Jakie są najczęstsze przyczyny tego stanu rzeczy?

Michał Ziółkowski

5 lat temu

Proces tworzenia strony internetowej – na czym polega?

Z jakich kroków składa się proces tworzenia strony internetowej? Jakie jego aspekty są istotne, a które mniej? Zobacz, jak proces ten powinien przebiegać.

Michał Ziółkowski

5 lat temu

Najczęstsze błędy typograficzne na stronach internetowych

Jakie są najczęstsze błędy typograficzne na stronach internetowych? Dlaczego należy ich bezwzględnie unikać na własnej stronie? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Aktualizacja strony internetowej – kiedy najlepiej ją przeprowadzić?

W którym momencie aktualizacja strony internetowej powinna być przeprowadzona? Po czym poznać, że najwyższy czas na zmiany? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Tworzenie własnego portfolio – co warto mieć na uwadze?

Tworzenie własnego portfolio to proces, który musi być solidnie przemyślany. Sprawdź więc, w jaki sposób można stworzyć własną, skuteczną teczkę z pracami.