Handel mobilny stanowi już prawie 40% całkowitej sprzedaży w eCommerce i ma zdominować rynek, osiągając około 54% do 2021 roku – co oznacza, że możesz tracić znaczące przychody, jeśli Twoja witryna nie jest zoptymalizowana pod kątem urządzeń mobilnych!
Biorąc pod uwagę, że urządzenia mobilne są często pierwszym punktem kontaktu między Tobą a Twoimi klientami, popularność smartfonów, rosnącą obecność młodszych, coraz bardziej świadomych mobilnie konsumentów oraz szybką, dynamiczną, skoncentrowaną na cyfrowym świecie kulturę, która z minuty na minutę wymaga większej wygody i wydajności. Łatwo dostrzec potrzebę doświadczenia mobilnego, ale jak to się przekłada konkretnie na sklepy z produktami cyfrowymi?
W tym poście omawiamy nasze zalecenia dotyczące optymalizacji Twojego sklepu z produktami cyfrowymi pod kątem urządzeń mobilnych, abyś mógł nadążyć za czasami – i sprzedażą!
Zrozumienie przejścia w kierunku minimalizmu
Cofnijmy się na chwilę: jest wczesny rok 2000, a pojawienie się smartfonów wywiera dużą presję na dostawców usług internetowych, aby dostosowali się do rosnącego zużycia przepustowości. Konsumenci mogą wreszcie regularnie korzystać z Internetu podczas przemieszczania się – ogromna zmiana stylu życia, która inicjuje całkowitą przebudowę sposobu prezentacji treści internetowych.
Nadszedł czas, aby odwrócić scenariusz od imponujących animacji i treści bogatych w grafikę, do stron internetowych, które mogą być ładowane stosunkowo szybko w mniej wydajnych sieciach komórkowych, a deweloperzy internetowi optymalizują teraz pod kątem szybkości, aby nadążyć. Dodaj do tego efekty platform mediów społecznościowych, takich jak Facebook, które muszą być dostosowane do prędkości nawet 2G, aby stać się bardziej globalnie dostępne, a możesz sobie wyobrazić rosnącą potrzebę bardziej „uproszczonego” podejścia!
Optymalizacja mobilna była w samym centrum tego postępu, ponieważ społeczeństwo z czasem stało się jeszcze bardziej zorientowane na smartfony. Teraz jesteśmy w ciekawym punkcie zwrotnym; wiele osób używa smartfonów i tabletów jako głównych urządzeń do wszelkiego rodzaju celów, od pracy i edukacji, po zakupy i rozrywkę.
Smartfony to nasze linie życia – kompleksowe centra naszych harmonogramów, kontaktów, komunikacji i interakcji społecznych, zdrowia i dobrego samopoczucia, zakupów, czytania, muzyki, telewizji, filmów, gier, i tak dalej. Nie trzeba dodawać, że optymalizacja Twojego sklepu z produktami cyfrowymi pod kątem urządzeń mobilnych to nie tylko zabawa; jest to coraz bardziej konieczne dla każdej witryny – i nie chcesz pozostać w tyle! Więc, od czego zacząć?
Responsywny projekt strony internetowej
Przy tak wielu różnych urządzeniach, skąd możesz mieć pewność, że Twoja witryna jest wyświetlana poprawnie? Responsywny projekt strony internetowej to metoda projektowania stron internetowych, która automatycznie dostosowuje treść i układ w zależności od używanego urządzenia. Podstawowy element optymalizacji mobilnej, responsywny projekt strony internetowej pozwala użytkownikom urządzeń mobilnych, takich jak smartfony i tablety (a także laptopy i komputery stacjonarne), prawidłowo przeglądać i efektywnie korzystać z Twojej witryny zgodnie z różnymi standardami wyświetlania.
Po zoptymalizowaniu treść może wydawać się bardziej minimalistyczna na urządzeniach mobilnych, aby nadać priorytet funkcjonalności – lub bardziej skoncentrowana wizualnie, aby zmniejszyć bałagan, w zależności od rodzaju treści.
Przykład małego smartfona (AudioTheme)
Przykład małego tabletu (AudioTheme)
Przykład dużego komputera stacjonarnego (AudioTheme)
Poza korzyściami estetycznymi i przychodami, responsywny projekt pomaga również zwiększyć Twoje SEO. Jak? Cóż, Google ogłosiło niedawno, że zacznie używać indeksowania najpierw mobilnego, co oznacza, że wyszukiwarka będzie w dużej mierze odwoływać się do mobilnych wersji witryn w celu ustalania rankingów i indeksowania ze względu na dominację użytkowników mobilnych.
Więc, co musisz zrobić, aby zaimplementować responsywny projekt strony internetowej w swoim własnym sklepie z produktami cyfrowymi? W zależności od Twojego poziomu wiedzy, masz kilka opcji:
- Zainstaluj responsywny motyw. Większość współczesnych motywów jest zaprojektowana tak, aby były responsywne, więc jest to prawdopodobnie najłatwiejsza opcja, zwłaszcza jeśli zarządzasz własną witryną.
- Zapłać swojemu projektantowi stron internetowych za modyfikację istniejącego motywu lub niestandardowej witryny, aby uwzględnić responsywny projekt.
- Samodzielnie zmodyfikuj istniejący motyw lub niestandardową witrynę, jeśli zajmujesz się własnym tworzeniem stron internetowych.
Narzędzia analityczne i mapy ciepła mogą pokazać średnie wymiary ekranu i wzorce aktywności odwiedzających Twoją witrynę, co pozwoli Ci dostosować ją do Twojej konkretnej publiczności. Możesz nawet segmentować użytkowników według typu urządzenia. Spróbuj użyć narzędzia takiego jak Responsive Design Checker, aby zobaczyć, jak Twoja witryna jest obecnie wyświetlana na różnych urządzeniach.
Wydajność
Chcesz mieć pewność, że Twoja witryna działa dobrze, gdy jest dostępna na różnych urządzeniach? Szybkość to wszystko – w rzeczywistości może ona zadecydować o sukcesie lub porażce doświadczenia użytkownika!
Jeśli witryna ładuje się wolno, ludzie znacznie chętniej ją porzucą. Aby zminimalizować współczynniki odrzuceń, chcesz, aby Twoja witryna ładowała się tak szybko, jak to możliwe. Ważne jest, aby pamiętać, że sieci komórkowe są zazwyczaj mniej stabilne niż sieci szerokopasmowe, z niestabilną łącznością, która zależy od lokalizacji fizycznej, wspólnego użytkowania i innych zmiennych. Mając to na uwadze, im lżejsza jest Twoja witryna, tym lepiej!
„Większość ludzi porzuci wizytę na stronie mobilnej, jeśli strona będzie ładować się dłużej niż kilka sekund.” – Google
Oto kilka wskazówek dotyczących szybkiego ładowania mobilnego:
- Minimalizuj rozmiary plików HTML/CSS. Użyj narzędzia takiego jak Gzip do ich kompresji i staraj się uzyskać jak najbliżej 70 KB, jeśli chcesz błyskawicznych prędkości ładowania.
- Zmniejsz liczbę żądań. Każdy element Twojej witryny (czy to obraz, czcionka, arkusz stylów itp.) generuje własne żądanie. Łącz elementy tam, gdzie to możliwe, aby zminimalizować ten efekt.
- Użyj dobrego hostingu. Idealny jest zoptymalizowany stos serwerowy z buforowaniem na poziomie serwera.
- Unikaj niepotrzebnych wtyczek. Utrzymuj jak najmniejsze obciążenie!
- Rozważ użycie sieci dostarczania treści (CDN) dla obrazów. Jest to szczególnie istotne, jeśli Twoja witryna zawiera dużo obrazów. Upewnij się również, że Twoje obrazy są zoptymalizowane pod kątem sieci!
- Wyłącz wszelkie funkcje, których absolutnie nie potrzebujesz.
- Używaj HTML5 zamiast Flash, jeśli chcesz używać specjalnych efektów.
- Nie używaj wyskakujących okienek. Mogą być uciążliwe w obsłudze na urządzeniach mobilnych.
- Ogranicz użycie przekierowań i skracaczy linków, chyba że są one konieczne. Tylko zwiększają czas ładowania!
Google oferuje to narzędzie, które pozwala porównać wydajność Twojej witryny na urządzeniach mobilnych z innymi witrynami. Możesz go również użyć do oszacowania, jak usprawnienia prędkości mogą wpłynąć na Twoje przychody.
Treść
Innym aspektem optymalizacji mobilnej jest sposób prezentacji treści. Odwieczna zasada od zarania mediów drukowanych mówi, że chcesz przekazać podstawowy sens swojej treści „nad złożeniem”. W sensie cyfrowym odnosi się to do natychmiast widocznego obszaru strony internetowej po jej załadowaniu.
Jednak niektórzy eksperci twierdzą, że złożenie już nie ma znaczenia; że przy współczesnych trendach w korzystaniu z Internetu jest ono prawie nieistotne. Kiedy pomyślisz o niezwykle popularnych witrynach, takich jak Facebook, które używają nieskończonego przewijania, możesz się zgodzić! Więc, co nas to zostawia?
Cóż, nawet jeśli prawdą jest, że ma to mniejsze znaczenie niż wcześniej, umieszczenie najważniejszych informacji nad złożeniem gwarantuje, że odwiedzający Twoją witrynę zobaczą je jako pierwsze. Porównajmy kilka przykładów na komputery stacjonarne i mobilne:
Pasek wyszukiwania i menu są łatwo dostępne, z najnowszymi promocjami na pierwszym planie (Producer Loops)
Od razu widać, co oferuje witryna, bez konieczności przewijania (UIdeck)
Czysty i minimalistyczny wygląd z nagłówkiem i najlepszymi produktami, z łatwym dostępem do menu i bazy wiedzy / FAQ (ThemeBeans)
Nawigacja i interaktywność
Nawigacja jest kluczowym elementem optymalizacji mobilnej, ponieważ mniejsze urządzenia mogą znacznie ograniczać funkcjonalność użytkownika, jeśli pozostaną same. Dobre praktyki wskazują na konsolidację menu do najprostszych i najbardziej istotnych opcji, takich jak strona główna sklepu lub główna galeria produktów (i/lub kategorie produktów), strona wsparcia i strona kontaktowa. Dobra wiadomość jest taka, że większość motywów jest wyposażona w opcję menu mobilnego od razu po wyjęciu z pudełka!
Jeśli chodzi o interaktywność, należy wziąć pod uwagę różnice w klikalności podczas korzystania z różnych urządzeń. Mniejsze przyciski mogą być łatwe do kliknięcia myszą, ale mogą być trudniejsze do dotknięcia na smartfonie, na przykład. Wszystko, co możesz zrobić, aby zoptymalizować interaktywność mobilną swojej witryny, jest idealne!
Wiele sklepów i usług cyfrowych oferuje wsparcie przez czat na żywo lub szybki i łatwy dostęp do sekcji FAQ, co ułatwia klientom zadawanie pytań lub dowiadywanie się więcej o produktach. Można na przykład zainstalować wtyczkę czatu lub utworzyć sekcję FAQ lub bazę wiedzy, która jest intuicyjnie zorganizowana i przeszukiwalna.
Wygoda użytkowania
Warto pamiętać, że wielu użytkowników mobilnych robi zakupy na swoich telefonach wyłącznie dla wygody, dlatego proste procesy płatności – zwłaszcza płatności jednym kliknięciem – stają się coraz bardziej popularne. Dotyczy to również innych elementów Twojej witryny, takich jak menu, strony produktów i wsparcie. Zastanów się, co możesz zrobić, aby skonsolidować informacje, tak aby były zwięzłe i wymagały minimalnego klikania i przeglądania!
Treści audio i wideo
Jeśli to możliwe, zawsze lepiej jest hostować pliki audio i wideo na platformach zewnętrznych, które są już specjalnie zoptymalizowane pod kątem użytkowania mobilnego. Na przykład filmy z Vimeo i YouTube można łatwo osadzić na swoich postach lub stronach, zmniejszając potrzebę niestandardowego kodu lub zajmując znaczną ilość miejsca na własnym serwerze.
Jeśli chodzi o audio, WordPress jest w porządku, ponieważ ma wbudowany responsywny odtwarzacz audio, ale można również korzystać z usług takich jak SoundCloud do hostowania plików audio. Dodatkową zaletą większości platform audio i wideo jest to, że każde odtworzenie z Twojej witryny jest zaliczane do liczby odtworzeń na platformie.
Nie zapomnij przetestować wszystkiego!
Niektóre firmy mają całe działy zajmujące się testowaniem urządzeń mobilnych, ale jeśli prowadzisz mniejszą działalność, możesz skorzystać z usług lub stron internetowych do testowania urządzeń (takich jak Responsive Design Checker lub Responsinator), które pozwalają na podgląd witryny na różnych urządzeniach.
Możesz również po prostu dostosować rozmiar okna przeglądarki, aby zobaczyć, jak projekt reaguje na zmiany wymiarów. Pamiętaj, że niekoniecznie uzyskasz idealny układ w każdym przypadku; responsywny projekt zazwyczaj skupia się tylko na 3 lub 4 różnych rozdzielczościach, przestrzegając najczęstszych i najbardziej aktualnych punktów podziału rozdzielczości (elementy CSS, które dyktują, jak układy pojawiają się na różnych rozmiarach ekranu).
Większość popularnych motywów/witryn eCommerce jest zbudowana przy użyciu popularnych frameworków do tworzenia stron internetowych, takich jak Bootstrap 4 (używany przez Twitter) i jest zbudowana z myślą o „mobile first”, wykorzystując system układu siatki, który będzie skalował się i działał na każdym urządzeniu od razu po wyjęciu z pudełka. Pozwala to programistom na tworzenie angażujących motywów bez martwienia się o obsługę każdego pojedynczego urządzenia od razu po wyjęciu z pudełka. Jeśli napotkasz problemy z niektórymi urządzeniami, zazwyczaj możesz zgłosić problem deweloperowi motywu, a on może wydać aktualizację.
Przygotowanie Twojego sklepu z produktami cyfrowymi do użytku mobilnego nie jest procesem jednodniowym, ale mam nadzieję, że ten post dostarczył Ci pomocnych pomysłów i wskazówek. Optymalizacja mobilna stale rośnie w potrzebę; na szczęście oznacza to również rosnącą liczbę narzędzi i zasobów dostępnych, aby pomóc Ci ją osiągnąć!
Czy masz jakieś rady dotyczące optymalizacji własnego sklepu z produktami cyfrowymi pod kątem użytkowania na urządzeniach mobilnych? Jakie przeszkody napotkałeś i jak je pokonałeś? Co okazało się najbardziej pomocne? Chętnie poznamy Twoje zdanie w komentarzach poniżej!
Ilustracja: Jessica Johnston.
