ah teaches information design (Final Project Critiques lecture)
Final Project Critiques
Lecture outline
Final critiques and things to think about leaving the course. Lecture slides will be made available on the day of the lecture (December 2).
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:
- The source code for the page (right-click and view source)
- 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).
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:
- Horizontal scrollbars appearing
- Content being cropped off
- Weirdly large gaps between seemingly related content
- Content being too squished together
- Line lengths too short or too long
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:
- Use the tab key to move forward through links
- Use shift and tab together to move backward through links
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 today's in-class activity and the final teamwork reflection.
You have 12 minutes.
In preparation for lecture...
Please close up any laptops, cellphones, BlackBerries, Action Maxes and other 'beep-boop' devices.
When building responsively
Key tips for building responsive websites:
- Start with mobile first.
- Use user-responsive units.
- Let the content decide breakpoints.
Why do semantics matter?
Where to get inspired?
Why were we here?
What was the goal of this class?
Where to go from here?
This course leads into:
Does any of this matter?
That AI thing...
Thank you
Break time!
Please return for class in 10 minutes