• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Prečo je mobile first a responzívny dizajn taký dôležitý?
 

Prečo je mobile first a responzívny dizajn taký dôležitý?

on

  • 505 views

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

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

Statistics

Views

Total Views
505
Views on SlideShare
213
Embed Views
292

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 292

http://www.pricemaniaacademy.sk 292

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Nejprveněkolikčísel a výhled do budoucna.
  • iOSzařízení sepředpokládánazákladěprodejůněkdemezi 600 – 700.000 denně (včetněiPodů Touch)
  • 15%ostatníplatformy (Windows Phone, Symbian, Blackberry)
  • Prvníjsousociálnísítě a pakčtenízpráv. Zdroj: Getprice – největšíaustralskýzbožovýsrovnávač.
  • 79% majitelůmobilníchzařízenívyužívá k aktivitámspojených s nakupováním.Zbožínakoupilo 42% majitelůtabletů a 29% majitelůsmartphonů
  • Prvníjsousociálnísítě a pakčtenízpráv. Zdroj: Getprice – největšíaustralskýzbožovýsrovnávač.
  • Úzcesouvisí s tématem RWD. Tentotermínzavedl Luke Wroblewski
  • Mobile First s tímdokážepomoci. V PeckaDesign taktéžjižnezačínáme od titulky, ale nechávámejinakonec.
  • Situacivětšinywebůnázorněilustrujekomiksuniverzitníhowebu.

Prečo je mobile first a responzívny dizajn taký dôležitý? Prečo je mobile first a responzívny dizajn taký dôležitý? Presentation Transcript

  • 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
  • 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 2010 zdroj: Smartonline.com • Předpokládá se, že prodeje tabletů překonají prodeje počítačů v roce 2014 zdroj: 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 iPady zdroj: 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 2014 zdroj: 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 tabletu zdroj: Adage.com • V USA 76% vlastníků chytrých telefonů čte emaily pouze na těchto zařízeních zdroj: 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-shopu zdroj: 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ák e-mail: michal.horak@peckadesign.cz www.peckadesign.cz facebook.com/peckadesign twitter.com/peckadesign