Frontend Development

A presentation at Workshop @ Zalando in January 2014 in Berlin, Germany by Gunnar Bittersmann

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
browser’stylesheet’ 2. user’stylesheet,’normal’declarations” 3. author’stylesheet,’normal’declarations” 4. author’stylesheet,’important’declarations” 5. user’stylesheet,’important’declarations’

Gunnar Bittersmann
@gunnarbittersmann

1 / 110

Workshop on Frontend Development for visual designers

Design/UX
Progressive Enhancement
HTML/CSS
HTML/CSS 2

Resources

The following resources were mentioned during the presentation or are useful additional information.

Design is not veneer

by Aral Balkan
The Elements of User Experience

diagram by Jesse James Garrett