Strona, która nie działa na telefonie, nie działa wcale

Cześć hejto. Wracam do Was po urlopie z nowym marketingowym artykułem (tak naprawdę to cały czas tu byłem, tylko jeszcze artykułu nie miałem): o mobilnych stronach www, których brak lub zły projekt może kosztować minimum połowę potencjalnych klientów. Każdy z własną firmą uważam, że powinien to wiedzieć o swojej stronie.

Strona, która nie działa na telefonie, nie działa wcale

Czas czytania: 15 minut

Link do artykułu na blogu: https://www.rozacki.com/blog-11-responsywne-strony-www

Od czasu powstania smartfonów astrologowie i inni specjaliści ogłaszali rok "mobajl" - wyższy udział smartfonów niż komputerów w przeglądaniu internetu. Patrząc na statystyki stron www moich klientów mogę teraz przyznać, że wreszcie się doczekali. Więcej osób odwiedzi Twoją stronę na smartfonie niż komputerze. Zaniedbując stronę mobilną tracisz więc minimum połowę klientów, a czasem nawet wszystkich.

Jedyną stałą w życiu jest zmiana. Zmieniają się też zachowania Twoich klientów. Jednym z tego objawów jest sposób korzystania z internetu. Wszelkie badania i raporty wskazują, że większość użytkowników internetu przegląda go przy pomocy smartfona. Z obserwacji wyników odwiedzin stron www moich klientów jasno to wynika. A nawet więcej: są branże w których udział smartfonów wynosi prawie 100%.

Biorąc więc pod uwagę popularność smartfonów trzeba założyć, że brak wersji mobilnej strony www oznacza, że co najmniej połowa potencjalnych klientów odbije się od niej.

Jakie branże potrzebują stronę mobilną?

Zaryzykuję stwierdzenie, że potrzebujesz stronę mobilną niezależnie od branży. Jej brak najbardziej jednak odczują właściciele firm B2C, a zwłaszcza usługowych, a szczególnie lokalnych.

Case Study Restauracji

Pizzeria w modelu restauracji casual dining w małym mieście jeszcze przed rozpoczęciem działalności miała przygotowaną stronę www dopasowującą się do rozmiaru ekranu (czyli responsywną). Analiza odwiedzin przeprowadzona po kilku miesiącach wykazała, że w tym czasie 99% osób zrobiło to na smartfonie. Duża część z nich wchodzi z Google Maps i Facebooka, z których korzystają właśnie na smartfonach. Od tego czasu kolejne zmiany na stronie były robione z myślą głównie o smartfonach.

Przytoczona branża gastronomiczna to oczywiście jeden koniec spektrum. Pokazuje jednak, że w mniejszym czy większym stopniu zależnym od branży przeglądanie internetu odbywa się już głównie na telefonach.

Jak sprawdzić czy Twoja strona www jest dostosowana do wyświetlania na smartfonach?

Najprostszym sposobem na sprawdzenie czy i jak strona wyświetla się na smartfonach jest po prostu wejść na nią na smartfonie. To jednak nie jedyny, a często nieoptymalny sposób:

• po pierwsze taka metoda pozwala sprawdzić tylko to jak wyświetla się ona na Twoim smartfonie,
  

• po drugie możesz tak sprawdzić tylko stronę umieszczoną już w sieci - nie sprawdzisz jej wyglądu lokalnie, przed publikacją.
  

Możesz więc sprawdzić wyświetlanie strony www na smartfonach np. przy pomocy przeglądarki na komputerze. Przechodząc do trybu deweloperskiego (dla programistów) możesz ustalić w jakich wymiarach ma zostać wyświetlona przeglądana strona. Brzmi groźnie, ale jest całkiem proste - na pewno sobie poradzisz. Pokażę Ci jak to zrobić w Chrome:

1. Otwórz stronę, którą chcesz sprawdzić.
   

2. Kliknij dowolne miejsce na niej prawym przyciskiem myszy.
   

3. W menu, które się pojawi, wybierz "Zbadaj element".
   

