Responsywna strona internetowa

Nie każdy słysząc określenie “responsywna strona internetowa” będzie wiedział, o co w tym dokładnie chodzi. Najprawdopodobniej jednak każdy z takich wersji witryn www korzystał co najmniej raz.

Żyjemy w czasach gdy wszystko rozwija się bardzo dynamicznie i jesteśmy w ciągłym biegu. Część z nas zapewne chętniej sięga po urządzenia typu smartfon czy tablet. Są one po prostu wygodniejsze. Stąd też wzięła się potrzeba tworzenia stron z uwzględnieniem RWD.

Czym jest responsywna strona?

Mówiąc bardziej ogólnie, będzie to witryna internetowa, której wygląd dostosowany jest nie tylko do użytkowników desktopu, ale również tych preferujących urządzenia mobilne. Nie zapominajmy też, że czasem treści znajdujące się na stronie uruchamiamy nawet na telewizorach.

Responsywność strony pozwala nam wyświetlić ją w jak najkorzystniejszy sposób, niezależnie od “odbiornika”.
Warto też pamiętać, że z pojęciem tym możemy się spotkać również pod nazwą skrótową, czyli RWD, oznaczające Responsive web design.

Historia RWD

Idea dostosowywania wyglądu strony do różnych formatów ma już swoje początki na początku lat 00’, a dokładniej mówiąc, w 2001 roku, kiedy to jedna z najpopularniejszych marek samochodów postanowiła zaprojektować swoją witrynę, tak, że będzie ona wyświetlała się inaczej w zależności od używanej przeglądarki. Mowa tutaj o Audi.
Nie była to może aż tak zaawansowana forma, jaką mamy dzisiaj, ale wtedy też nie zachodziła taka potrzeba. Wszystko zaczęło się zmieniać w momencie, kiedy na rynku pojawiło się coraz więcej telefonów komórkowych. Kilka lat później modne stały się również tablety, a ogólne korzystanie z urządzeń przenośnych stało się coraz popularniejsze.
Wtedy też zaczęła pojawiać się potrzeba tworzenia stron, które nie tylko będą dobrze wyglądały na komputerze, ale również na naszym smartfonie.

W 2013 roku jeden z magazynów zajmujących się tematami technologii okrzyknął bieżący rok “rokiem Responsive Web Design”. Teraz pojęcie RWD jest niemalże nierozłączną częścią istnienia strony www.

Czy responsywna strona to must have?

Nie jest to obowiązek. Nikt nie zabroni nam stworzyć strony dostosowanej wyłącznie do komputera lub telefonu…ale czy taki jest nasz cel?

Projektując stronę z  własnym contentem czy prezentującą jakiś produkt- w każdym z naszych motywów warto dotrzeć do jak najszerszego grona odbiorców. Oczywiście możemy sprawdzić w statystykach czy nasi czytelnicy albo np. klienci korzystają częściej z urządzeń mobilnych, czy też pozostają wierni swoim komputerom/ laptopom.

Może nam się to również przydać do ogólnego dopasowania stylistyki projektu witryny. Nie warto jednak stawiać na jedno źródło.
Ponad połowa użytkowników Internetu korzysta ze smartfonów…i nie służą im one tylko i wyłącznie do rozmów telefonicznych.

Załóżmy, że jesteśmy np. właścicielami sklepu internetowego. Prowadzimy do tego specjalne konta na social mediach i w jednym z postów zamieściliśmy informacje o promocji i link przekierowywujący do strony (bez RWD).

Nie ma co ukrywać, że jeśli chodzi o scrollowanie mediów społecznościowych, to robimy to zazwyczaj na naszych urządzeniach mobilnych, chociażby w drodze do pracy. Siedzimy w autobusie i przeglądamy jedną z platform. Dostrzegamy informacje o promocji i zainteresowani chcemy przejść do sklepu, jednak ku naszemu zdziwieniu strona jest pomniejszona (widok taki jak na laptopie), treści niemożliwe do odczytania, a ruchy na niej ograniczone. Taka sytuacja od razu zniechęci nas do dalszego pobytu na stronie.
Jest to niezwykle prosty sposób na utratę klienta.

Nie zawsze warto iść za tłumem i robić coś “bo inni tak mają”, ale w tym przypadku jest to jak najbardziej wskazane.

Różnica między responsywną, a mobilną stroną

Mogłoby się wydawać, że są to pewnego rodzaju synonimy. Nic bardziej mylnego. Wiemy już czym jest responsywna strona internetowa, tak więc co wyróżnia ją od tej mobilnej?

