Bourání klišé

Jakub Ferencwww.jakubferenc.cz

aneb teorie webdesignu a její aplikace při návrhu responsivního webu

Kdo jsem a jak jsem se zde ocitl?

http://www.jakubferenc.cz/

„Aby kultura mohla prosperovat potřebuje tři typy lidí: inspirátoři, realizátoři a propagátoři.“ – Karel Honzík, Ze života Avantgardy 1963

Kdo jsem a jak jsem se zde ocitl?

Yes Man (2008)http://www.youtube.com/watch?v=r0MSWCzAfrY

Program

Co je webdesign? Kdo je webdesignér? Proč se kodéři musí naučit web design?HTML / HTML5 / ARIA / XHTML2„Objektové“ CSS a nejdůležitější vlastnosti CSS3CSS PreprocesoryFront End Frameworky (Boilerplate, Bootstrap)Fallbacks / PolyfillsResponsivní a mobilní web Workflow moderního webdesigneraAplikace teorie a redesign webové stránky

Blok web design

Co je webdesign? Kdo je webdesignér?Proč se kodéři musí naučit web design?Web designer jako novodobý architekt 2D prostoruVliv grafického designu / typografie (Bauhaus, Sutnar, Swiss Style)Psychologie webdesignu / Kognitivní designInspirace / Současný webdesign

Proč se kodéři musí naučit web design?

