FB: facebook.com/peckadesign TW: @peckadesign RESPONSIVNÍ DESIGN Přemysl Posker, Radek Šerý PeckaDesign
FB: facebook.com/peckadesign TW: @peckadesign
RESPONSIVNÍ DESIGN
Přemysl Posker, Radek ŠerýPeckaDesign
FB: facebook.com/peckadesign TW: @peckadesign
FB: facebook.com/peckadesign TW: @peckadesign
FB: facebook.com/peckadesign TW: @peckadesign
FB: facebook.com/peckadesign TW: @peckadesign
PŘÍSTUPNOST
Metodiky jsou dostupné na: http://blindfriendly.cz/
FB: facebook.com/peckadesign TW: @peckadesign
SÉMANTIKA
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
FB: facebook.com/peckadesign TW: @peckadesign
VALIDITA
FB: facebook.com/peckadesign TW: @peckadesign
VALIDITA
•Přístupnost webu •Použitelnost webu •Zobrazení v alternativních prohlížečích
Zajišťuje lepší
FB: facebook.com/peckadesign TW: @peckadesign
CO JE TO RESPONSIVNÍ DESIGN
•Z anglického slova “responsive” •Jeden web pro všechna zařízení
FB: facebook.com/peckadesign TW: @peckadesign
PŘÍKLAD ROZVRŽENÍ E-SHOPU: SROVNÁNÍ
FB: facebook.com/peckadesign TW: @peckadesign
UKÁZKA REÁLNÉHO WEBU DESIGNVILLE.CZ
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í
FB: facebook.com/peckadesign TW: @peckadesign
PROČ RESPONSIVNÍ DESIGN
Zdroj: https://twitter.com/machal/status/629560165793157120
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
FB: facebook.com/peckadesign TW: @peckadesign
PROČ RESPONSIVNÍ DESIGN
Nevýhody
•Časově náročnější tvorba •Potenciálně velká datová náročnost
FB: facebook.com/peckadesign TW: @peckadesign
ZÁKLADNÍ PŘÍSTUPYMobile first Mobile last
FB: facebook.com/peckadesign TW: @peckadesign
TVORBA RESPONSIVNÍHO WEBUMobile 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
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
FB: facebook.com/peckadesign TW: @peckadesign
Zdroj: http://www.slideshare.net/superdifficult1/responsive-web-design-12494360
FB: facebook.com/peckadesign TW: @peckadesign
GRAFICKÝ NÁVRH, UXPří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ů
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í
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
FB: facebook.com/peckadesign TW: @peckadesign
KÓDOVÁNÍ HTML & CSSPříklady media queries
FB: facebook.com/peckadesign TW: @peckadesign
KÓDOVÁNÍ HTML & CSSPříklady media queries
Zdroj: https://goo.gl/cQtcQS
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
FB: facebook.com/peckadesign TW: @peckadesign
KÓDOVÁNÍ HTML & CSSPříklad responsivního obrázku
FB: facebook.com/peckadesign TW: @peckadesign
KÓDOVÁNÍ HTML & CSSPříklad responsivního obrázku ve vymezeném prostoru
FB: facebook.com/peckadesign TW: @peckadesign
KÓDOVÁNÍ HTML & CSSPříklad mobile first vs mobile last
FB: facebook.com/peckadesign TW: @peckadesign
Příklad mobile first vs mobile last
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
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
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
FB: facebook.com/peckadesign TW: @peckadesign
TESTOVÁNÍ A LADĚNÍ
FB: facebook.com/peckadesign TW: @peckadesign
TESTOVÁNÍ A LADĚNÍ
FB: facebook.com/peckadesign TW: @peckadesign
TESTOVÁNÍ A LADĚNÍ
FB: facebook.com/peckadesign TW: @peckadesign
TESTOVÁNÍ A LADĚNÍ
•VirtualBox •Vagrant •VMware
FB: facebook.com/peckadesign TW: @peckadesign
TESTOVÁNÍ A LADĚNÍ
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
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
FB: facebook.com/peckadesign TW: @peckadesign
MODERNÍ TRENDY
CSS Sprity•Redukce requestů na server •Generátory •Vlastní mřížka
FB: facebook.com/peckadesign TW: @peckadesign
MODERNÍ TRENDYIkon fonty
•Tvorba fontů: http://www.fontastic.me
•Základní fonty zdarma: http://genericons.com/
•Optimalizace fontů: http://www.fontsquirrel.com/
FB: facebook.com/peckadesign TW: @peckadesign
MODERNÍ TRENDYCSS preprocesory
•LESS, SASS, Stylus •Proměnné •Funkce •Zanořování
FB: facebook.com/peckadesign TW: @peckadesign
Příklad možností CSS preprocesorů
FB: facebook.com/peckadesign TW: @peckadesign
Příklad možností CSS preprocesorů
FB: facebook.com/peckadesign TW: @peckadesign
DĚKUJEME ZA POZORNOST
Přemysl Posker, Radek Šerý
Máte dotazy? e-mail: [email protected], [email protected]