Gunnar&Bittersmann&&&@g16n

Design&& is&not&& veneer.& —Aral&Balkan&

Design&& is&not&& veneer.& —Aral&Balkan&

Most&people&make&the&mistake&of&thinking&design&is&what&it&looks&like.& That’s&not&what&we&think&design&is.&It’s&not&just&what&it&looks&like&and& feels&like.&Design&is&how&it&works.& —Steve&Jobs

[Design]&is&about&worrying&about&the&right&thing:& solving&your&user’s&problems&not&your&own&problems.& —Aral&Balkan

Most&UX&pitfalls&would&be&prevented&if&developers& thought&‘What&is&the&user&trying&to&do’&instead&of& ‘What&info&do&I&have&to&present’.& —Lea&Verou

Design&is&as&much&about&asking&the&right&questions& as&it&is&about&answering&them.& —Aral&Balkan

Design&is&much&more&about&saying&‘no’& than&it&is&about&saying&‘yes’.& —Aral&Balkan

Perfection&is&achieved,&not&when&there&is&nothing&more&to&add,& but&when&there&is&nothing&left&to&take&away.& —Antoine&de&SaintTExupéry

Design&isn’t&crafting&a&beautiful,&textured&button.& It’s&figuring&out&if&there’s&a&way&to&get&rid&of&the& button&altogether.& —Edward&Tufte

Great&design&is&invisible,&bad&design&gets&noticed.& —Jared&Spool

The&enemy&of&good&design&is&rarely&bad&design;& more&often,&it&is&politics,&territorialism,&and&poor& understanding&of&the&problem&at&hand.& —Dave&Cronin

When&you&know&the&answer&to&a&problem&immediately& it’s&called&production,&not&design.& —Peter&van&Blokland

Design&is&a&process,&not&a&product.& —Aral&Balkan

The&details&are&not&details,&they&make&the&product.& —Charles&Eames

I&remain&amazed&and&perplexed&at&how&often&people&think& they&can&solve&an&information&architecture&problem&with& interaction&design.& —Jesse&James&Garrett

Dan&Saffer,&Designing&for&Interaction

usability the&extent&to&which&a&product&can&be&used& by&specified&users&to&achieve&specified&goals& with&effectiveness,&efficiency,&and& satisfaction&in&a&specified&context&of&use.& [ISO&9241T11]

ISO&9241T110 dialog&principles& suitability&for&the&task& self&descriptiveness& suitability&for&learning& controllability& conformity&with&user&expectations& suitability&for&individualization& error&tolerance

suitability&for&the&task webpage&(images)&optimized&for&performance& contact&information&on&a&website& no&required&input&field&irrelevant&to&the&task& autofocus&on&input&field&that&needs&correction& shortcuts&to&most&important&pages

self&descriptiveness feedback&messages& meaningful&link&titles& item&numbers&in&paged&lists& online&help

suitability&for&learning suitable&metaphors& guided&tour& sitemap

controllability scrollbar& sortable&table& halt&download&and&continue&later

conformity&with&& logo&on&top&left&links&to&home&page& user&expectations tab&key&moves&cursor&to&next&input&field& enter&key&submits&form& consistent&vocabulary,&eg.&“cart”& underlined&phrases&are&always&links

suitability&for&& user&profile& individualisation language&negotiation

error&tolerance form&validation& error&messages&in&the&languge&of&the&user& undo&function

accessibility& the&degree&to&which&a&product,&device,& ♿ service,&or&environment&is&available&to&as& many&people&as&possible.

do#websites#need#to#look#exactly#the#same#in#every#browser?

do#websites#need#to#look#exactly#the#same#in#every#browser#.com

progressive#enhancement is#an#escalator## that#becomes#stairs. graceful#degradation is#building#a#lift## then#having#to#add#stairs.# —#Andrew#Wight

I#like#an#escalator#because an#escalator#can#never#break, it#can#only#become#stairs.# There#would#never#be#an escalator#temporarily#out#of# order#sign,#only#an#escalator temporarily#stairs.# Sorry#for#the#convenience.# —#Mitch#Hedberg

structure’ HTML,’DOM behavior’ JavaScript presentation’ CSS

structure’ HTML,’DOM behavior’ JavaScript presentation’ CSS

structure’ HTML,’DOM behavior’ JavaScript presentation’ CSS

HTML Hypertext’Markup’Language

element

<p>This’paragraph’ ””introduces’the’terms’ ””element,’tag’and’ ””attribute.</p>

tag

<p>This’paragraph’ ””introduces’the’terms’ ””element,’tag’and’ ””attribute.</p>

element’content

<p>This’paragraph’ ””introduces’the’terms’ ””element,’tag’and’ ””attribute.</p>

element’content

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

tag

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

start’tag

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

tag’name’ element’type

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

end’tag

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

tag’pairs

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

nested’elements

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

wrong!

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute.</p></b>

child’element’ descendant

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

parent’element’ ancestor

<p>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

start’tag <p’id=”terms”>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

attribute <p’id=”terms”>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

attribute’name <p’id=”terms”>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

attribute’value <p’id=”terms”>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

