Wersja mobilna strony - na co zwrócić uwagę

Poprzedni artykuł o technologiach mobilnych pokazuje szybkość wzrostu rynku mobilnego na świecie oraz że wkrótce może to być główne źródło generowane ruchu w Internecie i dlatego warto już teraz mieć tego świadomość aby nie obudzić się z ręką w nocniku.

Oprócz oczywistych korzyści jakie daje dostępność treści na urządzeniach mobilnych, posiadanie zoptymalizowanych serwisów daje również korzyści z punktu widzenia wyszukiwarek, które dodatkowo nagradzają za dostępność treści w urządzeniach mobilnych.

Bez względu na to czy przygotujesz dedykowaną wersję strony lub wersję opartą o szablony Responsive Design - pamiętaj o przestrzeganiu kilku ważnych reguł - ważnych z punktu widzenia użytkowników mobilnych.

Poniżej kilka porad co zrobić aby strona internetowa była bardziej użyteczna dla urządzeń mobilnych

1. Dostępność - upewnij się, że treści są dostępne na urządzeniach mobilnych - obiekty Flash, ramki, pliki PNG-24 oraz wiele różnych plug-in'ów może nie działać na wszystkich telefonach czy tabletach (np. Flash nie działa na urządzeniach marki Apple).
   
   Użyj alternatywnych rozwiązań w postaci HTML 5, jQuerry, pliki w formatach Gif i Jpg.

2. Szybkość - upewnij się, że strony odpowiednio szybko się ładują a ich wielkość nie przekracza 20Kb. Strony powinny ładować się w czasie nie dłuższym niż 5 sekund.
   
   Aby zwiększyć szybkość ładowania ogranicz ilość skryptów, użyj miniatur zoptymalizowanych dla urządzeń mobilnych, użyj obrazków jako sprites, używaj CSS zamiast grafik. Użyj narzędzi W3C Mobile OK, mobiReady, Mobitest aby sprawdzić szybkość wersji mobilnych.

3. Kolejność treści - dopasuj kolejność prezentowanej treści tak aby najważniejsze informacje były prezentowane na samej górze pamiętając, że użytkownicy mobilni są bardziej nakierowani na szybkie osiągnięcie celu wizyty. Dlatego przyciski / linki wzywające do akcji tzw. Call-to-Action powinny znajdować się maksymalnie wysoko, w pierwszych 100px obszaru.

4. Celność przekazu - dopasuj treści pod kątem jakości przekazu - skróć nagłówki stron do 3 lub 4-wyrazów.

5. Czytelność - treść powinna być maksymalnie czytelna - pamiętaj o odpowiednim kontraście i wielkości czcionki, która dla urządzeń mobilnych powinna mieć ok 16px.

6. Bezpośrednie połączenia - użyj linków z atrybutem "clicktocall" umożliwiających bezpośrednie wykonanie połączenia po kliknięciu w numer telefonu, co znacznie zwiększy użyteczność korzystania.

   Dodatkowo:

   1. zawsze używaj prefixów z numerem kierunkowym kraju np. +48...

   2. używaj ikony telefonu dla szybszych skojarzeń

   3. używaj tekstowych linków numerów telefonów aby można je było zapisać i przekazać dalej

   4. podawaj godziny pracy blisko numerów telefonów

   5. dla tekstu używaj innych kolorów aby numer się bardziej wyróżniał.

7. Odpowiednie wielkości - używaj odpowiednio dużych ikon i buttonów aby nie wprowadzać użytkowników w kompleks wielkich palców - wszystkie elementy serwisu powinny być klikalne bez konieczności zoom'owania.
   
   Kilka porad:

   1. dodaj padding dla linków np. 0,85em lub 85% dla teksu

   2. zapewnij klikalność dla obrazków i ikon

   3. użyj marginesów (ujemnej spacji) pomiędzy obszarami klikalnymi aby uniknąć przypadkowych kliknięć

   4. użyj plug-in'ów jQuerry do obsługi gestów dotyku (np. Flexslider, Photoswipe).

8. Formularze - skróć formularze do minimum, nigdy nie wstawiaj pól nieobowiązkowych, które i tak będę pominięte przez użytkowników. Jeśli to możliwe użyj formularzy w HTML5.