ah teaches web design & development (Content is Key lecture)

Content is Key

Lecture outline

Considerations of structuring and writing quality content as well as an introduction to JavaScript. Lecture slides will be made available on the day of the lecture (June 24).

A screenshot of the Reddit Vancouver homepage

Content is Key

Supporting Users

Research from Google shows that 90 percent of people start a task using one device, then pick it up later on another device...
Windows on the Web (Karen McGrane)

Appropriate content is right for the user or context.

An eyetracker heat-map exemplifying that we do not look at ads on the page

Useful content should fulfill a clear and specific purpose.

Why might there be a concern with each of these options?

Images, video, and audio are content too

Just like we think about text user experience, we can also think about photo, audio, or video...

A phone support worker looking extremely happy

What does this photo evoke?

A woodpecker chipping away at a tree

What are you really paying attention to?

An animation of someone following directions to click arrows, but are clicking on the wrong ones

From the Bad UX Blog

Content should be user-centered.

An image comparing the Ikea desktop and mobile sites

Ask yourself: Does my user understand the language of my website?


  • Menu
  • Navigation
  • The links place

Keep content concise.

The Web is Lots of Type

"It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to [them]."
Emil Ruder

Content needs maintenance.

Ask yourself: Has my website's content been maintained? Does it need to be maintained?

Maintaining a Tone

Let's take a look at MailChimp's Voice and Tone guide.

Users and IA

Remember its importance

IA helps by offering:

  • Meaningful relationships between pages
  • Consistency in the structures
  • Logical uses of terminology
  • Clear paths for guiding users in deeper

Working with JavaScript (JS)

When coding/testing JavaScript:

  1. Always progressively enhance
  2. Have the console open
  3. Know your DOM + selectors

Rule 1: Progressively Enhance

Things should work as if JS did not exist.

Rule 2: Console Open

The console lets you see JavaScript errors. Otherwise your code is a magical mystery box.

// JavaScript is:
// 1) Case Sensitive
anawesomevariable != anAwesomeVariable; // not the same variable

// 2) Requires semicolons to complete statements
var anAwesomeVariable = 42;

// 3) Is loosely typed
var n = 42; // a number
var s = "42"; // a string
n == s; // this returns 'true', a number can 'equal' a string;

Rule 3: Know Your DOM + selectors

You need to know what you are selecting, and how we move through the DOM.

<!-- What would be three possible selectors for our second <a> tag? -->
<div class="column">
<nav id="navi-main">
<a href="#">Link 1</a>
<a href="#">Link 2</a>

JS fundamentals

Let's open the console.

P2: Company

For lecture...

For the next lecture time, we will be doing a JavaScript tutorial.

Next week's lecture

Being the Unicorn

Portfolios... just portfolios. Pre-recorded lectures and slides will typically become available on Fridays.