Mobiliojo e. prekybos šablonų kontrolinis sąrašas

Santrauka

Mobilioji prekyba dabar sudaro daugiau nei 59 % viso pasaulio e. prekybos pardavimų, tačiau daugelis parduotuvių savininkų vis dar renkasi pirmiausia staliniams kompiuteriams skirtus šablonus, kurie apsunkina nykščio naršymą ir lėtina įkėlimo laiką. Šiame straipsnyje pateikiamas žingsnis po žingsnio kontrolinis sąrašas, kaip įvertinti bet kurį e. prekybos šabloną pagal mobilųjį našumą – nuo lietimo taikinių dydžio iki atsiskaitymo srauto optimizavimo. Sužinosite, į kokias konkrečias funkcijas atkreipti dėmesį, pvz., adaptyvius lūžio taškus ir tinginį įkėlimą, taip pat dažnas klaidas, pvz., per daug papildinių, kurie išpučia mobiliuosius puslapius. Peržvelgsime testavimo įrankius, realius pavyzdžius iš Shopify ir WordPress temų bei kaip teikti pirmenybę greičiui, o ne blizgantiems vaizdams. Galiausiai turėsite daugkartinio naudojimo sistemą, leidžiančią pasirinkti šabloną, kuris maksimaliai padidina mobiliuosius konversijas, neaukojant darbalaukio kokybės. Įgyvendinę šiuos patikrinimus, jūsų parduotuvė veiks greičiau, naršys sklandžiau ir parduos daugiau mažame ekrane.

Mobiliojo e. prekybos šablonų kontrolinis sąrašas

Daugiau nei 59 % pasaulio e. prekybos pardavimų dabar vyksta mobiliaisiais įrenginiais. Vis dėlto per daug parduotuvių savininkų pasirenka darbalaukiui pritaikytus šablonus, o vėliau susiduria su dideliais atmetimo rodikliais ir mažomis konversijomis išmaniuosiuose telefonuose. Mobilusis šablonas nėra prabanga – tai būtinybė. Tačiau turint tūkstančius temų, kaip išsirinkti tą, kuri tikrai veikia mobiliajame? Šis kontrolinis sąrašas padės jums pereiti šešis kritinius patikrinimus, pateikiant praktinius veiksmus, realius pavyzdžius ir dažnas klaidas, kurių reikėtų vengti.

1. Patikrinkite lietimo taikinių dydį (min. 48x48 pikseliai)

Niekas taip neerzina mobiliųjų pirkėjų kaip netinkamo mygtuko paspaudimas. „Apple“ ir „Google“ rekomenduoja minimalų lietimo taikinį – 48x48 pikselius (apie 9 mm). Mažesni taikiniai sukelia klaidingus paspaudimus ir apleistus krepšelius.

Kaip išbandyti: Atidarykite šablono demonstraciją tikrame telefone (ne tik naršyklės dydžio keitime). Bakstelėkite naršymo nuorodas, mygtukus „Į krepšelį“ ir formų laukus. Jei netyčia suaktyvinate gretimus elementus, taikinys per mažas.

Pavyzdys: Populiari tema „Astra“ skirta „WooCommerce“ lengvai išlaiko šį testą, turėdama gerai išdėstytus mygtukus. Priešingai, kai kurios universalios temos, kaip „Avada“, suspaudžia per daug elementų, todėl reikia priartinti, kad tiksliai paspaustumėte.

Sprendimas: Ieškokite šablonų, kuriuose naudojamos gausios paraštės ir aiškūs tarpai. Venkite tų, kurie turi tankius tinklelio išdėstymus, mažinančius elementus mobiliajame ekrane.

2. Patvirtinkite nykščiui patogią navigaciją

Mobilieji vartotojai naudoja nykščius. Pagrindiniai veiksmai turėtų būti pasiekiami apatinėje ekrano pusėje – ypač mygtukas „Į krepšelį“ ir naršymo meniu.

Kaip išbandyti: Viena ranka laikykite telefoną ir pabandykite atidaryti meniu, paiešką ir įdėti prekę į krepšelį. Jei reikia ištiesti ar pakeisti ranką, išdėstymas nėra optimizuotas.

