IAT-339: 07 The Content King — A slide deck
The Content King
Covered this week:
- Considerations of quality content
Lecture slides will be made available on the day of the lecture.
P01 Grade Concerns
Common coding errors:
- Not setting a language for your page (lang="en")
- Missing alt text
- Improperly nested headers
- Typoes: Forgetting to trap something in a comment, wrong property, wrong value
- Not escaping characters (i.e. < and >)
- labels and form fields
- Using old standards (i.e. tables for layout)
- Broken links
Should you have any concerns with your grade, please review any comments and the rubric before contacting us.
The Content King
Please close all laptops.
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.
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 user experience (or audio, or video...)
What are you really paying attention to?
Content should be user-centered.
Ask yourself: Does my user understand the language of my website?
- 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
A tensionProgressive Disclosure (UX Patterns)
Content needs maintenance.
Ask yourself: Has my website's content been maintained?
Maintaining a Tone
Let's take a look at MailChimp's Voice and Tone guide.
- Always progressively enhance
- Have the console open
- Know your DOM + selectors
Rule 1: Progressively Enhance
Rule 2: Console Open
var a = b * 2;
// 2; literal
// b; variable (get a value)
// b*2; arithmetic
// a = b * 2; assignment
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? -->
<a href="#">Link 1</a>
<a href="#">Link 2</a>
Let's open the console.
I recommend plotting your next hike.
P02 Due Next Week
Remember to include footer links for:
- 1 URL for citations
- 1 URL to your complete style guide
- 1 URL to your GitHub repository
Next week's lecture is about unicorns and you.
Next week's reading
"Let's Talk About Design Portfolios" and "The Worst Portfolio Ever"
- Office hours — Tuesdays from 3:00-3:50pm and Thursdays from 12:30-1:20pm at the Surrey campus mezzanine.