4. Otworzy Ci się panel narzędzi deweloperskich. U góry tego panelu, po lewej stronie, znajdź i kliknij ikonę, która wygląda jak mały smartfon i tablet. Spowoduje to przejście do trybu podglądu urządzeń mobilnych.
   

5. Teraz możesz wybrać z rozwijanej listy na górze ekranu, jaki model telefonu lub tabletu chcesz zasymulować, a strona automatycznie dopasuje swoje wymiary. Możesz również ręcznie wprowadzić dowolną szerokość i wysokość, aby przetestować niestandardowe rozmiary.
   

W ten sposób dowiesz się (jeśli jeszcze tego nie wiesz) czy Twoja strona wyświetla się na mniejszych ekranach i czy robi to prawidłowo. Możesz tym sposobem zdiagnozować np.:

• czy wyświetlają się wszystkie elementy
  

• czy elementy strony wyświetlają się we właściwej kolejności
  

• czy jakiś element nie rozciąga strony www (można wtedy przesunąć stronę w prawo na białe tło)
  

• czy przyciski są się kliknąć
  

• czy wyskakujące okienka działają zgodnie z Twoją intencją
  

• czy nie ma czegoś co przesłania inne elementy strony (a nie powinno)
  

Jak zrobić stronę, żeby wyświetlała się na smartfonach?

Chcąc być dokładnym od razu odpowiem, że Twoja zawsze wyświetli się na smartfonie lub tablecie - nawet bez wersji mobilnej. Tylko bez niej będzie bardzo nieczytelna, przez co potencjalni klienci od razu z niej wyjdą stając się jeszcze bardziej potencjalnymi.

Jeśli czytasz dalej, zakładam, że wolałbyś mieć pełnoprawną wersję mobilną strony www, żeby Twoi klienci zostali i zapoznali się z tym co masz do zaoferowania. Zasadniczo są na to 2 sposoby:

1. osoba wersja mobilna - stworzenie osobnej strony pod osobnym adresem (np. m.twojastrona.pl), na którą klient zostaje automatycznie przekierowany kiedy przeglądarka wykryje, że korzysta on ze smartfona
   

2. stworzenie strony www jako responsywnej - ten niecodzienny przymiotnik oznacza tyle, że tworzona jest jedna wersja strony, która dostosowuje swój układ do rozmiaru ekranu, na którym jest przeglądana
   

Pierwszy ze sposobów wyszedł już powszechnie z użycia: jest kosztowny w tworzeniu i utrzymaniu, a do tego trzeba rozwiązywać problemy działania pozycjonowania w Google (SEO) nieznane w żadnym innym ustroju... znaczy metodzie. Drugi natomiast to obecny standard, ze względu na niższy koszt i brak problemów z SEO.

Responsywne strony www można zbudować na wiele sposobów - współczesna technologia wyświetlania stron pozwala robić to bez dodatkowych narzędzi. Co nie oznacza, że takich narzędzi nie ma - wręcz przeciwnie. Ze względu na resnponsywność, ale i dodatkowe funkcje, osobiście jestem zwolennikiem jednego z nich o nazwie Bootstrap. Jest to tzw. framework (zestaw gotowych narzędzi, bibliotek i zasad, które ułatwiają programistom tworzenie stron www) stworzony przez Twitter (obecnie X).

Najpierw mobajl

Wróćmy do meritum: niezależnie od sposobu celem jest wyświetlenie klientom mobilnej (lub responsywnej) strony www jeśli korzystają ze smartfona lub tabletu. Zaryzykuję jednak stwierdzenie, że jest to cel minimum. Biorąc pod uwagę ciągle rosnący udział smartfonów w przeglądaniu internetu, docelowo należy wdrożyć strategię z anielskiego zwaną mobile-first (czyli jak to swojsko nazwiskiem: najpierw mobajl). Należy więc projektować strony www z myślą najpierw o małych ekranach, a dopiero w dalszej kolejności o ekranach komputerów i laptopów. Więcej użytkowników małych ekranów to więcej potencjalnych klientów. A to pozyskiwanie klientów jest ostatecznym celem strony internetowej naszej firmy.

Jak projektować stronę www pod smartfony?

