coding for designers

CODING FOR DESIGNERSAmelia Schmidt UX lead & front-end lead, Equiem

What are we doing today?AGENDA

‣ Print design vs web design

‣ What is responsive?

‣ What is user experience? ‣ Basics of HTML, CSS and Javascript ‣ How engineers actually work

‣ Dynamic vs static

‣ Style-guides and components

2

INTRODUCTION 3

Introductions

INTRODUCTION 3

Why do you want to learn to code?

INTRODUCTION 3

What How Why

Print vs web designCoding for designers

5PRINT VS WEB

Design has always been deeply linked to technology and industry

Print!6

The industrial revolution!6

Cars!6

Film!6

Bauhaus!6

Modernism!6

Typewriters!6

Meanwhile: art! Advertising! Propaganda! Textiles! Fashion!

6

Then: the internet!6

Then: iPhones!6

6

https://www.youtube.com/watch?v=s1i-dnAH9Y4

The first computers = design machines

https://www.youtube.com/watch?v=s1i-dnAH9Y4

Print constraints6

FIXED SIZE OF PAGES DISTRIBUTION

MOTIONLESS

PASSIVE

COST OF MATERIALS

Print solutions

TYPOGRAPHY

MINIMALISM

ILLUSTRATION

ADVERTISING STANDARDISED COLOURS

STANDARDISED SIZES

TYPOGRAPHY

MINIMALISM

ILLUSTRATION

ADVERTISING STANDARDISED COLOURS

STANDARDISED SIZES

Web constraints6

Web solutions

FIXED SIZE OF PAGES DISTRIBUTION

MOTIONLESS

PASSIVE

COST OF MATERIALS

SHORT ATTENTION

SPANS PERFORMANCE

SEO

INTERACTIVE

HIGHLY COMPETITIVE

SECURITY

ACCESSIBILITY

FLUID SIZES

DEVICES

ANIMATION

CACHING

RESPONSIVE DESIGN

LISTICLES WEB ACCESSIBILITY

STANDARDS

WC3 STANDARDS

APIs

CACHING

PCI-DSS

OWASP

Print patterns that are not so great for web

Coding for designers

6RESPONSIVE WEB DESIGN

Here is a great teaser about this cat on a beanbag. The image has a fixed ratio (use the <img> tag) and there is just enough text in this box to fill up the available space. You can use lorem if you want.

Cat on a bag

STANDARD PRINT TEASER



Cat on a bag

SQUISH IT AND SEE



Cat on a bag


Cat on a bag


Cat on a bag


Cat on a bag

WORSE WHEN STACKED


Here is a great teaser about this cat on a beanbag. You can use lorem if you want.

Cat on a bagBETTER!



Cat on a bagHere is a great teaser about this cat on a beanbag. You can use lorem if you want.




Cat on a bag

SEEMS FAIR







Cat on a bag

PERFECT TEASERS!



Cat on a bag

That’s not how the world works though right?

Reality

Look at all this different content.

Different content changes

Even if this had different images…

The layout

REAL CONTENT



Cat on a bag

That’s not how the world works though right?

Reality

Look at all this different content.

Different content changes

Even if this had different images…

The layout

REAL LAYOUT


This is my feature article layout. It’s very standard and it works well for these image dimensions!

Profile: Bag Cat

Profile: Bag Cat >

This is how I want it to appear on mobile!

MAGIC IMAGE CROPPING?

Design tools for webCoding for designers


ACTUAL CSS RULES

REAL WEB GRIDS

ADAPTIVE SCREEN SIZES


Photoshop isn’t a web design tool!‣ It’s a photo editing tool

‣ Layers do not translate to web

‣ Photoshop effects are not web effects ‣ What’s possible in a PSD might not be possible in web ‣ Font rendering issues - desktop fonts vs. web fonts

‣ No animation, no responsive


Web design tools are specialised for you!‣ Write or export actual CSS and HTML!

‣ Learn about CSS in the process of designing!

‣ Responsive out of the box! ‣ Interactions! ‣ User journeys!

‣ Developers will like you!


