Sprawdzone metody dotyczące aplikacji internetowych

Projektowanie stron i aplikacji na urządzenia mobilne wiąże się z innymi wyzwaniami niż tworzenie stron internetowych na potrzeby przeglądarek na komputerach. Poniższe metody pomogą Ci stworzyć najskuteczniejszą aplikację internetową na Androida i inne urządzenia mobilne.

  1. Przekierowuj urządzenia mobilne do dedykowanej mobilnej wersji swojej witryny. Możesz to zrobić na kilka sposobów, korzystając z przekierowań po stronie serwera. Jedną z popularnych metod jest „wsłuchiwanie” się w ciąg znaków klienta użytkownika dostarczony przez przeglądarkę. Aby sprawdzić, czy wyświetlać witrynę w wersji mobilnej, w kliencie użytkownika znajdź ciąg znaków „mobile”.
  2. W przypadku urządzeń mobilnych używaj HTML5. HTML5 to najpopularniejszy język znaczników w witrynach mobilnych. Ten standard zachęca do programowania głównie na urządzeniach mobilnych, by zapewnić, że witryny będą działać na różnych urządzeniach. W przeciwieństwie do poprzednich języków stron HTML5 używa prostszych deklaracji <DOCTYPE> i charset: 
    <!DOCTYPE html>
...
<meta charset="UTF-8">
  3. Używaj metadanych widocznego obszaru, aby odpowiednio zmieniać rozmiar strony internetowej. W dokumencie <head> podaj metadane określające sposób, w jaki widoczny obszar przeglądarki ma renderować Twoją stronę internetową. Na przykład metadane widocznego obszaru mogą określać wysokość i szerokość widocznego obszaru w przeglądarce, początkową skalę strony i docelowe gęstość ekranu.

    Poniższy przykład pokazuje, jak ustawić metadane widocznego obszaru:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    Więcej informacji o używaniu metadanych widocznego obszaru na urządzeniach z Androidem znajdziesz w artykule Obsługa różnych ekranów w aplikacjach internetowych.

  4. Użyj pionowego układu liniowego. Dzięki temu użytkownik nie musi przewijać strony w lewo i w prawo. Przewijanie w górę i w dół jest dla użytkownika łatwiejsze i prostsze.
  5. Ustaw wysokość i szerokość układu na match_parent. Ustawienie wysokości i szerokości obiektu WebView na match_parent zapewnia poprawny rozmiar widoków w aplikacji. Odradzamy ustawianie wysokości na wrap_content, ponieważ powoduje to nieprawidłowe ustawienie rozmiaru. Podobnie ustawienie szerokości układu na wrap_content nie jest obsługiwane i sprawia, że WebView korzysta z szerokości swojego elementu nadrzędnego. Z tego powodu musisz się też upewnić, że żaden z nadrzędnych obiektów układu obiektu WebView nie ma wysokości ani szerokości ustawionego na wrap_content.
  6. Unikaj wielu próśb o przesłanie plików. Urządzenia mobilne zwykle mają wolniejsze połączenie niż komputery, dlatego zadbaj o to, aby strona wczytywała się tak szybko, jak to możliwe. Jednym ze sposobów przyspieszenia tego działania jest unikanie wczytywania w <head> dodatkowych plików, takich jak arkusze stylów i pliki skryptów. Możesz też przeprowadzić analizę witryny pod kątem urządzeń mobilnych za pomocą narzędzia Google PageSpeed Insights, aby uzyskać szczegółowe sugestie optymalizacji dotyczące Twojej aplikacji.

Dodatkowe materiały