Semantics, Accessibility and Markup
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).
How grids work
Grids assist in:
- Organization of text and imagery
- Providing consistency
- Clearer communication
- 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.
Type should not end in a gutter or the middle of a column.
Type should not float freely in columns.
Type should clearly snap-to and work with the grid.
Any alignment can work within the grid.
We can make a grid modular by adding vertical divisions.
"It looks like you're on a train. Would you like me to show you the insultingly simplified mobile site?"@Cennydd
Device and Context
Resolutions that of the 2747 unique visitors to andrewh.ca from January 1 to June 1 (2021):
Device and Context
Web browsers of the same unique visitors to andrewh.ca:
- Microsoft Edge
- Chrome Mobile
- Chrome Webview
- Headless Chrome
- Samsung Browser
- Mobile Safari
- MIUI Browser
- Chrome Mobile iOS
- DuckDuckGo Privacy Browser
- Internet Explorer
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.
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
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
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.
Readable type on the web should also be flexible type. Type that we can scale as we need to accommodate our needs.
Which of these links or buttons can you use?
Layers of Information
- Physical: A user's relationship to their environment.
- Semantic: Messages or meaning established for others.
- 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.
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.
Let's visit the HTML5 Doctor for a prescription.
Markup should help us understand the content.
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
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 happens to be a relatively standards-compliant browser, and hence we have focused our interests on using it.
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.
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.
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.