Prednáška Michala Horáka z internetovej agentúry PeckaDesign počas Pricemania Academy Kickoff 5. septembra 2013.

1. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Responzivní design
aneb už nestačí weby navrhovat pouze
pro klasické počítače
Michal Horák, PeckaDesign

2. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Proč responzivní verze webu?
Protože lidé už neprohlíží web pouze
na klasickém počítači
Je zde mnoho dalších
platforem:
mobily, tablety, herní
konzole, infosystémy v
autech...

3. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Responzivní design řeší diverzitu
různých zařízení, zejména mobilních

4. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Několik celosvětových čísel a trendů
o mobilním internetu

5. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
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 2014
zdroj: IDC

6. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Počet aktivovaných Android zařízení za den
• 500.000 (07/2011)
• 700.000 (12/2011)
• 1.300.000(11/2012)
•1.500.000(07/2013)

7. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Srovnání mobilního trafficu v USA
• iOS (Apple) 63%
• Android (Google) 28%
zdroj: CNET.com
• 91% návštěvnosti webu z tabletů jsou iPady
zdroj: Apple

8. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Růst mobilního internetu
Mobilní internet překoná tradiční
desktopový v roce 2014
zdroj: BusinessInsider

9. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Chování mobilních uživatelů
• Nakupování je třetí nejoblíbenější aktivitou 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

10. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Aktivity spojené s mobilními nákupy (USA)
zdroj: Nielsen.com

11. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Reálná čísla z praxe v Česku
• Podíl návštěvnosti 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

12. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Stručně o responzivním designu a
Mobile First

13. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Responsivní design, výhody a nevýhody
• Tvoří a spravuje se jeden web
• Umožňuje vytvořit plnohodnotnou verzi webu pro různá
zařízení
• Neomezuje se pouze na mobily
• Nedochází k tříštění URL na desktopovou a mobilní verzi
• Časově (finančně) náročné
• Pokud se neudělá dobře, hrozí velká datová náročnost =
pomalé načítání

14. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Příklad rozvržení e-shopu: srovnání

15. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Ukázka reálného webu (Megapixel.cz)

16. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Co je to 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
nutí prioritizovat!

17. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Výhody přístupu Mobile First
Většina webů trpí přeplněností
obsahem, který uživatele nezajímá
Běžný postup tvorby desktop verze svádí
k zaplňování místa nerelevantním obsahem

18. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Zdroj: xkcd.com/773

19. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Na co si dát při tvorbě
responzivního webu pozor

20. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Zásady při tvorbě responzivního webu
• Vždy začněte způsobem „Mobile First“
• Mobilní verze není chudý příbuzný
• Tablet není ani mobil, ani desktop – vyžaduje speciální verzi
layoutu
• Pozor na datovou náročnost
• Není dobré nasazovat zpětně do již existujícího desktopového
layoutu
• Není cesty zpět, testujte, testujte, testujte!

21. Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Děkuji za pozornost
...a více se dozvíte na mém workshopu 5. 11. 2013
Michal Horák
e-mail: michal.horak@peckadesign.cz
www.peckadesign.cz
facebook.com/peckadesign
twitter.com/peckadesign