Pavyzdys: „Shopify“ tema „Debut“ krepšelio mygtuką deda apačioje dešinėje, lengvai pasiekiamą nykščiu. Daugelis senesnių temų palieka jį viršuje, todėl reikia tempti nykštį.

Sprendimas: Rinkitės šablonus su lipnia apatine navigacija arba plaukiojančiu krepšelio mygtuku. Venkite hamburgerio meniu, kuriam atlikti bendrus veiksmus reikia dviejų žingsnių.

3. Supaprastinkite atsiskaitymo procesą

Mobiliajame įrenginyje kiekvienas papildomas žingsnis praranda klientus. Mobilusis šablonas turėtų pasiūlyti supaprastintą atsiskaitymą su minimaliais laukais, automatinio pildymo palaikymu ir svečio atsiskaitymu kaip numatytąją parinktį.

Kaip išbandyti: Atlikite visą pirkimą demonstracijoje. Suskaičiuokite ekranus nuo krepšelio iki patvirtinimo. Daugiau nei 3-4 ekranai yra per daug. Ieškokite progreso indikatorių ir aiškių raginimų veikti.

Pavyzdys: „WooCommerce Storefront“ tema integruojasi su papildiniais, tokiais kaip „Direct Checkout“, kad visiškai praleistų krepšelio puslapį. Šablonai, kurie prieš atsiskaitymą reikalauja sukurti paskyrą, sumažins mobiliąsias konversijas.

Sprendimas: Rinkitės šablonus, palaikančius vieno puslapio atsiskaitymą arba akordeono atsiskaitymą. Patikrinkite, ar kredito kortelių formos naudoja tinkamus įvesties tipus (pvz., type="tel" skaičiams), kad būtų atidaryta skaitmeninė klaviatūra.

4. Optimizuokite vaizdus greičiui

Dideli, neoptimizuoti vaizdai yra pagrindinė lėto mobiliųjų puslapių įkėlimo priežastis. Mobilieji šablonai turėtų įtraukti tinginį įkėlimą (vaizdai įkeliami tik tada, kai jie matomi) ir teikti WebP ar AVIF formatus.

Kaip išbandyti: Naudokite „Google Lighthouse“ („Chrome“ kūrėjo įrankius) demonstracinėje mobiliojo rodinyje. Patikrinkite audito elementus „Defer offscreen images“ ir „Serve images in next-gen formats“. Geras balas atitinka abu reikalavimus.

Pavyzdys: „WordPress“ tema „Blocksy“ natūraliai palaiko tinginį įkėlimą ir WebP konvertavimą per papildinius, tokius kaip „WebP Express“. Kai kurios aukščiausios kokybės temos naudoja sunkius slankmačių scenarijus, kurie visiškai ignoruoja tinginį įkėlimą.

Sprendimas: Įsitikinkite, kad šablonas veikia su talpyklos ir vaizdų optimizavimo papildiniu. Venkite temų, kurios antraštėje įtraukia kelis per didelius herojų vaizdus.

5. Sumažinkite papildinių ir scenarijų skaičių

Kiekvienas papildomas papildinys ar scenarijus prideda HTTP užklausų ir JavaScript apkrovą. Mobilieji šablonai turėtų būti liekni – daug funkcijų gali būti įmontuotos į pačią temą.

Kaip išbandyti: Pažiūrėkite į šablono funkcijų sąrašą. Ar jame yra puslapių konstruktorius, slankmačiai, mega meniu ir kelios šriftų šeimos? Kiekviena iš jų prideda svorio. Naudokite „WebPageTest“, kad pamatytumėte užklausų skaičių mobiliajame.

Pavyzdys: „WordPress“ tema „GeneratePress“ žinoma dėl savo lengvo kodo (mažiau nei 30 KB). Priešingai, universalios temos, kaip „The7“, gali įkelti dešimtis nenaudojamų scenarijų, sukeldamos 5+ sekundžių mobiliųjų puslapių įkėlimo laiką.

Įspėjimas: Ne visos funkcijos yra blogos; rinkitės tik tai, ko jums reikia. Šablonas su įmontuotu tinginiu įkėlimu yra geresnis nei tas, kuriam reikia papildinio šiai funkcijai.

