Antle teaches information design (Accessible styling lecture)

Accessible styling

Lecture outline

An introduction to responsive web design and styling your HTML with CSS. Lecture slides will be made available on the day of the lecture (October 15).

In preparation for lecture...

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

Validate, validate, validate

HTML and CSS validators help you see the errors (that you may have missed).

Why do invalid sites still work?

Browsers are kind, benevolent beings

Browsers are more likely to ignore errors then tell you about them. This makes it easier for you to make websites that 'render' but will not work consistently in the future.

section

A <section> only makes sense if there is a heading with content.

 <section>
<h2> Kittens are cool </h2>
<img src ... >
</section>

Appropriate Alt Text

<img> with no caption

If you have no caption, for an image, just use the <img> element on its own. For example:

The <figure> element

The <figure> element is only necessary if we are adding a caption. Otherwise we can just use an <img> element on its own.

Spaces in files, folders and ID names

Instead of spaces, use dashes '-', underscores '_' or camel case 'camelCase' when naming files, folders or IDs.

<a href="#this is not understood"> — will not be understood as an ID.

<a href="#this-is-understood"> — will be understood as an ID.

<a href="#thisIsUnderstood"> — will be understood as an ID.

When is using <br> okay?

The <br> element defines a line break in text. This only really makes semantic sense in a few occasions. 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...

Do not use <br> to 'add space' between elements.

Using <nav> appropriately

If you have just one <a> element on its own it is not 'a collection' of navigation.

:focus and images

You cannot use the keyboard to navigate to an <img> element as they are not interactive elements. You will have to wrap it in an interactive element to style it upon interaction:

Questions?

Any lingering HTML questions before we pick up with our CSS materials?

Elements of Responsive Design

The pieces you need:

• Relative units
• Fluid grids
• Media queries

Relative Units

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/934c46233e45d31277ac08e351ed892f

Parent & Child Elements

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/9fadf35fe1d4ec950e5e8bc7730bddd2

Flexbox

If you need support for flexbox, I recommend The Flexbox Cheatsheet Cheatsheet (Joni Trythall).

Grids help

If you need support for grids, I recommend A Complete Guide to Grid (CSS Tricks).

Flexbox or grids?

Do you want to let your content control the way it is displayed, on a row by row or column by column basis? That's flexbox.

Or, do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That's grid.

— Rachel Andrew

Points on Breakpoints

Where and when should our web layout collapse?

• Let your content decide
• Use relative units (always)
• Grids are your bestest friends
• Avoid an absolute process

Code tutorials

For today's code tutorial please pull down the starter packages available at 235.ah.link/t03