Małe okno na wielki wirtualny świat – czyli kilka słów o tym, jaka powinna być strona responsywna

By 28 października 2015 Artykuły No Comments

kaboompics.com_Iphone 6 plus in woman's hand

Dane statystyczne ze stycznia 2015 roku jasno głoszą – w Polsce mamy 38,5 mln ludzi, z czego ponad 67% aktywnie korzysta z internetu. A z tych 67%, czyli 25,7 milionów Polaków aż 15,9 milionów to internauci mobilni. Oznacza to, że 41% wszystkich Polaków korzysta z internetu za pomocą urządzeń mobilnych. A co te statystyki oznaczają dla właścicieli dużych i małych firm działających na terenie naszego kraju?

Telefony komórkowe przestały być narzędziem wykorzystywanym wyłącznie do rozmów. Coraz częściej internauci korzystają z nich, by wyszukać i przeglądać za ich pośrednictwem informacje o firmach, ich usługach i produktach. Stale rośnie też liczba kupujących, którzy porównują ceny w sklepach internetowych przy użyciu smartfona. Dlatego tak ważne jest, by odwiedzana przez nich strona była dostosowana do urządzeń mobilnych (czyli wykonana w technice Rensponsive Web Design).

1. Zoptymalizowana szybkość ładowania i działania

Użytkownicy smartfonów przeglądają internet głównie w przerwie między codziennymi zajęciami i nie zawsze są wtedy w zasięgu szybkich sieci Wi-Fi, 3G lub 4G. Dlatego projektując stronę dostosowaną do ich potrzeb należy pamiętać, by była ona lekka, szybko się ładowała i działała.

W tym celu już w fazie projektowania trzeba zastanowić się, z jakich funkcjonalności będą korzystać użytkownicy mobilni najczęściej oraz czy potrzebują wszystkich informacji i materiałów dostępnych w tradycyjnej wersji strony.

Grafiki w responsywnej stronie internetowej powinny być skompresowane, dostosowane do rozmiaru i rozdzielczości ekranu urządzenia mobilnego, a kod HTML / JS / CSS zoptymalizowany. Pozornie drobne elementy strony mogą znacznie spowolnić jej ładowanie, gdy użytkownik nie będzie miał dostępu do szybkiej sieci internetowej.

2. Uproszczona nawigacja

Nawigacja strony responsywnej musi być przejrzysta i prosta, a w przypadku bardzo rozbudowanych serwisów konieczne jest zastosowanie wyszukiwarki umożliwiającej szybkie dotarcie do poszukiwanych treści. Warto też stosować przewijanie strony wyłącznie góra – dół, ustalić jasną hierarchię menu, a nawigowanie ułatwić poprzez zastosowanie zawsze widocznego przycisku powrotu oraz linka do strony głównej.

3. Treści muszą być czytelne, a wielkość elementów interaktywnych dostosowana do korzystania za pomocą dotyku

Elementy klikalne strony wykonanej w technice RWD powinny być duże i powinny posiadać marginesy oddzielające je od elementów sąsiadujących. Elementom formularzy (checkboksy i radiobuttony) powinny natomiast towarzyszyć etykiety.

Stosowane na stronie czcionki powinny mieć relatywnie duże rozmiary i czytelne, sprawdzone kroje. Kontrast pomiędzy tłem strony a kolorem tekstów musi być odpowiednio wysoki, a priorytetowe treści powinny być wyróżnione innym kolorem i rozmiarem czcionki.

W przypadku prowadzenia działalności stacjonarnej, warto zaakcentować na stronie swoją lokalizację oraz godziny otwarcia i numery telefonów. Z badań przeprowadzonych przez Google wynika, że 3/4 użytkowników mobilnych szuka w ten sposób adresu firmy, a 2/3 jej numeru telefonu.

4. Ważna konwersja

Konwersja jest szczególnie ważna w przypadku internetowych serwisów e-commerce, dlatego przy ich projektowaniu należy pamiętać, że strona będzie obsługiwana za pomocą dotyku. Aby ułatwić użytkownikom korzystanie z serwisu należy skupić się na skondensowanych opisach produktów, zredukować liczbę kroków potrzebnych do wykonania zadania (np. uprościć proces zakupowy), ograniczyć do minimum liczbę pól w formularzach, a także linkować numery telefonów.

Tworząc stronę w technice RWD nie można jednak zapominać, że część urządzeń mobilnych umożliwia swobodne przeglądanie standardowych stron www. Warto zatem zamieścić w wersji mobilnej strony odnośnik do wersji standardowej i odwrotnie – w wersji standardowej odnośnik do wersji mobilnej.