ah teaches information design (Semantics, Accessibility and Markup lecture)

Semantics, Accessibility and Markup

Lecture outline

This week we will introduce HTML and how proper use can mean more accessible websites. Lecture slides will be made available on the day of the lecture (Oct. 21).

P3: Wireframes

How grids work

A recap

Grids assist in:

  1. Organization of text and imagery
  2. Providing consistency
  3. Clearer communication
  4. Expediting layout exploration

Setting a Grid

First we would establish page edges.

Next we establish margins.

Margins can be even or uneven.

Next we set columns.

When flowing type, it should clearly begin and end at the edges of columns.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns; which is entirely fine.

Type should not end in a gutter or the middle of a column.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Type should not float freely in columns.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Type should clearly snap-to and work with the grid.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Any alignment can work within the grid.

This text will flow across a couple of columns and should clearly begin and end at the edges of the defined columns.

Another type of alignment that can work within the grid nice and easily.

Even center alignment can work within a grid structure.

We can make a grid modular by adding vertical divisions.

Context

"It looks like you're on a train. Would you like me to show you the insultingly simplified mobile site?"
@Cennydd

Device and Context

Part 1

Resolutions that of the 2747 unique visitors to andrewh.ca from January 1 to June 1 (2021):

  • 1920x1080
  • 1440x900
  • 2560x1440
  • 1536x864
  • 1280x720
  • 1280x800
  • 1792x1120
  • 800x600
  • 2048x1152
  • 1366x768
  • 1680x1050
  • 412x869
  • 1500x1000
  • 1290x860
  • 1504x1003
  • 1368x912
  • 412x846
  • 3440x1440
  • 360x640
  • 1600x900
  • 360x740
  • 1920x1200
  • 2048x1153
  • 393x851
  • 412x732
  • 1302x960
  • 1700x800
  • 360x760
  • 1280x1024
  • 385x811
  • 360x780
  • 375x667
  • 412x915
  • 1050x1680
  • 1280x960
  • 2000x2000
  • 360x720
  • 360x747
  • 385x833
  • 393x786
  • 1728x1152
  • 3008x1692
  • 360x800
  • 412x892
  • 1024x768
  • 1024x1024
  • 1080x1920
  • 1600x1200
  • 2560x734
  • 320x568
  • 320x640
  • 375x812
  • 1334x800
  • 1334x889
  • 1410x940
  • 1440x718
  • 1536x865
  • 1536x960
  • 1620x1080
  • 2560x1080
  • 2561x1440

Device and Context

Part 2

Web browsers of the same unique visitors to andrewh.ca:

  • Chrome
  • Microsoft Edge
  • Chrome Mobile
  • Chrome Webview
  • DingTalk
  • Unknown
  • Headless Chrome
  • Samsung Browser
  • Mobile Safari
  • MIUI Browser
  • Facebook
  • Opera
  • Chrome Mobile iOS
  • DuckDuckGo Privacy Browser
  • Internet Explorer
  • WeChat

Defining Context

Where it gets difficult

  • What kind of device might the user access the site on?
  • What kind of environment might they use it in?
  • What time are they likely to use it at?

We cannot really control context when it comes to the web, so our challenge is to support flexibility.

False assumptions

Common false assumptions about the web:

  • Everyone has a mouse or touchscreen
  • Everyone has steady high-speed internet
  • 1 pixel = 1 pixel
  • Everyone's computer is faster each year
  • Everyone will view my website on Chrome
The Firefox virtual reality web browser showcasing its voice search function

Web browsers are everywhere... (from Mozilla)

The Tension

Fixed vs fluid

As a web designer, this is your biggest challenge. Transitioning from thinking in fixed designs and moving to fluid designs.

How Fluid Works

Websites that are fluid and respond to different device sizes accordingly are considered responsive websites.

Let's take a look at some examples at Media Queri.es

Viewports

The viewport is the area in which our website renders in a browser. Let's take a look at a couple of different viewport sizes.

Accessible Type

Readable type on the web should also be flexible type. Type that we can scale as we need to accommodate our needs.

Readable Interactions

Which of these links or buttons can you use?

Dogs
Textbooks

Layers of Information

  1. Physical: A user's relationship to their environment.
  2. Semantic: Messages or meaning established for others.
  3. Digital: Encoded/computer-centric messaging.

The Document-Object Model (DOM)

Our standard in delivering HTML

This week you will be building your first HTML pages, this involves the DOM, which put simply is a collection of objects (ie. navigation, headings, paragraphs) that resemble the document it is modelling.

Semantic markup

Telling the computer the pieces

HTML elements are (most frequently) comprised of an opening, and closing tag — i.e. <p></p> — which wrap the content they semantically define.

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

Understanding Elements

Let's visit the HTML5 Doctor for a prescription.

Semantic Markup

Markup should help us understand the content.

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

Accessible SEO

Remember what Google sees...

"Google is blind. Google doesn’t use a mouse. Google relies on structural cues in the content to make more sense of the page."
SEO and Accessibility Overlap by Liam McGee

Code tutorials

We will be doing code tutorials for the next couple weeks. As part of this it will be important that you have ready:

Google Chrome

Why?

Google Chrome happens to be a relatively standards-compliant browser, and hence we have focused our interests on using it.

Coding Applications

Visual Studio Code, Atom, Sublime Text, etc.

We are working with code-only applications in this class, as you need to understand the code to be an effective web designer.

Dreamweaver or Webflow-style editors are banned

You are not permitted to use any sort of 'visual' web editors for anything in this course.

Frameworks are banned

You are not permitted to use any frameworks (i.e. Bootstraps, Foundation) in designing your websites for this course.

Ask questions

We are going to be covering something entirely new for a lot of you. Ask questions. Web development is a moving target.

Common Coding Errors

Since we will be starting some scripting this week, please keep an eye out for:

  • Typoess: This is handz downe teh most commmon prublem.
  • Forgetting brackets: Not ending or closing an element will lead to
  • Forgetting to save: The file won't be able to update if not saved.
  • Files and folders matter: The naming of files and folders (and where you put them) is very important.
A messy computer desktop filled with different folder and file icons

Pay extra attention if this is you

Exercise #6
Code tutorial files

Next lecture

Responsiveness and You

An introduction to responsive web design and styling your HTML with CSS. Lecture recordings will be available by the end of the weekend.

1/1