Dostosowanie witryny do urządzeń mobilnych – pierwsze kroki

Urządzenia mobilne zmieniają świat. Dziś każdy ma przy sobie smartfona, którego ciągle używa do komunikowania się z innymi i wyszukiwania informacji. W wielu krajach liczba smartfonów przewyższyła liczbę komputerów, dlatego tak ważne jest, aby witryna firmy, która chce być obecna w internecie, była dostosowana do urządzeń mobilnych.

  1. Jeśli nie wiesz, czy Twoja witryna jest przyjazna dla użytkowników takich urządzeń, wykonaj test optymalizacji mobilnej.
  2. Jeśli tworzysz witrynę przy użyciu oprogramowania do zarządzania treścią (CMS) – na przykład WordPress – przeczytaj nasze wskazówki na temat dostosowywania oprogramowania witryny.
  3. Jeśli masz odpowiednie doświadczenie techniczne i samodzielnie tworzysz witrynę, wybierz konfigurację mobilną.

Dlaczego witryna powinna być dostosowana do komórek?

Porównanie witryny trudnej do przeglądania i używania na urządzeniu mobilnym z jej wersją dostosowaną do komórek

Witryna niedostosowana do komórek może się na nich nieprawidłowo wyświetlać. Aby odczytać jej treść, użytkownicy muszą powiększać i pomniejszać ją palcami. Bywa to frustrujące i w wielu przypadkach powoduje rezygnację z przeglądania witryny. Za to wersja dostosowana do komórek jest czytelna i wygodna w obsłudze.

W USA 94% użytkowników smartfonów szuka lokalnych informacji za pomocą telefonu. Co ciekawe, 77% wyszukiwań na urządzeniach mobilnych ma miejsce w domu lub w pracy, czyli w miejscach, gdzie zwykle dostępne są komputery.

Uwzględnianie urządzeń mobilnych ma ogromne znaczenie dla Twojej firmy, niezależnie od tego, czy prowadzisz bloga o ulubionej drużynie sportowej, pracujesz nad stroną lokalnego teatru czy coś sprzedajesz. Zadbaj o to, aby użytkownicy mogli komfortowo korzystać z Twojej witryny na komórkach.

Od czego zacząć?

Nakład pracy potrzebny, aby dostosować witrynę do wymagań użytkowników urządzeń mobilnych, zależy od Twoich możliwości w zakresie programowania, doświadczenia i przyjętego modelu biznesowego. Oto przykład przekształcenia strony w wersji komputerowej na odpowiednią dla urządzeń mobilnych:

Jak zaprojektować witrynę na komputery, aby działała na urządzeniach mobilnych

W ujęciu najbardziej ogólnym przeniesienie witryny komputerowej do środowiska urządzeń mobilnych oznacza przeorganizowanie istniejących sekcji zawartości (tych z wersji komputerowej) zgodnie z wymogami wyświetlania na ekranach komórek. Więcej informacji na temat technicznej strony tworzenia witryny w wersji na urządzenia mobilne znajdziesz w omówieniu opcji konfiguracji w ramach SEO witryn mobilnych.

Ile kosztuje utworzenie witryny na urządzenia mobilne?

To zależy od kilku czynników. Na przykład:

  • Przejście na wersję na urządzenia mobilne może nic nie kosztować, jeśli możesz wybrać elastyczny szablon lub motyw witryny. Elastyczny szablon lub motyw dostosowuje wyświetlaną zawartość do wymagań użytkownika, niezależnie od tego, czy korzysta on z komputera, tabletu czy komórki.
  • Przejście na wersję mobilną może odbyć się bezpłatnie, jeśli dysponujesz odpowiednimi umiejętnościami technicznymi, aby stworzyć witrynę na urządzenia mobilne. Przejrzyj materiały dotyczące podstaw tworzenia witryn.
  • Przejście na wersję mobilną pochłonie prawdopodobnie więcej czasu i pieniędzy, jeśli będzie wymagało zatrudnienia programisty. Do tego w przypadku starszych witryn nowy programista może zaproponować wykonanie całej pracy od zera (czyli zapłacisz za tworzenie kompletnej witryny). Wobec dostępności nowych technik programowania oraz motywów (lub szablonów stron) utworzenie witryny od nowa może być po prostu efektywniejsze niż jej modyfikowanie. Dotyczy to szczególnie witryn korzystających z przestarzałych platform handlu elektronicznego.

Dobra wiadomość jest taka, że jeśli zaczynasz od zera, może istnieć gotowy szablon lub motyw, którego możesz użyć. Być może da się wykorzystać istniejącą zawartość, co pozwoli zaoszczędzić czas i pieniądze.

Jakie są 3 najważniejsze kwestie, które muszę uwzględnić, tworząc witrynę na urządzenia mobilne?

1. Ułatw życie klientom.

Pomóż użytkownikom Twojej witryny realizować cele, które sobie założyli. Być może chcą poczytać Twoje posty na blogu, znaleźć adres Twojej restauracji lub poznać Twoją opinię o danym produkcie. Zaprojektuj witrynę tak, aby ułatwić klientom jej przeglądanie i wykonywanie w niej różnych czynności.

Potencjalne kroki na ścieżce klienta

Określ potencjalne etapy wizyty klienta i upewnij się, że można je łatwo zrealizować na urządzeniu mobilnym. Spróbuj wszystko uprościć i zmniejszyć liczbę działań angażujących użytkownika. W tym przykładzie: (1) klient chce kupić lampę – klika znalezioną witrynę, (2) przegląda ofertę lamp i (3) kupuje wybraną lampę.

