0
Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Responzivní design
aneb už ...
Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Proč responzivní verze webu...
Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Responzivní design řeší div...
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...
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í
...
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 ...
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...
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
Mo...
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ů...
Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Aktivity spojené s mobilním...
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 Česk...
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 desi...
Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Responsivní design, výhody ...
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: ...
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 (Megap...
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ůs...
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 Firs...
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ě
res...
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ě responziv...
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í...
Upcoming SlideShare
Loading in...5
×

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

566

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
566
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • Transcript of "Prečo je mobile first a responzívny dizajn taký dôležitý?"

    1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×