6. Teikite pirmenybę greičiui, o ne blizgančiai išvaizdai

Mobilieji vartotojai tikisi, kad puslapiai įkels per mažiau nei 3 sekundes. Šablono demonstracija gali atrodyti nuostabiai, tačiau sunkios animacijos ir paralaksiniai efektai gali sugriauti našumą.

Kaip išbandyti: Paleiskite „Lighthouse“ demonstraciniame URL su imituotu 3G ryšiu. Siekite našumo balo, didesnio nei 80. Taip pat patikrinkite interaktyvumo laiką (TTI) – gera, jei mažiau nei 5 sekundės.

Pavyzdys: Nemokama „Shopify“ tema „Dawn“ gauna aukštą įvertinimą pagal pagrindinius žiniatinklio elementus dėl minimalaus JavaScript. Kai kurios aukščiausios kokybės temos su sudėtingomis animacijomis įvertinamos žemiau 50, kenkdamos ir vartotojo patirčiai, ir SEO.

Sprendimas: Rinkitės šablonus, kurie didžiuojasi greičiu – ieškokite aprašyme žodžių „lengvas“ arba „orientuotas į našumą“. Venkite tų, kurie pagrindinėms sąveikoms naudoja „jQuery“.

Kaip visa tai sudėti: jūsų mobiliojo optimizavimo vertinimo sistema

Prieš pasirinkdami bet kurį šabloną, skirkite 30 minučių šiems šešiems patikrinimams atlikti. Sukurkite paprastą vertinimo lentelę (išlaikyta / neišlaikyta pagal kiekvieną kriterijų). Bet kuris šablonas, neišlaikantis trijų ar daugiau, turėtų būti pašalintas. Likusiems finalininkams išbandykite keliuose realiuose įrenginiuose, o ne tik simuliatoriuose.

Atminkite: mobilusis šablonas yra pagrindas, tačiau vis tiek turite jį tinkamai sukonfigūruoti. Pašalinkite nenaudojamus scenarijus, suspaudinkite vaizdus ir naudokite turinio pristatymo tinklą (CDN). Stebėkite mobilųjį našumą po paleidimo naudodami Google Search Console pagrindinių žiniatinklio elementų ataskaitą.

Įspėjimai ir dažnos klaidos

• Reagavimas nereiškia mobilusis: Daugelis šablonų teigia, kad yra „reagavę“, tačiau buvo sukurti pirmiausia darbalaukiui, o vėliau pritaikyti mažesniems ekranams. Tikras mobilusis optimizavimas pradedant kūrimą teikia pirmenybę mažiems ekranams.
• Nepersistenkite su tinkinimu: Per daug papildomų CSS ar JavaScript gali sugadinti šablono mobiliojo optimizavimo. Keiskite minimaliai.
• Stebėkite temos išpūtimą: Aukščiausios kokybės temos dažnai įtraukia dešimtis funkcijų, kurių niekada nenaudosite. Kiekviena iš jų prideda kodo ir lėtina mobiliųjų puslapių įkėlimą.
• Patikrinkite trečiųjų šalių integracijas: Jei naudojate papildinius atsiliepimams, tiesioginiam pokalbiui ar analitinikai, išbandykite jų poveikį mobiliajame. Kai kurie įkrauna sunkius scenarijus.

Išvados

Mobilioji prekyba nėra ateitis – tai dabartis. Naudodami šį kontrolinį sąrašą išvengsite dažnos spąstų – pasirinkti darbalaukio temą ir tikėtis, kad ji veiks telefonuose. Įvertinkite kiekvieną šabloną pagal šešis kriterijus: lietimo taikiniai, nykščio navigacija, atsiskaitymo paprastumas, vaizdų optimizavimas, scenarijų mažinimas ir bendras greitis. Geriausi mobilieji šablonai įkeliami greitai, jaučiasi intuityvūs ir konvertuoja lankytojus į klientus be trinties. Pritaikykite šią sistemą kito šablono pasirinkimui, ir jūsų parduotuvė bus pasirengusi daugumai pirkėjų, kurie jau dabar naršo savo telefonuose.