iPhone a marketing – jak i dlaczego sprawdzić działanie strony sklepu na iPhone

Działanie strony na smartfonach to w dzisiejszych czasach oczywista sprawa.

Co już nie jest tak oczywiste to dopracowanie działania zarówno na urządzeniach android jak i iPhone.

Szczególnie z tym ostatnim potrafi być wiele problemów. W dużej mierze przez to że pominięta była optymalizacja pod te urządzenia.

Dlaczego to tak ważne, co i jak sprawdzać, na co zwracać uwagę przy odbieraniu strony od web developera? O tym piszemy w tym poradniku.

Czemu to tak ważne

Zacznijmy od podstaw. Poprawne działanie strony na urządzeniach iPhone ma przede wszystkim znaczenie w UX, czyli User Experience oraz przy konwersji (sprzedaży).

Strona może być dobrze wypozycjonowana, mieć dobre pozycje, ale tracimy potencjał sprzedażowy.

Odwiedzający korzystający z iPhone wejdą na stronę, ale szybko ją opuszczą: będzie się wyświetlała niepoprawnie lub nie będą mogli dokonać zakupu.

Przykład dużego e-commerce i jego statystyk za rok 2021. Wejścia mobilne stanowiły większość:

Z czego ponad 34% to wejścia z iPhone:

Ważna jest też przeglądarka. Oczywiście użytkownik iPhone może zainstalować sobie np. Chrome, ale zazwyczaj używana jest domyślna przeglądarka Safari:

Ruch mobilny to najważniejsze źródło ruchu. W ramach tego źródła to właśnie iPhone jest urządzeniem o największym udziale procentowym.

Jakbyśmy wzięli 10 innych losowych przykładów mniejszych e-commerce to statystyki będą bardzo podobne a pośród urządzeń iPhone będzie zawsze na pierwszym miejscu.

Utarło się przekonanie, że użytkownicy iPhone to potencjalnie bardziej wartościowy klient, gotowy do zakupu. Tu nie będziemy rozwijać tej kwestii. Po prostu w dzisiejszych czasach i samej popularności iPhone to często duża grupa odwiedzających stronę.

Problemy i ich źródło

Potencjalne problemy, o których mówimy to:

• małe błędy wizualne – niepoprawne wyświetlanie elementów graficznych, teksty wychodzący poza kontener
  
• problemy związane z wypełnianiem formularza
  
• większe błędy jak niepoprawnie działające elementy dynamiczne strony czy elementy funkcjonalne, uniemożliwiające przejście dalej czy dokonanie zakupu
  

Jeden z wielu przykładów jak design może rozjechać się na iPhone, a wyświetlać poprawnie na Android:

Niektóre z nich mogą wydawać się małymi niedociągnięciami. Jednak jeśli takich „małych” problemów jest więcej w ramach jednej strony to użytkownik w końcu opuści stronę.

Poza tym takie błędy oznaczają, że strona nie została sprawdzona i zoptymalizowana w działaniu na telefony iPhone. Często poza takimi mniejszymi błędami wizualnymi znajdziemy też większe. Te mogą całkowicie utrudnić dokonanie zakupu czy korzystanie z niektórych funkcji strony.

Źródłem problemów jest tu inna przeglądarka stron internetowych – Safari.

Jest to przeglądarka stworzona przez Apple. Obecnie dostępna tylko na urządzeniach tej firmy czyli na macbook, iPad, iPhone itd.

Każda przeglądarka bazuje na określonym silniku, który tłumaczy kod HTML, CSS i inne elementy strony. W efekcie renderuje wizualną prezentację, czyli to co widzimy w oknie przeglądarki.

Zdecydowanie najpopularniejsza przeglądarka to Chrome. Z jej silnika korzystają też inne przeglądarki – np. ostatnio Microsoft Edge.

Stąd optymalizacja działania strony podczas tworzenia i sprawdzanie jej działanie przy odbiorze odbywa się głównie w przeglądarce Chrome.

Ale…

Silniki przeglądarek inaczej interpretują niektóre instrukcje CSS, lub nawet niektórych w ogóle nie obsługują lub obsługują od konkretnej wersji przeglądarki.

Dlatego problemy w obsłudze nawet małej liczby instrukcji CSS mogą przełożyć się na wizualne wpadki.

Z tego powodu web developerzy korzystają ze stron jak https://caniuse.com/, które pokazują im czy dana instrukcja jest obsługiwana we wszystkich przeglądarkach i od której wersji:

Rozmiar ekranu też ma znaczenie przy działaniu stron na urządzeniach mobilnych.

Nie każdy użytkownik korzysta z najnowszej wersji iPhone.

Tu należy pamiętać, że iPhone mają bardzo długi cykl życia. Dzięki wieloletniemu wsparciu w postaci aktualizacji w użyciu jest wiele iPhone, które mają już 5 lat i więcej.

Rozwiązanie problemu

Za prawidłowe działanie strony na wszystkich urządzeniach odpowiadają web developerzy i programiści, którzy przygotowali stronę.

Nie ma jednej wtyczki czy modułu, który szybko rozwiąże istniejące problemy z wyświetlaniem i działaniem.