Great tools to get started with‣ Webflow

‣ Macaw

‣ Edge Reflow ‣ https://www.smashingmagazine.com/2014/05/next-generation-

responsive-web-design-tools-webflow-edge-reflow-macaw/

‣ Invision ‣ Pop App ‣ UXPin

https://www.smashingmagazine.com/2014/05/next-generation-responsive-web-design-tools-webflow-edge-reflow-macaw/


Tips‣ Start from the content

‣ Use the right tools

‣ Prototype ‣ Wireframe


Modern design deliverables‣ Wireframes

‣ Styleguides

‣ Animation specs ‣ Prototypes ‣ References

ResponsiveCoding for designers

5WHAT IS RESPONSIVE?

Responsive is one method of making a single website that works across various screen sizes

‣ https://www.bostonglobe.com/

WHAT IS RESPONSIVE? 42WHAT IS RESPONSIVE?


What it’s not:‣ “m Dot” eg. http://m.theage.com.au/

‣ Adaptive

‣ Liquid ‣ Static (http://www.liquidapsive.com/)

FixedFixed websites have a set width and resizing the browser or viewing it on different devices won’t affect on the way the website looks.

AdaptiveAdaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.

FluidFluid websites are built using % for widths. Columns are relative to one another and the browser can scale up and down fluidly.

“m dot”m.website.com is a separate codebase with the same database, essentially an entirely different “skin” for a site built for mobile only.

http://m.theage.com.au/

http://www.liquidapsive.com/


Responsive is…‣ The same website, the same code, the same database, but displayed

differently on different screens due to the use of… ‣ …media queries, which can be leveraged in powerful ways via grid

systems and breakpoints

‣ The idea that the web is not just one size, or three sizes, but any possible size on an ever-expanding set of devices, including the Internet Of Things revolution

‣ A design decision, a suite of web tools, a paradigm…


The magic sauce‣ Media queries!

‣ There aren’t just three sizes of screen anymore

‣ Some gorgeous designs use media queries http://mediaqueri.es/ ‣ http://cssmediaqueries.com/

http://codepen.io/meeli/pen/EKxNNW

http://mediaqueri.es/

http://cssmediaqueries.com/

http://codepen.io/meeli/pen/EKxNNW

User experienceCoding for designers

5USER EXPERIENCE

5USER EXPERIENCE

“Design is not just what it looks like and feels like. Design is how it works.”

— Steve Jobs, 2003

5USER EXPERIENCE

User Experience: Beyond the Basicsby Nichole Wolf

5USER EXPERIENCE

RESEARCH

DESIGN

TESTING

PROTOTYPE

5UX

Prototyping is fun‣ Learning code will help you prototype ideas as part of good UX design

‣ You can start prototyping things at codepen.io - you don’t even need a code editor to do so

‣ http://tympanus.net/codrops/ has heaps of fun examples of mini animation and design prototypes for web.

http://codepen.io

http://tympanus.net/codrops/

HTML, CSS and Javascript


5CSS, HTML, JAVASCRIPT

CONTENT

PRETTY STUFF

COOL ANIMATIONS


HTML is the core - CSS is the chocolate - JS is the sugar‣ HTML must be good on its own - understandable to people who might

be disabled, blind, or unable to see CSS and JS for some reason ‣ CSS should make things look nice, but without CSS it should still work ‣ JS is the final sugary layer - extra jazzy for those who can see it, but

you won’t suffer if you can’t

http://learn.shayhowe.com/advanced-html-css/semantics-accessibility/


HTMLCoding for designers


<div class=“codingfordesigners”></div>

TAG ATTRIBUTES

CLOSING TAG


<div class=“codingfordesigners”><span>Coding for Designers</span>

</div>

BLOCK LEVEL ELEMENT

INLINE ELEMENT


https://simon.html5.org/html-elements

<div> <span> <img> <a> <em> <strong>

<input> <h1> <h2> <code> <video> <p>

<br>

<table>

<select> <section>

https://simon.html5.org/html-elements


‣ Chrome > Inspect element

‣ Chrome > View Source

Secrets of HTML

HTML

CSS


EDIT EXISTING RULES

EDIT THIS TO ADD NEW

RULES

CSSCoding for designers

5WHAT IS CSS?

Cascading style sheets‣ A style sheet consists of a list of rules. Each rule or rule-set consists of

one or more selectors, and a declaration block.

.big-box { background-color: red;

}Rule

5WHAT IS CSS?

Cascading style sheets‣ Selectors may apply to:

‣ all elements of a specific type, e.g. the second-level headers h2

‣ elements specified by attribute, in particular: ‣ id: an identifier unique within to the document ‣ class: an identifier that can annotate multiple elements in a

document ‣ elements depending on how they are placed relative to others in the

document tree.

5WHAT IS CSS?

Selectorselement (HTML tags, e.g. input, div) #id (only one ID per element) .class (a group of elements) [data-attribute] (describes the function) * (universal selector, targets everything) !important (overrides everything) :state (e.g. :hover, :focus) :pseudo-classes (used for CSS logic)

5WHAT IS CSS?

Selectors


}