Zgodnie z nazwą zasady: najpierw mobajl. W pierwszym etapie projektowania należy więc skupić się na najmniejszych ekranach, upewniając się, że strona www będzie wyświetlać się na nich prawidłowo, realizując jednocześnie postawione przed nią cele. Mały ekran naturalnie wymusza skupienie się na elementach faktycznie najważniejszych dla klienta. Dopiero od takiego punktu bazowego należy rozwijać projekt strony pod większe ekrany.

Jeszcze na etapie planowania strony www w pierwszej kolejności skup się na treściach. Ekran smartfona jest zbyt na małe na nieistotne treści i niepotrzebne rozpraszacze.

Płynnie przechodząc od akapitu o treściach do akapitu o użyteczności zwrócę jeszcze Twoją uwagę na rozmiar tych treści. Zbyt małe utrudnią czytanie, a zbyt dużych niewiele zmieści się na ekranie smartfona, zmuszając potencjalnego klienta do sylabizowania przy przeciąganiu ekranu. Standardem rozmiaru tekstu głównego jest 16 pikseli. Jeśli wydaje Ci się to dużo i nie wygląda to posłuchaj rady pana w średnim wieku: czytelność jest ważniejsza od Twojego poczucia estetyki. Nie nadwyrężaj wzroku swoich klientów. Może i Ci za to nie podziękują, ale za to nie będą Cię wyklinać za brak czytelności.

Przechodząc do samego procesu projektowania najwięcej uwagi powinieneś poświęcić użyteczności strony. Mały ekran nie jest tak precyzyjny jak duży monitor komputera, a jego użytkownik nie korzysta z myszki. Obsługa strony www powinna więc być intuicyjna, prosta i możliwa do wykonania jednym kciukiem. Elementy klikalne muszą być duże i wyraźne, odstępy między nimi odpowiednio szerokie, a wszystkie kluczowe przyciski łatwo dostępne w strefie, do której użytkownik może dosięgnąć bez zmiany chwytu telefonu. Dzięki temu nawigacja będzie szybka i bez frustracji, a klient łatwiej dotrze do tego, po co wszedł na stronę. W przypadku przycisków standardem jest minimalny rozmiar 48 na 48 pikseli.

Użyteczność oznacza też czytelność. Zachowanie odpowiedniego kontrastu wpływa na nią diametralnie. Najprościej zachować czarny tekst na białym tle. W innych przypadkach możesz sprawdzić "odpowiedniość" kontrastu przy pomocy bezpłatnych narzędzi online, jak np. https://coolors.co/contrast-checker/112a46-acc8e5 - podajesz 2 kolory i otrzymujesz kolorystyczną podpowiedź o czytelności: od czerwonego do zielonego.

W kategorii użyteczności umieściłbym też "kciuko-pozytywność": projektowanie w taki sposób, żeby odwiedzający Twoją stronę klient mógł dosięgnąć najważniejszych jej elementów kciukiem. Biorąc pod uwagę, że około 90% ludzi jest praworęcznych, lepiej jest umieszczać klikalne elementy przy prawej krawędzi ekranu lub chociaż na środku. Sposób trzymania smartfona wymusza umieszczanie wezwania do działania (GTA) na dole ekranu - przynajmniej w pierwszych sekcjach strony www (dalsze i tak są przewijane). Jeśli chcesz dowiedzieć się więcej czym jest wezwanie do działania i jak wykonać je prawidłowo, zajrzyj do tego artykułu.

W przypadku responsywnej strony www priorytet szybkości ładowania jest istotny jak nigdy wcześniej. Kluczową rolę odgrywają w tym 2 czynniki: kod strony i obrazki/zdjęcia. Ponieważ ten blog kieruję do przedsiębiorców, a nie programistów, skupię się na tym drugim.

Obrazki i zdjęcia mogą być zapisane w różnych formatach plików. Najczęściej spotykasz się z JPG, czasem może też z PNG. Takie formaty zapisuje Twój aparat i smartfon przy robieniu zdjęcia i zrzutu ekranu. Może nie są to największe pod względem rozmiaru formaty, ale kiedy spojrzysz na ich ilość na stronie www to okaże się, że sumarycznie mają już duży rozmiar. Pod względem stron dużo lepszym jest nowoczesny format WEBP. Te samo zdjęcie w WEBP potrafi być nawet 90% "mniejsze" niż powszechny JPG.

