ah teaches web design & development (Portfolio Review lecture)

Portfolio Review

Lecture outline

Bring in your final portfolios to lecture. We will review them and provide further feedback and direction. Lecture slides will be made available on the day of the lecture (November 28).

Peer critique prep

In preparation for today's critiques, please:

1. Select a numbered station for your project.
2. Write down your name on the post-it at the station.
3. Place your bags/belongings out of the way.
4. Load up your project website in Chrome.
5. Close off any other applications that may be running.
6. Have a pen or pencil ready.

Process

Please be clear what you were commenting on and why your critique is valid/important.

After each prompt you will:

• Return the website to the home or landing page.
• Write your name on your post-it.
• Leave the post-it at the project you are at.
• Move to the next project (+1 from where you are).

Peer critique start

Please move +1 project.

Valid HTML and CSS

Open the validator at http://ah1.ca/validate

Run the website through the validator. Comment on any frequent concerns.

Validator password is:

You have...

HTML code review

Review the HTML for:

• Do the <img> elements have alt attributes describe the image (as if we did not see it), or describe its destination if it is within a <a>?
• Do the <img> elements have a height and width attribute set (unless using srcset)?
• Is there an <h1> element for the page? Is it the main title?
• Are the headings ordered appropriately? i.e. does it jump from <h1> to <h3> (which is not good)?
• Are <br> elements used only in addresses or poetry?
• Is it all <div>s, or are <section>s used logically?

You have...

CSS code review

Review the CSS for:

• Is a non-rem or em unit sizing used for fonts? or font-related properties (i.e. p { font-size: 16pt; margin: 10px; })
• Is a non-rem or em unit used for media queries? (i.e. @media (min-width: 640px) {})

You have...

Clear Interaction Cues

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

You have...

Responsiveness

Open up our responsive viewer at ah1.ca/rv and check both landscape and portrait orientations.

Does the website respond effectively to these different sizes?

You have...

Mobile

Open up the website on your phone by heading to ah.link/339s

Please open a blank tab overtop of the portfolio

First impressions

Briefly look at the landing page of the website. What do you understand this website is about? and why?

10 seconds

First impressions

Briefly look at the landing page of the website. Who would you say this individual is/what do they do? and why?

10 seconds

Ethos

Step through the website. Do you believe this person can do what they claim to?

You have...

Visual identity

Does the visual language or identity presented communicate what this individual does? Why or why not?

You have...

Process analysis

Read through the process analysis. Can you:

• Understand what the project was about?
• See why a particular process was undertaken?
• See what the thinking behind this process was?
• Identify this individual's contribution?
• See a reflection that ties back to what was said in the analysis?

You have...

Progressive Enhancement

Let's disable Javascript and see what happens.

You have...

Critique complete

Thank-you for participating!

TA evaluations for IAT-339 (Fall 2204)

• TA: Alfredo Sherman
• Section: D100