W praktyce usuwanie błędów wygląda tak:

• sprawdzamy działanie strony na różnych urządzeniach, w tym iPhone, iPad
  
• notujemy błędne działanie – jakie urządzenie, przeglądarka i jej wersja
  
• sprawdzamy, co odpowiada za błędne wyświetlanie (jakie komendy css, fragment kodu, inne jak kod JS)
  
• przepisujemy kod tak, by wykorzystać zamienniki instrukcji, które działają poprawnie na wszystkich wersjach
  

Za wszystkie te działania odpowiedzialni są programiści i web developerzy.

Sprawdzenie poprawności działania strony na iPhone

W teorii:

Firma przygotowująca szablon czy całą stronę firmową czy sklepu internetowego powinna mieć dział kontroli.

Ten dział, przed oddaniem ostatecznej wersji Klientowi:

• sprawdza stronę pod kątem realizacji zleconych funkcjonalności strony oraz innych ustaleń zawartych w umowie
  
• sprawdza działanie strony pod kątem technicznym, czas ładowania, funkcjonalności różnych elementów (rejestracje użytkowników, dodawanie do koszyka itd.)
  
• obsługę na urządzeniach mobilnych różnej wielkości, różnych producentów
  

W praktyce:

Kontrola jakości w przypadku polskich agencji web dev mocno kuleje.

Mieliśmy do czynienia ze sklepami internetowymi, w których można było zakupić towar na wersji desktop, ale na smartfonie już nie.

I znowu, jeśli na smartfonie nie działa taka podstawowa funkcjonalność to nie trzeba mówić, że były też problemy z wieloma innymi elementami.

Zazwyczaj obowiązuje zasada ograniczonego zaufania i chcemy się upewnić, że wszystko działa poprawnie na różnych urządzeniach.

W tym tekście skupiamy się na iPhone, czyli zobaczmy jak łatwo sprawdzić działanie na tym telefonie.

Mamy tutaj kilka możliwości.

Posiadamy telefon iPhone, lub posiada go nasz znajomy/rodzina.

Sprawdzamy bezpośrednio na urządzeniu jak działa strona. W idealnym scenariuszu, zarówno najnowszy model jak i taki sprzed kilku lat (np. iPhone 8).

Nie posiadamy telefonu iPhone.

Mamy tutaj opcje jak skorzystanie z emulatorów. Jest ich sporo, ale chodzi nam o sprawdzenie zachowania na prawdziwym Safari.

Dlatego najlepsze są opcje płatne jak https://crossbrowsertesting.com/ czy https://www.browserstack.com/test-on-safari-browser

Co sprawdzamy?

Nie tylko stronę główną, ale wszystkie najważniejsze rodzaje podstron – kategorie, produkty itd.

Przeprowadzamy też kontrolny zakup, sprawdzamy czy cała ścieżka zakupowa, koszyk, formularze działają poprawnie.

Jeśli coś nie działa to robimy oczywiście screenshot i notatkę.

Ostrożnie z innymi rozwiązaniami.

Są różne darmowe opcje sprawdzenia działania na iPhone jak chociażby opcja wbudowana w Chrome – device toolbar:

Ale to sprawdzi tylko, jak:

• zachowuje się strona na urządzeniu z daną rozdzielczością,
  
• jak działa obsługa dotykowa, tak jakby uruchomiony był tam Chrome.
  

Innymi słowy – przy użyciu emulatora wbudowanego w Chrome – teoretycznie sprawdzamy działanie strony na iPhone 6. W rzeczywistości nie sprawdzamy go na przeglądarce Safari, a po prostu na tej rozdzielczości na której działa dane urządzenie.

Podobne zachowanie ma wiele innych darmowych emulatorów. Dlatego należy upewnić się przed ich użyciem co tak naprawdę sprawdzamy.

Jeśli chcemy mieć dokładne informacje o działaniu strony na urządzeniach iPhone to pozostaje sprawdzenie na urządzeniu fizycznym lub z pomocą sprawdzonych, płatnych emulatorów.

Podsumowując

Działania marketingowe są coraz droższe – zarówno prowadzenie reklam czy pozycjonowanie.

Przy ponoszeniu większych wydatków na stronę chcemy wypracować dobre ROI, czyli zwrot z inwestycji.

Jednym z elementów zwiększenia ROI jest dopracowanie strony pod kątem UX, tak by korzystanie z jej zasobów i możliwość zakupu były bezproblemowe.

Już od kilku lat ruch mobilny dominuje w statystykach wejść dzielonych na rodzaj urządzeń.

W ramach ruchu mobilnego około 20-40% to wejścia z iPhone. Ze względu na domyślną przeglądarkę Safari, która ma swój własny silnik inny niż Chrome, mogą pojawić się problemy w renderowaniu stron – od małych po poważniejsze.

Dlatego przy zmianie szablonu, odbieraniu nowej strony od agencji web dev należy upewnić się, że wszystko działa tu poprawnie.

Porozmawiajmy

Powiedz nam czego potrzebujesz

Kontakt