2. Zmierz efektywność witryny, sprawdzając, jak łatwo użytkownicy mogą w niej wykonać najczęstsze czynności.

Użytkownik patrzący na ekran urządzenia mobilnego

Dostosowywanie witryny do urządzeń mobilnych wymaga określenia priorytetów. Na początek zastanów się, które działania będą najważniejsze dla użytkowników Twojej witryny mobilnej lub najczęściej przez nich wykonywane. Zapewnienie obsługi tych czynności jest niezwykle istotne – dlatego właśnie możliwość wykonania pewnych działań będzie najlepszym sprawdzianem dostosowania Twojej witryny do urządzeń mobilnych. Dostępne są rozwiązania, które umożliwiają stworzenie witryny z założenia łatwej w obsłudze. Pamiętaj o spójności interfejsu i zapewnieniu jednolitej łatwości obsługi witryny na różnych platformach.

„Kupujący, którzy korzystają z urządzeń mobilnych, najwyżej cenią sobie łatwość obsługi witryn handlowych. Stwierdziło tak 48% respondentów, którzy uznali tę cechę za najważniejszy wyznacznik jakości odwiedzanych witryn mobilnych” – donosi MediaPost.

3. Wybierz szablon, motyw lub projekt witryny mobilnej przystosowany do różnych urządzeń (np. postaw na elastyczne projektowanie witryn).

Elastyczne projektowanie witryn (responsive web design, RWD) oznacza, że strony korzystają z tego samego adresu URL i tego samego kodu niezależnie od tego, czy użytkownik używa komputera, tabletu czy komórki. Tylko zawartość wyświetla się z uwzględnieniem rozmiarów ekranu, czyli elastycznie. Google zdecydowanie zaleca projektowanie witryn metodą RWD. Jedną z jej zalet jest to, że wystarczy Ci tylko jedna wersja witryny. Nie musisz mieć wersji komputerowej www.example.com oraz mobilnej m.example.com. Zajmujesz się tylko www.example.com, uwzględniając zarówno użytkowników komputerów, jak i urządzeń mobilnych.

Witryna działająca dobrze w wersji na komputery i urządzenia mobilne

Witryna elastyczna dostosowuje wyświetlaną treść do różnych rozmiarów ekranu, korzystając z tego samego adresu URL i kodu. Wszystkie 3 urządzenia powyżej korzystają z www.example.com (a nie z wersji na komórki m.example.com ani na tablety t.example.com).

Elastyczne projektowanie witryn pozwoliło firmie Baines & Ernst zoptymalizować sposób obsługi witryny na urządzeniach o różnych rozmiarach ekranu, eliminując konieczność tworzenia wielu wersji witryny. W ramach pojedynczej wizyty w witrynie użytkownicy zaczęli odwiedzać o 11% stron więcej, a współczynnik konwersji w przypadku klientów z urządzeniami mobilnymi wzrósł o 51%”.

Konwersja ma miejsce, gdy klient wykonuje wybrane działanie, na przykład kupuje produkt, dzwoni do firmy lub rejestruje się, aby otrzymywać newsletter.

Szczegółowe informacje na temat wdrażania elastycznie projektowanych witryn znajdziesz w Podstawach tworzenia witryn. Argumenty za różnymi wdrożeniami witryn na komórki, tablety i komputery oraz argumenty przeciwne znajdziesz w artykule o tworzeniu witryn dla klientów korzystających z różnych urządzeń.

Jakie są 3 najczęstsze błędy, których mam unikać?

  1. Nie zapominaj o klientach korzystających z urządzeń mobilnych. Pamiętaj, że dobra witryna mobilna jest przede wszystkim użyteczna. Jej użytkownicy nie mają problemów z realizacją swoich zamierzeń – przeczytaniem wybranego artykułu, sprawdzeniem adresu sklepu itd. Unikaj tworzenia wyłącznie witryny w formacie mobilnym, która nie zawiera wszystkich funkcji. Zadbaj raczej o to, aby witryna była dostosowana do urządzeń mobilnych, czyli naprawdę użyteczna i zoptymalizowana pod kątem działań najczęściej wykonywanych przez użytkowników tych urządzeń.
  2. Nie wdrażaj witryny mobilnej poza lokalizacją wersji na komputery – w innej domenie lub subdomenie ani w innym podkatalogu. Google obsługuje różne konfiguracje witryn mobilnych, jednak utworzenie osobnych adresów URL dla wersji na urządzenia mobilne, a potem ich utrzymywanie i aktualizowanie, wymaga dużego nakładu pracy i może powodować problemy techniczne. Tymczasem cały proces łatwo jest uprościć, stosując elastyczne projektowanie witryn (RWD) oraz udostępniając zawartość na komputery i urządzenia mobilne pod tym samym adresem URL. Zalecamy elastyczne projektowanie witryn.
  3. Nie działaj w izolacji – szukaj inspiracji w otoczeniu. Obejrzyj inne witryny o podobnej tematyce lub należące do konkurencji i spróbuj zaczerpnąć z nich pomysły oraz sprawdzone metody. Prawdopodobnie nie jesteś pierwszą osobą w branży, która tworzy mobilną wersję witryny, możesz więc uczyć się od swoich poprzedników.