Antle teaches information design (Technical Questions lecture)

Technical Questions

Lecture slides will be made available on the day of the lecture (November 12).

P3 audit

In preparation for our P3 critiques today, please open up your project's pages.github.sfu.ca/.. in Firefox or Chrome. Write your 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
  3. The code validator — ah.link/v

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 one project clockwise.

Valid HTML and CSS

Open the tab with the validator and run the validator on your page.

Validator password is:

After starting the validator please head to the next project (to your right).

Semantic Elements

Are the following elements used appropriately?

If using <br>, do they define a line break?

<p class="address">
SFU Surrey<br>
12747 102 Avenue<br>
Surrey, BC
</p>

Are ID's — <p id="name_of_this"> — for elements uniqe?

<!-- ID attributes must not be the same -->
<h2 id="introduction">Introduction</h2>
<h2 id="kittens">Kittens</h2> <!-- If IDs are used as below, it is likely a good case for using a class -->
<section id="banner_style"></section>
<section id="banner_style"></section>

You have...

Semantic Elements

Part 2

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

Ordering Headings

Are headings properly used?

  • h1 Shoes-r-us
    • h2 In-store
      • h3 Kid's
      • h3 Men's
      • h3 Women's
    • h2 On Sale Now!

Or are they improperly used?

  • h1 Not used
    • h2 Shoes-r-us
      • h3 Not used
        • h4 Kid's
        • h4 Men's
        • h4 Women's
      • h3 On Sale Now!

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

Critique complete

We are done with critique for P3.

In preparation for lecture...

Please close up any laptops, cellphones, iPods, BlackBerries and other 'beep-boop' devices.

Office hours

Bonus office hours:

  • Tuesday, March 24 from 3-4pm (remote).
  • Wednesday, March 25 from 4:30-5:30pm (remote).
  • Tuesday, March 31 from 3-4pm (remote).
  • Wednesday, April 1 from 6:30-7:30pm (in-person or remote).
  • Tuesday, April 7 from 3-4pm (remote).

Changes to existing office hours:

  • Monday, March 23rd office hours are cancelled.

Please make sure to email or DM if looking to attend office hours as they will fill quickly.

Response latency

I apologize in advance as we are heading into the time of year where email/messaging load gets high and I am more likely to miss something. If you do not hear back from me via Discord/email within 48 hours, please ping me again. I am likely to get back to you but there is a small chance I may have missed it.

Grade returns

P2 grades will be returned by the end of the week.

If you have any questions or concerns please follow up with Andrew directly.

P4: Design and Develop

How to balance workload?

Discuss as a team how you want to divide the work. This may involve each individual tackling an individual page, or having one individual building out the HTML, while another manages the styling of components, and the final teammate manages the responsiveness.

Design Systems

What images should we use?

Please use the images from the existing site. You may bring in other images, but please ensure they are relevant to our website.

Any lingering project questions?

Technical questions

Answering lingering questions about code.

Edge-to-edge how?
Horizontal centering
Both-axis centering

How to show/hide content based on display size

You generally should avoid removing content from access between different device sizes.

If you need to be able to do so, you can 'remove' content from visibility using display: none;

Grids
How to hamburger?

Should I have just one CSS file?

Probably.

It is not required that you condense your CSS into one file, but it likely will make it much easier to manage if you have one stylesheet that is consistent across all your project pages instead of a separate file per page.

How do I choose breakpoints?

Let your content decide.

Start at mobile and bring the page width out until the content looks awkward or is not using the space effectively. That is a breakpoint.

How do I make more fluid sites?

Grids and media queries tend to feel 'snappy' — they shift at specific points — the more we can use methods that are flexible the less 'snappy' things feel.

There are more modern methods, but we will not be getting into them in this course.

How to load fonts?

Any lingering technical questions?

We will talk about git shortly.

Team formation

Please form teams for P4. Come to the front and let myself or Mehdi know:

Teams are allowed to be up to four people, can be the same or different than P2.

Next up in git

Today we will:

P3 code reviews

If your name appears on the list, I will need you to stick around to answer questions about your P3 submission.

1/1