Responsive Design: miért ez a legjobb megoldás & hogyan kell csinálni?

BY admin
|

a mobil robbanásszerű növekedése és a különböző eszközök folyamatos elterjedése teszi a responsive web design-t (RWD) a legjobb megoldássá azoknak a kiskereskedőknek és márkáknak, akik optimalizálni akarják az ügyfelekkel való kapcsolattartást az összes digitális érintési ponton. Az internetes kiskereskedő szerint 261 millió amerikai fogyasztó rendelkezik mobileszközökkel, és 66 millió ilyen eszköz tulajdonosa vásárol velük. Valójában az internetes kiskereskedő 159% – kal növekedett az IR Mobile 500-on a responsive használatával 2013-tól 2014-ig, mivel a kereskedők arra törekedtek, hogy versenyképesek maradjanak és megfeleljenek a fogyasztók igényeinek útközben.

az asztali webhelyek mobil verziója eddig népszerű megoldás volt, de a tapasztalat gyakran hiányzik a kritikus márkaépítési és tartalmi elemekből, és értékes személyzetet és költségvetést köt össze a weboldal két verziójának kezelésével. Azáltal, hogy az információkat egyetlen kódbázisról továbbítja, amely felismeri és alkalmazkodik a mobileszközhöz, a responsive design mindkét problémát megoldja, és egyetlen URL-ről.

mégis, ahogy egy e-kereskedelmi webhely elindítása nem garantálja az üzleti sikert, a jól teljesítő reszponzív webhely egyenlő figyelmet és tervezést igényel. Ha nem jól csinálják, a reszponzív webhelyek annyi kihívást hozhatnak, amennyit megoldanak: lassú teljesítmény, drága, időigényes és összetett fejlesztési tesztelési késések, és felfedheti az építészeti kihívásokat, amelyek megkövetelik a webhely átírását. Egy nemrégiben készült Moovweb tanulmány 12 reszponzív oldalak, internetes kiskereskedő megjegyezte, hogy a teljesítmény 513% – kal lassabb volt az okostelefonokon, mint a PC-k és táblagépek egyes oldalak figyelembe 18.24 másodperc betöltése, jóval meghaladja a 3 második iparági legjobb gyakorlat oldal betöltési idő.

optimalizálás érzékeny: Mielőtt elkezdené

egy nemrégiben Magento által szponzorált internetes kiskereskedő webinar, vendég hangszóró, Forrester Research, Inc. Mark Grannan elemző hangsúlyozta, hogy a legtöbb projekthez hasonlóan az RWD sikeres megvalósítása az üzleti és fejlesztési célok összehangolásával kezdődik. Ha időt vesz igénybe a mobil forgalmi minták elemzésére, az eszköz prioritási listáinak létrehozására, valamint az információs architektúra és tartalom áttekintésére, a csapatok gyorsabban mozoghatnak. A tervező és fejlesztő csapatok szoros összekapcsolása és a prototípuskészítő eszközökkel és fejlesztési keretekkel való együttműködésük felgyorsítása hasonlóan javíthatja a piacra jutási időt. Grannan azt is tanácsolta, hogy a mérnökök a kezdetektől megoldják a hosszú farok követelményeit, például meghatározzák, hogy szükség van-e CMS vagy webes architektúra változtatásokra a reszponzív tervezési projektek támogatásához, és proaktívan kezelik a sebességet és a webhely gyorsulását frontend optimalizálási technikákkal. Végül a Grannan azt javasolta, hogy az üzleti értékmutatókat (például a webhelyforgalmat és a konverziókat) illessze össze a fejlesztési hatókörrel.

optimalizáló érzékeny: Térképezze fel ügyfelei utazását

mint minden más, a webhely optimalizálása több eszközre is a közönséggel kezdődik – összetételükkel és viselkedésükkel.

  • a webhely forgalmának hány százaléka érkezik mobileszközökön keresztül? A legtöbb kereskedő peg 20-30% mobil forgalom, mint a ravaszt figyelembe véve reagáló

  • hogyan férnek hozzá ma a webhelyéhez? A makró trendek kevésbé számítanak, mint a webhely és az ügyfél sajátosságai

  • milyen eszközöket / böngészőket támogat az ügyfélpopuláció? Fontos szem előtt tartani, hogy a reszponzív webdesign olyan technikákkal valósul meg, amelyek nem kompatibilisek a régebbi böngészőkkel (nevezetesen az IE8 és régebbi böngészőkkel). A webhelyéhez hozzáférő legfontosabb eszközök azonosítása segít meghatározni a képernyő töréspontjainak számát is, amelyekhez meg kell terveznie webhelyét

optimalizálás a reagálásra: határozza meg tartalmi stratégiáját

A tartalom előkészítése egy reagáló webhelyhez az egyik legnagyobb kihívás, amellyel a kereskedők szembesülnek, mivel meg kell változtatniuk a tartalomra vonatkozó gondolkodásukat. Gyakran mondják, hogy a reszponzív webdesign megvalósítása inkább tartalomstratégiai kérdés, mint tervezési kérdés.

ahogy a gravitációs osztály Brendan Falkowski fogalmazott: “a Mobile First egy olyan módszertan, amely arra kéri Önt, hogy tervezzen interakciókat úgy, hogy először a kis képernyőre gondol. A Mobile first nem egy asztali webhely lecsupaszított változata.”