Powinieneś więc dopilnować, żeby obrazki i zdjęcia na Twojej stronie www były zapisane w formacie WEBP i samemu także dodawać zdjęcia w tym formacie na bloga lub do sklepu internetowego.

Jak zmienić twoje zdjęcia z JPG na WEBP? Wystarczy kilka kliknięć:

1. Wejdź na tinypng.com

2. Pod miejscem na pliki zaznacz "Convert my images automatically"

3. Z pól, które się pojawią zaznacz WEBP

4. Przeciągnij zdjęcie na pole "Drop your images here"

5. Pobierz swoje zdjęcie w formacie WEBP przyciskiem po prawej obok nazwy pliku

Proste? A ile miejsca i transferu właśnie zaoszczędziłeś swojej stronie!

O narzędziach użytecznych dla Twojej strony, w tym także o narzędziu do oceny szybkości jej ładowania pisałem w tym artykule - jeśli jeszcze go nie czytałeś to sprawdź koniecznie.

Ostatnim elementem, na który chciałbym zwrócić Twoją uwagę, a któremu uwagi nie poświęcają zazwyczaj projektanci stron, jest widoczność efektów i elementów przy najechaniu na nie myszką. A właściwie uwzględnienie faktu, że klienci używający smartfona nie mają myszki. To tzw. efekt hover, który uaktywnia się przy najechaniu kursorem myszki na element. Pół biedy jeśli to tylko ozdobnik. Gorzej kiedy ukrywa treść. Nawet na stronie skupiającej się na odbiorcach używających komputerów lepiej jest unikać ukrywania treści i ważnych elementów. Jeśli jakiś element ma wyświetlać więcej szczegółów (rozwijać się albo pokazywać "dymek" lub okienko) po wykonaniu jakiejś akcji lepiej będzie jeśli tą akcją będzie kliknięcie. Unikniesz dzięki temu ryzyka, że coś ważnego nie będzie dostępne dla klientów przeglądających na smartfonach.

Podsumowanie

Podsumowując: Twoja strona www nie istnieje, jeśli nie działa na smartfonie. Klienci szukają usług i produktów w drodze, w kolejce czy w domu z telefonem w ręku. Jeśli strona nie ładuje się szybko albo trudno się na niej poruszać, nie poczekają - po prostu zamkną kartę i wybiorą konkurencję.

Dobra strona mobilna to nie luksus, ale warunek przetrwania w biznesie. To pierwszy kontakt klienta z Twoją firmą, cyfrowy odpowiednik wizytówki i kelnera w jednym. Zadbaj więc o prostą obsługę, czytelność i szybkość. Wtedy Twoja strona nie tylko będzie się wyświetlała na telefonie, ale będzie faktycznie działała - czyli przyciągała klientów, zamiast ich odpychać.

[AUTOPROMOCJA]

Jeśli Twoja obecna strona nie spełnia oczekiwań klientów mobilnych, nie ma sensu jej łatać: najczęściej lepiej stworzyć nową, zaprojektowaną od początku pod smartfony. Tworzę strony www w podejściu najpierw-mobile, które są szybkie, czytelne i wygodne w obsłudze. Napisz do mnie, a przygotuję dla Ciebie stronę, która naprawdę będzie działać.

[KONIEC AUTOPROMOCJI]

======

Tag do obserwowania/czarnolistowania: #marketingwprostychslowach

Jeśli uważasz ten artykuł za przydatny to bardzo mi pomożesz, jeśli wyślesz go do kogoś komu może się on przydać ( ͡° ͜ʖ ͡°) Możesz też otrzymywać powiadomienia o nowych artykułach na maila, zapisując się na newsletter. Dodatkowo w każdym mailu prezentuję narzędzie, z którego sam korzystam:

http://www.rozacki.com/newsletter

#marketing #wlasnafirma #biznes #dzialalnoscgospodarcza #firma