Responzivní Design: Proč je to Vaše Nejlepší Volba A Jak to Udělat Správně

BY admin
|

explozivní růst mobilních a pokračující šíření různých zařízení, aby reagovat web design (RWD) nejlepší volba pro maloobchodníky a značky, které chcete optimalizovat, jak se jim zapojit se zákazníky napříč všemi digitální dotykové body. Podle internetového prodejce vlastní mobilní zařízení 261 milionů amerických spotřebitelů a 66 milionů těchto majitelů zařízení s nimi nakupuje. Ve skutečnosti, internetový prodejce zaznamenal 159% nárůst obchodníků na IR Mobile 500 pomocí responsive od 2013 na 2014 jako obchodníci tlačit, aby zůstali konkurenceschopní a uspokojit potřeby spotřebitelů na cestách.

Mobilní verze desktop stránky byly populární řešení až do teď, ale zkušenosti často postrádá kritické značky a obsah prvků a vazeb cenné zaměstnance a rozpočet s řízením dvou verzích webových stránek. Tím, že poskytuje informace z jednoho codebase, který rozpozná a přizpůsobí mobilním zařízením, responzivní design řeší oba tyto problémy, a z jednoho URL.

Zatím jen jako spuštění stránky elektronického obchodu není zárukou obchodního úspěchu, vysoce výkonné responzivní web vyžaduje stejnou pozornost a plánování. Pokud tomu tak není provedeno správně, responzivní weby, může přinést tolik problémů, jak se řeší: pomalý výkon, drahé, časově náročné a komplexní rozvoj testování zpoždění, a to může odhalit architektonické výzvy, které vyžadují přepsání stránky. V posledních Moovweb studium 12 responzivní weby, Internetové Prodejce poznamenat, že výkon byl 513% pomalejší na smartphony, než na PC a tablety s některých webových stránek, přičemž 18.24 sekund, aby zatížení, tak nad 3 druhý průmysl nejlepší praxe čas načítání stránky.

optimalizace pro responzivní: než začnete

v nedávném webináři internetového prodejce sponzorovaného Magento, hostující řečník, Forrester Research, Inc. Analytik Mark Grannan zdůraznil, že stejně jako většina projektů začíná Úspěšná implementace RWD sladěním obchodních a rozvojových cílů. Přičemž čas dopředu analyzovat mobilní dopravní vzory, vytvořit zařízení prioritní seznamy, recenze a informační architektury a obsahu umožní, aby vaše týmy se pohybovat rychleji. Úzce spojující design a vývojové týmy a urychlení jejich spolupráci s prototypování nástroje a vývojové rámce může stejně tak zlepšit čas na trhu. Grannan také doporučuje, že inženýři vyřešit dlouho-ocas požadavky od začátku, jako je určení, zda CMS nebo webové architektuře jsou změny potřebné pro podporu responzivní design projektů, a aktivně řešit rychlost a místo akcelerace přes frontend optimalizačních technik. Nakonec Grannan doporučil přizpůsobit metriky obchodní hodnoty (jako je provoz na webu a konverze) rozsahu vývoje.

optimalizace pro citlivé: Mapujte cestu svých zákazníků

stejně jako všechno ostatní, optimalizace vašeho webu pro více zařízení začíná vaším publikem – jejich složením a chováním.

  • jaké procento provozu vašeho webu přichází prostřednictvím mobilních zařízení? Většina obchodníků peg 20-30% mobilní provoz jako spouštěč pro zvažování citlivý

  • jak přistupují k vašemu webu dnes? Makro trendy záleží méně než specifika vašeho webu a vašeho zákazníka

  • jaká zařízení / prohlížeče upřednostňuje vaše zákaznická populace? Je důležité mít na paměti, že responzivní webový design je implementován pomocí technik, které jsou nekompatibilní se staršími prohlížeči (zejména IE8 a staršími). Identifikaci nejlepších zařízení s přístupem na váš web vám také pomůže určit počet obrazovce zarážky, pro které by měl design webu

Optimalizace pro Citlivé: Definovat Obsah Strategie

Příprava obsahu pro webové stránky reagující je jednou z největších výzev, které obchodníci se tváří, jako že budou muset změnit způsob, jakým si myslí o obsahu. Často se říká, že implementace responzivního webového designu je spíše otázkou obsahové strategie než otázkou designu.

Jako Gravitační Oddělení je Brendan Falkowski, „Mobilní První je metodika, která se vás zeptá, aby design interakcí myšlení na malé obrazovce jako první. Mobile first není odizolovaná verze webu pro stolní počítače.“