Wersja mobilna jest projektowana typowo na telefon. Jest więc osobnym bytem i funkcjonuje zupełnie niezależnie od strony desktopowej, a więc będzie miała również inny adres. Na początku może wydawać się to dość praktyczne. Zwróćmy jednak uwagę na dodatkową pracę przy projektowaniu wersji dedykowanej na smartfon oraz to, że będąc właścicielem firmy, marki lub sklepu, możemy zmylić naszego odbiorcę, posiadając dwa różne adresy do tej samej strony.
Nie będzie to też wyglądało zbyt profesjonalnie. Zawsze będziemy musieli podawać kilka różnych linków do teoretycznie tego samego źródła.

RWD, a pozycjonowanie w Google

Co ciekawe Google wprowadziło u siebie specjalne algorytmy, które pozwalają na lepsze wypozycjonowanie się stron responsywnych, w przypadku gdy dane pojęcie jest wyszukiwane z urządzenia mobilnego.

Oznacza to, że jeśli nie uwzględniliśmy w naszym projekcie RWD to odnalezienie naszej strony z perspektywy użytkownika Internetu będzie dużo trudniejsze.

Responsywna strona, a kreator

W teorii stworzenie strony, która jest responsywna, może wydawać się trudne.

Należy dostosować projekt naszej witryny www zarówno do tradycyjnej wersji, jak i tabletu, telefonu, a czasem również innych formatów. Na szczęście większość kreatorów wychodzi tym potrzebom naprzeciw i umożliwiają w swych narzędziach wprowadzenie automatycznego lub indywidualnego komponowania RWD.

Myślę, że warto po krótce wyjaśnić jak to wygląda w przypadku tych najpopularniejszych.

Webflow

W tym wypadku również mamy do czynienia z automatycznym dopasowaniem strony do urządzeń mobilnych. Możemy też zmienić wygląd i samo położenie elementów dla różnych widoków strony.

WebWave

Ten kreator z kolei oferuje automatyczne dostosowanie strony do ekranów urządzeń mobilnych, ale też ręczną metodę manualną.

Jego niewątpliwym plusem jest jednak fakt, że umożliwia też samodzielne edytowanie poszczególnych elementów w taki sposób, żeby ostateczna wersja witryny jak najlepiej spełniała nasze oczekiwania. Możemy bowiem dodawać i odejmować najdrobniejsze szczegóły do różnych wersji.

Z pewnością jeśli projektujemy naszą stronę w kreatorze, to warto wybrać taki, który daje nam duże pole manewru i to nie tylko w podstawowej wersji, ale również tych, które będą funkcjonowały na naszych urządzeniach mobilnych.

Jeszcze więcej możecie dowiedzieć się z mojej recenzji.

Webnode

Tak samo jak pozostałe, automatycznie dostosowuje stronę do telefonów komórkowych i tabletów. Co więcej, wszystkie zmiany wprowadzone w “desktopowej” wersji witryny są automatycznie przekładane na wersje mobilne. Niestety jest to uciążliwe gdy chcemy wprowadzić indywidualne zmiany na różnych formatach.

Wix

Oferuje on automatyczne dostosowanie stron do ekranów urządzeń mobilnych oraz możliwość samodzielnego ustawienia widoku strony dla tabletów i telefonów komórkowych.

Wady i zalety RWD

Dobrze. Poznaliśmy już zastosowanie i ogólną charakterystykę funkcjonowania.
Teraz dla podsumowania wypiszemy plusy i minusy związane z projektowanie responsywnych stron.

Plusy

+ czytelny przekaz na urządzeniach mobilnych
+ mniejsze koszta w utrzymaniu (zamiast dwóch- mobilnej i desktopowej płacimy za jedną)
+ lepsze pozycjonowanie w wyszukiwarce Google
+ jeden adres strony (domena)
+ dostosowywanie się do różnych formatów i rozdzielczości urządzeń
+ wspólne CMS i kody śledzące

Minusy

–  dłuższy czas ładowania strony (ładowanie kompletnego kodu zawierającego elementy z różnych wersji)
– wyższe koszty przy powstawaniu projektu
– indywidualne testy (na różnych urządzeniach)

Projektowanie responsywnych stron ma swoje wady i zalety. Praktycznie tak jak wszystko. Uwzględnienie wielu formatów urządzeń jest jednak na tyle istotne, że bez tego ani rusz. Oczywiście możemy rozważać stronę mobilną, ale i tak musimy zadbać o wersję desktopową. Decydując się wyłącznie na jedno ze źródeł, ograniczamy nasze zasięgi.
Nie należy też zapominać, że technologia wciąż się rozwija. Powstaje wiele różnorodnych urządzeń o odmiennych formatach i gdyby nie RWD, treści na nich nie wyświetlałyby się poprawnie…Także pomimo drobnych wad jest to niezwykle cenna funkcja, a ponieważ mimo wszystko jest „dość nowa” to non stop powstają nowe rozwiązania, które pozwalają na jej łatwiejsze i bardziej efektywne użycie.