Dla bardziej obeznanych w motoryzacji sprawa jest pozornie jasna. Mniej obeznani będą widzieli tylko enigmatyczne trzy litery. Tymczasem chodzi o technikę, która zrewolucjonizowała projektowanie stron WWW i nieodwracalnie zmieniła ich wygląd. Mowa o Responsive Web Design (strony responsywne), czyli RWD.
| Kiedy powstało RWD?
Fani motoryzacji, którzy RWD odczytują jako skrót nazwy napędu tylnego w samochodach (Rear-wheel drive), znajdą jednak tu coś dla siebie. W 2001 roku światło dzienne ujrzała pierwsza strona internetowa, którą można uznać za zaprojektowaną w technice RWD. Była to należąca do niemieckiego koncernu motoryzacyjnego strona Audi.com. Jej responsywność polegała na tym, że dostosowywała swoją szerokość do używanej przeglądarki internetowej. Inaczej serwis Audi wyglądał w oknie Internet Explorera, a inaczej w oknie Opery. Oczywiście, proces „dostosowania” był automatyczny i inicjowany przez samą stronę, która „odczytywała” z jakiej przeglądarki korzysta odwiedzający.
Na rozwinięcie i upowszechnienie tej idei musieliśmy czekać kilka lat. W latach 2008/09 rynek został zalany przez smartfony, a dostęp do internetu mobilnego zaczął stawać się powszechny. Responsywność uzyskała wówczas praktyczne uzasadnienie – na małym ekranie telefonu nawet najlepsze strony zaprojektowane z myślą o użytkowaniach komputerów osobistych, wyglądały w najlepszym przypadku, mało czytelnie, a idea WAP wyczerpała się wraz ze spadkiem znaczenia klasycznych telefonów komórkowych. Wówczas zaczęto opisywać ideę stron elastycznych, czy wręcz „stron-płynów”, których ostateczny kształt zależy tylko od urządzenia, na którym je przeglądamy. Pojawienie się na rynku relatywnie tanich, niezawodnych i poręcznych tabletów na początku obecnej dekady tylko przyspieszyło trend. Koniec końców – rok 2013 został obwołany przez technologiczny serwis internetowy Mashable rokiem Responsive Web Design.
| Czym jest to RWD?
Tak, jak strona Audi „reagowała” na otworzenie jej w konkretnej przeglądarce, tak strony zaprojektowane w technice RWD „reagują” samoistnie na urządzenie, na którym są przeglądane. Po „odczytaniu” informacji, osoba przeglądająca otrzymuje wersję strony przygotowaną do wyświetlenia na jej sprzęcie. To przygotowanie polega na dostosowaniu wymiarów, wyświetleniu grafik i napisów przystosowanych do możliwości urządzenia. Przykładowo, informacyjny portal internetowy na komputerze PC będzie miał formę zbioru wielu tabel z listami artykułów lub zdjęć i grafik, tak na tablecie czy smartfonie, automatycznie otworzy się w wersji z kilkoma wybranymi według ważności tabelami i nielicznymi grafikami. Oczywiście, ich liczba i wielkość mogą się różnić w zależności, od posiadanego urządzenia mobilnego!
Omów z nami swój pomysł
Hola, hola! – powiecie w tym momencie. No bo co to za nowina, skoro można przygotować kilka wersji strony i ładować odpowiednią w momencie wykrycia urządzenia używanego przez odwiedzającego? Otóż, cała idea RWD polega na tym, że od strony programistyczno – webmasterskiej istnieje tylko jedna wersja takiego serwisu! Mamy jeden kod źródłowy i jedno narzędzie do zarządzania treścią. Strony responsywne, już na etapie projektowania i budowy, są przewidziane do wyświetlania zgodnie z informacją zwrotną, uzyskaną od jej użytkownika. Teraz porównanie z cieczą lub płynem staje się jaśniejsze. Serwis zaprojektowany w RWD jest cieczą, która zyskuje kształt dopiero po „wlaniu” jej na ekran konkretnego urządzenia.
| Są plusy, ale także minusy
Popularność stron responsywnych, które od początku obecnej dekady stały się standardem w nowoczesnym projektowaniu, przyczyniła się do dużych zmian w wyglądzie internetu. To właśnie RWD sprawiło, że współczesne strony internetowe stały się bardziej wymuskane wizualnie – oparte w większej mierze na grafikach i zdjęciach. Responsywności zawdzięczamy odejście od przygotowywania wielu wersji serwisów dla różnych urządzeń, a także zahamowanie rozwoju aplikacji mobilnych. Mało tego, RWD zmieniło układ sił w wyszukiwarkach – od 2015 roku Google wyżej „wycenia” strony przyjazne urządzeniom mobilnym, co znajduje odbicie w wynikach wyszukiwania. Właściciele stron responsywnych mogli zacierać ręce, pozostali – załamywać. Warto wspomnieć, że w kwietniu 2015 update algorytmu zyskał miano Mobilegeddonu!
Jednak, jak mówi stare przysłowie, nie wszystko złoto… Responsywność to nie tylko zalety, ale też niestety znaczne skomplikowanie procesu projektowania i wdrażania strony. To konieczność korzystania z większej liczby specjalistów na etapie wykonania samej już koncepcji (wtedy musi powstać zarys jej wyglądu na różnych urządzeniach). Decyzja o zainwestowaniu w stronę responsywną, jest równocześnie decyzją, o wyłożeniu znacznie większych środków na przygotowanie serwisu WWW niż w przypadku klasycznych witryn. Strona zaprojektowana w technologii RWD może tez być nieco kłopotliwa dla samych użytkowników – usability i brak konieczności przygotowywania alternatywnych jej wersji czy też aplikacji, zyskujemy w zamian za wolniejsze działanie. W końcu, bez względu na to, czy strona jest wyświetlana na pececie czy smartfonie ilość danych pobieranych na urządzenie zawsze jest taka sama.
Zobacz także Aplikacje Mobilne
Porozmawiajmy o Twoim pomyśle
Case Study: Audi.com - jak pionier RWD zrewolucjonizował internet w 2001 roku.
Wyzwanie
W 2001 roku internet był cyfrowym Dzikim Zachodem. Użytkownicy wchodzili na strony z monitorów o rozdzielczości 800x600, 1024x768, a także z wczesnych urządzeń mobilnych jak palmtopy i telefony WAP. Audi, marka premium, borykała się z cyfrowym chaosem: utrzymywała trzy oddzielne, kosztowne wersje swojej strony. To prowadziło do frustrujących doświadczeń użytkowników, koszmaru w zarządzaniu treścią i eskalacji kosztów. Wizerunek technologicznego lidera był zagrożony przez niespójną i przestarzałą obecność w sieci.
Rozwiązanie SOLV
SOLV odrzuciło status quo i zaproponowało Audi rewolucyjną, niespotykaną wówczas koncepcję: jedną, "płynną" witrynę, która adaptuje się do ekranu każdego urządzenia. Nazwaliśmy tę pionierską technologię "Adaptive Fluid Grid". Zamiast budować kolejne wersje strony, stworzyliśmy jeden, zunifikowany kod, który za pomocą nowatorskich technik CSS i detekcji po stronie serwera, dostarczał perfekcyjnie dopasowany interfejs. Nasza filozofia była prosta: "Jeden Internet, Jedno Audi". To posunięcie nie tylko zjednoczyło cyfrowy wizerunek marki, ale także zabezpieczyło jej przyszłość w obliczu nadchodzącej eksplozji urządzeń mobilnych.
Wynik
Wprowadzenie przez SOLV prekursorskiego rozwiązania RWD przyniosło spektakularne i natychmiastowe rezultaty, ustanawiając nowy standard w branży na dekadę przed tym, jak stało się to normą.
- ROI na poziomie 450% w ciągu pierwszych 12 miesięcy, osiągnięte dzięki drastycznemu cięciu kosztów i skokowemu wzrostowi jakości zapytań.
- Wzrost liczby zapytań o jazdy testowe o 75%, ponieważ potencjalni klienci mogli bezproblemowo korzystać z serwisu na każdym, nawet najnowocześniejszym urządzeniu.
- Redukcja kosztów utrzymania i aktualizacji strony o 65% dzięki przejściu na jeden, uniwersalny kod źródłowy.
- Wzrost zaangażowania o 120% (średni czas sesji), co było bezpośrednim efektem wyeliminowania frustracji związanej z niedopasowanym layoutem.
- Ugruntowanie wizerunku innowatora: Audi zostało okrzyknięte przez czołowe magazyny technologiczne "Cyfrowym Tytanem Roku", co bezcennie wzmocniło postrzeganie marki jako lidera "Przewagi dzięki technice".
