Bardziej mobilnie się da! I my to zrobiliśmy w nowych szablonach stron v3
Nie zatrzymujemy się i kontynuujemy rozwój rozwiązań dla sklepów IdoSell, poprawiając stale wrażenia z zakupów. Do 2021 smartfony zagoszczą na dobre na rynku e-commerce - przyszłość mobile w e-commerce jest już znana. Wiemy o tym doskonale, jak nikt inny, dlatego też, dopracowujemy kierunek rozwoju szablonów pod kątem Mobile First. Jest to sposób projektowania i przemyślenia rozwiązań w pierwszej kolejności z myślą o użytkownikach mobile. Z uwagi na rosnący światowy trend wśród użytkowników sklepów e-commerce - już ponad 55% użytkowników sklepów opartych o IdoSell, to użytkownicy korzystający ze smartfonów. Trend jest rosnący i przyśpiesza.
Już ponad 5 lat temu zauważyliśmy, że tendencje na rynku się zmieniają i należy przestać myśleć o urządzeniach mobilnych jak o rzeczach 2-giej kategorii, które używa się tylko dodatkowo. O czym już wspominaliśmy w akapicie “Szybkość i Mobile First w standardzie”
Obecnie po smartfony użytkownicy sięgają częściej, niż korzystają z komputerów desktop. Dlatego też, już od dawna nasze szablony sklepów są dobrze zoptymalizowane pod kątem UI, formularze są wygodne w używaniu, liczba czynności jaką należy wykonać podczas zakupu jest zoptymalizowana, a płatności nie powodują problemów.
Jak skorzystać z nowego STANDARDu v3?
Projektując nowe szablony sklepów stawiamy przede wszystkim na doświadczenie Klienta, który ma czuć pełne zadowolenie podczas korzystania nie tylko z podstawowych stron sklepu, ale także nawigacja, procesu zakupowego. Jest to szeroko rozumiane pojęcie user experience (UX), gdzie szereg elementów mają wpływa na wrażenia z użytkowania.
Elementy sklepu podlegają ciągłym zmianom i optymalizacji, starając się sprostać wymaganiom obecnych czasów i trendów panujących wśród użytkowników, stąd też nasze najważniejsze priorytety to w głównej mierze praca nad usability experience (UX) użytkowników.
Praca nad rozwojem standardów nie kończy się niemalże nigdy. Z tego powodu właśnie postanowiliśmy przebudować podstawową strukturę kodu naszego standardu i dodać najnowsze rozwiązania optymalizacyjne. Dzięki temu klienci, którzy skorzystają z darmowych i wbudowanych szablonów stron, powinni finalnie odczuć wyższą konwersję w swoim sklepie. Ma to także znaczenie dla wdrożeń z indywidualnie budowanym template, ponieważ nasze wdrożenia opieramy o rozwiązania wbudowane w szablony STANDARD, korzystając z nich jako bazy wyjściowej dla każdego nowego wdrożenia.
Obecny szablon responsywny Standard RWD (teraz oznaczony jako v2) ma poziom konwersji szacowany przez Google na poziomie 1,5%, nowa wersja Standardu RWD v3 to konwersja szacowana na poziomie 6% czyli 400% wzrost! W porównaniu do wersji RWD (v2) jest to olbrzymi przyrost.
Oprócz podejścia Mobile First przy UI, skupiliśmy się także na wydajności i osiągach, badania pokazują, że głównym czynnikiem porzuceń jest w pierwszej kolejności, szybkość ładowania strony. Nasza najnowsza wersja szablonu, poddana została kompletnemu refactoringowi (bardzo wydajnej optymalizacji kodu), dzięki czemu notujemy 97% ocenę na Google PageInsight.
Aby osiągnąć, taki wynik potrzebne jest odpowiednie przygotowanie szablonu od strony panelu. Warunkiem koniecznym jest wyłączenie wszelkich dodatków HTML i Javascript, które napisane w nieodpowiedni sposób mają olbrzymi wpływ na pogorszenie wyników w Google PageInsight.
Czemu osiągnięcie 97 punktów PageSpeed jest ważne?
Pod koniec lipca 2018 roku, Google wprowadził aktualizację algorytmu PageSpeed i oznaczył ją jako ważny czynnik rankingowy w wyszukiwarkach mobilnych, kolejna zmiana miała miejsce w listopadzie 2018 roku, opierając ocenę na silniku Lighthouse. Spowodowało to znaczny spadek w organicznych wynikach wyszukiwania wielu witryn e-commerce.
Zaktualizowany algorytm PageSpeed „nagradza” szybkie witryny zoptymalizowane pod kątem urządzeń przenośnych. Oznacza to, że dzięki temu, iż strona działa szybciej, np. na smartfonie, znajduje się wyżej w rankingu wyszukiwarek. Do tej pory szybkość strony traktowana była jedynie jako zalecenie, natomiast po lipcowej aktualizacji stała się pełnoprawnym czynnikiem decydującym o miejscu witryny w rankingu wyszukiwarek mobilnych.
Poprzednia wersja szablonu Standard RWD v2 w niczym nie odstawała od norm i zasad jakie panują wśród obecnych rozwiązaniach stosowanych przez alternatywne systemy e-commerce i osiągała bardzo dobre wyniki jeżeli chodzi o konwersję, które mieszczą się na poziomie 1,5-2%.
Nowa wersja szablonu RWD v3 jest zupełnym przełomem na rynku, stawiając poprzeczkę bardzo wysoko w kwestii optymalizacji i wyników osiąganych m.in. w Google PageSpeed Insights. Zaprojektowana na nowo, w myśl idei Mobile First nowa wersja szablonu staje się od dzisiaj normą w e-commerce IAI.
Według przeprowadzonych badań, w odniesieniu do obecnych na rynku sklepów projektowanych metodą Mobile First, średni wynik ich wydajności to tylko 35,66% / 100%. A dla tej samej grupy 11 000 sklepów internetowych na całym świecie, wskaźnik dostępności osiąga zaledwie 58,34% / 100%
Optymalizacja szablonu
Z najważniejszych punktów, na które warto zwrócić tu uwagę jest czas jaki zajmuje oczekiwanie na wyrenderowanie treści (około 1,5 sekundy). Aby to zniwelować wykonaliśmy m.in takie prace jak:
- przebudowa struktury skryptów Javascrtipt,
- zoptymalizowanie w 100% struktury kodu HTML i CSS, spełniając założenia Mobile First,
- zmniejszenie objętości kodu o 30%,
Mimo to będziemy dalej pracować nad optymalizacją i ulepszeniem części sklepu dotyczących procesu zakupowego, m.in.
lepszych i przyjaźniejszy formularzy, zorientowanych na Mobile First, galerii zdjęć z pełną obsługa dotyku i płynnością działania na smartfonach wielu innych pomniejszych modyfikacji i usprawnień mając wpływ na wynik w Google PageInsight. Kolejne ulepszenia już za miesiąc.
Inne nowości w szablonie v3
Optymalizacja pod kątem szybkości to nie wszystkie nowości jakie wprowadziliśmy do wersji v3. Przygotowaliśmy zupełnie nowe menu mobilne, wysuwane z prawej strony ekranu, aby zapewnić wygodniejszą obsługę. Zupełną nowością jest sposób pokazywania dalszych poziomów kategorii, gdzie na raz prezentowany jest na ekranie tylko jeden poziom, a przejście do kolejnego odbywa się poprzez płynne przesunięcie całości w bok. Dzięki temu zabiegowi, użytkownik otrzymuje na ekranie czytelne i wygodne menu, a przechodzenie między poziomami jest naturalne.
Od teraz użytkownicy korzystający z logowania IAI Accounts mogą cieszyć się wybranym i przekazanym automatycznie w procesie zakupowym swoim punktem odbioru lub paczkomatu.
Płatności internetowe na smartfonie są wyzwaniem od strony projektu interfejsu. Aby ułatwić ich wybór zastosowaliśmy nową formatkę płatniczą z wyborem rodzaju płatności jako kafelków, dzięki czemu łatwiej jest wybrać kciukiem odpowiedni rodzaj na mobile.
Dla entuzjastów SEO również mamy niespodziankę , zwiększyliśmy ilości obsługiwanych elementów Schema.org dzięki czemu, wyniki wyszukiwania będą pełniejsze dla robotów np. Google.
Tym bardziej jesteśmy niezmiernie dumni, mogąc pochwalić się wynikiem na poziomie MAKSYMALNYM. Jesteśmy przekonany, że ta zmiana będzie miała ogromny wpływ na sposób funkcjonowania sklepów opartych o IdoSell Shop, ich pozycję w wynikach wyszukiwania Google, a przede wszystkim na satysfakcję użytkowników.
Jak skorzystać z nowych możliwości?
Nowa wersja szablonu Standard RWD v3 dla istniejących klientów, nie będzie wydana w formie aktualizacji. Będzie można ją pobrać świadomie, bez opłat, jako nowy szablon Standard RWD w ustawieniach panelu sklepu. Wynika to z olbrzymiej ilości zmian kodu szablonu i skoku technologicznego, która wymaga dostosowania przez Klienta lub z udziałem specjalisty z naszego działu, dostosowania wszelkich dodatków HTML i Javascript. Bez ich zmiany, mogą się pojawić problemy.
Zalecamy, aby nasz specjalista odpłatnie przejrzał je w celu optymalizacji oraz wykorzystania potencjału nowego szablonu standard.
Obecna wersja szablonu Standard RWD v2 od lipca 2019 roku przestanie być równocześnie rozwijana. Co to oznacza? Nowe rozwiązania będą pojawiać się tylko dla wersji Standard RWD v3, która od tej pory będzie stale rozwijana, a nowe wersję będą dla niej wydawane w formie aktualizacji.
W drugiej połowie czerwca 2019 roku planujemy wydanie szablonów RWD2 (z boczną kolumną), Fashion oraz B2B opartych o strukturę i ideę Mobile First. Będą to również wydania do pobrania w formie nowych oddzielnych szablonów, a nie aktualizacji obecnych wersji.
Jeżeli korzystasz z indywidualnego szablonu i chciałbyś przenieść usprawnienia z nowej wersji Standardu RWD v3 do siebie, informujemy, że z uwagi na powyższe zmiany w strukturze kodu, nie będą one możliwe do przeprowadzenia w prosty i szybki sposób. Zmiany są na tyle głębokie i obszerne, że zalecamy w takim przypadku przeprowadzenie pełnego redesignu. Takie zmiany najlepiej zlecić nam w sierpniu tuż po tym jak zakończymy pełen cykl zmian i publikacji, dzięki czemu nowy template, będzie korzystał w pełni z pełnej mobilności.