Chociaż liczba stron bez optymalizacji mobilnej kurczy się, nadal istnieją takie, które są przeznaczone wyłącznie na komputery stacjonarne. Niestety, poprzednia usługa internetowa „mobilizer” Google została wycofana. Duchowym następcą usługi jest Google Weblight, zaprojektowany z myślą o optymalizacji pod kątem wolnych połączeń, a nie przeglądaniu witryn pod kątem urządzeń mobilnych. Poza usługą Google istnieje szereg praktyk i narzędzi, które należy wziąć pod uwagę podczas tworzenia witryny z myślą o urządzeniach mobilnych.
Kroki
Część 1 z 2: Eksperymentowanie z Google Weblight
Krok 1. Przeanalizuj, jak działa Weblight
Weblight to algorytm stworzony przez Google, aby zapewnić użytkownikom szybsze i lżejsze ładowanie strony w złych warunkach sieciowych. Oznacza to, że Weblight nie ma interfejsu użytkownika i działa na zapleczu. Strony są pozbawione bardziej złożonych elementów, co zapewnia uproszczone, lekkie środowisko, a nie wyraźnie zoptymalizowane pod kątem platformy mobilnej.
Krok 2. Przetestuj zmiany w witrynie za pomocą Weblight
Na urządzeniu przenośnym po prostu dodaj pełny adres URL witryny na końcu adresu weblight (np. jeśli Twoja witryna to „mojastrona.com”, wpisz https://googleweblight.com/?lite_url=https://mojastrona.com). Strona załaduje swoją uproszczoną, ale funkcjonalną wersję. Po usunięciu elementów niektóre strony mogą wyglądać znacznie lepiej na ekranach urządzeń mobilnych.
Krok 3. Rozpoznaj ograniczenia
Pamiętaj, że nie jest to jawne narzędzie do konwersji przeznaczone do interakcji z użytkownikiem. Podczas gdy ręczne wejście na stronę może być wykorzystane w mgnieniu oka, Weblight jest zaprojektowany z myślą o szybkości, a nie użyteczności.
Część 2 z 2: Projektowanie pod kątem kompatybilności mobilnej
Krok 1. Pamiętaj o ograniczeniach urządzeń mobilnych
Urządzenia mobilne mają kilka cech, które odróżniają je od ich stacjonarnych odpowiedników. Te podstawowe funkcje powinny być głównymi względami podczas tworzenia witryny do użytku mobilnego.
- Małe ekrany i pionowość: chociaż rozdzielczości ekranu na urządzeniach mobilnych stale się poprawiają, rozmiar i współczynnik kształtu pozostają problemem przy projektowaniu witryny. Projektowanie witryny w układzie jednokolumnowym jest najlepsze w przypadku telefonów (tablety często mogą bez problemu korzystać z witryn na komputery).
- Interfejsy dotykowe: Elementy strony należy umieszczać z myślą o wielkości palca. Elementy, które wykorzystują kursor myszy, należy zminimalizować lub przeprojektować pod kątem dotyku (np. menu rozwijane).
- Prędkości danych: Jedną z największych zalet urządzeń mobilnych jest korzystanie z urządzeń poza zasięgiem Wi-Fi, ale połączenia danych są zazwyczaj wolniejsze i mniej niezawodne. Interfejsy użytkownika (UI) powinny pozostać proste, a treść powinna być widoczna i dostępna. Zbyt duży bałagan spowoduje spowolnienie czasu ładowania i utrudni nawigację.
Krok 2. Użyj usługi systemu zarządzania treścią (CMS)
Dla programistów z mniejszymi zasobami korzystanie z usług CMS, takich jak Wordpress lub Squarespace, jest świetnym rozwiązaniem dla niedrogiego, przyjaznego dla użytkownika projektowania mobilnego. Motywy wykorzystujące responsywne projektowanie stron internetowych zapewnią najłatwiejszy szablon dla witryny mobilnej.
Responsywne projektowanie stron internetowych to teoria projektowania stron internetowych, która promuje korzystanie z elementów projektowania płynnego, aby umożliwić płynne przejście projektu i użyteczności między platformami
Krok 3. Przetestuj ekrany urządzeń mobilnych za pomocą oprogramowania komputerowego
Istnieje wiele darmowych aplikacji internetowych, które pozwalają na emulację urządzeń mobilnych w celu przetestowania estetyki i funkcjonalności strony. Korzystanie z tych narzędzi jest tak proste, jak wybranie żądanego urządzenia testowego, a następnie wejście na docelową stronę internetową w celu podglądu. Większość będzie zawierać narzędzia do zmiennych, takich jak orientacja ekranu, gęstość pikseli, a nawet wybór przeglądarki. Kilka popularnych przykładów to:
- Emulator trybu urządzenia z Chrome
- mobilephoneemulator.com
- screenfly (podzbiór quirktools)
- mobiletest.me (płatne członkostwo)
