Użyteczne strony mobilne

Tworzenie serwisów przystosowanych do wyświetlania na urządzeniach mobilnych to już nie tylko ciekawostka, lecz konieczność wobec wciąż rosnącej liczby użytkowników smartfonów i tabletów.

Mobile to już konieczność

Użytkownicy mobilnego internetu są szybciej rosnącą grupą w porównaniu do użytkowników klasycznego łącza, a analitycy rynku usług internetowych oceniają, że przyszłość sieci leży właśnie w rękach aktywnych posiadaczy urządzeń mobilnych.

W większości nowoczesnych telefonów można swobodnie przeglądać strony internetowe, co ułatwiają większe niż w telefonach poprzedniej generacji ekrany dotykowe czy wygodne klawiatury QWERTY. Mamy zatem odpowiednie zaplecze technologiczne, ale co z kontentem? Niestety, stron tworzonych pod tradycyjne komputery nie da się w prosty sposób przeglądać na urządzeniach mobilnych.
Główny problem stanowi różnica pomiędzy rozmiarem ekranu smartfona czy tabletu, a tradycyjnego monitora. Ta niezgodność powoduje wiele komplikacji: nieprawidłowe wyświetlanie strony na wyświetlaczu telefonu, utrudnioną nawigację po serwisie, zbyt dużą liczbę informacji na stronie... W konsekwencji staje przed nami zniechęcony i zirytowany użytkownik zmuszony do ciągłego powiększania i przesuwania strony.

- Puk, puk. - Kto tam? - Tu użytkownik.

Poznaj swojego użytkownika

Użytkownik czyli kto? Dopiero kiedy odpowiemy sobie na to pytanie, będziemy mogli podjąć kroki, aby stworzyć najlepszą dla niego stronę. Czy korzysta z urządzenia mobilnego rozciągnięty na kanapie? A może na stojaka, kiedy mu się śpieszy? Na jakich informacjach i grafikach mu zależy, jakie sekcje najczęściej odwiedza? Jest kilka uniwersalnych zasad, które mogą się sprawdzić przy tworzeniu stron mobilnych przyjaznych użytkownikowi. Każdemu.

Mało i treściwie

Treść strony powinna zawierać tylko te najistotniejsze, z punktu widzenia odbiorcy, informacje ze strony tradycyjnej. Strony mobilne ze względu na rozmiary ekranów, na których się wyświetlają, mają pewne ograniczenia. Dlatego serwowane treści powinny być konkretne, a samo dotarcie do nich powinno zajmować jak najmniej czasu. Zaleca się, aby nagłówki nie zawierały więcej niż trzy, cztery wyrazy. Zasada „maksimum treści, minimum tekstu" dotyczy również artykułów. Im mniej powierzchni strony zostanie zajęte, tym więcej miejsca pozostaje na inne kluczowe dla strony elementy, np. box logowania, panel z polecanymi pozycjami itd.

Szybko i sprawnie

W czasach, w których ludzie jedzą szybko, przemieszczają się szybko oczekują również szybkiej obsługi. Nie tylko w realu, ale również w wirtualnej rzeczywistości. Urządzenia mobilne są furtką do stałego dostępu do zasobów sieci, takich jak skrzynka mailowa czy strony internetowe właśnie. Jak pokazują badania przeprowadzone przez Compuware, 60% internautów nie czeka na załadowanie strony więcej niż 3 sekundy. W sytuacji, kiedy trwa to dłużej, po prostu zamykają stronę szukając informacji gdzie indziej. Konieczne jest więc zmniejszanie elementów graficznych tak, aby strona ładowała się możliwie krótko.

Estetycznie i bezbłędnie

Zmniejszona grafika powinna zostać dostosowana do specyfiki urządzeń mobilnych. Aby wyświetlała się ona poprawnie na wszystkich systemach mobilnych należy unikać formatów, których te nie obsługują. W takiej sytuacji należy odrzucić kreacje flash, które można zastąpić animowanymi gifami. Zaleca się również unikanie ramek oraz JavaScript gdyż mogą one powodować błędy w wyświetlaniu na niektórych urządzeniach. Układ nawigacji strony powinien być możliwie jak najbardziej przejrzysty i uproszczony. Najważniejsze treści - zarówno dla użytkownika, jak i właściciela - powinny znajdować się w górnej części strony, na tzw. pierwszym ekranie. Treść strony powinna być dobrze widoczna bez potrzeby „zoomowania". Wielu ekspertów radzi, aby czcionka miała przynajmniej rozmiar 16 pikseli i była mocno kontrastująca z tłem.

Pod właściwym adresem

Adres i przykłady stron

Jako że strona mobilna jest stroną stawianą od nowa, trzeba zadbać o jej nowy adres. Należy unikać tworzenia strony w podkatalogu głównej domeny. Taka strona ma zbyt długi adres, przez co trudno go zapamiętać i wpisać. Najlepiej w takiej sytuacji wybrać nową domenę lub stworzyć subdomenę w obecnie używanej. Powszechniej stosowane jest to drugie rozwiązanie. Wiąże się to z oszczędnością kosztów takiego procesów oraz łatwością w przekierowaniu użytkowników mobilnych na taką stronę. Przy nazewnictwie nowej domeny najpowszechniejsze jest dodanie pojedynczej litery „m" przed właściwym adresem strony, np. m.pracuj.pl (w wersji tradycyjnej pracuj.pl).

Przykłady

Przykładem dobrze zbudowanej strony mobilnej może być m.chip.pl. Na pierwszym ekranie są widoczne najważniejsze elementy strony - górna belka posiada trzy główne odnośniki (News, Artykuły, Testy), a boczna kolumna jest zaopatrzona w nagłówki najnowszych artykułów. Od razu widać, że strona nie jest przepełniona zbędnymi tekstami. Ładuje się bardzo szybko, a nawigacja jest prosta i przyjemna.
Również mobilna wersja Pulsu Biznesu jest bardzo dobrze przygotowana. Czcionki są dosyć małe, jednak mocno kontrastują z tłem, przez co są przejrzyste i czytelne. Grafiki są pomniejszone i występują tylko przy najważniejszych artykułach. Również same teksty są spójne i nie zawierają niepotrzebnych informacji.

Innym rozwiązaniem na prezentację swojej strony w internecie mobilnym jest responsive design, jednak to już inna historia.

Podsumowanie

Serwisy mobilne nie mogą być prostym przeniesieniem stron desktopowych — różnica rozmiarów ekranów utrudnia nawigację i zniechęca użytkowników. Krótkie nagłówki, konkretne treści i szybkie ładowanie to podstawa. Z badań Compuware wynika, że 60% internautów rezygnuje ze strony, jeśli ta ładuje się dłużej niż 3 sekundy.

Unikać należy formatów flash, ramek i JavaScriptu, a czcionka powinna mieć co najmniej 16 pikseli przy mocnym kontraście. Dla strony mobilnej warto wydzielić subdomenę z literą „m” przed adresem, jak m.chip.pl czy wersja Pulsu Biznesu. Alternatywą pozostaje responsive design.