attributes <p’id=”terms“‘class=”lede”>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

wrong! <p’id=”terms“‘class=”lede“‘class=”important”>This’paragr ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

multiple’classes <p’id=”terms“‘class=”lede’important”>This’paragraph’ ””introduces’the’terms’ ””<b>element</b>,’<b>tag</b>’and’ ””<b>attribute</b>.</p>

<p’id=”terms“‘class=”lede’important”>This’paragraph’introduces’the’terms…</p> element

<p’id=”terms“‘class=”lede’important”>This’paragraph’introduces’the’terms…</p> end’tag start’tag element

<p’id=”terms“‘class=”lede’important”>This’paragraph’introduces’the’terms…</p> content start’tag element end’tag

<p’id=”terms“‘class=”lede’important”>This’paragraph’introduces’the’terms…</p> tag’name tag’name content start’tag element end’tag

<p’id=”terms“‘class=”lede’important”>This’paragraph’introduces’the’terms…</p> tag’name attribute tag’name attribute content start’tag element end’tag

<p’id=”terms“‘class=”lede’important”>This’paragraph’introduces’the’terms…</p> attribute’name tag’name attribute value tag’name attribute content start’tag element end’tag

<!DOCTYPE)html>) <html>)lang=”en”>) <head>) ) <meta)charset=”UTFQ8”/>) ) ) <1tle>The)Universal)Declara1on)of)Human)Rights</1tle>) ) ) <link)rel=”stylesheet”)href=”udhr.css”/>) ) </head>) ) <body>) ) <h1>The)Universal)Declara1on)of)Human)Rights</h1>) ) <h2>Ar1cle)1</h2>) ) <p>All)human)beings)are)born)free)and)equal)in)dignity) ) and)rights.)They)are)endowed)with)reason)and)conscience) ) and)should)act)towards)one)another)in)a)spirit)of) ) brotherhood.</p>) ) </body>) ) </html>)

<!DOCTYPE’html>

always’on’top’for’proper’rendering html root’element’ 2’child’elements:’head’and’body’ should’have’a’lang’attribute’indicating’the’ language’of’page’content head container’for’character’encoding,’page’title,’ link’to’stylesheet,’metainformation <meta’charset=”UTFO8”/> character’encoding’declaration title page’title’(browser’tab,’bookmark) <link’rel=”stylesheet“‘href=”…”/> reference’to’stylesheet

body container’for’page’content h1’…’h6 heading,’1st’…’6th’level p paragraph em emphasis strong strong’emphasis <a’href=”…”> hyperlink

block’elements

<p>Whereas’a’common’understanding’of’these’ rights’and’freedoms’is’of’the’greatest’importance’ for’the’full’realization’of’this’pledge,</p>’ <p><strong>Now,’Therefore’<em>the’General’ Assembly</em>’proclaims’<em>this’Universal’ Declaration’of’Human’Rights</em></strong>’as’a’ common’standard’of’achievement’for’all’peoples’ ‘⋮ and’all’nations,’to’the’end’that’every’individual’ and’every’organ’of’society,’keeping’this’ Declaration’constantly’in’mind,’shall’strive’by’ teaching’and’education’to’promote’respect’for’ these’rights’and’freedoms’and’by’progressive’ measures,’national’and’international,’to’secure’ their’universal’and’effective’recognition’and’ observance,’both’among’the’peoples’of’Member’ States’themselves’and’among’the’peoples’of’ territories’under’their’jurisdiction.</p>

block’elements inline’elements

<p>Whereas’a’common’understanding’of’these’ rights’and’freedoms’is’of’the’greatest’importance’ for’the’full’realization’of’this’pledge,</p>’ <p><strong>Now,’Therefore’<em>the’General’ Assembly</em>’proclaims’<em>this’Universal’ Declaration’of’Human’Rights</em></strong>’as’a’ common’standard’of’achievement’for’all’peoples’ ‘⋮ and’all’nations,’to’the’end’that’every’individual’ and’every’organ’of’society,’keeping’this’ Declaration’constantly’in’mind,’shall’strive’by’ teaching’and’education’to’promote’respect’for’ these’rights’and’freedoms’and’by’progressive’ measures,’national’and’international,’to’secure’ their’universal’and’effective’recognition’and’ observance,’both’among’the’peoples’of’Member’ States’themselves’and’among’the’peoples’of’ territories’under’their’jurisdiction.</p>

example:’udhr.html

CSS Cascading’Style’Sheets

rule p.lede’ {’ ””fontOweight:’bold;’ }’

selector p.lede’ {’ ””fontOweight:’bold;’ }’

declaration p.lede’ {’ ””fontOweight:’bold;’ }’

property p.lede’ {’ ””fontOweight:’bold;’ }’

value p.lede’ {’ ””fontOweight:’bold;’ }’

declarations p.lede’ {’ ””fontOweight:’bold;’ ””fontOsize:’1.25em;’ }’

group’of’selectors p.lede,’p.important’ {’ ””fontOweight:’bold;’ ””fontOsize:’1.25em;’ }’

p.lede,’p.important’{‘fontOweight:’bold;’fontOsize:’1.25em’}’ rule

