Użytkownicy smartfonów korzystają z nich w różny sposób. Oprócz prowadzenia rozmów, wysyłania wiadomości SMS oraz poczty elektronicznej, aktywności w sieciach społecznościowych za pomocą wielu aplikacji łączą się ze stronami w internecie przez przeglądarkę www. Jeśli strona www nie jest napisana pod kątem urządzeń przenośnych, takich jak smartfony, firma, która prowadzi sprzedaż online, prawdopodobnie traci sporą część potencjalnych zakupów i klientów. Aby określić, co naprawdę znaczy „optymalizacja dla urządzeń przenośnych”, eksperci zajmujący się projektowaniem i tworzeniem aplikacji wzięli udział w ankiecie organizowanej przez amerykańskie wydanie magazynu CIO.

1 - Strona odpowiednia dla każdego urządzenia

Gdy mówimy o elastyczności konstrukcji strony, nie można zapominać o tym, by wybrać właściwy framework. Copley Broer, CEO firmy LandlordStation, która tworzy oprogramowanie do zarządzania nieruchomościami, mówi: „Użyj frameworku, który jest odpowiedni. Kilka z nich jest łatwo dostępnych – my używamy Bootstrap. Niektóre z nich są dostępne w modelu open source, są dobrze udokumentowane i łatwe w implementacji”. Frameworki są łatwym w użyciu narzędziem, za którego pomocą można ustawić elementy układu strony w siatce, a następnie przemieszczać tę siatkę zależnie od rozdzielczości i rozmiaru ekranu. Kevin Janosz, COO agencji reklamowej RITTA, wyjaśnia: „Zunifikowane podejście do tworzenia stron webowych umożliwia wytworzenie podobnego wrażenia użytkownika niezależnie od tego, w jaki sposób on z tej strony korzysta (czy z klasycznego komputera, z tabletu czy smartfona). W ten sposób można też skonsolidować stronę, dzięki czemu nie potrzeba osobnego adresu URL dla wersji mobilnej, co przynosi korzyści także w aspekcje optymalizacji treści pod kątem wyszukiwarek”.

Zobacz również:

• Zainfekowany smartfon - przedstawiamy najpopularniejsze objawy
• Najlepsze MDM-y do ochrony urządzeń mobilnych na 2023

2 - Jednym palcem

Strona przeznaczona do smartfonów musi uwzględniać szczególne wymagania związane z nawigacją. Marc Weisinger, dyrektor marketingu w firmie Elite SEM, wyjaśnia: „Należy się upewnić, że po całej stronie można się poruszać za pomocą jednego palca, bez gestów powiększenia, które wymagałyby użycia dwóch palców. Jest to jedna z najważniejszych wskazówek związanych z opracowaniem stron pod kątem smartfonów – strona musi być czytelna bez konieczności użycia drugiej ręki. Jeśli trzeba powiększać za pomocą znanego gestu ‘pinch to zoom‘, to znaczy, że treść jest prawdopodobnie zbyt mała albo nieoptymalna dla urządzenia, z którego jest przeglądana”.

Należy przy tym pamiętać, że większość użytkowników mobilnych łączy się z tą stroną z urządzenia z dotykowym ekranem, a zatem należy się upewnić, że wszystkie przyciski oraz menu strony są wystarczająco duże, by komfortowo można było z nich skorzystać za pomocą nawet dużego palca. Dean Hume, CTO firmy Hire Space, mówi: „Zbyt często strony przygotowywane pod kątem urządzeń mobilnych po prostu przeskalowują treść za pomocą CSS i nie biorą pod uwagę faktu, że wybieranie niewielkich linków palcem powoduje błędy – użytkownik wybierze nie ten link, który chciał”.

Typowy palec ma średnicę 15 do 20 mm, co przekłada się na 45 do 57 pikseli, a zatem najprostsza z reguł mówi, że przyciski lub elementy wyboru czy nawigacji muszą mieć rozmiar właśnie 45 pikseli. Dzięki temu łatwiej będzie użytkownikowi wybrać żądany cel – link lub element nawigacyjny.