podívejte se na hledané výrazy, které zákazníci používají, a začněte definováním důležitých interakcí pro váš obchod. Upřednostněte funkce a informace pro efektivnější uspořádání mobilního zobrazení a poté zvětšete na čistší web pro velké obrazovky. Vytvoření vítězného zážitku není o odstranění nástroje nebo hloubky.

naopak uživatelé očekávají, že budou moci provádět jakoukoli akci z jakéhokoli zařízení, které drží. To znamená filtrování výsledků vyhledávání, čtení recenzí, ukládání seznamů přání a odhlášení musí být univerzálně přístupné.

optimalizace pro citlivé: Kód a obrázky

jednou z výzev RWD je, že jeho jediná kódová základna může být velmi velká a pomalá. Zvažte tyto tipy, mnoho sdílených Markem Grannanem v nedávném webináři internetového prodejce, pro optimální mobilní zážitek:

  • Zatížení prioritu obsahu první a pozdní zatížení („lazy load“) obsah pod ní vytvořit vnímání rychlejší výkon, spíše než čekat, až se obsah displeje, když je vše naloženo

  • Použití server-side technologie doručit nebo render obrázky dostatečně velké pro zařízení

  • Kódu své stránky snížit počet zpátečních zpět na server pro snížení latence

  • Použití otevřené webové fonty, spíše než vlastní fonty ke snížení stránka hmotnosti

  • Zvažte použití třetí stranou zrychlení poskytovatelé, jako Cdn, optimalizace výkonu prostřednictvím řady technologií a místního obsahu do mezipaměti

Jdu Reagovat: Lekce ze Zákopů

Hubená Vazby je jedním z největších prodejců a velkoobchodů kravaty ve Spojených Státech a jedna z prvních společností, které prodávají tradiční šály on-line. Bylo tedy jen vhodné, aby maloobchodník byl jedním z prvních obchodníků, kteří na začátku roku 2012 vyvinuli responzivní web.

vytvořit výjimečné zkušenosti zákazníků, že Hubená Vazby, Gravitační Oddělení výrazně zvýšila složitost jejich taxonomie mapování každý atribut standardizovaném formátu. Předtím, než uživatelé mohli procházet pouze rigidní strom kategorií. Dynamická taxonomie otevřela více vstupů do každého produktu.

kombinace responzivního designu a flexibilní taxonomie přispěla k masivnímu zvýšení výnosů, hodnoty SEO a míry konverze napříč všemi platformami a tvarovým faktorem.

  • 58% nárůst transakcí MEZIROČNĚ

  • 20.8% zvýšení AOV

  • 187% zvýšení příjmů z Android zařízení

  • 224% zvýšení příjmů z ipad

  • 437% zvýšení příjmů z iphone

Vax je nejlepší-prodávat floorcare značky ve velké BRITÁNII a část floorcare rozdělení Hong Kong– založené TTi, globální leader v produktech pro domácí kutily a stavební průmysl.

podnikání roste o 40% ročně a online podnikání zaznamenalo 85%+ růst.

společnost zaznamenala obrovský úspěch z flash prodeje, nebo to, co nazývá Yard prodeje.

tyto pětidenní akce přinášejí více než 3000 souběžných uživatelů na vrcholu a byly velmi úspěšné! Když společnost viděla, že 40% provozu pro Yard prodeje pochází z mobilních zařízení, věděli, že potřebují mobilní optimalizované stránky.

ředitel TTI Floorcare EMEA Nigel Aitchison sdílel skvělé výsledky ze své řady Vax po spuštění na Magento Enterprise Edition 1.14 je citlivé téma, které jim trvalo jen čtyři týdny, než se postavili a otestovali. Díky responzivnímu webu viděl VAX konverzi během svého velkého prodeje na dvoře 42% na tabletech a 156% na mobilních telefonech.

další zdroje:

internetový prodejce-23. července 2014: kroky k dosažení responzivního úspěchu webového designu

Forrester Research-Jan. 16, 2014: Šest Responzivních Nástrah Projektu Webových Stránek A Osvědčené Postupy, Jak Se Jim Vyhnout

Internetový Prodejce-2. Května 2013: Hubená Vazby dostane 211% nárůst v mobilní prodej s jeho responzivní design webu

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

Moovweb – červenec 2014: 8 Způsobů, jak Zlepšit Výkon Vašeho Responzivního Webu

Magento Blog – Květen 13, 2014: Magento Umožňuje Responzivní Weby v Polovině Času,