PeckaDesign Academy - Responzivní design
1 like1,053 views
V prezentaci se dozvíte, co je to responzivní design, kdy a proč se používá. Jaké jsou jeho ne/výhody. Jak k němu přistupovat aneb mobile first a mobile last.
PeckaDesign Academy - Responzivní design
- 1. FB: facebook.com/peckadesign TW: @peckadesign RESPONSIVNÍ DESIGN Přemysl Posker, Radek Šerý PeckaDesign
- 2. FB: facebook.com/peckadesign TW: @peckadesign
- 3. FB: facebook.com/peckadesign TW: @peckadesign
- 4. FB: facebook.com/peckadesign TW: @peckadesign
- 5. FB: facebook.com/peckadesign TW: @peckadesign PŘÍSTUPNOST Metodiky jsou dostupné na: http://blindfriendly.cz/
- 6. FB: facebook.com/peckadesign TW: @peckadesign SÉMANTIKA
- 7. FB: facebook.com/peckadesign TW: @peckadesign SÉMANTIKA Základní pravidla • Využívat odpovídající tagy • Tabulky pro tabulková data • Vzhled patří do CSS
- 8. FB: facebook.com/peckadesign TW: @peckadesign VALIDITA
- 9. FB: facebook.com/peckadesign TW: @peckadesign VALIDITA • Přístupnost webu • Použitelnost webu • Zobrazení v alternativních prohlížečích Zajišťuje lepší
- 10. FB: facebook.com/peckadesign TW: @peckadesign CO JE TO RESPONSIVNÍ DESIGN • Z anglického slova “responsive” • Jeden web pro všechna zařízení
- 11. FB: facebook.com/peckadesign TW: @peckadesign PŘÍKLAD ROZVRŽENÍ E-SHOPU: SROVNÁNÍ
- 12. FB: facebook.com/peckadesign TW: @peckadesign UKÁZKA REÁLNÉHO WEBU DESIGNVILLE.CZ
- 13. FB: facebook.com/peckadesign TW: @peckadesign PROČ RESPONSIVNÍ DESIGN • Optimalizace webu podle velikosti zařízení • Stále větší množství návštěv webu je z alternativních zařízení
- 14. FB: facebook.com/peckadesign TW: @peckadesign PROČ RESPONSIVNÍ DESIGN Zdroj: https://twitter.com/machal/status/629560165793157120
- 15. FB: facebook.com/peckadesign TW: @peckadesign PROČ RESPONSIVNÍ DESIGN Výhody • Pohodlné použití webu na mobilním zařízení či tabletu • Tvorba a udržování pouze jedné verze • Jednotné URL stránek pro mobilní i desktopovou verzi
- 16. FB: facebook.com/peckadesign TW: @peckadesign PROČ RESPONSIVNÍ DESIGN Nevýhody • Časově náročnější tvorba • Potenciálně velká datová náročnost
- 17. FB: facebook.com/peckadesign TW: @peckadesign ZÁKLADNÍ PŘÍSTUPY Mobile first Mobile last
- 18. FB: facebook.com/peckadesign TW: @peckadesign TVORBA RESPONSIVNÍHO WEBU Mobile first • Přirozeně prioritizuje důležité informace • Větší nároky při návrhu, ale jednodušší implementace • "Progressive enhancement" vs "Graceful degradation" Více info: http://goo.gl/89UPNm
- 19. FB: facebook.com/peckadesign TW: @peckadesign GRAFICKÝ NÁVRH, UX • Zaměření na důležité informace a nejčastější způsob užití webu • Rozdílné schopnosti zobrazení • Odlišný způsob ovládání • Vše je "fluidní", téměř nic nemá pevné rozměry
- 20. FB: facebook.com/peckadesign TW: @peckadesign Zdroj: http://www.slideshare.net/superdifficult1/responsive-web-design-12494360
- 21. FB: facebook.com/peckadesign TW: @peckadesign GRAFICKÝ NÁVRH, UX Příklady break-pointů layoutu Zařízení Velikost displeje Mobilní telefony 480px a méně Malé tablety 767px a méně Tablety 959px a méně Netbooky 1024px a méně Desktop více než 1024px • Méně je více • Alternativa – použití "em" pro definici break-pointů
- 22. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS Jak mobilní telefon/tablet pozná, že je web responsivní? • Rozdílné meta-tagy pro různá zařízení
- 23. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS Pro zacílení zařízení používáme media queries • Typ zobrazení (screen, print) • Minimální/maximální šířka/výška • Požadované rozlišení (dpi, pixel density) • Orientace displeje (portrait, landscape) • Poměr stran Více info: http://goo.gl/89UPNm
- 24. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS Příklady media queries
- 25. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS Příklady media queries Zdroj: https://goo.gl/cQtcQS
- 26. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS • Všechny rozměry layoutu v relativních jednotkách • Pevné rozměry pouze výjimečně • Usnadnění práce pomocí frameworků • Boostrap, Skeleton, grid systémy
- 27. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS Příklad responsivního obrázku
- 28. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS Příklad responsivního obrázku ve vymezeném prostoru
- 29. FB: facebook.com/peckadesign TW: @peckadesign KÓDOVÁNÍ HTML & CSS Příklad mobile first vs mobile last
- 30. FB: facebook.com/peckadesign TW: @peckadesign Příklad mobile first vs mobile last
- 31. FB: facebook.com/peckadesign TW: @peckadesign JAVASCRIPT • Velké rozdíly v implementaci • Různá podpora událostí • Hybridní zařízení, notebooky s dotykovou obrazovkou a myší • Nutnost výkonové optimalizace
- 32. FB: facebook.com/peckadesign TW: @peckadesign JAVASCRIPT Problematické části • Rozdílné ovládání na jednotlivých zařízeních • Ne všechny pluginy jsou přizpůsobené pro responsivní design
- 33. FB: facebook.com/peckadesign TW: @peckadesign JAVASCRIPT Problematické části • Srovnávání výšek dvou či více prvků s rozdílným obsahem a stejnou výškou zobrazených vedle sebe
- 34. FB: facebook.com/peckadesign TW: @peckadesign TESTOVÁNÍ A LADĚNÍ
- 35. FB: facebook.com/peckadesign TW: @peckadesign TESTOVÁNÍ A LADĚNÍ
- 36. FB: facebook.com/peckadesign TW: @peckadesign TESTOVÁNÍ A LADĚNÍ
- 37. FB: facebook.com/peckadesign TW: @peckadesign TESTOVÁNÍ A LADĚNÍ • VirtualBox • Vagrant • VMware
- 38. FB: facebook.com/peckadesign TW: @peckadesign TESTOVÁNÍ A LADĚNÍ
- 39. FB: facebook.com/peckadesign TW: @peckadesign TESTOVÁNÍ A LADĚNÍ Před spuštěním • Počet requestů • Minifikace souborů • Velikost stažených dat • Checklist Nástroje • webpagetest.org • tinypng.com
- 40. FB: facebook.com/peckadesign TW: @peckadesign MODERNÍ TRENDY CSS frameworky • Záleží na typu prezentace • Spousta vlastností, které nejsou využívány • Horší přizpůsobitelnost
- 41. FB: facebook.com/peckadesign TW: @peckadesign MODERNÍ TRENDY CSS Sprity • Redukce requestů na server • Generátory • Vlastní mřížka
- 42. FB: facebook.com/peckadesign TW: @peckadesign MODERNÍ TRENDY Ikon fonty • Tvorba fontů: http://www.fontastic.me • Základní fonty zdarma: http://genericons.com/ • Optimalizace fontů: http://www.fontsquirrel.com/
- 43. FB: facebook.com/peckadesign TW: @peckadesign MODERNÍ TRENDY CSS preprocesory • LESS, SASS, Stylus • Proměnné • Funkce • Zanořování
- 44. FB: facebook.com/peckadesign TW: @peckadesign Příklad možností CSS preprocesorů
- 45. FB: facebook.com/peckadesign TW: @peckadesign Příklad možností CSS preprocesorů
- 46. FB: facebook.com/peckadesign TW: @peckadesign DĚKUJEME ZA POZORNOST Přemysl Posker, Radek Šerý Máte dotazy? e-mail: radek.sery@peckadesign.cz, premysl.posker@peckadesign.cz