Selector

5WHAT IS CSS?

Selectors

.big-box .inner-box { background-color: red;

}

Nestedselectors

.big-box, .small-box { background-color: red;

}

Multiple selectors

5WHAT IS CSS?

Selectors

.big-box.green-box { background-color: red;

}

Bothselectors

5WHAT IS CSS?

Selectors<input id=“search” class=“green” type=“text”>

* { font-family: sans-serif; } input { width: 100; } #search { position: relative; } .green { color: green; } [type=“text] { float: left; }

HTML

CSS

5WHAT IS CSS?

Declaration blocks‣ A declaration block consists of a list of declarations in braces.

‣ Each declaration itself consists of a property, a colon (:), and a value.

‣ If there are multiple declarations in a block, a semi-colon (;) must be inserted to separate each declaration.


}

Declarationblock

https://en.wikipedia.org/wiki/Cascading_Style_Sheets


5WHAT IS CSS?

Cascading style sheets

.big-box { height: 100%; display: block; background-color: red;

}

Declarationblock



5WHAT IS CSS?

Inheritance‣ Inheritance is a key feature of CSS

‣ Descendant elements may inherit CSS property values from any ancestor element enclosing them.

<div class=“box”> <p class=“paragraph”> <span>CSS is awesome!</span>

</p> </div>

NestedHTML

elements

5WHAT IS CSS?

Inheritance‣ In general, descendant elements inherit text-related properties, but

box-related properties are not inherited. Properties that can be inherited are colour, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space and word-spacing.

‣ Properties that cannot be inherited are background, border, display, float and clear, height, and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align and z-index.

5WHAT IS CSS?

Inheritance<div class=“box”> <p class=“paragraph”> <span>CSS is awesome!</span>

</p> </div>

.box { color: pink;

}

This text will be pink

5WHAT IS CSS?

Specificity

https://designshack.net/articles/css/what-the-heck-is-css-specificity

https://designshack.net/articles/css/what-the-heck-is-css-specificity

5WHAT IS CSS?

Specificity‣ CSS “cascades” so the rules at the top of the stylesheet are overridden

by the rules at the bottom ‣ Two conflicting rules with the same selector: the later rule will win ‣ Different types of selector (element, id, class, etc) have different

“points” of specificity and the more points you get, your rule will win the fight

‣ Specificity wars are often won with the !important selector, which is how the wars turn in to an arms race

‣ http://www.standardista.com/css3/css-specificity/

http://www.standardista.com/css3/css-specificity/

5WHAT IS CSS?

5WHAT IS CSS?

Specificity‣ The three-number rating is a matrix - no matter how many classes you

have, an ID will override, and no matter how many IDs you have, an element will override

‣ Specificity is tricky, and you get a feel for it with experience!

5WHAT IS CSS?

Box model‣ The CSS box model is essentially a box that wraps around every

HTML element. It consists of: margins, borders, padding, and the actual content.

‣ The box model is important to understand because it explains why margin and padding are different