3 - Prosty projekt

Prosty projekt sprawia dobre wrażenie. Michael LaVista, CEO firmy Caxy Interactive, zajmującej się projektowaniem i tworzeniem stron webowych, mówi: „Firma ma tylko kilka sekund, by przekonać internautę do tego, kim jest. Jest to prawdą w przypadku każdego projektu strony, ale staje się szczególnie ważne przy stronach projektowanych pod kątem niewielkich urządzeń”.

Wprowadzanie zbyt wielu elementów, takich jak grafika, obiekty treści czy wideo, sprawia, że strona nie będzie się już tak szybko ładować, ponadto nadmiar formy odwraca uwagę od samego przekazu. Jeśli na stronie będą używane obrazki, należy dostarczyć je we właściwym rozmiarze, co skróci czas załadowania strony.

4 - Krótka i łatwa w odbiorze treść

Niekiedy twórcy stron tak bardzo lubią swoje dzieło, że umieszczają w nim zbyt wiele treści. Na stronach mobilnych należy koniecznie zadbać o zwięzłość wypowiedzi. Yaniv Masjedi z firmy Nextiva wyjaśnia: „Nie można przesadzać z tekstem. Ekran smartfona jest o wiele mniejszy niż komputera typu desktop, a zatem należy minimalizować ilość tekstu na mobilnej stronie. Użytkowicy urządzeń przenośnych są zainteresowani szybkim przewijaniem, a zatem należy umieścić tylko esencję treści, by utrzymać uwagę czytającego”. Na zjawisko przewijania treści i skrócenia kontaktu ze stroną wskazuje wielu ekspertów.

5 - Jedna ikonka to wiele słów

Zamiast przycisków z tekstem warto korzystać z ogólnie przyjętych ikon. James Ramsey, CEO agencji kreacji treści Fiddlefly, uzupełnia: „Aby strona nie wyglądała na zabałaganioną, trzeba użyć przyjętych powszechnie znaczników mobilnych, czyli ikon. Zamiast komunikatów słownych, takich jak 'wybierz, by zadzwonić‘, warto użyć ikony telefonu, sieci społecznościowych lub menu. Podobne symbole wskazują, że strona została zaprojektowana pod kątem urządzeń mobilnych”.

6 - Przyspiesz stronę – optymalizuj obrazki

Łącza dostępowe w urządzeniach mobilnych są o wiele wolniejsze niż w urządzeniach stacjonarnych. Mimo reklam porównujących łączność LTE ze starymi łączami DSL nadal urządzenia mobilne korzystają z wolniejszych łączy, charakteryzujących się nie tylko węższym pasmem, ale także większymi opóźnieniami. Oznacza to, że strona mobilna musi być dostosowana do wolniejszych łączy. Uruchomienie strony, która wymaga załadowania wielu megabajtów do wyświetlenia prostej informacji, mija się z celem, zwłaszcza gdy użytkownicy płacą za transfer danych w sieciach komórkowych, a na terenie całego kraju nadal dominuje zasięg technologii EDGE (poniżej 300 kbit/s) i 3G.

Jay Melone, CEO agencji New Haircut, zajmującej się projektowaniem stron www, wyjaśnia: „Wszystkie multimedia, z których korzysta się na desktopach, należy przeskalować do mniejszej rozdzielczości. Należy także rozważyć wymianę ciężkich bibliotek JavaScript, takich jak jQuery Mobile na osobny JavaScript”.

Przy projektowaniu stron należy uwzględnić fragmentację – rozdzielczość ekranu w telefonach waha się od 240x320 aż do 2560x1440, a nawet jeszcze wyżej. Projekt musi być przygotowany także dla takich urządzeń – dostosowanie rozmiarów grafiki umożliwi radykalne oszczędności pasma, przyspieszy ładowanie strony i poprawi wrażenie użytkownika.