![5WHAT IS CSS?
Selectors
element (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)](https://image.slidesharecdn.com/3d924622-92b5-486a-bda5-c83aee3fed12-160706004110/85/Coding-for-Designers-65-320.jpg)
![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](https://image.slidesharecdn.com/3d924622-92b5-486a-bda5-c83aee3fed12-160706004110/85/Coding-for-Designers-69-320.jpg)
![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](https://image.slidesharecdn.com/3d924622-92b5-486a-bda5-c83aee3fed12-160706004110/85/Coding-for-Designers-83-320.jpg)
Coding for Designers
- 1. CODING FOR DESIGNERS Amelia Schmidt UX lead & front-end lead, Equiem
- 2. 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
- 4. INTRODUCTION 3 Why do you want to learn to code?
- 6. Print vs web design Coding for designers
- 7. 5PRINT VS WEB Design has always been deeply linked to technology and industry
- 8. Print! 6
- 10. Cars! 6
- 11. Film! 6
- 12. Bauhaus! 6
- 13. Modernism! 6
- 14. Typewriters! 6
- 15. Meanwhile: art! Advertising! Propaganda! Textiles! Fashion! 6
- 17. Then: iPhones! 6
- 19. Print constraints 6 FIXED SIZE OF PAGES DISTRIBUTION MOTIONLESS PASSIVE COST OF MATERIALS Print solutions TYPOGRAPHY MINIMALISM ILLUSTRATION ADVERTISING STANDARDISED COLOURS STANDARDISED SIZES
- 20. TYPOGRAPHY MINIMALISM ILLUSTRATION ADVERTISING STANDARDISED COLOURS STANDARDISED SIZES Web constraints 6 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
- 21. Print patterns that are not so great for web Coding for designers
- 22. 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
- 23. 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
- 24. 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
- 25. 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 BETTER!
- 26. 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 Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag SEEMS FAIR
- 27. 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 Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag Here is a great teaser about this cat on a beanbag. You can use lorem if you want. Cat on a bag PERFECT TEASERS!
- 28. 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
- 29. 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
- 30. 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?
- 31. Design tools for web Coding for designers
- 32. 5RESPONSIVE WEB DESIGN ACTUAL CSS RULES REAL WEB GRIDS ADAPTIVE SCREEN SIZES
- 33. 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
- 34. 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!
- 35. 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
- 36. 5RESPONSIVE WEB DESIGN Tips ‣ Start from the content ‣ Use the right tools ‣ Prototype ‣ Wireframe
- 37. 5RESPONSIVE WEB DESIGN Modern design deliverables ‣ Wireframes ‣ Styleguides ‣ Animation specs ‣ Prototypes ‣ References
- 39. 5WHAT IS RESPONSIVE? Responsive is one method of making a single website that works across various screen sizes
- 42. ‣ https://www.bostonglobe.com/ WHAT IS RESPONSIVE? 42WHAT IS RESPONSIVE?
- 43. 5WHAT IS RESPONSIVE? What it’s not: ‣ “m Dot” eg. http://m.theage.com.au/ ‣ Adaptive ‣ Liquid ‣ Static (http://www.liquidapsive.com/) Fixed Fixed websites have a set width and resizing the browser or viewing it on different devices won’t affect on the way the website looks. Adaptive Adaptive websites introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile. Fluid Fluid 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.
- 44. 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…
- 45. 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
- 46. User experience Coding for designers
- 47. 5USER EXPERIENCE
- 48. 5USER EXPERIENCE “Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs, 2003
- 49. 5USER EXPERIENCE User Experience: Beyond the Basics by Nichole Wolf
- 51. 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.
- 52. HTML, CSS and Javascript Coding for designers
- 53. 5CSS, HTML, JAVASCRIPT CONTENT PRETTY STUFF COOL ANIMATIONS
- 54. 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/
- 56. 5CSS, HTML, JAVASCRIPT <div class=“codingfordesigners”> </div> TAG ATTRIBUTES CLOSING TAG
- 57. 5CSS, HTML, JAVASCRIPT <div class=“codingfordesigners”> <span>Coding for Designers</span> </div> BLOCK LEVEL ELEMENT INLINE ELEMENT
- 58. 5CSS, HTML, JAVASCRIPT <div class=“codingfordesigners”> <span>Coding for Designers</span> </div> BLOCK LEVEL ELEMENT INLINE ELEMENT
- 59. 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>
- 60. 5CSS, HTML, JAVASCRIPT ‣ Chrome > Inspect element ‣ Chrome > View Source Secrets of HTML HTML CSS
- 61. 5CSS, HTML, JAVASCRIPT EDIT EXISTING RULES EDIT THIS TO ADD NEW RULES
- 63. 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
- 64. 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.
- 65. 5WHAT IS CSS? Selectors element (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)
- 66. 5WHAT IS CSS? Selectors .big-box { background-color: red; } Selector
- 67. 5WHAT IS CSS? Selectors .big-box .inner-box { background-color: red; } Nested selectors .big-box, .small-box { background-color: red; } Multiple selectors
- 68. 5WHAT IS CSS? Selectors .big-box.green-box { background-color: red; } Both selectors
- 69. 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
- 70. 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; } Declaration block https://en.wikipedia.org/wiki/Cascading_Style_Sheets
- 71. 5WHAT IS CSS? Cascading style sheets .big-box { height: 100%; display: block; background-color: red; } Declaration block https://en.wikipedia.org/wiki/Cascading_Style_Sheets
- 72. 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> Nested HTML elements
- 73. 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.
- 74. 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
- 76. 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/
- 77. 5WHAT IS CSS?
- 78. 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!
- 79. 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
- 80. 5WHAT IS CSS? Box model http://codepen.io/meeli/pen/pyoNej
- 81. 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
- 83. 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
- 84. 5WHAT IS JAVASCRIPT? Javascript ‣ Variables ‣ Objects ‣ Functions ‣ Arrays ‣ Prototypes ‣ Closures ‣ Numbers, strings, etc.
- 85. 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
- 86. 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
- 87. 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
- 88. 5HTML, CSS AND JAVASCRIPT Check out all three working together! http://codepen.io/meeli/pen/aNXydv
- 91. 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.
- 92. 5caniuse.com
- 93. 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
- 94. Engineers in the Real World Coding for designers
- 95. 5ENGINEERS IN THE REAL WORLD HTML CSS Javascript HTML CSS Javascript In the browser Engineers writeThe old way
- 96. 5ENGINEERS IN THE REAL WORLD HTML CSS Javascript PHP SASS Ruby In the browser Engineers writeThe less-old way SQL LESS Python
- 97. 5ENGINEERS IN THE REAL WORLD HTML CSS Javascr ipt In the browser The (old) reality PHP SASS Ruby Engineers write SQL LESS Python CMS Drupal Wordp ress Moodl e Magent o Joomla Django
- 98. 5ENGINEERS IN THE REAL WORLD HTML CSS Javascr ipt In the browser The reality Javascri pt Coffee script Engineers write Clojure script Frameworks Ember React Angula r Hoplon Symph ony Backbo ne Datasc ript SASS
- 99. 5ENGINEERS IN THE REAL WORLD Next steps for beginners Site-builder frameworks Webflow Squarespace Wix Bootstrap Adobe Muse Shopify BigCommerce Jekyll Macaw
- 100. 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
- 101. Dynamic vs static Coding for designers
- 102. 5DYNAMIC VS STATIC ‣ “Single page” websites ‣ Landing pages ‣ No CMS ‣ Content never changes ‣ No “backend” ‣ Still can use animations Static web pages
- 103. 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
- 104. 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
- 105. Style guides and components Coding for designers
- 106. 5STYLE GUIDES AND COMPONENTS
- 107. 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
- 108. 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
- 109. 5STYLE GUIDES AND COMPONENTS
- 110. 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
- 111. In summary Coding for designers
- 112. 5STYLE GUIDES AND COMPONENTS ‣ Component design ‣ Animation specs ‣ Prototyping ‣ Research and testing ‣ Style guides ‣ Interaction design ‣ Conversations with engineers Your new job
- 115. 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
- 117. 5Resources ‣ http://codepen.io/ ‣ https://jsfiddle.net/ ‣ http://tympanus.net/codrops/ Prototyping
- 118. 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
- 119. 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!
- 120. 5Resources ‣ https://webflow.com/ ‣ http://macaw.co/ ‣ https://www.invisionapp.com/ ‣ https://proto.io/ ‣ https://uxpin.com/ Tools
- 121. Thanks! 16Coding for designers Amelia Schmidt equiem.com.au @meelijane