Jak poprawnie przygotować stronę mobilną?

wtorek, 2018-07-172080Internet, Programowanie

Dawno, dawno temu, minimalna rozdzielczość ekranów powiększała się, dzięki czemu raz zaprojektowana strona internetowa zawsze wyświetlała się poprawnie (pomijając niezwykłe przygody z MSIE). Potem pojawiły się urządzenia mobilne i cały świat stanął na głowie. Do dzisiaj są serwisy, które sobie z tym nie radzą.

Komórka pochodzi z banku zdjęć Fotolia

Jak z mobilkami było kiedyś?

Początkowo pod telefony były przygotowywane specjalne strony i protokół WAP. Wczesne komórki nie miały siły pociągnąć nic bardziej rozbudowanego. Zresztą mało kto z tego korzystał, bo internet komórkowy był wtedy (przynajmniej w Polsce) stosunkowo drogi.

Potem były już zwykłe serwisy w formacie HTML, ale w wersji uproszczonej, bez wodotrysków. Niektóre istnieją do dziś a uruchamia się je z subdomeną „m” np. m.facebook.com. W sumie trochę dziwne, skoro Facebooka na mobilkach przegląda się w specjalnej apce.

Responsywność to świetny wynalazek, ale przez długi czas wielu programistów podchodziło do niej dosyć nieufnie i oferowało jako ekstra płatny dodatek. Na szczęście wkrótce stała się standardem. Obecnie urządzenia mobilne są tak popularne, że Google bardzo zaniża pozycję serwisów, które nie są do nich przystosowane.

Jak jest z mobilkami obecnie?

Z roku na rok coraz więcej stron jest przeglądana na smartfonach, pomijając nieliczne, specjalistyczne serwisy, których charakter wymaga dużego ekranu i mocnego komputera stacjonarnego.

Niektóre serwisy skierowane do młodych ludzi (np. Instagram lub Snapchat) nie mają pełnowartościowej wersji HTML, obsługuje się je przy pomocy aplikacji. Trzeba się nakombinować, żeby dodać zdjęcia do Instagrama bezpośrednio z komputera.

Niestety, wciąż jest bardzo dużo serwisów (tak, w 2017 roku!!!), których przeglądanie na smartfonie to jakaś masakra. Tydzień temu sam musiałem korzystać z takiego i przy okazji wymyśliłem kilka nowych, niecenzuralnych słów.

Warto więc zadbać, żeby ktoś przeglądający naszą stronę na telefonie, nie przechodził tego samego, co ja. Jest to zresztą istotne także dla Google, które mogą bardzo obniżyć pozycję serwisu w wynikach wyszukiwania.

tablet

Tablet pochodzi z banku zdjęć Fotolia

Na co zwrócić uwagę projektując serwis na urządzenia mobilne?

Responsywność czyli dostosowanie szerokości strony do szerokości ekranu. Jak już wspomniałem, dzisiaj to powinien być już standard dla każdego.
Pluginy w JavaScript. Niektóre nie działają na urządzeniach mobilnych, zwłaszcza te bardziej przekombinowane. Zrezygnuj wodotrysków, skup się na poprawnym wyświetlaniu strony.
Zwięzłe, uporządkowane treści. Długie elaboraty źle się czyta (nie tylko na smartfonach), a w autobusie nie ma na to czasu. Ma być krótko i treściwie. Najważniejsze rzeczy umieść na samej górze. Menu zwiń do hamburgera albo przenieś do stopki.
Minimalizm. Na komórkach nie ma miejsca na ozdobny layout i bajery. Content is the King.
Krótki czas ładowania strony i lekkie grafiki. Internet (zwłaszcza mobilny) wciąż nie jest taki szybki, jak się niektórym wydaje. Często też płaci się za ilość pobranych danych. Nie zmusza do pobierania wielkich i ciężkich grafik na prostej stronie.
Odpowiednia wielkość buttonów. Kursorem myszy bez problemu najedzie się na mały link, ale paluchy są na to zbyt wielkie. Nie zmuszaj użytkowników do powiększania ekranu, żeby mogli pacnąć w odpowiednie miejsce.
Formularze. W HTML5 jest wiele dodatkowych znaczników, których siła objawia się właśnie na urządzeniach mobilnych wyświetlając odpowiednio zoptymalizowaną klawiaturę np. dla cyfr będzie to wyłącznie klawiatura numeryczna.
Używaj narzędzi do testowania stron mobilnych, z których dowiesz się, co możesz poprawić w swojej stronie, żeby była jeszcze bardziej przyjazna:
Test your mobile speed
WatchScript - test ładowania www
PageSpeed Tools