Daniel H. Pink – A Whole New Mind (Úplně nová mysl 2008)Doba Koncepční, „Pravá strana“Nadbytek (Abundance), Automatizace, AsieInterdisciplinarita => kreativita (Burákové máslo a čokoláda)Kognitivní informatika (http://kogninfo.vse.cz/)

Kasparov IQ ~ 190 vs. Deep Blue (1996)

Proč se kodéři musí naučit web design?

Online drag & drop nástroje pro tvorbu šablonAdobe Edge ReflowSlužby jako http://www.htmlfactory.cz/Wordpress

Divergent thinking

Divergent thinking is the process of generating multiple related ideas for a given topic or solutions to a problem. Divergent thinking occurs in a spontaneous, free-flowing, ‘non-linear’ manner. Convergent thinking, on the other hand, is the ability to apply rules to arrive at a single ‘correct’ solution to a problem such as the answer to an IQ test problem. This process is systematic and linear. Sir Ken Robinson – Škola ničí kreativitu

“If you’re not prepared to be wrong, you’ll never come up with anything original.” — Ken Robinson

“Creativity now is as important in education as literacy, and we should treat it with the same status.” — Ken Robinson

Karim Rashid radí

Nespecializujte seZjistetě si všechno o historii svého povolání a až budete navrhovat něco nového, tak to vše zapomeňteNikdy neříkejte „to jsem mohl udělat“, když jste to neudělaliTěšte se ze zážitků ne z věcíNormální neznamená dobréJsou tři druhy lidí: Ti, co vytváří kulturu, ti, co ji kupují a ti, kterým je kultura šumafuk. Pohybujte se v prvních dvou kruzích

Design thinking

Tim Brown CEO z IDEO

„The problem wasn’t so much about what’s the problem of a woodworking machine but what is the problem of woodworking (dřevozpracující) industry.“

Otázka na tento seminář:

„Důvod, proč potřebujete kurz jako je tento, je z důvodu, že potřebujete vylepšit znalosti v HTML / CSS / Web designu nebo je důvod jiný a prostší. Chcete dělat lepší weby? Pokud ano, jakou to má implikaci?“

Design jako redesign (Jan Michl)

„Každý designér, vynikající stejně jako průměrný či špatný, buduje na práci předchozích designérů a výtvarníků, ať už v tom smyslu, že jejich řešení zcela přetváří, mírně modifikuje nebo pasivně přebírá. Ačkoliv jde tedy o něco, co všichni designéři, kritici a komentátoři designu důvěrně znají, je tato skutečnost – ve snaze soustředit se na příspěvek posledního tvůrce – v podstatě ignorována.“„Studenti by měli slyšet, že z hlediska uživatele není důležité, zda jednotlivá řešení pocházejí od nich samotných či od designérů jiných, ale to, jestli výsledek uživatele uspokojuje.“„Designérské problémy jsou zřídkakdy formulovány vyčerpávajícím způsobem a ve své úplnosti, že zákazníci nejsou schopni celý problém jasně artikulovat ani na konci procesu navrhování“„Zkušený designér reaguje na problémovou situaci tak, že rozpozná možné, to jest předchozí, řešení, spíše než že by problém rozpoznal přímo, a že znalost takových precedentních řešení, ať už vlastních nebo cizích, odlišuje zkušeného designéra od začátečníka“

Co je tedy web design?

Interdisciplinární (sic) obor, ve kterém se v posledních letech pod nátlakem buzzwordu „responsive“ čím dál více smývají rozdíly mezi kodérem a „vizuálním návrhářem“Vizuální komunikace čerpající z grafického designu, typografie, interakčního designu, UI/UX designu postavená na technologických základech kombinace HTML / CSS / Javascript.

„The web designer is the new architect. Physically, we are mostly inside buildings. Mentally, we live "inside" web pages. (@jakubferenc)“

Web designer jako novodobý architekt (estetika vs. technologie)

Co je tedy web design?

Co je ještě web design? http://henryklahola.nazory.cz/

Vliv grafického designu / typografie

ModernismusLadislav SutnarInternational styleMassimo VignelliHolandský design (Wim Crouwel vs Jan Van Toorn)Současný holandský design

GridWhitespaceGeometrický vs. optický střed

Typografie

prof. JUDr. Jan Novák, PhDJustin BieberPoslanecká sněmovna ČR

Kerning

Vyrovnávání znakůDříve odřezávání kusu špalíčku, na kterém byly jednotlivé literySnaha docílit vizuálně uspokojivého zobrazení písmenDle citu typogafa / designeraJinak řečeno, dvoudimenzionální prostor mezi znaky by měl mít podobný obsahKerning je nepostřehnutelný, pokud jsou znaky profesionálně vyrovnány Jak vypadá špatný kerning

http://type.method.ac/#

Jak vypadá špatný kerning?

Špatný kerning

http://inspirationfeeed.files.wordpress.com/2013/09/showerdrape1.jpghttp://inspirationfeeed.files.wordpress.com/2013/09/shitake1.jpghttp://inspirationfeeed.files.wordpress.com/2013/09/pemsbarbershop1.jpghttp://inspirationfeeed.files.wordpress.com/2013/09/tumblr_mow8t2xh4e1qkpgn3o1_5001.jpghttp://inspirationfeeed.files.wordpress.com/2013/09/tumblr_ma515afnsb1qcq8vao1_5001.pnghttp://inspirationfeeed.files.wordpress.com/2013/09/lmuu31.jpghttp://cdn-www.i-am-bored.com/media/14303_kidsexchange.jpg

Psychologie webdesignu / Kognitivní design

Google I/O 2013 - Cognitive Science and Designhttp://www.youtube.com/watch?v=z2exxj4COhU

Čerpá z teorie Gestalt psychologie

Teorie, kdy mozek vidí celek dříve, než analyzuje a uvědomuje si jednotlivé části celku

http://www.users.totalise.co.uk/~kbroom/Lectures/gestalt.htm

Gestalt psychologie

zákon podobnosti

Gestalt psychologie

zákon vzdálenosti

Gestalt psychologie

zákon kontinuity směru (uzavření

Inspirace / Současné web design směry

http://www.ecogex.com/delectable/http://www.awwwards.com

ale téžhttp://www.rkfpraha.cz/http://www.dox.cz/cs/

HTML / HTML5 / ARIA / XHTML2aneb kam se poděl XHTML 1.1 Strict fetiš?

Blok HTML

Proč HTML5 a ne XHTML2?Co všechno je HTML5?Sémantika a přístupnost v HTML5HTML5 OutlineARIAFormuláře v HTML5Video, Audio v HTML5

Proč máme HTML5 a ne XHTML2

„Mám nápad! Vyrobíme XHTML, což bude HTML s XML syntaxí. — Někdo v konsorciu, někdy dávno, volně domyšleno

Od XHTML verze 1.0 bylo W3C konsorcium posedlé XML

application/xhtml+xml MIME type vs. IE

XHTML nepromíjelo

HTML4 a nástroje k interaktivitě (Flash, Silverlight, Java applets!)

XHTML2

WHATWG

Steve Jobs (RIP) vs Flash (http://www.apple.com/hotnews/thoughts-on-flash/)

Co všechno je HTML5?

V první řadě je zpětně kompatibilní

<!DOCTYPE html>

Markup

DOM

APIs: Web Storage, Drag & Drop, Web Sockets, History, Media, Canvas

Sémantika a přístupnost v HTML5

<main><section><article><header><footer><nav><aside>

Pouze <section>, <article>, <aside> a <nav> tvoří sekce

Sémantika a přístupnost v HTML5

„I would in fact prefer, instead of <h1>, <h2> etc for headings [those come from the AAP DTD] to have a nestable <section>..</section> element, and a generic <h>..</h> which at any level within the sections would produce the required level of heading. – Tim Berners-Lee (1991)“

HTML5 Outline

„Rejstřík“ webu generovaný z nadpisů a tzv. section elementůV budoucnu bude sloužit pro čtečky a vyhledávačeMomentálně vyhledávače experimentují s HTML5 outline a čtečky většinou nepodporujíPro přístupnost je lepší používat ARIA atributy

● Více H1 na stránce bylo vždy v pořádku● Nové sémantické HTML5 elementy umožňují použít více H1 (H2, H3, atd),

aniž by se v outline vytvářely nové sekce, podsekce.● Slabá podpora HTML5 outline algoritmu a více H1 může ale mást uživatele

čteček

WAI–ARIA

Možnost, jak pomocí sémantických atributů definovat HTML prvku sémantickou roli a poskytnou pomocí stavu, rolí lehčí navigaci uživateli čtečky obrazovky

<header role=”banner”></header><nav role=”navigation”></nav><footer role=”contentinfo”></footer>

Nové formulářové prvky v HTML5

search, email, tel, url, date, datetime

required, placeholder, pattern

http://jsfiddle.net/jakubferenc/sEXkB/2/

Dobré praktiky psaní CSS a nejdůležitější vlastnosti CSS3

Dobré praktiky při psaní CSS

CSS Specificity

Jak browser interpretuje selektory

Filosofie OOCSS (Object-Oriented CSS)

Třídy vs IDs

CSS Specificity (Specifičnost)

Specificity Calculator http://specificity.keegan.st/

#test {background-color: #f2f2f2} /* Specificity 0 1 0 0 */.box {float: left} /* Specificity 0 0 1 0 */body {line-height: 1.5} /* Specificity 0 0 0 1 */

„Nejedná se o desítkovou soustavu, 0 0 10 0 specifičnost nezpůsobuje přenesení do vyššího řádu. Specifičnost v každém řádu je teoreticky nekonečná, prakticky limitována implementací prohlížeče (8 bit). Vyskytoval se tedy bug, kdy 256 tříd přetížilo jedno ID“

Inline styly => IDs => Třídy, pseudo třídy => Elementy

Jak browser interpretuje selektory

Jak browser interpretuje selektory? To je otázka .-)

Jak browser interpretuje selektory

„Zprava doleva“

body#homepage div#test a {background-color: #f2f2f2} /* Specificity 0 2 0 3 */

Co je zde špatně?

Jak browser interpretuje selektory

ID selektor je vždy unikátní, není potřeba dále selektor specifikovat pomocí elementu

div#menu a {background-color: #f2f2f2}#menu a {background-color: #f2f2f2}

Když vím, že browser vyhodnocuje zprava, takovýto selektor je velmi „drahý“. Browser nejdříve vyhledá všechny odkazy na stránce, poté porovné, zda jsou vnořeny v seznamu, atd.

div#menu a {background-color: #f2f2f2}#menu ul li a {background-color: #f2f2f2}.menu-item {background-color: #f2f2f2}

Filosofie OOCSS (Object-Oriented CSS)

Místo stylů pro specifické elementy, navrhujme znovupoužitelný kód

Analogicky k OOP v PHP

Dívejme se na stránku jako na kolekci modulů, widgetů

Jinak řečeno, web designer (pro rozsáhlé weby) nenavrhuje stránky, ale kolekci widgetů, které lze neomezeně alternovat, aniž by bylo nutné pracně měnit HTML či CSS

Koncept značně rozvíjejí CSS Preprocesory (bude o nich řeč)

Výhody OOCSS přístupu?

Škálovatelnost větších webových projektů

Jednou napsané komponenty lze využívat na dalších projektech => přirozeně vede k vytvoření vlastního CSS frameworku

Lepší selektory, rychlejší načítání (především u mobilních verzí stránek)

Nevýhody OOCSS přístupu?

Pro budoucí využití modulů je vhodná dokumentace

Filosofie OOCSS (Object-Oriented CSS)

.button {

-webkit-border-radius: 2px;

border-radius: 2px;

border: none;

color: #fff;

font-family: "ralewaysemibold" , sans-serif;

font-size: 13px;

padding: 0 15px;

display: inline-block;

line-height: 25px;

min-width: 115px;

position: relative;

text-align: center;

text-decoration : none;

}

Filosofie OOCSS (Object-Oriented CSS)

.button-red {

background: #FF0000;

}

<a href=”#” class=” button button-red”>Odkaz</a>

Třídy vs IDs

Diskuze

Navhrněme si widgety / moduly

Nejdůležitější vlastnosti CSS3

Nové selektory

Animations

Transitions

Transforms (2D)

Transforms (3D)

Border-radius

Box-shadow

@Font-face (http://www.fontsquirrel.com/tools/webfont-generator)

Media Queries

CSS Preprocesory

CSS Preprocesory

CSS Preprocesory

ProměnnéMixinyFunkceMatematické úkony

Soubory .less a .scss se musí zkompilovat do .cssclient-side či server-side

CSS Preprocesory

@the-border: 1px;

@base-color: #111;

@red: #842210;

#header {

color: (@base-color * 3);

border-left: @the-border;

border-right: (@the-border * 2);

}

#footer {

color: (@base-color + #003300);

border-color: desaturate(@red, 10%);

}

.rounded-corners (@radius: 5px) {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

-ms-border-radius: @radius;

-o-border-radius: @radius;

border-radius: @radius;

}

#header {

.rounded-corners;

}

#footer {

.rounded-corners(10px);

}

