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
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?
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
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
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.
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/
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)
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
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/
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
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
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.
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
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
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
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
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
112. 5STYLE GUIDES AND COMPONENTS
‣ Component design
‣ Animation specs
‣ Prototyping
‣ Research and testing
‣ Style guides
‣ Interaction design
‣ Conversations with engineers
Your new job
