Pierwsze kroki

Jakie są trzy 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. Abhi Dhar, wiceprezes i dyrektor ds. technicznych w handlu elektronicznym w firmie Walgreens, twierdzi: „Dostosowujemy się do wymagań urządzeń mobilnych w jednym celu: by ułatwić życie naszym klientom”.

Zaprojektuj witrynę tak, by ułatwić klientom wykonywanie najczęstszych czynności: od określenia zadania, poprzez wizytę w witrynie, aż po realizację pomysłu.

Określ potencjalne etapy wizyty klienta i upewnij się, że łatwo można je 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

Dostosowywanie witryny do urządzeń mobilnych wymaga określenia priorytetów. Na początek zastanów się, które działania użytkowników Twojej witryny mobilnej będą najważniejsze lub najczęściej wykonywane. Zapewnienie obsługi tych czynności ma niezwykle istotne znaczenie – 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) 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 w sposób elastyczny. Jedną z jego zalet jest to, że utrzymujesz tylko jedną wersję witryny, a nie dwie (czyli nie musisz dbać o wersję komputerową www.example.com oraz mobilną m.example.com; zajmujesz się tylko www.example.com, uwzględniając użytkowników zarówno komputerów, jak i komórek).

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

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

„Konwersja” ma miejsce, gdy klient wykonuje pożądane działanie, na przykład kupuje produkt, dzwoni do firmy lub rejestruje się, by otrzymywać newsletter.

Szczegółowe informacje na temat wdrażania elastycznie projektowanych witryn znajdziesz w materiałach dla programistów w Podstawach projektowania witryn. Argumenty za i przeciw różnym wdrożeniom witryn na komórki, tablety i komputery znajdziesz w artykule o tworzeniu witryn dla klientów korzystających z różnych urządzeń.

Jakich najpowszechniejszych błędów mam unikać?

Błąd 1. Zapominanie 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. Nie daj się złapać w pułapkę stworzenia witryny, która będzie tylko sformatowana pod kątem urządzeń mobilnych (czyli będzie się na nich ładnie prezentować). Grozi to utratą różnych przydatnych funkcji. Zadbaj raczej o to, by witryna była przyjazna dla urządzeń mobilnych, czyli naprawdę użyteczna i zoptymalizowana pod kątem działań najczęściej wykonywanych przez gości odwiedzających ją z komórek.

Błąd 2. Wdrożenie wersji mobilnej w innej domenie, poddomenie lub podkatalogu niż wersji komputerowej

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, a ponadto stanowi potencjalne źródło problemów technicznych. Tymczasem cały proces łatwo jest uprościć, stosując elastyczne projektowanie witryn i udostępniając zawartość na komputery i urządzenia mobilne pod tym samym adresem URL. Elastyczne projektowanie witryn to konfiguracja, którą zalecamy.

Błąd 3. Działanie na własną rękę zamiast poszukiwania inspiracji w otoczeniu

Obejrzyj inne witryny, które mają podobną tematykę lub należą do konkurencji, i spróbuj zaczerpnąć z nich inspirację 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. Mnóstwo pomysłów znajdziesz też na stronach The Mobile Playbook (Poradnik na temat stron mobilnych) i Google Multi-Screen Success Stories (Historie sukcesu rozwiązań na wiele urządzeń opowiedziane przez Google). Artykuły dostępne są w języku angielskim.

O czym mam pamiętać przy współpracy z deweloperem?

Jeśli chcesz, by współpraca z deweloperem podczas tworzenia witryny dostosowanej do urządzeń mobilnych przyniosła dobry efekt, pamiętaj o poniższych wskazówkach.

1. Poproś dewelopera o referencje i portfolio zrealizowanych projektów witryn mobilnych

Zapytaj dewelopera, czy ma doświadczenie w elastycznym projektowaniu witryn. Jeśli Twoja witryna działa wyłącznie w wersji komputerowej, dowiedz się, czy deweloper przekształcał już taką witrynę na wersję elastyczną. Obejrzyj inne witryny, nad którymi pracował. Porozmawiaj z osobami, które wystawiły mu referencje, a także z poprzednimi klientami, na temat jakości współpracy. Portfolio dewelopera możesz sprawdzić przy użyciu narzędzi Google takich jak PageSpeed Insights. PageSpeed Insights wskaże elementy spowalniające działanie stron i utrudniające ich obsługę.

Strona Podstawy tworzenia witryn spełnia wymagania PageSpeed Insights co do szybkości działania i łatwości obsługi witryn dostosowanych do urządzeń mobilnych.

2. Upewnij się, że deweloper rozumie wymagania Twoich klientów mobilnych

Opowiedz deweloperowi o swojej firmie i wskaż najczęściej używane elementy witryny, które chcesz zoptymalizować w wersji mobilnej. Upewnij się, że powstanie witryna mobilna obsługująca funkcje, których potrzebują Twoi klienci.

3. Poproś dewelopera, by zobowiązał się do zadbania o określoną szybkość działania stron

Nie pozwól, by klienci musieli długo czekać na wczytanie się stron w przeglądarkach. Zapytaj dewelopera, czy zna PageSpeed Insights (narzędzie wspomniane powyżej) i techniki wspomagające szybsze ładowanie się stron. W umowie możesz ująć zapis o „renderowaniu” stron z szybkością równą wynikom konkurencji w testach z WebPagetest. Jeśli zbyt trudno Ci to osiągnąć, postaraj się o zobowiązanie do zdania testów PageSpeed Insights z zielonym znacznikiem wskazującym brak elementów wymagających poprawienia. Jeśli strony nie zaliczą tych testów, musisz wraz z deweloperem oszacować koszty i potencjalne korzyści związane z usunięciem problemów. Więcej informacji o szybkości wczytywania witryn mobilnych znajdziesz w filmie „Quick fixes in mobile website performance” (Jak szybko poprawić działanie witryn komórkowych – w języku angielskim).

4. Wymagaj od dewelopera zainstalowania narzędzi do analityki internetowej

Zainstaluj narzędzia do analityki internetowej, na przykład Google Analytics, by gromadzić informacje o działaniu witryny.

5. Upewnij się, że i Ty, i deweloper znacie Wskazówki Google dla webmasterów

Wskazówki te zawierają informacje o tym, jak Google wyszukuje i przetwarza zawartość witryn oraz określa ich pozycję w rankingu.

6. Zadbaj, by umowa obejmowała wprowadzenie poprawek w mobilnej wersji witryny po jej udostępnieniu

Prawdopodobnie otrzymasz uwagi i komentarze od klientów oraz dane z analityki internetowej, które warto by uwzględnić, aby jeszcze bardziej podnieść jakość witryny.

Być może zainteresuje Cię lista polecanych przez Google Ads firm, które zajmują się witrynami mobilnymi przeznaczonymi na wiele urządzeń. Więcej informacji o wdrażaniu witryn mobilnych znajdziesz w dokumentacji SEO witryn mobilnych.

Wyślij opinię na temat...