Front End Frameworky

Front End Frameworky

Responsivní a mobilní web

Responsivní a mobilní web

Viewport Meta TagFluidní GridFlexibilní Média (obrázky, video)Media QueriesMobile First / Progressive EnhancementRychlost, Optimalizace

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1" >

<meta name="viewport" content="maximum-scale=1" >

<meta name="viewport" content="width=320">

<meta name="viewport" content="width=device-width" >

Fluidní grid

Mřížka založená na procentuálních hodnotách nikoli pixelechPomocí max-width můžeme pro větší obrazovky určit maximální šířku obsahu webuPomocí media queries můžeme zobrazení mřížky měnit

.container {max-width: 1080px}

.grid-3 .grid {width: 33%}

@media (max-width: 975px) {

.grid-3 .grid {

width: auto !important;

float: none !important;

margin-top: 1em;

}

}

Flexibilní Média (obrázky, video)

img,

embed,

object,

video {

max-width: 100%;

}

Flexibilní Média (obrázky, video)

Rozdíl mezi max-width a width je, že obrázek při resize browseru nepřekračuje svoji původní velikost

Media Queries

CSS2 specifikace a atribut media all, handheld, print, screen

@media print {

* {

background: transparent !important;

color: #000 !important;

box-shadow: none !important;

text-shadow: none !important;

}

a[href]:after {

content: " (" attr(href) ")";

}

}

