Antle teaches information design (Support and Critiques (Part 2) lecture)

Support and Critiques (Part 2)

Lecture outline

Time for support and critiques on P4. Lecture slides will be made available on the day of the lecture (November 26).

P4 final crits

In preparation for our P4 critiques today, please open up your project's pages.github.sfu.ca/.. in Firefox or Chrome. Write your team name on a post-it and attach it to the computer monitor.

In additional tabs, please open:

  1. The source code for the page (right-click and view source)
  2. A copy of the page in the responsive viewer — ah.link/rv

Process

Please make sure to include your name as part of your comments and be clear what you were commenting on (in case people need to follow-up).

Remember there are likely multiple pages to review, click through links to view the different pages.

After each prompt you will move over one computer to the right (when facing the computer).

Semantic elements

Are the following elements used appropriately?

If using a <figure> is there a <figcaption>?

<figure>
<img src="robot.jpg" height="640" width="480" alt="A blocky robot with a menacing expression and glowing red eyes">
<figcaption>Be wary of robots like these</figcaption>
</figure>

Are <section> elements used, and do they contain a heading and related content?

<section>
<h2>Photos of dangerous robots</h2>
<img src="robot.jpg" height="640" width="480" alt="A blocky robot with a menacing expression and glowing red eyes">
</section>

You have...

Semantic elements

Part 3

Are headings structured appropriately?

Do headings move up/down in structure appropriately?

<h1>Pet-site, a site about pets</h1>
<h2>Talking about cats</h2>
<h3>Buying cats</h3>
<h4>How much do they cost?</h4>
<h4>Where should I buy a cat?</h4>
<h3>Adopting cats</h3>
<h4>Where should I adopt a cat?</h4>
<h2>Talking about dogs</h2>

Is there an <h1> element? Do headings jump between levels? Is there a level lower than <h6>?

<h2>Pet-site, a site about pets</h2>
<h4>Talking about cats</h4>
<h3>Buying cats</h3>
<h5>How much do they cost?</h5>
<h7>Where should I buy a cat?</h7>
<h1>Adopting cats</h1>

You have...

Appropriate alt text

Do your images have appropriate alt-text?

If the image is inside a link, does the alt text describe where the link goes?

<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
</a>
<!-- Because it is in a link, the alt attribute describes where the link goes -->

If it is an image on its own, does the alt text describe the image as if we did not see it?

<img src="sheep.jpg" alt="A white wool sheep grazing in a grassy field">
<!-- The alt attribute describes the content of the image -->

You have...

Responsive units

Do they use units responsive to the user's preferences?

Does any styling related to text content use pixels?

/* This is NOT okay */
p {
margin: 20px;
padding: 36px;
font-size: 20px;
}

Do any media queries use pixels?

/* This is NOT okay */
@media (width > 640px) {
.grid {
grid-template-columns: 1fr 1fr;
}
}

You have...

Responsive units

Part 2

Is there use of responsive units that may cause issues?

Does any styling related to text content use viewport (vw/vh) or percentage units (%)?

/* This is MAYBE okay */
p {
margin: 2vw; /* maybe okay */
padding: 5%; /* maybe okay */
font-size: 10%; /* NOT okay */
}

Does anything have fixed widths that we may need to be careful about?

/* This is MAYBE okay */
p {
min-width: 20rem; /* maybe okay */
}

@media (width < 30rem) {
.grid {
min-width: 35rem; /* NOT okay */
}
}

You have...

Responsiveness

When looking at the page in the responsive viewer — ah.link/rv — does the page effectively reorganize at different sizes?

Things to look out for:

You have...

Clear interaction cues

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

You have...

Clear interaction cues

Part 2

When we use the keyboard to navigate to links do they visually cue us?

When using the keyboard:

You have...

Clear relationships

Do you feel the relationships between different pieces of content is clear? Why so or why not?

Make sure to navigate through multiple pages and look at the pages in the responsive viewer.

You have...

Clear relationships

Part 2

Do you feel the organization of content is clear? Why so or why not?

Make sure to navigate through multiple pages and look at the pages in the responsive viewer.

You have...

Visual unity

Are elements visually treated consistently? Why so or why not?

You have...

Visual unity

Part 2

Do the different elements of the design — images, fonts, buttons, layouts — feel like a set? Why so or why not?

You have...

Critique complete

We are done with critique for P4.

Please take some time to collect feedback and complete the final teamwork reflection.

You have 20 minutes.

In preparation for lecture...

Please close up any laptops, cellphones, Thinkpads, Neo Geo Pockets and other 'beep-boop' devices.

Final announcement

There will be a final announcement for the course once final grades are out. Please read it in full.

Where to go from here?

This course leads into:

Thank you

1/1