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.

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