PeckaDesign Academy - Responzivní design

transcript

FB: facebook.com/peckadesign TW: @peckadesign

RESPONSIVNÍ DESIGN

Přemysl Posker, Radek ŠerýPeckaDesign

PŘÍSTUPNOST

Metodiky jsou dostupné na: http://blindfriendly.cz/

SÉMANTIKA

Základní pravidla

•Využívat odpovídající tagy •Tabulky pro tabulková data •Vzhled patří do CSS

VALIDITA

•Přístupnost webu •Použitelnost webu •Zobrazení v alternativních prohlížečích

Zajišťuje lepší

CO JE TO RESPONSIVNÍ DESIGN

•Z anglického slova “responsive” •Jeden web pro všechna zařízení

PŘÍKLAD ROZVRŽENÍ E-SHOPU: SROVNÁNÍ

UKÁZKA REÁLNÉHO WEBU DESIGNVILLE.CZ

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í

Zdroj: https://twitter.com/machal/status/629560165793157120

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

Nevýhody

•Časově náročnější tvorba •Potenciálně velká datová náročnost

ZÁKLADNÍ PŘÍSTUPYMobile first Mobile last

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

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

Zdroj: http://www.slideshare.net/superdifficult1/responsive-web-design-12494360

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ů

KÓDOVÁNÍ HTML & CSS

Jak mobilní telefon/tablet pozná, že je web responsivní?

•Rozdílné meta-tagy pro různá zařízení

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

KÓDOVÁNÍ HTML & CSSPříklady media queries

Zdroj: https://goo.gl/cQtcQS

•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

KÓDOVÁNÍ HTML & CSSPříklad responsivního obrázku

KÓDOVÁNÍ HTML & CSSPříklad responsivního obrázku ve vymezeném prostoru

KÓDOVÁNÍ HTML & CSSPříklad mobile first vs mobile last

Příklad mobile first vs mobile last

JAVASCRIPT

•Velké rozdíly v implementaci •Různá podpora událostí •Hybridní zařízení, notebooky s dotykovou obrazovkou a myší •Nutnost výkonové optimalizace

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

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

TESTOVÁNÍ A LADĚNÍ

•VirtualBox •Vagrant •VMware

Před spuštěním•Počet requestů •Minifikace souborů •Velikost stažených dat •Checklist

Nástroje•webpagetest.org • tinypng.com

MODERNÍ TRENDY

CSS frameworky•Záleží na typu prezentace •Spousta vlastností, které nejsou využívány •Horší přizpůsobitelnost

MODERNÍ TRENDY

CSS Sprity•Redukce requestů na server •Generátory •Vlastní mřížka

MODERNÍ TRENDYIkon fonty

•Tvorba fontů: http://www.fontastic.me

•Základní fonty zdarma: http://genericons.com/

•Optimalizace fontů: http://www.fontsquirrel.com/

MODERNÍ TRENDYCSS preprocesory

•LESS, SASS, Stylus •Proměnné •Funkce •Zanořování

Příklad možností CSS preprocesorů

DĚKUJEME ZA POZORNOST

Přemysl Posker, Radek Šerý

Máte dotazy? e-mail: radek.sery@peckadesign.cz, premysl.posker@peckadesign.cz

PeckaDesign Academy - Responzivní design

Internet