UX Design

Crash Course

User Experience of the Web

Matt Garrison, co-founder Iconoclast Labs, LLC

matt@iconoclastlabs.com or @mattsgarrison

Terminology

We're bad at words


Analogies and metaphors everywhere.

English is bad. Technical English is worse.

Context

"#"

What does it mean?

HTML Fundamentals

Structure

HTML is like the frame of a car.

HTML is a markup language

It tells the browser what content to display.


<p>This is content.</p>

    

This is content.

HTML is a markup language

It tells the browser what content to display.


<p>This is content.</p>
<h2>This is content.</h2>

    

This is content.

This is content.

HTML is a markup language

It tells the browser what content to display.


<p>This is content.</p>
<h2>This is content.</h2>
<p>This is <em>also</em> content.</p>
    

This is content.

This is content.

This is also content.

HTML is a markup language

It tells the browser what content to display.


<p>This is content.</p>
<h2>This is content.</h2>
<p>This is <em>also</em> content.</p>
<img src="smiley_face.jpg">
    

This is content.

This is content.

This is also content.

Smiley face

Required Structure

"Boilerplate"


<!DOCTYPE html>
<html>
<head>
  <title>
    Brocolli vs. Brussel Sprouts
  </title>
</head>
<body>
  Brussel Sprouts are clearly the better vegetable.
</body>
</html>
      

A Simple Yet Complete Page


<!DOCTYPE html>
<html lang="en">
<head>
  <title>A tiny document</title>
</head>
<body>
  <h1>Main heading in my document</h1>
  <!-- Tell people what we're doing. -->
  <p>
    I am <em>writing</em>
    <abbr title="Hyper Text Markup Language">HTML</abbr>.
  </p>
</body>
</html>
      

I am writing HTML.

Lists

Order and Unordered

Ordered Lists


<ol>
  <li>
    Sugar
  </li>
  <li>
    Cream
  </li>
  <li>
    Coffee
  </li>
  <li>
    Water
  </li>
</ol>
      

<ol>
  <li>
    Water
  </li>
  <li>
    Coffee
  </li>
  <li>
    Cream
  </li>
  <li>
    Sugar
  </li>
</ol>
      

  1. Sugar
  2. Cream
  3. Coffee
  4. Water
  1. Water
  2. Coffee
  3. Cream
  4. Sugar

Unordered Lists


    <h4>Awesome 'B' Things</h4>
<ul>
  <li>
    Bill Murray
  </li>
  <li>
    Beer
  </li>
  <li>
    Bubblewrap
  </li>
</ul>
      

Awesome 'B' Things

  • Bill Murray
  • Beer
  • Bubblewrap

HTML Practice

CSS

Cascading Style Sheets

also a markup language

Adding Style

CSS describes the presentation of your HTML.

Key Concepts

Selectors

The Box Model

Inheritence

Selectors

HTML

<div class='insect' id='bees'>Bees</div>
<div class='insect' id='wasps'>Wasps</div>
<div class='arachnid' id='spiders'>Spiders</div>
      
CSS

#bees{ color: blue; }
#wasps{ color: green; }
.insect{ background-color: red; }
div{ font-style: italic }
    
Result
Bees
Wasps
Spiders

The Box Model

margin

border

padding

element

Inheritance

CSS Practice

JavaScript

The only programming language that

web browsers will run

JavaScript

Used to add functionality.

JavaScript

Allows you to manipulate both

content and structure of the DOM

Web pages can now be dynamic.

AJAX

Asyncronous JavaScript and XML

Bringing It All Together

Sass or Less

CoffeeScript

Bootstrap or Foundation

Haml

Links and Resources

Mozilla Developer Network - HTML

https://developer.mozilla.org/en-US/docs/Web/HTML

W3Schools

http://www.w3schools.com/

HTML5 Boilerplate