Slide 1

Slide 1 text

Gunnar&Bittersmann&&&@g16n

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Dan&Saffer,&Designing&for&Interaction

Slide 19

Slide 19 text

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] usability

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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 suitability&for&the&task

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Hypertext'Markup'Language HTML

Slide 38

Slide 38 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

element

Slide 39

Slide 39 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

tag

Slide 40

Slide 40 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

element'content

Slide 41

Slide 41 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

element'content

Slide 42

Slide 42 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

tag

Slide 43

Slide 43 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

start'tag

Slide 44

Slide 44 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

tag'name' element'type

Slide 45

Slide 45 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

end'tag

Slide 46

Slide 46 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

tag'pairs

Slide 47

Slide 47 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

nested'elements

Slide 48

Slide 48 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

wrong!

Slide 49

Slide 49 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

child'element' descendant

Slide 50

Slide 50 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

parent'element' ancestor

Slide 51

Slide 51 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

start'tag

Slide 52

Slide 52 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

attribute

Slide 53

Slide 53 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

attribute'name

Slide 54

Slide 54 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

attribute'value

Slide 55

Slide 55 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

attributes

Slide 56

Slide 56 text

This'paragr ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

wrong!

Slide 57

Slide 57 text

This'paragraph' ''''introduces'the'terms' ''''element,'tag'and' ''''attribute.

multiple'classes

Slide 58

Slide 58 text

This'paragraph'introduces'the'terms…

element

Slide 59

Slide 59 text

This'paragraph'introduces'the'terms…

element start'tag end'tag

Slide 60

Slide 60 text

This'paragraph'introduces'the'terms…

element start'tag end'tag content

Slide 61

Slide 61 text

This'paragraph'introduces'the'terms…

element start'tag end'tag tag'name tag'name content

Slide 62

Slide 62 text

This'paragraph'introduces'the'terms…

element start'tag end'tag attribute attribute tag'name tag'name content

Slide 63

Slide 63 text

This'paragraph'introduces'the'terms…

element start'tag end'tag attribute attribute tag'name tag'name value attribute'name content

Slide 64

Slide 64 text

) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) ) <1tle>The)Universal)Declara1on)of)Human)Rights)

The)Universal)Declara1on)of)Human)Rights

)

Ar1cle)1

)

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.

) lang="en">) ) ) )

Slide 65

Slide 65 text

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 character'encoding'declaration always'on'top'for'proper'rendering page'title'(browser'tab,'bookmark) title reference'to'stylesheet

Slide 66

Slide 66 text

p paragraph emphasis em strong strong'emphasis h1'…'h6 heading,'1st'…'6th'level body container'for'page'content hyperlink

Slide 67

Slide 67 text

Whereas'a'common'understanding'of'these' rights'and'freedoms'is'of'the'greatest'importance' for'the'full'realization'of'this'pledge,

Now,'Therefore'the'General' Assembly'proclaims'this'Universal' Declaration'of'Human'Rights'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.

block'elements '⋮

Slide 68

Slide 68 text

Whereas'a'common'understanding'of'these' rights'and'freedoms'is'of'the'greatest'importance' for'the'full'realization'of'this'pledge,

inline'elements block'elements '⋮

Slide 69

Slide 69 text

example:'udhr.html

Slide 70

Slide 70 text

Cascading'Style'Sheets CSS

Slide 71

Slide 71 text

p.lede' {' ''''fontOweight:'bold;' }' rule

Slide 72

Slide 72 text

p.lede' {' ''''fontOweight:'bold;' }' selector

Slide 73

Slide 73 text

p.lede' {' ''''fontOweight:'bold;' }' declaration

Slide 74

Slide 74 text

p.lede' {' ''''fontOweight:'bold;' }' property

Slide 75

Slide 75 text

p.lede' {' ''''fontOweight:'bold;' }' value

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

exercise:'udhr.html

Slide 83

Slide 83 text

content box'model

Slide 84

Slide 84 text

content box'model border

Slide 85

Slide 85 text

content box'model border padding

Slide 86

Slide 86 text

content box'model border padding

Slide 87

Slide 87 text

content box'model border margin padding

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

content border margin padding

Slide 96

Slide 96 text

content boxOsizing:'contentObox border margin padding width height

Slide 97

Slide 97 text

content boxOsizing:'paddingObox border margin padding width height

Slide 98

Slide 98 text

content boxOsizing:'borderObox border margin padding width height

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

figure container'for'multimedia'objects,'quotes,'etc. figure'caption figcaption object,'audio,'video multimedia'objects image;'alternative'text'mandatory

Slide 102

Slide 102 text

table table;'don’t'use'for'layout layout'table caption table'caption li list'item ol,'ul (un)ordered'list;'only'li'child'elements'allowed

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

th'''''''''''''''''''''''th'''''''''''''''''''''''th'''''''''''''''''' th'''''''''''''''''''''''td'''''''''''''''''''''''td''''''''''''''''' th'''''''''''''''''''''''td'''''''''''''''''''''''td''''''''''''''''' tr tr tr thead tbody

Slide 105

Slide 105 text

button,' submit'button other'button textarea multiline'input'field input'field form;'action'attribute'required fieldset,'legend grouping'element,'group'heading label'for'input'field'with'id,'click'focusses'input

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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:'"▶"'}

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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'