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

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

Responzivní designaneb už nestačí weby navrhovat pouze pro klasické počítače

Michal Horák, PeckaDesign

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...

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

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

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 2010zdroj: Smartonline.com

• Předpokládá se, že prodeje tabletů překonají prodeje počítačů v roce 2014zdroj: IDC

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)

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 iPadyzdroj: Apple

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 2014zdroj: BusinessInsider

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 tabletuzdroj: Adage.com

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

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

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-shopuzdroj: e-shopy spravované firmou PeckaDesign

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

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

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í

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í

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)

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!

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

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

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

Zdroj: xkcd.com/773

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

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!

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áke-mail: michal.horak@peckadesign.cz

www.peckadesign.czfacebook.com/peckadesign twitter.com/peckadesign