Frontend Development

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

tag

element’content

element’content

tag

start’tag

tag’name’ element’type

end’tag

tag’pairs

nested’elements

wrong!

child’element’ descendant

parent’element’ ancestor

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

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

block’elements inline’elements

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’