Post on 12-Apr-2017
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
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
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
SQUISH IT AND SEE
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
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
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
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
WORSE WHEN STACKED
6RESPONSIVE WEB DESIGN
Here is a great teaser about this cat on a beanbag. You can use lorem if you want.
Cat on a bagBETTER!
6RESPONSIVE WEB DESIGN
Here is a great teaser about this cat on a beanbag. You can use lorem if you want.
Cat on a bagHere is a great teaser about this cat on a beanbag. You can use lorem if you want.
Cat on a bagHere is a great teaser about this cat on a beanbag. You can use lorem if you want.
Cat on a bagHere is a great teaser about this cat on a beanbag. You can use lorem if you want.
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
6RESPONSIVE WEB DESIGN
Here is a great teaser about this cat on a beanbag. You can use lorem if you want.
Cat on a bagHere is a great teaser about this cat on a beanbag. You can use lorem if you want.
Cat on a bagHere is a great teaser about this cat on a beanbag. You can use lorem if you want.
Cat on a bagHere is a great teaser about this cat on a beanbag. You can use lorem if you want.
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
PERFECT TEASERS!
6RESPONSIVE WEB DESIGN
Here is a great teaser about this cat on a beanbag. You can use lorem if you want.
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
6RESPONSIVE WEB DESIGN
Here is a great teaser about this cat on a beanbag. You can use lorem if you want.
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
6RESPONSIVE WEB DESIGN
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
5RESPONSIVE WEB DESIGN
ACTUAL CSS RULES
REAL WEB GRIDS
ADAPTIVE SCREEN SIZES
5RESPONSIVE WEB DESIGN
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
5RESPONSIVE WEB DESIGN
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!
5RESPONSIVE WEB DESIGN
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
5RESPONSIVE WEB DESIGN
Tips‣ Start from the content
‣ Use the right tools
‣ Prototype ‣ Wireframe
5RESPONSIVE WEB DESIGN
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
5WHAT IS RESPONSIVE?
41WHAT IS RESPONSIVE?
‣ https://www.bostonglobe.com/
WHAT IS RESPONSIVE? 42WHAT IS RESPONSIVE?
5WHAT 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.
5WHAT IS RESPONSIVE?
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…
5WHAT IS RESPONSIVE?
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
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.
HTML, CSS and Javascript
Coding for designers
5CSS, HTML, JAVASCRIPT
CONTENT
PRETTY STUFF
COOL ANIMATIONS
5CSS, HTML, JAVASCRIPT
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
5CSS, HTML, JAVASCRIPT
<div class=“codingfordesigners”></div>
TAG ATTRIBUTES
CLOSING TAG
5CSS, HTML, JAVASCRIPT
<div class=“codingfordesigners”><span>Coding for Designers</span>
</div>
BLOCK LEVEL ELEMENT
INLINE ELEMENT
5CSS, HTML, JAVASCRIPT
<div class=“codingfordesigners”><span>Coding for Designers</span>
</div>
BLOCK LEVEL ELEMENT
INLINE ELEMENT
5CSS, HTML, JAVASCRIPT
https://simon.html5.org/html-elements
<div> <span> <img> <a> <em> <strong>
<input> <h1> <h2> <code> <video> <p>
<br>
<table>
<select> <section>
5CSS, HTML, JAVASCRIPT
‣ Chrome > Inspect element
‣ Chrome > View Source
Secrets of HTML
HTML
CSS
5CSS, HTML, JAVASCRIPT
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
.big-box { background-color: red;
}
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.
.big-box { background-color: red;
}
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
https://en.wikipedia.org/wiki/Cascading_Style_Sheets
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
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/
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
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
5WHAT IS JAVASCRIPT?
Javascript‣ Variables
‣ Objects
‣ Functions ‣ Arrays ‣ Prototypes
‣ Closures
‣ Numbers, strings, etc.
5WHAT IS JAVASCRIPT?
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
5WHAT IS JAVASCRIPT?
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
5WHAT IS JAVASCRIPT?
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.
http://www.quirksmode.org/js/intro.html
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.
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
Engineers in the Real World
Coding for designers
5ENGINEERS IN THE REAL WORLD
HTML
CSS
Javascript
HTML
CSS
Javascript
In the browser Engineers writeThe old way
5ENGINEERS IN THE REAL WORLD
HTML
CSS
Javascript
PHP
SASS
Ruby
In the browser Engineers writeThe less-old way
SQL
LESSPython
5ENGINEERS IN THE REAL WORLD
HTML
CSS
Javascript
In the browser
The (old) reality
PHP
SASS
Ruby
Engineers write
SQL
LESSPython
CMS
Drupal Wordpress
Moodle
Magento
Joomla Django
5ENGINEERS IN THE REAL WORLD
HTML
CSS
Javascript
In the browser
The reality
Javascript
Coffee script
Engineers write
Clojurescript
Frameworks
Ember React Angular
Hoplon Symphony
Backbone
Datascript
SASS
5ENGINEERS IN THE REAL WORLD
Next steps for beginners
Site-builder frameworks
WebflowSquarespace
Wix
Bootstrap
Adobe Muse
Shopify
BigCommerce Jekyll
Macaw
5ENGINEERS IN THE REAL WORLD
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
Coding for designers
5STYLE 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
5STYLE GUIDES AND 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
5STYLE GUIDES AND COMPONENTS
5STYLE GUIDES AND COMPONENTS
‣ 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
5STYLE GUIDES AND COMPONENTS
‣ 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
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
5Resources
‣ http://codepen.io/
‣ https://jsfiddle.net/
‣ http://tympanus.net/codrops/
Prototyping
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
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!
5Resources
‣ https://webflow.com/
‣ http://macaw.co/
‣ https://www.invisionapp.com/ ‣ https://proto.io/ ‣ https://uxpin.com/
Tools
Thanks!16Coding for designers
Amelia Schmidt equiem.com.au @meelijane