A rossz e-kereskedelmi sablon választásának rejtett költségei

Összefoglalás

A főnöke kinézet alapján hagyja jóvá a sablonokat. De egy kis belső marketingcsapat számára a rossz sablon valódi költsége a teljesítményduzzadásban, a mobilhasználati súrlódásokban és a testreszabási órákban rejlik. Ez a cikk egy gyakorlati keretrendszert ad a sablonválasztás megalapozásához kemény kritériumokkal – sebesség, mobilkészség, jövőállóság –, hogy vízbiztos érvelést tudjon felépíteni. Megtanulja, hogyan tesztelje a betöltési időket az elköteleződés előtt, miért sül el visszafelé a funkciókban gazdag sablon, és hogyan kerülje el a tervezési adósságot, ami lelassít minden jövőbeli frissítést. Ezek azok a kritériumok, amikre a főnöke nem gondol, de a fejlesztője hálás lesz érte. Hagyja abba a sablonok szemre való választását, és kezdjen el adatok alapján választani.

A főnöke szerint az e-kereskedelmi sablon kiválasztása esztétikai döntés. Bármit jóváhagy, ami tisztán néz ki az asztali gépén. De a választott sablon csendesen meghatározza az oldalsebességet, a mobilélményt és azt, hogy mennyi fejlesztői időt éget el – és egy kis csapat számára, amely minden órát megindokol, a rossz sablon egy költségvetési akna. Íme, hogyan válasszon olyat, ami nem süllyeszti el, lépésről lépésre.

1. Tesztelje a sebességet a telepítés előtt

Mutasson a főnökének két sablont. Az egyik parallaxis animációkat, teljes szélességű videó hőst és egy karusselt tartalmaz. A másik egyszerűnek tűnik, de 2 másodperc alatt betölt. A főnöke az elsőt kedveli. Ne hagyja, hogy ez megtörténjen. Szánjon öt percet, és futtassa le mindkettőt egy ingyenes sebességtesztelő eszközzel, mielőtt elkötelezi magát. Iparági kutatások azt mutatják, hogy a lassú betöltési idők közvetlenül ártanak a konverzióknak – a látogatók elmennek, és gyakran nem jönnek vissza. Egy kis csapat számára, dedikált teljesítménymérnök nélkül, egy nehéz sablon azt jelenti, hogy hónapokat tölt a lassulások elleni küzdelemmel az eladás helyett. Az elv: a teljesítmény nem alku tárgya. Még egy gyönyörű sablon is értéktelen, ha elriasztja a vásárlókat.

Gyakorlati lépés: Mielőtt telepítene bármilyen új sablont, tesztelje a demóoldalát a Google PageSpeed Insights segítségével. Ha a mobil pontszám 80 alatt van, lépjen tovább. Ha 60 alatt van, fusson. Igen, később optimalizálhatja, de egy karcsú alappal kezdve hetek munkáját takarítja meg.

2. Igazítsa a testreszabást a valós munkaterheléséhez

Olyan sablont választ, amely rendelkezik egy drag-and-drop építővel, amellyel átrendezhet minden pixelt. Remek, gondolja – teljes irányítás. Aztán három hetet tölt azzal, hogy a termékrácsot az Ön katalógusához igazítsa. A főnöke megkérdezi, miért késik a bevezetés. Az igazság: a sablon feltételezte, hogy van egy dedikált tervezője. Több elrendezési opcióval érkezett, amelyek egyike sem illett az Ön termékváltozataihoz. Végül is egyedi CSS-t kellett írnia. Az elv: a rugalmasság csapda, ha elrejti a komplexitást. Egy kis csapat számára az idő a legszűkösebb erőforrás. Olyan sablont válasszon, amely a szükségleteinek 80%-át dobozból kielégíti, ne olyat, amely 80% testreszabást igényel.

Gyakorlati lépés: Sorolja fel a három legfontosabb oldaltípusát (pl. terméklista, termékrészletek, fizetés). Keressen olyan sablont, ahol ezek az oldalak nulla strukturális változtatást igényelnek. Ha a demó nem hasonlít eléggé arra, amire szüksége van, keressen tovább.

3. Priorizálja a mobil fizetési folyamatot

