Co musisz wiedzieć o stronach Responsywnych?
3 lata temu
Smartfony z ciągłym dostępem do internetu zmieniły podejście do projektowania stron www, a jednocześnie bezpośrednio wpłynęły na rosnące oczekiwania internautów, którzy chcą, by było szybko, atrakcyjnie i treściwie bez względu na rozmiar urządzenia. 
Smartfony i tablety w zdecydowanym stopniu zmieniły nasze przyzwyczajenia związane z przeglądaniem internetu. Użytkownicy regularnie korzystają z urządzeń mobilnych do “buszowania” w sieci. W przyszłości tendencja z pewnością będzie się nasilać. Dodatkowo pojawienie się takich urządzeń, jak chociażby Apple Watch, może przyczynić się do jeszcze większych zmian w kwestii pozyskiwania informacji z internetu.

Co to jest Responsive Web Design?

Responsive Web Design (RWD) to kodowanie strony internetowej w taki sposób, aby zapewniała optymalne wrażenia wizualne przy jednoczesnej łatwości nawigacji i odczytywania treści bez względu na rodzaj urządzenia.

Projektant tworząc responsywny projekt musi więc zadbać, aby wszystkie elementy nawigacyjne, rozmiar ekranu, kolumny, tekst, obrazy, pliki audio, odtwarzacze wideo i inne składniki interfejsu użytkownika wyświetlały się bezproblemowo na różnych urządzeniach. Nie trzeba już tracić czasu i pieniędzy na tworzenie dwóch stron: “tradycyjnej” (tzw. desktop-site) i mobilnej (tzw. mobile-site) - jedna wersja strony www wystarczy. Pod warunkiem, że będzie ona responsywna.

Strona Responsywna - do czego jest potrzebna?

Liczba użytkowników telefonów komórkowych z dostępem do internetu przekroczyła liczbę użytkowników komputerów stacjonarnych. Obecnie nie tylko desktopy, laptopy, tablety czy telefony swobodnie łączą się z siecią, lecz nawet konsole do gier, e-czytniki, terminale internetowe, smartwatch’e mogą służyć również do serfowania po internecie. Wszystkie te urządzenia różnią się rozmiarem ekranów, dlatego obecnie stron nie da się już projektować z określoną liczbą pikseli.

Korzystanie z witryn internetowych nieprzystosowanych do urządzeń mobilnych najczęściej jest bardzo niezdarne, a czasem wręcz niemożliwe. Konieczność nieustannego zmieniania rozmiarów strony, przewijanie jej w dwóch kierunkach, aby przeczytać jedno zdanie, a do tego absurdalne rozmiary tekstu czy obrazków - oto kilka przeszkód napotykanych na witrynach, które nie zostały dostosowane do standardów mobile. RWD niweluje tego rodzaju niedogodności. 

Zalety Responsive Design

  • Elastyczność
Strony responsywne są “płynne” - zawartość porusza się swobodnie we wszystkich rozdzielczościach ekranu i wszystkich urządzeniach. Witryna zachowuje swoją funkcjonalność, użyteczność oraz atrakcyjny wygląd w każdych okolicznościach.
  • Pozytywne doświadczenia użytkowników
Chociaż “content is king” i najważniejsze są treści publikowane na stronie, to jednak User Experience odpowiada za komfort i pozytywne wrażenia z przeglądania danej witryny. Responsive Web Design zapewnia użytkownikom optymalne doświadczenia niezależnie od tego, czy korzystają z komputera stacjonarnego, smartfona, tabletu czy Smart-TV.
  • Opłacalność
Zalety posiadania jednej witryny dostosowanej do różnych urządzeń ujawniają się również w kwestii finansowej. Naturalnie jedna strona będzie mniej kosztowna od dwóch - zarówno w kwestii wykonania, jak i późniejszego utrzymania. Witryny stworzone wyłącznie na potrzeby urządzeń mobilnych nie oferują zaawansowanych technik nawigacyjnych dla tradycyjnych stron internetowych, a także wymagają dwóch oddzielnych adresów internetowych dla danej witryny.

Responsive Web Design wpływa również na lepsze wskaźniki SEO, bowiem wszyscy odwiedzający “lądują” w jednym miejscu bez względu na to, czy korzystają z desktopu, tabletu czy smartfona.
  • Google Friendly = User Friendly
Responsive Web Design jest zalecana przez Google, który uważa tę technologię za najlepiej spełniającą oczekiwania użytkowników. Ale to nie jedyny powód. Strony RWD mają ten sam URL oraz kod HTML niezależnie od urządzenia, dzięki czemu Google może znacznie łatwiej i efektywniej przeszukiwać, indeksować i organizować ich zawartość.

Dodatkowo Google preferuje strony responsywne, ponieważ cała treść znajdująca się na stronie jest dostępna dla użytkowników w każdym momencie i znacznie łatwiej ją odczytywać, udostępniać, komentować itd.
  • Bardzo łatwe zarządzanie
Posiadanie jednej witryny jest zdecydowanie łatwiejsze w zarządzaniu oraz prowadzeniu kampanii SEO. Pełne zarządzanie odbywa się z “jednego miejsca”.

3 aspekty najważniejsze przy tworzeniu wersji RWD

  • Na początku pomyśl o użytkownikach mobilnych. Po pierwsze dlatego, że coraz więcej osób używa urządzeń mobilnych do wyszukiwania informacji w sieci. Po drugie, projektując dla małych ekranów dotykowych, skoncentrujesz się na najważniejszych elementach witryny oraz najbardziej istotnych dla użytkownika treściach, wysuwając je na plan pierwszy.
  • Pomyśl z wyprzedzeniem. Już na etapie wstępnego projektowania należy spojrzeć na witrynę z punktu widzenia potencjalnego użytkownika. Jakie produkty i usługi zwykle szukają Twoi klienci, kiedy odwiedzają strony docelowe? Jakich danych kontaktowych będą potrzebować? Czy klienci będą musieli wypełniać formularze kontaktowe na Twojej stronie? W pierwszej kolejności należy skupić się na optymalnym usytuowaniu elementów najbardziej przydatnych użytkownikom, usuwając wszelkie niepotrzebne “przeszkody”, które mogłyby obniżyć oczekiwane CTA.
  • Liczy się czas. Tworząc wersję responsywną strony należy przyjąć, że użytkownik nie będzie wykorzystywał internetu szerokopasmowego, lecz wolniejszego łącza 3G lub 5G. Czas ładowania się strony jest zatem jedną z istotniejszych kwestii podczas projektowania stron RWD.
Popularność mobilnych przeglądarek wciąż wzrasta i bardzo prawdopodobne, że przeglądanie internetu na urządzeniach mobilnych będzie miało miejsce częściej niż z na pulpitach komputerowych (jeśli już się tak nie stało). Mały ekran mobilny stawia przed web designerami nowe wymagania. Nie ma tutaj miejsca na przeładowane paski z bocznymi przyciskami, reklamami, nieodpowiednio umieszczonymi odnośnikami do social media, a jednocześnie trzeba w nich zmieścić dokładnie tyle treści, ile oczekuje od strony użytkownik.
 
 
 
© CePixel Sp. z o.o., ul. Mochnackiego 25, 35-016 Rzeszów, Polska

CePixel Agency, Agencja reklamy, Agencja reklamowa Rzeszów, Rzeszów agencja interaktywna, Strony internetowe Rzeszów, Web design Rzeszów, Tworzenie wizerunku Rzeszów, Agencja Marketingowa, Identyfikacja wizualna Rzeszów, Projektowanie stron www