how u rd thgs
Covered in this lecture:
- Web content and structure
- Styling and types of content considerations
- CSS fundamentals
Full lecture slides will be available the day of the lecture.
Please submit before your lab time:
- 1 finalized sitemap (PDF)
- 1 final set of wireframes (URL or generated to HTML, ZIP'd up)
how u rd?
Content and the web
To help you remember what 'went down' last week, we have prepped packages for you to review on the course website and on Canvas.
A week-to-week overview:
- Feb 27:
P3 CSS Exercise
- Mar 5:
P3 Layout Exercise
- Mar 12:
- Mar 19:
Tech support week
- Mar 26:
- Apr 2
Tech support/additional critique week
- Apr 9
Some things to note about P3/P4:
- There is a portion of your grade for coding.
- All HTML/CSS code must be your own (no frameworks allowed)
What they have experienced before
"Users spend most of their time on other websites"Jakob's Law of the Web User Experience
How Users Use
Our approaches to web content
A study by Nielson demonstrated that there were some key divisions in how users looked for website content:
- Search dominant
- Navigation dominant
- Tool dominant
Giving the Right Content
What to deliver
- Should answer the query
- Should answer it clearly
- Should support it (and us)
IA and Content
How to deliver
- Should answer the query ... Organising content or objects.
- Should answer it clearly ... Describing them clearly.
- Should support it (and us) ... Providing ways for people to get them.
How Users View
Our approaches to web-reading
What does it appear the user is doing?
The Inverted Pyramid
The one not built by the Egyptians
We tend to scan digital content, so support us in doing so.
- Essential information: What the user needs to know yesterday
- Important information: Other important information the user might need
- Further details: More meat (or tofu) if the user is interested
Why are they here?
Why do they exist?
Web users are fickle characters. You have: 10 seconds to keep the user's attention, and 1 second to keep their flow of thought uninterrupted.
All your content should reinforce your information or message, be it images, text, icons, interactions, etc.
In this week's reading, Cederholm talks about where using advanced CSS is risky business: Where and why should we be careful about applying 'new-fangled' CSS?
Keep it so
Make sure that we can still access the content in a semantically appropriate fashion. For example, text should remain text, even when placed on images:
Where SEO is headed
More and more, search engines are using more 'human' models of building connections and modelling potential queries and responses.
- Follow web standards
- Make content accessible
- Have valid code
- Have good content
- Rich media + metadata
Lessons From Last Week
There were a couple of common HTML issues that I thought it best to discuss as a class:
<img>with no caption
- Spaces in files/folders/ID names
Spaces in Files/Folders/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?
<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>
- 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.
Let's Talk CSS
Block, Inline, and Inline-block
Block elements break to the next line, can have a height and width, and by default are full-width.
Inline elements stay in-line with other inline elements, and listen to their content for their sizing.
Inline-block elemetns stay in-line with other inline elements, can have a height and width, and listen to their content for their sizing.
The Box Model
content-box vs border-box
Rems — root-ems — are units responsive to the font-size set by the browser which help us establish easy relationships in type. As a general rule of thumb, setting your paragraphs to 1rem and scaling other things accordingly is better practice.
In preparation for this week's code tutorial, please open up your laptops and download the starter files for the tutorial from ah1.ca/235-css
Please convene in room 3130 at the beginning of your labs.
This week's labs
- P2 speed-dating
- P3 exercise
Next week's lecture
Responsive Usefulness (Web layout)
Building Better Project Briefs
Introduction by Betty Ackah
As part of this research we are hoping to have you complete a seven-question survey on your understanding of the current brief (P2: Wireframes):
- An additional +1 point on the final grade of P2 for completing the survey.
- Andrew will not be permitted to know what your specific comments were.
- Deadline for completion is midnight on Wednesday, March 4th.
Survey is available at https://www.surveymonkey.ca/r/betterprojectbriefs.