‣ border-box is a standard and very consistent box model.

‣ http://www.w3schools.com/css/css_boxmodel.asp

http://www.w3schools.com/css/css_boxmodel.asp

5WHAT IS CSS?

Box model

http://codepen.io/meeli/pen/pyoNej

http://codepen.io/meeli/pen/pyoNej

5WHAT IS CSS?

Floats‣ Float an element to make it behave like a helium balloon

‣ float: left;

‣ float: right; ‣ There is no “float: centre;” or vertical floats ‣ Floating an element will make it sit at the top left or top right of its

container, and it will also make it have meaningful size because of that

JAVASCRIPTCoding for designers

5WHAT IS JAVASCRIPT?

Javascript‣ “JavaScript (/ˈdʒɑːvəˌskrɪpt/[5]) is a high-level, dynamic, untyped, and

interpreted programming language.” ‣ Translation: Javascript is hard, complicated and very loose ‣ Javascript is used to make interactivity on the web


Javascript‣ Variables

‣ Objects

‣ Functions ‣ Arrays ‣ Prototypes

‣ Closures

‣ Numbers, strings, etc.


Javascript‣ HTML and CSS are not programming languages - HTML is a “markup

language” and CSS is a “stylesheet language” ‣ Javascript is a programming language - it can do things like

‣ Change the HTML

‣ Trigger events

‣ Move things around ‣ Make things appear and disappear

http://codepen.io/meeli/pen/xVMLYR

http://codepen.io/meeli/pen/xVMLYR


Javascript‣ “JavaScript is not a programming language in strict sense. Instead, it

is a scripting language because it uses the browser to do the dirty work. If you command an image to be replaced by another one, JavaScript tells the browser to go do it.”

http://www.quirksmode.org/js/intro.html



Javascript‣ Javascript is dangerous. It can manipulate elements on a page, so if

someone manages to get their Javascript in to your page, they can change the content of your website.

‣ Javascript can be used to do all sorts of complicated programming - but for styling and enhancing web pages it’s usually not too complex

‣ Javascript is going to be the hardest to get your head around.



5HTML, CSS AND JAVASCRIPT

Check out all three working together!

http://codepen.io/meeli/pen/aNXydv


BrowsersCoding for designers

5WHAT ABOUT BROWSERS?

5BROWSERS

Here’s where it gets annoying‣ There are some serious differences in modern web browsers

‣ Up until last year, web developers were expected to support Internet Explorer 8, despite it being seven years old an unsupported by most major software groups

‣ Browser differences include ‣ Font rendering ‣ Positioning rules

‣ Maximum limits for stylesheets

‣ Opacity, animations, etc.

5caniuse.com

http://caniuse.com

KEY OBJECTIVES

Try out some HTML, CSS and Javascript

EXERCISE

AGENDA

10 minutes 1. Head to Codepen 2. Make yourself a <div> 3. Give it a class 4. Put some CSS on it 5. Do a simple jQuery animation

DELIVERABLE

Your first working code!

7

RESOURCES

codepen.io http://codepen.io/meeli/pen/aNXydv

http://codepen.io


Engineers in the Real World


5ENGINEERS IN THE REAL WORLD

HTML

CSS

Javascript

HTML

CSS

Javascript

In the browser Engineers writeThe old way


HTML

CSS

Javascript

PHP

SASS

Ruby

In the browser Engineers writeThe less-old way

SQL

LESSPython


HTML

CSS

Javascript

In the browser

The (old) reality

PHP

SASS

Ruby

Engineers write

SQL

LESSPython

CMS

Drupal Wordpress

Moodle

Magento

Joomla Django


HTML

CSS

Javascript

In the browser

The reality

Javascript

Coffee script

Engineers write

Clojurescript

Frameworks

Ember React Angular

Hoplon Symphony

Backbone

Datascript

SASS


Next steps for beginners

Site-builder frameworks

WebflowSquarespace

Wix

Bootstrap

Adobe Muse

Shopify

BigCommerce Jekyll

Macaw


It’s a complicated world out there‣ No two tech stacks are exactly the same

