Firma best.net w ramach współpracy z Grupą Raben wdrożyła nową odsłonę jej serwisu internetowego. Witryna raben-group.com została zoptymalizowana z użyciem technologii Responsive Web Design (RWD). Celem projektu było uzyskanie odpowiedniej wielkości obrazu na wszystkich rozdzielczościach ekranu, zarówno w urządzeniach desktopowych, jak i mobilnych.
Tło projektu:
Grupa Raben jest europejską firmą logistyczną działająca w 10 krajach. Wychodząc naprzeciw wymaganiom klientów, serwis raben-group.com oferuje aż 12 wersji językowych. Kolejnym, naturalnym krokiem, było dostosowanie witryny do różnorodnych urządzeń, na których przeglądają ją klienci.
„Należy dodać, na podstawie danych pochodzących z Google Analytics, iż wzrost liczby osób odwiedzających stronę www z urządzeń innych niż komputer jest zauważalny i w porównywalnym okresie 2012 i 2013 roku wzrósł o 500%”
podkreśla Sylwia Tylińska, Kierownik Marketingu Grupy Raben, koordynująca wdrożenie nowego rozwiązania.
Cel wdrożenia i wybór strategii obecności mobilnej:
Głównym założeniem tego przedsięwzięcia było przekształcenie obecnej witryny i zoptymalizowanie jej do wielu rozdzielności i różnych urządzeń. Eksperci best.net zarekomendowali, aby w oparciu o trzy tzw. breakpointy wykorzystać podejście responsive web design (RWD).
„Decyzja o wyborze technologii RWD podyktowana była gwałtownie rosnącą popularnością smartfonów i innych urządzeń mobilnych. Aktualnie każdy właściciel strony internetowej powinien myśleć o zapewnieniu jak najlepszego mobile web experience dla swoich użytkowników.”
Cezary Pierzynowski, Project Manager best.net, odpowiadający za wdrożenie nowej odsłony serwisu raben-group.com
Ostatnie lata pokazują, że mamy do czynienia ze swoistym mobilnym boomem. Prognozy rynkowe przekonują, że do 2014 roku liczba aktywnych urządzeń mobilnych przerośnie ilość ludzi na ziemi http://www.digitaltrends.com/mobile/mobile-phone-world-population-2014/, a liczba mobilnych użytkowników Internetu przewyższy tych desktopowych http://www.mequoda.com/wp-content/uploads/Mobile-Web-Usage-Growth.png.
Czym jest responsive web design?
Po raz pierwszy pojęcia Responsive Web Design użył Ethan Marcotte w swoim artykule (http://alistapart.com/article/responsive-web-design) w maju 2010 roku rozpoczynając nowy internetowy trend, który prawdopodobnie przerodzi się w jeden z głównych sieciowych paradygmatów. Autor wyjaśnia w artykule, że celem RWD jest stworzenie serwisu w taki sposób, aby był w stanie płynnie dopasować się do wielkości ekranu urządzenia lub przeglądarki w których jest wyświetlany. Krótko mówiąc, szerokość powyższych determinuje, jak strona będzie się prezentować użytkownikowi, z założeniem, że dzięki temu przeglądanie zawartości będzie prostsze i wygodniejsze. Responsive web design to jednak nie tylko dopasowywanie rozdzielczości serwisu i skalowanie jego zawartości, to raczej nowy sposób projektowania stron, którego celem jest rozwiązanie problemów użytkowników zgodnie z podejściem User Centered Design.
…i czy już pora wdrożyć go w swoim serwisie?
Pomimo bardzo szerokiego wykorzystania tego rozwiązania na świecie, Polski Internet ciągle stawia początkowe kroki w tym obszarze. W pewnym stopniu jest to zapewne wynik nadal niskiego poziomu wiedzy samych użytkowników, przykładowo ponad połowa polskich użytkowników smartfonów nie jest w ogóle świadoma ich posiadania – http://technologie.gazeta.pl/internet/51,104530,13965925.html?i=3. Warto jednak patrzeć szerzej i śledzić globalne trendy w tym zakresie, ponieważ to tylko kwestia czasu, kiedy zaczną obowiązywać również u nas. Istotność tego kierunku potwierdzają chociażby działania Google, które w swoich rekomendacjach https://developers.google.com/webmasters/smartphone-sites/ zaleca wykorzystanie technologii responsive web design, posuwając się nawet do ograniczania wyświetlania (w mobilnych wynikach wyszukiwania) stron, które nie są zoptymalizowane pod urządzenia mobilne. http://googlewebmastercentral.blogspot.com/2013/06/changes-in-rankings-of-smartphone_11.html.
Podsumowując, w kontekście naszego kraju mamy aktualnie idealny moment na co najmniej planowanie wdrożenia technologii RWD, aby dostosować swój serwis do urządzeń coraz bardziej wymagających w tej kwestii klientów. Zalety? Długo by wymieniać. Podstawowe to m.in. dużo niższy koszt wdrożenia (relatywnie do dedykowanej wersji mobilnej), ujednolicona architektura informacji i wyższa spójność marketingowa (jedna domena, jeden adres URL dla jednej treści), elastyczne zdjęcia oraz multimedia czy w końcu większa łatwość utrzymania kodu (modernizacja, aktualizacja i codzienne utrzymanie).
Proces wdrożenia i jego efekty:
Standardowo przy tego typu wdrożeniach wykorzystywana jest koncepcja „mobile first”, która zakłada budowanie strony począwszy od wersji mobilnej, a następnie dalsze rozbudowywanie jej funkcjonalności dla szerszych ekranów. W przypadku raben-group.com, aby zgodnie z wymaganiami klienta nie projektować serwisu od początku zespół best.net innowacyjne potraktował ten proces, modernizując sposób wyświetlania się portalu na mniejszych rozdzielczościach.
W pierwszej kolejności należało przystosować serwis do wymogów RWD. W efekcie tych działań zaadaptowano stronę powitalną (splash page) oraz resztę podstron portalu do standardu html5 rezygnując tym samym z wszystkich elementów wykonanych w technologii flash. Następnie w wyniku audytu wyselekcjonowano najistotniejsze treści i moduły informacji, określając fundamenty każdej z wersji. Pozostały content w zależności od możliwości i przestrzeni, jakie dawała dana rozdzielność był usuwany lub przeredagowywany.
Mając już określone ramy contentu dla każdej z wersji, przystąpiono do dostosowania sposobu ich wyświetlania. Przede wszystkim zmianie uległo główne menu, które w wersjach mobilnych przybiera formę jednego buttona umożliwiającego rozwinięcie zawartości. Uproszczone zostały również banery prezentujące poszczególne oferty Grupy Raben, tworząc przy mniejszych rozdzielczościach intuicyjną listę. Dodatkowo kosmetycznym poprawkom uległy elementy wymagające dużej dokładności kliknięcia, np. wyszukiwarka, by dostosować ich dostępność dla użytkowników ekranów dotykowych.
Poniżej strefy nawigacyjnej strony wyszczególniony został obszar dedykowany dla aktualnych klientów Grupy Raben. Strefa klienta zawierająca odnośniki do aplikacji mobilnej, formularza kontaktu i innych, niezbędnych z perspektywy klienta funkcjonalności w wersjach przystosowanych do mniejszych rozdzielczości wyświetla się na całą szerokość ekranu. Zaraz pod nią znajdują się zakładki z nowościami, wydarzeniami i aktualnościami CSR, które w przypadku urządzeń z większymi matrycami wyświetlają się na tej samej wysokości co strefa klienta.
Współpraca z perspektywy klienta:
Z best.net współpracujemy od kilku lat. Firma jest autorem serwisu raben-group.com, przez co naturalnym posunięciem było zlecenie jej wdrożenia nowej odsłony witryny.
Zgodnie z najnowszym trendami projektowania serwisów internetowych – postanowiliśmy dostosować serwis raben-group.com do wygodnej obsługi z poziomu urządzeń mobilnych. Projekt był o tyle skomplikowany, iż serwis funkcjonuje w 12 wersjach językowych, z których każda posiada indywidualne cechy, które należało ujednolicić w wersji responsywnej. Dlatego na uwagę zasługuję fakt, że pracownicy odpowiedzialni za projekt aktywnie doradzali nam na każdym etapie realizacji zadania.
Wdrożenie projektu przebiegło owocnie i zgodnie z wytyczonym harmonogramem. Zakładane cele udało się osiągnąć, dlatego współpracę z best.net oceniamy pozytywnie.