A főnöke a 27 hüvelykes monitorán nézi át a sablont. „Remekül néz ki” – mondja. De amikor telefonon teszteli a fizetést, hat lépésből áll, a gombok aprók, és az űrlapmezők nem töltődnek ki automatikusan. A mobil vásárlás ma már a forgalom nagy részét adja számos üzletben, és a mobilalkalmazásokról kimutatták, hogy magasabb konverziós arányt érnek el, mint a mobil weboldalak – ami azt jelenti, hogy a mobilélmény nem lehet utólagos gondolat. A főnöke nem fogja látni a súrlódást az íróasztalától. Nekik kell rámutatnia. Az elv: egy sablon, ami asztali gépen jól néz ki, de mobilban megbukik, nem reszponzív – hibás. A mobil-első tervezés azt jelenti, hogy a magvásárlási folyamatnak hibátlanul kell működnie egy 5 hüvelykes képernyőn.

Gyakorlati lépés: Tesztelje a sablon demóboltját egy valódi telefonon (vagy böngésző fejlesztői eszközeivel), és menjen végig a fizetésen. Számolja a koppintásokat, és keresse a zsákutcákat. Ha a fizetés több mint három lépést igényel, vagy vízszintes görgetést igényel, utasítsa el a sablont.

4. Ellenőrizze a fejlesztő múltbeli teljesítményét

Hat hónappal a bevezetés után a főnöke hűségprogramot szeretne hozzáadni. Telepíti a bővítményt, és a sablon elrendezésének fele összeomlik. A sablont egy éve nem frissítették. Most egy hetet vár, vagy fizet egy fejlesztőnek, hogy megoldja az ütközéseket. Az elv: a sablon egy élő termék. Válasszon olyat egy aktív fejlesztőtől, aki rendszeresen ad ki frissítéseket és dokumentálja a kompatibilitást a főbb bővítményekkel. A főnöke nem fogja ellenőrizni ezt, de Ön tegye a döntési kritériumai részévé.

Gyakorlati lépés: Nyissa meg a sablon támogatási fórumát vagy változásnaplóját. Keressen legalább egy frissítést az elmúlt három hónapból. Ellenőrizze, hogy a gyakori bővítmények (mint a vélemények, előfizetések vagy hűségeszközök) explicit módon támogatottak. Tudjon meg többet a sablon támogatásának értékeléséről.

5. Távolítsa el a felesleget a bevezetés előtt

Bevezeti, és a sablon tartalmaz egy hírlevél felugró ablakot, egy Facebook hírfolyamot, egy mega menüt és nyolc különböző ikonkészletet – amelyek egyikét sem kérte vagy nem volt rá szüksége. Minden extra funkció kódot ad hozzá, lassítja az oldalt és növeli a karbantartást. A főnöke látja a felugró ablakot, és bónusznak gondolja. Ön egy jövőbeli teljesítményproblémát lát. Az elv: a minimalizmus győz. Távolítson el minden olyan funkciót, amelyet nem használ aktívan. Használjon gyermek témát, hogy megakadályozza a frissítések által visszahozott felesleget. Egy jól megválasztott sablon alapozás legyen, nem kész ház.

Gyakorlati lépés: Az élesítés előtt inaktiváljon minden nem létfontosságú modult, amit a sablon tartalmaz. Távolítsa el a nem használt szkripteket és stílusokat. Futtasson egy teljesítményjelentést, és törekedjen a betöltési idő legalább 15%-os csökkentésére.

Következtetés

A sablonválasztás nem tervezési döntés egy kis csapat számára – költségvetési döntés. A főnöke a látvány alapján ítél. Önnek a rejtett költségek alapján kell ítélnie: sebesség, mobil fizetési súrlódás, testreszabási idő, frissítési hiányosságok és funkciófelesleg. Amikor bemutatja a választását, fogalmazza meg olyan kifejezésekkel, amelyeket megért: „Ez a sablon $X-t spórol meg nekünk a következő évben a fejlesztői javításokon, mert gyors, mobilra kész és rendszeresen frissítik.” Ezt a nyelvet minden főnök beszéli. A mobil-első opciók értékeléséhez tekintse meg teljes mobil-első sablon útmutatónkat.