Media Queries

CSS3 media queries umožňuj místo typu zařízení aplikovat CSS styly dle možností zařízení

● výška a šířka prohližece● výška a šířka obrazovky zařízení● orientace zařízení (landscape / portrait)● rozlišení PPI (pixels per inch)

Media Queries

@media all and (max-width: 975px) {}@media all and (max-width: 767px) {}@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */}

Mobile First / Progressive Enhancement

Graceful degradation

Mobile First / Progressive Enhancement

Progressive enhancement

Proč Mobile First

Růst trhu = příležitostOmezení = koncentrace na nejdůležitější funkcionalityVětšina lidí má mobilní zařízení u sebe celý den

Růst trhu = příležitost

1990 2000 2011 – 2020

PC

Internet na desktopu

1 miliarda

Mobilní uživatelé5+ miliard

Růst trhu = příležitost

V roce 2011 se prodalo více

mobilních zařízení než PC

Omezení = koncentrace na nejdůležitější funkcionality

Jen relevantní informaceCo nejméně ovládacích prvkůDůraz na obsah (text)Pokud design pro mobilní verzi obsahuje nejdůležitější funkcionality, design pro desktopmůže už jen přidat něco navíc

Design webu pro desktopby měl být ovlivněn mobilní verzí, ne naopak

Rychlost / Optimalizace — Proč optimalizovat pro rychlost?

Google hodnotí rychlost webů, nejen pro mobilní zařízeníNehodnotí ale v absolutních číslech (různé státy = různé připojení, bandwidth, atd)Uživatelé mobilních zařízení očekávají rychlost

Rychlost / Optimalizace

CSS co „nejvýše“, JS co „nejníže“ (css blokuje render, js stahování)Minifikace souborů CSS, JS, HTMLSjednocení JS scriptůCSS SpritesOmezení HTTP requestůVyužití Base64 kódování pro obrázky a fontyVyužití CSS3 efektů či SVG místo bitmapVyužívat PHP APC cache

Google PageSpeed Modul pro Apachehttps://developers.google.com/speed/pagespeed/module

Workflow moderního webdesignera

Workflow moderního webdesignera

Workflow moderního webdesignera

Node.jsBowerGruntAdobe Edge Inspect / LiveReload