Mít či nemít mobilní verzi e- shopu? aneb jak na tvorbu mobilní verze e- shopu

webdesign redakční systémy internetové obchody řešení na míru

Mít či nemít mobilní verzi e-‐shopu?

aneb jak na tvorbu mobilní verze e-‐shopu Michal Horák, PeckaDesign

Tvoříme přitažlivá webová řešení


Proč mobilní verze webu?

Protože lidé už neprohlíží web pouze na klasickém počítači Je zde mnoho dalších plaGorem: mobily, tablety, herní konzole, infosystémy v autech...



Má smysl mobilní verze pro e-‐shop?

Ano, počet návštěvníků nakupujících přes mobilní zařízení se neustále zvyšuje



Několik celosvětových čísel a trendů o mobilním internetu



Prodeje mobilních zařízení •  Prodej chytrých telefonů již překonal prodej klasických počítačů na konci roku 2010 zdroj: Smartonline.com

•  Předpokládá se, že prodeje tabletů překonají prodeje počítačů v roce 2013 zdroj: Appleinsider.com



Srovnání hlavních mobilních plaJorem •  iOS (Apple) má podíl 65% v mobilní návštěvnos[ webu, Android (Google) 20% zdroj: Theregister.co.uk

•  91% návštěvnos[ webu z tabletů jsou iPady zdroj: Apple



Počet akKvovaných Android zařízení za den •  500.000 (červenec 2011)

•  700.000 (prosinec 2011)

•  850.000 (únor 2012)

• 1.300.000

(září 2012)

z toho 70.000 kusů tablety



Růst mobilního internetu

V roce 2013 se očekává více přístupů na internet z mobilních zařízení než z klasických počítačů zdroj: Mediapost.com / Gartner



Predikce pro mobilní nákupy •  Na vánoční sezonu 2012 bude podíl mobilních nákupů 20% zdroj: IMRG Capgemini

•  Návštěvnost z mobilních zařízení bude v té době činit 30% zdroj: Qrcoderess.com

•  V roce 2017 bude podíl mobilních nákupů 25% (730 miliard USD), převážně z chytrých telefonů zdroj: Juniper Research



Chování uživatelů •  Nakupování je třei nejoblíbenější ak[vitou při používání chytrého telefonu (66% ženy) zdroj: Getprice.com.au

•  Při nákupech se používá více zařízení, 65% uživatelů začne na mobilu, 61% pokračuje na notebooku a 4% na tabletu zdroj: Adage.com

•  V USA 76% vlastníků chytrých telefonů čte emaily pouze na těchto zařízeních zdroj: Pew Research



AkKvity spojené s mobilními nákupy (USA)

zdroj: Nielsen.com Tvoříme přitažlivá webová řešení


Reálná čísla z praxe v Česku •  Podíl návštěvnos[ z mobilních zařízení se pohybuje mezi 5-‐10%, dle cílové skupiny e-‐shopu zdroj: e-‐shopy spravované firmou PeckaDesign

•  Konverzní poměr se pohybuje mezi 1-‐2% zdroj: e-‐shopy spravované firmou PeckaDesign



Srovnání na e-‐shopu Global-‐Wines.cz



Mobilní verze eshopu

Jaký postup zvolit?



MožnosK řešení mobilního eshopu •  Na[vní aplikace (iOS, Android, Windows Phone) •  Speciální mobilní verze webu, založená na detekci mobilního zařízení (hnp://m.mujeshop.cz) •  Responsive Web Design (responsivní design) •  RESS (Responsive Design + Server Side Components – servírování obsahu dle vlastnosi daného zařízení •  Využii placené služby (např. Tapomat)



NaKvní aplikace, výhody a nevýhody •  Obvykle lze dosáhnout nejlepšího uživatelského prožitku •  Přirozená integrace vlastnosi zařízení (GPS, fotoaparát...) •  Prezentace v aplikačních obchodech (iTunes, Google Play...) •  •  •  • 

Nutnost instalace a aktualizací ze strany uživatele Nutnost udržovat zvlášť aplikace pro každou plaGormu Obvykle finančně náročné Módní záležitost, do budoucna se jeví jako slepá cesta (pro aplikace pouze načítající obsah z internetu) Tvoříme přitažlivá webová řešení


Speciální mobilní verze, výhody a nevýhody •  Rela[vně jednoduché na implementaci •  Datově velmi nenáročné = rychlost načítání •  Přirozeně umožňuje zaměřit se pouze na to klíčové •  Tříštění URL, typicky na hnp://m.mujeshop.cz •  Nutnost správně fungující detekce zařízení na serveru •  Svádí k „totálnímu osekání“ funkčnos[, tj. výsledek vypadá zcela jinak než výchozí web = zmatení uživatele



Responsivní design, výhody a nevýhody •  •  •  • 

Jedná se pouze o jeden web, odpadá nutnost detekce Využívá „přirozených“ technologií, jako je HTML5 a CSS3 Neomezuje se pouze na mobily Lze kombinovat se změnou obsahu dle zařízení na straně serveru (RESS) a přístupem „Mobile First“

•  Časově (finančně) náročné •  Pokud se neudělá dobře, hrozí velká datová náročnost = pomalé načítání



Mobilní verze webu nebo aplikace?

V USA výzkum ukázal, že jsou více populární mobilní weby než aplikace zdroj: Nielsen.com



Co je to Responsive Web Design?

Je to způsob tvorby webu, který umožňuje přizpůsobení webu cílovému zařízení •  Tj. nejen mobilnímu zařízení



Výhody Responsive Web Designu

Tvoří se jeden web, jehož design se přizpůsobuje cílovému zařízení Nevyžaduje tedy vývoj a údržbu více verzí téhož webu pro různá zařízení




Umožňuje opKmalizaci nejen pro malé obrazovky chytrých telefonů Design webu lze připravit na různé situace, například pro tablety, ale také na velké obrazovky




Uživatel pracuje pouze s jedním webem, se stejnými URL Odpadá detekce a přesměrování, navíc nedochází k vytváření duplicitního obsahu na jiných URL



Příklad rozvržení e-‐shopu: desktop



Příklad rozvržení e-‐shopu: tablet



Příklad rozvržení e-‐shopu: mobil



Příklad rozvržení e-‐shopu: srovnání



Kdy zvolit Responsive Design a kdy ne

Při stavbě nového webu ano, naopak dodatečné nasazení do již běžícího webu nedoporučujeme



Responsive Web Design a „Mobile First“

Způsob, kdy se web začíná tvořit od „nejmenší“ tedy mobilní verze Umožňuje lépe se zaměřit na to nejdůležitější, protože nui priori[zovat! Tvoříme přitažlivá webová řešení


Výhody přístupu „Mobile First“

Většina webů trpí přeplněnosh obsahem, který uživatele nezajímá Běžný postup tvorby desktop verze svádí k zaplňování místa nerelevantním obsahem



Zdroj: xkcd.com/773 Tvoříme přitažlivá webová řešení


Konkrétní ukázka – eshop Euronics.cz



Další příklady

hkp://mediaqueri.es Celosvětová galerie Responsive Design webů



Důležité zdroje na téma RWD a Mobile First Články: •  www.alistapart.com/ar[cles/responsive-‐web-‐design •  www.lukew.com/ff/entry.asp?933

Knihy: •  www.abookapart.com/products/responsive-‐web-‐design •  www.abookapart.com/products/mobile-‐first



Děkuji za pozornost a nyní pojďme diskutovat :-‐) Michal Horák

e-‐mail: [email protected] telefon: 732 934 834 www.peckadesign.cz facebook.com/peckadesign twiner.com/peckadesign


Mít či nemít mobilní verzi e- shopu? aneb jak na tvorbu mobilní verze e- shopu

Recommend Documents