Strona szyta na miarę smartfona

Wyniki badań polskich internautów pokazują, że coraz częściej miejsce komputerowego monitora zajmują tablety i smartfony. W raporcie World Internet Project Poland czytamy, że w minionym roku 14,5% Polaków korzystało z sieci przez telefon komórkowy, podczas gdy w 2011 r. odsetek ten wynosił tylko 6%.

Urządzenia mobilne są nie tylko źródłem informacji o pogodzie, czy rozkładach jazdy. Najpopularniejszym zastosowaniem internetu w telefonach komórkowych i smartfonach jest przeglądanie stron internetowych. 65% mobilnych internautów zadeklarowało, że wykorzystuje do tego celu swoje urządzenia. Badania pokazują również, że są to osoby znacznie częściej wykorzystujące internet w celach komercyjnych. Na ekranie swojego telefonu szukają informacji o produktach, robią zakupy online i korzystają z bankowości elektronicznej.

Zmiana przyzwyczajeń internautów to wyzwanie nie tylko dla producentów smartfonów, którzy ścigają się między sobą, zwiększając parametry urządzeń. Za mobilną rewolucją muszą nadążać marketingowcy, których grupa docelowa wstaje od biurka i korzysta z internetu „w biegu”. Popularność urządzeń mobilnych to również spore wyzwanie dla projektantów i właścicieli stron internetowych, którzy muszą dostosować witryny do wymagań smartfonów i tabletów.

Czym jest Responsive Web Design?

Przez lata rozwój stron internetowych dążył w jednym kierunku. Monitory były coraz większe, rosła rozdzielczość ekranów, tak by można było zmieścić na nich coraz więcej treści. Dobrze widać to na przykładzie portalu Onet. W 2003 r. strona główna miała szerokość 770 pikseli, obecnie – 1150 pikseli. W ciągu 10 lat urosła o blisko 50%.

Mobilna rewolucja wymaga odmiennego spojrzenia na sposób, w jaki konsumuje się treści zawarte na stronie. Użytkownicy chcą mieć do nich dostęp przez smartfona podczas jazdy autobusem, siedząc na kanapie z tabletem w dłoni, oraz korzystając z laptopa. Odpowiedzią na wymagania urządzeń, wyposażonych w ekrany o różnej przekątnej i rozdzielczości jest Responsive Web Design (RWD). To nowy sposób projektowania stron internetowych, pozwalający tworzyć witryny automatycznie dopasowujące się do rozmiarów ekranu. Jak tłumaczy Ewelina Klimas, Art Director w agencji interaktywnej Adweb, zasady dotyczące projektowania stron internetowych, które stosowane były do tej pory musiały ulec zmianie wobec dynamicznie rozwijającego się rynku urządzeń mobilnych.

Jedną z podstawowych zasad nowego projektowania stron jest dopasowanie ich w sposób elastyczny do wielkości, rozdzielczości i układu ekranu, a nie samego urządzenia. To właśnie „wrażliwość” jest cechą charakterystyczną stron projektowanych zgodnie z ideą RWD. Duży ekran odda pełny obraz strony wraz z jej niuansami i szczegółowymi elementami. Na średnim ekranie będzie czytelna dzięki delikatnemu zmniejszeniu i dopasowaniu kolumn. Małe ekrany natomiast zaprezentują stronę jak jedną kolumnę, a dodatkowo nawigacja będzie dopasowana w taki sposób, aby możliwe było wygodne sterowanie palcem. Obrazki zostaną przeskalowane do najbardziej optymalnej szerokości, a czcionki zmienią wielkość.

Podstawową zasadą projektowania RWD jest przewidzenie w jaki sposób zachowa się strona, jak się dostosuje do urządzenia na jakim będzie wyświetlana. Projektując witrynę grafik musi pamiętać o zasadach dzięki którym niezależnie od rozdzielczości układ graficzny i całość koncepcji zostaną zachowane. To nie przypadek decyduje w jaki sposób strona zmienia swoje oblicze na każdym urządzeniu. To przemyślana i świadoma decyzja dotycząca wielkości czcionki, sposobu wyświetlania się obrazków, a także szereg niuansów, które sprawiają, że strona jest czytelna i przyjazna w odbiorze. Proces dopasowania się strony najlepiej można zauważyć w zmieniającej się nawigacji, która mocno determinuje sposób zmian jakie następują w wyświetlaniu. Takie projektowanie powoli staje się standardem i wyzwaniem dla projektantów. Warto więc kierować się zasadą good design is not just how it looks like but how it works.

Czy moja strona potrzebuje wersji mobilnej?

Odpowiedź na to pytanie można znaleźć, patrząc na statystyki strony. Narzędzie Google Analytics pokazuje jaki odsetek ruchu pochodzi z urządzeń mobilnych. Rosnąca liczba wejść z telefonów komórkowych i tabletów jest wskazówką, że czas pomyśleć nad przystosowaniem witryny pod kątem urządzeń mobilnych.

Dodatkowym wyznacznikiem jest typ informacji, zawartych na naszej stronie internetowej. Badania pokazują, że użytkownicy internetu mobilnego chętnie wykorzystują go do robienia zakupów lub poszukiwania informacji o konkretnym produkcie. W dużych sklepach stacjonarnych, takich jak supermarkety lub elektromarkety, coraz częściej można zobaczyć klientów, szukających informacji o produkcie za pośrednictwem telefonu. Strona przystosowana do wyświetlania na ekranach smartfonów może ułatwić podjęcie decyzji zakupowej.

Mobilna wersja witryny to również dobre rozwiązanie dla firm o charakterze lokalnym, takich jak przewoźnicy czy lokale gastronomiczne. Możliwość sprawdzenia menu, adresu czy godzin otwarcia może zdecydować o tym, czy potencjalny klient podczas niedzielnego spaceru zdecyduje się zjeść obiad w naszej restauracji.