Prečo je mobile first a responzívny dizajn taký dôležitý?
-
Upload
pricemania-sro -
Category
Education
-
view
559 -
download
1
description
Transcript of Prečo je mobile first a responzívny dizajn taký dôležitý?
![Page 1: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/1.jpg)
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
![Page 2: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/2.jpg)
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...
![Page 3: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/3.jpg)
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
![Page 4: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/4.jpg)
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
![Page 5: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/5.jpg)
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
![Page 6: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/6.jpg)
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)
![Page 7: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/7.jpg)
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
![Page 8: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/8.jpg)
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
![Page 9: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/9.jpg)
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
![Page 10: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/10.jpg)
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
![Page 11: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/11.jpg)
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
![Page 12: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/12.jpg)
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
![Page 13: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/13.jpg)
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í
![Page 14: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/14.jpg)
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í
![Page 15: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/15.jpg)
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)
![Page 16: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/16.jpg)
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!
![Page 17: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/17.jpg)
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
![Page 18: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/18.jpg)
Tvoříme přitažlivá webová řešení
webdesign redakční systémy internetové obchody řešení na míru
Zdroj: xkcd.com/773
![Page 19: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/19.jpg)
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
![Page 20: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/20.jpg)
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!
![Page 21: Prečo je mobile first a responzívny dizajn taký dôležitý?](https://reader036.fdocuments.net/reader036/viewer/2022062514/5591d8791a28abf5458b469b/html5/thumbnails/21.jpg)
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: [email protected]
www.peckadesign.czfacebook.com/peckadesign twitter.com/peckadesign