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

Code questions

Is my website cohesive and consistent?

Code questions

Is it clear what is interactive and what is not?

Is this a link?

Or is this a link?

Code questions

Clear feedback for interactive elements

Only :hover

Both :hover and :focus

In preparation for lecture...

Please close up any laptops, cellphones, iBooks, Whoops and other 'beep-boop' devices.

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...

Useful content

Our content should:

• Fulfill a clear and specific purpose.
• Should be user-centered.
• Should be concise.

Carousel questions

• What is the purpose of a carousel?
• Is it 'clear' and 'specific'?

Carousel questions

• What is the purpose of a carousel?
• Is it 'clear' and 'specific'?

Designing effective carousels

I would recommend reviewing the Nielsen Norman group's carousel usability before integrating carousels.

Useful content

Our content should:

• Fulfill a clear and specific purpose.
• Should be user-centered.
• Should be concise.

Labelling

How clear/specific are each of these links?

• Next >
• Learn More
• Learn about labelling

Useful content

Our content should:

• Fulfill a clear and specific purpose.
• Should be user-centered.
• Should be concise.

Maintaining a Tone

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

Accessibility Audit

To practice assessing some of the most common accessibility concerns we have some accessibility items for you to audit on your P2 project (you should have all content ready by now!):

Semantic Elements

Are the following elements used, and are they used appropriately?

• header - defines major headings and information about the website.
• nav - contains links to navigate to different pages or sections of a website.
• section - contains logical sections of content, most likely with a heading.
• footer - contains meta information about the page (i.e. copyright, company info...).

A Language is Set

Is a default language defined for the document? For example:

Ordering Headings

Functional Links

Can we tell what is a link, and when we use the keyboard to navigate to it, does it visually cue us?

Appropriate Alt Text

Do your images have appropriate alt-text? Does it describe the content or the function of the image?

Labels Tied to Inputs

Colour Blindness

Head to ah.link/cbv to load up your project website or styleguide and simulate different types of colour blindness. Where might there be concerns?

Keyboard Navigation

Try to navigate through the website using only the keyboard — the tab and enter keys. Are there any concerns with clarity of interaction points, or missing information?

Responsiveness

Head to ah.link/rv to load up your project website or styleguide and simulate different display sizes. Where might there be concerns?

Audit complete

(for now)

If you haven't already one member of each team, please check-in with me to change your team's name on Canvas.

If no time left, please reach out to your TAs during critique.

Labs critique sign-up

Sign-up for critique times starts with your lab. You will need to make it in your lab by its start time to secure a time-slot.

Critiques will run starting 5 minutes after your lab start time.

Activities during critiques

Busy agenda!

1. P2 check-in. (Have the link to your P2 file space ready)
2. P2 teamwork reflection
3. Accessibility exercise
4. Reading reflection #3

This reading reflection is the second last one. Final opportunity for reading reflections is July 15th.