p.lede,’p.important’{‘fontOweight:’bold;’fontOsize:’1.25em’}’ selector selector group’of’selectors rule

p.lede,’p.important’{‘fontOweight:’bold;’fontOsize:’1.25em’}’ selector selector declaration group’of’selectors rule declaration

p.lede,’p.important’{‘fontOweight:’bold;’fontOsize:’1.25em’}’ property value selector selector declaration group’of’selectors rule declaration

exercise:’udhr.html

box’model content

box’model content border

box’model content padding border

box’model content padding border

box’model content padding border margin

paddingOtop:’1em;’ paddingOright:’2em;’ paddingObottom:’3em;’ paddingOleft:’4em; padding:’1em’2em’3em’4em; top left right bottom

paddingOtop:’1em;’ paddingOright:’2em;’ paddingObottom:’3em;’ paddingOleft:’4em; padding:’1em’2em’3em’4em; top left right bottom

paddingOtop:’1em;’ paddingOright:’2em;’ paddingObottom:’3em;’ paddingOleft:’2em;’ padding:’1em’2em’3em; top left right bottom

paddingOtop:’1em;’ paddingOright:’2em;’ paddingObottom:’1em;’ paddingOleft:’2em;’ padding:’1em’2em; top left right bottom

paddingOtop:’1em;’ paddingOright:’1em;’ paddingObottom:’1em;’ paddingOleft:’1em;’ padding:’1em; top left right bottom

marginOtop:’1em;’ marginOright:’2em;’ marginObottom:’3em;’ marginOleft:’4em;’ margin:’1em’2em’3em’4em; top left right bottom

borderOtopOwidth:’1em;’ borderOrightOwidth:’2em;’ borderObottomOwidth:’3em;’ borderOleftOwidth:’4em;’ borderOwidth:’1em’2em’3em’4em; top left right bottom

content padding border margin

boxOsizing:’contentObox height content padding border margin width

boxOsizing:’paddingObox height content padding border margin width

boxOsizing:’borderObox height content padding border margin width

<main’role=”main”> main’page’content;’max.’1’per’page section,’article grouping’elements,’should’have’headings header,’footer e.g.’information’ab.’author,’copyrights nav,’aside navigation,’tangentially’related’content div block’element’with’no’semantics span inline’element’with’no’semantics

<img’src=”…“‘alt=”…”/> image;’alternative’text’mandatory object,’audio,’video multimedia’objects figure container’for’multimedia’objects,’quotes,’etc. figcaption figure’caption

ol,’ul (un)ordered’list;’only’li’child’elements’allowed li list’item table table;’don’t’use’for’layout <table’role=”presentation”> layout’table caption table’caption

colgroup group’of’table’columns col table’column thead,’tfoot,’tbody groups’of’table’rows tr table’row th table’head’cell’(for’row’or’column) td table’data’cell

thead tr th”””””””””””’th”””””””””””’th””””””””” tr th”””””””””””’td”””””””””””’td””””””””’ tr th”””””””””””’td”””””””””””’td””””””””’ tbody

<form’action=”…”> form;’action’attribute’required fieldset,’legend grouping’element,’group’heading <label’for=”…”> label’for’input’field’with’id,’click’focusses’input <input’name=”…“‘type=”…”/> input’field textarea multiline’input’field button,’<button’type=”submit”> submit’button <button’type=”button”> other’button

input,’<input’type=”text”/> text’input <input’type=”password”/> password’input’(hidden) “email”,‘“tel”,‘“url”,‘“number” enable’special’keybords’on’mobile’devices “range”;‘“date”,‘“time”,’etc. browser’may’display’slider’or’date/time’picker <input’required/> input’field’must’be’filled’out <input’type=”checkbox”/> checkbox <input’type=”radio”/> radio’button;’all’of’same’name’in’a’group

selectors element’type”’p’ id”’#terms,’p#terms’ class”.lede,’p.lede’ attribute”’a[href],’a[href=”#”],’a[href^=”http”],” ’ combinators ‘img[href$=”.jpg”],’p[class~”lede”] descendant”’figure’img’ child”’ol’>’li’ adjacent’sibling”’h1’+’p’ general’sibling”’h2’~’p

pseudoQclasses :hover,’:active,’:focus,’:link,’:visited’ :firstQchild,’:lastQchild,’:nthQchild(an+b)’ :firstQofQtype,’:lastQofQtype,’:nthQofQtype(an+b)’ :checked’ :valid,’:invalid’ :target’ :lang(en)’ :not(…) pseudoQelements ::before,’::after”’li::before’{‘content:’”▶”’}

selector’specifity’ a. style’attribute?’ a.b.c.d b. number’of’ID’selectors’ c. number’of’class’selectors,’attributes’selectors,’ and’pseudoQclasses’ d. number’of’type’selectors’and’pseudoQelements

cascading’stylesheets

  1. browser’stylesheet’ 2. user’stylesheet,’normal’declarations” 3. author’stylesheet,’normal’declarations” 4. author’stylesheet,’important’declarations” 5. user’stylesheet,’important’declarations’