ah teaches information design (Build Responsively lecture)
Build Responsively
Lecture outline
Focusing on the building of responsive web layouts and an introduction to your final project. Lecture slides will be made available on the day of the lecture (October 21).
Peer critique prep
In preparation for today's critiques, please:
- Place your bags/belongings at one of the tables in the middle.
- Load up your wireframes one laptop for your team.
- Set up the laptop at a numbered station.
- Make sure one teammate has a pen or pencil ready for peer critique.
Peer critique reminders
For today's peer critique, we will be providing you with a series of prompts to guide your critique. For each critique you provide please make sure to:
- Be specific about what you are referring to.
- Be clear about what is working, or not.
- Explain why it is working, or not.
- Include your team member names at the bottom of the critique.
Leave your post-its at the project you are providing critique on.
Peer critique process
After each prompt, you will move to the next project (+1 from where you are). Please make sure to leave your critique on a post-it at the project.
Peer critique start
Please move +1 project.
Look through the desktop and mobile wireframes
What do you like? and what do you wish?
You have...
Look through the desktop and mobile wireframes
What questions do you have of the design?
You have...
Look through the desktop and mobile wireframes.
The project rubric looks for clear relationships and clusters of content. Do you feel the relationships and organization of content are clear? Why so or why not?
You have...
Look through the desktop and mobile wireframes.
The project rubric looks for clear relationships and clusters of content. Do you feel the relationships and organization of content are clear? Why so or why not?
You have...
Look through the desktop and mobile wireframes.
The project rubric looks for clear visual cues to interactivity. Is it clear what is interactive and what is not? Why so or why not?
You have...
Look through the desktop and mobile wireframes.
The project rubric looks for consistent visual treatment of headings, links, and buttons. Is the treatment of visual elements consistent between mobile and desktop wireframes? Why so or why not?
You have...
Look through the desktop and mobile wireframes.
The project rubric looks for effective reorganization of content between mobile and desktop sizing. Is the hierarchy of content consistent between desktop and mobile sizes? Why so or why not?
You have...
Look through the desktop and mobile wireframes.
The project rubric looks for effective use of grid structures. Is it clear what kind of grid structure these wireframes use? Why so or why not?
You have...
Look through the mobile wireframes.
The project rubric looks for appropriate text sizing. Does this text seem to be appropriately sized for mobile? Why so or why not?
You have...
Collect feedback
You may now have 10 minutes to collect and reflect on the feedback that was left on your project.
Please make sure to complete a teamwork reflection (individually) before we wrap up the P2 critiques.
Room reset
Please help with resetting the room for lecture and code tutorial.
HTML exercise
The HTML exercise is coming back to you later today. Please review the comments as they are meant to help you improve your coding going forward.
If you received a zero for undeclared resources but believe this is an error please reach out to Andrew to arrange a time to meet and discuss it.
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.
Lessons from last week
There were a couple of common HTML issues that I thought it best to discuss as a class:
- When
<section>make sense - Appropriate alt text
- The
<figure>element - Spaces in files/folders/ID names
- Using
<br>appropriately - Using
<nav>appropriately
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
Does the alt attribute need to describe the image's function?
<a href="home.html">
<img src="banner-image.jpg" alt="Home page">
</a>Or the image's content?
<img src="banner-image.jpg" alt="A photo of shoes walking themselves across the street"><img> with no caption
If you have no caption, for an image, just use the <img> element on its own. For example:
<img src="kitten.jpg" alt="A kitten spotted like a leopard preparing to pounce" height="200" width="350">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.
<nav> is appropriate for major 'collections' of navigation. For example:
<nav>
<a href="home.html">Home</a>
<a href="about_us.html">About us</a>
<a href="contact.html">Contact</a>
</nav>Questions?
Any lingering HTML questions before we pick up with our CSS materials?
Units in CSS
In the journey to responsiveness, we want to aim for relative and scalable units as much as possible.
Rems
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.
Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/4f1412454dca14e42d3e5d678d364aaf
Dev tools
Your new best friend
Ever wanted to know what the slides would look like with a red background? Right-click and 'Inspect Element' opens up the development tools to mess around with things in.
The box model
content-box vs border-box
Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/a63b4e018122c1404ed8ff7999cafc1f
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.
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/t02 (CSS package)
- 235.ah.link/t03 (layout package)
: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:
a:focus img {
/* this selects an img inside of a anchor that has focus */
}
Remaining time
In our remaining time today please make sure to complete an in-class activity.
Otherwise you can start working on:
- The CSS exercise
- The CSS layout exercise
- Project 3
Break time!
Please return for class in 10 minutes