ah teaches information design: 10 Help I Have Fallen

ah teaches information design: 10 Help I Have Fallen — A slide deck

Help! I've Fallen! And I Can't Get Up!

Lecture outline

This lecture is special. I will be answering most questions relating to your project or web concerns that you have encountered to this point.

Help! I've fallen, and I can't get up!

Your tech support week

this will include:

  • Project Questions
  • Semantics and HTML
  • Styling and CSS
  • Advanced Questions
  • Grids and Responsiveness

Project Questions

Do I need to make the sections that don't exist? For example, I'm focusing on only social sustainability.

No, you are not required pages for other sections such as in the question above, for economic and environmental sustainability. If you would like to still keep additional sections in your navigation, please have them all link to the same page.

How many pages (or content) do we need, and do more pages (or content) equal higher grade?

There is no minimum or maximum, but more pages do not equal a higher grade. Effective use of content will equal a higher grade.

How much real information should go on the site?

All of it should be real information and images exempting paragraph text, which can be lorem ipsum.

Should the website look like P2?

Maybe. Because you have developed aesthetics and may redevelop structure beyond P2's consideration, the final website should far exceed P2's design quality in that regard.

How do we combine our final HTML/CSS pages?

Sadly this will have to be a 'meet, save, share, and discuss' type of solution.

How Consistent Should the Offline/Online Materials Be

Highly consistent. Keep in mind the goal of this project is to direct people to the website using your 'offline' materials. If the website looks significantly different or does not make mention or reference the offline materials, then people will be confused with their connection.

What fidelity does our final information design have to be?

Depending on what you are developing, we expect different things:

  • Posters: high/production fidelity
  • Physical object: high fidelity three dimensional prototype with clean representation of final design (i.e. foam, cardboard)
  • Motion graphics: high fidelity playable animation
IAT-235 — P4: Rubric

Any lingering project questions?

HTML Questions

For the love of chocolate Andrew, what do you mean by semantics?!?!

What would you expect if you saw:

<windowsill status="sunny">
<bed type="human">
<wall holes="5">
<cheese type="mozzarella"></cheese>

How do we get a more detailed definition of elements?

For that I highly recommend HTML5 Doctor and the Mozilla Developer Network.

Different Elements, Different Meaning

With the help of HTML5 Doctor and your smarts, please answer the following questions:

  1. What are the differences between the section, article and div elements?
  2. How are the head and header elements defined differently?

When is using <br> okay?

The <br> element defines a line break in text. This only really makes semantic sense in a few occassions. Some examples:

  • In an address:
    352 Main Street<br>
    Vancouver, BC<br>
    V2V 2V2
  • In a poem:
    Another night deprived of slumber<br>
    Hours passing without number<br>
    My eyes trace round the room I lay...

Linking Pages

Unlike a link within the page, linking between pages involves knowing where files are and their names.

Consider this file structure:

  • other.html
  • pages
    • index.html
    • review.html
    • contact.html
<!-- From the index.html page -->
<a href="review.html">Review</a>
<a href="contact.html">Contact</a>
<a href="../other.html" target="_blank">Other</a>

<!-- From the other.html page -->
<a href="pages/index.html">Home</a>
<a href="pages/contact.html">Contact</a>

ID vs. Class

What is the difference?

IDs (#id):

  • Can only appear once per page
  • Each element can only have one
  • Should describe the context

A class (.class):

  • Can appear multiple times per page
  • Each element can have multiple
  • Should describe its purpose

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!

Any lingering HTML questions?

CSS Questions

Why Use Normalize.css?

normalize.css ensures that all browsers will (by default) render our page fairly consistently without having applied any styling. It makes it easier to ensure consistent styling once you start adding your own.

Ems and Rems and Text

As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.

Ems (listen to their parent for size)

50 pixel font size

0.8em font-size
0.8em font-size
0.8em font-size
0.8em font-size

Rems (root-em, listen to the browser for size)

50 pixel font size

0.8rem font-size
0.8rem font-size
0.8rem font-size
0.8rem font-size

Units in CSS

As much as possible, we want to work with responsive units in our pages, but keep in mind that this is not a requirement, but a recommendation.

/* vh & vw units correspond to a percentage of the viewport height and width */
width: 50vw; /* 50% of viewport width */

/* % units correspond to a percentage of the parent's size */
width: 25%; /* 25% of the parent element's width */

The Box Model

content-box vs border-box

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Centering Things

How you center inline elements and block elements differs:

I'm an inline element that needs centering
I'm a block element that needs centering
.center-inline-parent {
text-align: center;

.center-block {
margin: 0 auto;

Centering Things in a Flexbox

Centering things in a flexbox can be significantly easier.

Center me both horizontally and vertically please!
.flexbox {
display: flex;
align-items: center;
justify-content: center;

Any lingering CSS questions?

Advanced Questions


Let's add some backgrounds to our box below!

Large Hover Effects

Our hover link


Once the page has loaded, you can mess with it

To achieve effects like smooth-scrolling and dropdowns, we need to be able to alter the page once it has loaded.

// Javascript allows us to alter the page AFTER it loads
// Let us take a look at this slide-deck WITHOUT JavaScript

Wizard of Oz

Since we haven't taught you everything

As discussed, there are some things you won't be able to do with what we have taught you. Avoid over-extending yourself unless you feel comfortable, as we are more interested in seeing a series of functioning responsive pages over broken though slightly-shinier pages.

When in doubt, aim to get the process working as intended rather than making the functionality super-slick.

Any other advanced questions?

Grids Questions

Mobile First or Desktop First?

When working on our stylesheets, you can either start from the smallest size and work your way up (mobile first), or start at a large size and work your way down (desktop first). It is ultimately up to you which approach you take, but keep in mind that the site needs to respond to different sizes effectively.

Media Queries

You can make multiple declarations using and (examples below). More good explanation of media queries at CSS Tricks.

@media screen (min-width: 30em) {
/* This CSS will only render when the browser window is wider than 30em */
@media screen (min-width: 52.23em) {
/* This CSS will only render when the browser window is wider than 52.23em */

Any lingering grids or responsiveness questions?

Grids Recap

Let's revisit our grids tutorial

We will:

  • Revisit positioning content in the grid
  • Ensuring the grid reliably collapses

I Need Help

Sites to support you

Next week's lecture

  • The coding quiz
  • Open work/support time before in-lab presentations

The Coding Quiz

Some notes

  • You will have 1 hour
  • Only on HTML+CSS covered thus far
  • Laptops are required

There will be 3 questions:

  1. Debugging some problematic HTML+CSS
  2. Semantically marking up content
  3. Styling an item to specification

This week's MEGA-LAB

The low-down

  • Crits
  • Technical support

Bonus Office Hours

Since we have lost a couple weeks this term, I am offering some final bonus office hours for those who would like some additional project assistance. Please note that these office hours are by email appointment only:

  • Wednesday, November 28th; 1-1:30pm
  • Friday, November 30th; 12:30-1:30pm

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Wednesdays from 11:00-11:50am and Fridays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna