bourání klišé – contemporary webdesign
DESCRIPTION
View webdesign as an interdisciplinary field where technology, design and design thinking meet. Therefore it is essential that a modern webdesign should know how to code as well as how to design. Cognitive design and psychology can also help when having to make a design decision.TRANSCRIPT
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