PeckaDesign Academy - Responzivní design

FB: facebook.com/peckadesign TW: @peckadesign

RESPONSIVNÍ DESIGN

Přemysl Posker, Radek ŠerýPeckaDesign





PŘÍSTUPNOST

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

http://blindfriendly.cz/


SÉMANTIKA


SÉMANTIKA

Základní pravidla

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


VALIDITA


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

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

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

http://goo.gl/89UPNm


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


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

Zdroj: https://goo.gl/cQtcQS

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

http://webpagetest.org

http://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/

http://www.fontastic.me

http://genericons.com/

http://www.fontsquirrel.com


MODERNÍ TRENDYCSS preprocesory

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


Příklad možností CSS preprocesorů


Příklad možností CSS preprocesorů


DĚKUJEME ZA POZORNOST

Přemysl Posker, Radek Šerý

Máte dotazy? e-mail: [email protected], [email protected]

mailto:[email protected]

mailto:[email protected]

Date post:	22-Jan-2018
Category:	Internet
Upload:	peckadesigncz
View:	763 times
Download:	1 times

PeckaDesign Academy - Responzivní design

Internet