nézze meg az ügyfelek által használt keresési kifejezéseket, és Kezdje azzal, hogy meghatározza az üzletének fontos interakcióit. Rangsorolja a funkciókat és az információkat a mobil nézet hatékonyabb megszervezéséhez, majd méretezze fel a tisztább webhelyet a nagy képernyők számára. A nyerő élmény létrehozása nem a hasznosság vagy a mélység eltávolításáról szól.

éppen ellenkezőleg, a felhasználók elvárják, hogy bármilyen műveletet végrehajtsanak bármilyen eszközről, amelyet tartanak. Ez azt jelenti, hogy a keresési eredmények szűrése, a vélemények olvasása, a kívánságlisták mentése és a Kijelentkezés egyetemesen hozzáférhetőnek kell lennie.

optimalizáló érzékeny: Kód és képek

az RWD egyik kihívása, hogy egyetlen kódbázisa nagyon nagy és lassú lehet. Fontolja meg ezeket a tippeket, amelyeket Mark Grannan osztott meg a legutóbbi internetes kiskereskedő webináriumán, az optimális mobil élmény érdekében:

  • load priority content first and late load (“lusta terhelés”) tartalom alatta, hogy megteremtse a gyorsabb teljesítmény észlelését, ahelyett, hogy minden betöltése után Várna A tartalom megjelenítésére

  • használjon szerveroldali technológiát az eszközhöz megfelelő méretű képek kézbesítéséhez vagy rendereléséhez

  • kódolja be webhelyét, hogy csökkentse a kiszolgálóra történő visszautazások számát A késés csökkentése érdekében

  • az oldal súlyának csökkentése érdekében az egyéni betűtípusok helyett nyílt webes betűtípusokat használjon

  • fontolja meg a harmadik fél gyorsítását szolgáltatók, mint például a CDN-ek, a teljesítmény optimalizálására számos technológia és helyi tartalom gyorsítótárazása révén

Going Responsive: Lessons from the Trenches

a Skinny Ties az Egyesült Államok egyik legnagyobb nyakkendőkereskedője és nagykereskedője, és az egyik első olyan vállalat, amely hagyományos nyakkendőket értékesít online. Tehát csak az volt a megfelelő, hogy a kiskereskedőnek az első kereskedőknek kell lennie, akik 2012 elején reagáló webhelyet fejlesztettek ki.

a Skinny Ties kivételes ügyfélélményének megteremtése érdekében a Gravity Department drasztikusan megnövelte taxonómiájuk összetettségét azáltal, hogy minden attribútumot szabványosított formátumra térképezett fel. Mielőtt a felhasználók csak egy merev kategóriafában tudtak navigálni. A dinamikus taxonómia több bejáratot nyitott meg minden termékhez.

a responsive design és a rugalmas taxonómia kombinációja hozzájárult a bevételek, a SEO érték és a konverziós arányok jelentős növekedéséhez minden platformon és formában.

  • 58% a tranzakciók növekedése évente

  • 20.8% az AOV növekedése

  • 187% az Android-eszközökből származó bevételek növekedése

  • 224% az ipadekből származó bevételek növekedése

  • 437% az iPhone-okból származó bevételek növekedése

a Vax a legkelendőbb floorcare márka az Egyesült Királyságban, és a hongkongi székhelyű TTi floorcare divíziójának része, amely globális vezető szerepet tölt be a lakásfelújítás és az építőipar területén.

az üzlet évente 40% – kal növekszik, és az online üzlet 85% – os növekedést tapasztalt.

a vállalat óriási sikert ért el a flash értékesítésből, vagy amit udvari értékesítésnek hív.

ezek az ötnapos események több mint 3000 egyidejű felhasználót vonzanak a peak-en, és nagyon sikeresek voltak! Amikor a vállalat látta, hogy az udvari értékesítés forgalmának 40% – a mobil eszközökről származik, tudták, hogy mobilra optimalizált webhelyre van szükségük.

a TTi Floorcare EMEA igazgatója, Nigel Aitchison nagyszerű eredményeket osztott meg Vax sorozatukkal, miután elindították a Magento Enterprise Edition 1-et.A 14 responsive témája, amelynek elkészítése és tesztelése mindössze négy hétbe telt. A reszponzív oldallal a Vax a nagy udvari eladás során 42% – kal, a mobiltelefonokon pedig 156% – kal növelte az átalakítást.

további források:

internetes kiskereskedő-július 23, 2014: lépések elérése reszponzív Web Design siker

Forrester Research-Jan. 16, 2014: Hat Reszponzív Weboldal Projekt Buktatók És A Legjobb Gyakorlatok, Hogyan Lehet Elkerülni Őket

Internetes Kiskereskedő-Május 2, 2013: A Skinny Ties 211% – kal növeli a mobil értékesítést a reszponzív tervezési oldalával

Brendan Falkowski : https://speakerdeck.com/brendanfalkowski

Moovweb-július 2014: 8 módon, hogy javítsa teljesítményét a reszponzív oldalon

Magento Blog-május 13, 2014: Magento lehetővé teszi a reszponzív oldalak fele annyi idő alatt