‣ Frameworks may change what’s “easy” and “hard”

‣ Pre-designed chunks of code are re-used

Dynamic vs staticCoding for designers

5DYNAMIC VS STATIC

‣ “Single page” websites

‣ Landing pages

‣ No CMS ‣ Content never changes ‣ No “backend”

‣ Still can use animations

Static web pages

5DYNAMIC VS STATIC

‣ Any number of pages

‣ Content is editable and update-able

‣ Usually has a “backend” or “CMS” ‣ Layouts are affected by content ‣ Layouts themselves might be changeable

‣ Users become their own content strategists/content creators/site designers

Dynamic web pages

5DYNAMIC VS STATIC

‣ Everyone still needs designers

‣ The web is evolving - and so is your role

Dynamic vs static - the designer’s role

http://www.spiderwriting.co.uk/static-dynamic.php

Style guides and components


5STYLE GUIDES AND COMPONENTS


https://css-tricks.com/modular-future-web-components/

‣ Bundles of small chunks of HTML,CSS and JS that can be re-used

‣ “Modular design”

‣ Scalable, efficient and useful for larger-scale projects

Web components


http://alistapart.com/article/language-of-modular-design

‣ “Modular design, or "modularity in design", is a design approach that subdivides a system into smaller parts called modules or skids, that can be independently created and then used in different systems.” - Wiki

Modular design

http://alistapart.com/article/language-of-modular-design


‣ Use wireframes, style guides and component designs for large sites with repeating elements

‣ Don’t force engineers to hand-paint every page! ‣ Building websites is expensive - you need to help make it as cheap as

possible.

Engineers are expensive

In summaryCoding for designers


‣ Component design

‣ Animation specs

‣ Prototyping ‣ Research and testing ‣ Style guides

‣ Interaction design

‣ Conversations with engineers

Your new job

DiscussionCoding for designers

ResourcesCoding for designers

5Resources

‣ http://www.liquidapsive.com/

‣ https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

‣ http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

Responsive

http://www.liquidapsive.com/

https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/

http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

5Resources

‣ http://www.sitepoint.com/ux-designer-actually/

‣ http://blog.careerfoundry.com/ui-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

UX

http://www.sitepoint.com/ux-designer-actually/

http://blog.careerfoundry.com/ui-design/the-difference-between-ux-and-ui-design-a-laymans-guide/

5Resources

‣ http://codepen.io/

‣ https://jsfiddle.net/

‣ http://tympanus.net/codrops/

Prototyping

http://codepen.io/

https://jsfiddle.net/

http://tympanus.net/codrops/

5Resources

‣ http://slides.com/ameliaschmidt/red-flags#/

‣ http://ui-patterns.com/

‣ https://bradfrost.github.io/this-is-responsive/ ‣ https://developers.google.com/web/fundamentals/design-and-ui/

responsive/patterns/?hl=en

More about design patterns for web

http://slides.com/ameliaschmidt/red-flags#/

http://ui-patterns.com/

https://bradfrost.github.io/this-is-responsive/

https://developers.google.com/web/fundamentals/design-and-ui/responsive/patterns/?hl=en

5Resources

‣ http://learn.shayhowe.com/advanced-html-css/semantics-accessibility/

‣ https://www.coursera.org/specializations/web-design

‣ https://www.w3.org/ ‣ http://www.lynda.com/ ‣ https://teamtreehouse.com

‣ http://www.instituteofcode.com/

Learn more code!


https://www.coursera.org/specializations/web-design

https://www.w3.org/

http://www.lynda.com/

https://teamtreehouse.com

http://www.instituteofcode.com/

5Resources

‣ https://webflow.com/

‣ http://macaw.co/

‣ https://www.invisionapp.com/ ‣ https://proto.io/ ‣ https://uxpin.com/

Tools

https://webflow.com/

http://macaw.co/

https://www.invisionapp.com/

https://proto.io/

https://uxpin.com/

Thanks!16Coding for designers

Amelia Schmidt equiem.com.au @meelijane

coding for designers

Documents