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 (March 11).
Peer critique prep
In preparation for today's critiques, please:
- Place your bags/belongings off to the side.
- Load up your wireframes on your laptop.
- Make sure one teammate has a pen or pencil ready.
- Once ready please raise your hands and we will provide you with a stack of post-its.
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...
Thank-you to our guests!
Attendance
As hinted at last week, there are benefits to having attended today:
- All group members present?
- One group member missing?
- Two group members missing?
Use the critique you have just received as a means for improving your projects.
Collect feedback
You may now have 10 minutes to collect and reflect on the feedback that was left on your project.
P3 grading
We are going to try and turn around grading on P3 very quickly to give you a sense of where your project stands before you go too deep into P4.
Expect grades out by end-of-week.
Today's labs
As we have already completed a critique for P3, today's lab will be focused on getting you started on P4. As a part of today's lab, you may:
- Complete the final teamwork reflection
- Form new teams (if you would like)
- Gather some more P3 feedback
- Complete a reading reflection
Uploading files
I will put together a short video explaining how to set yourself up for uploading files that will come out with an announcement later this week.
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
Fluid Grids
Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/d5b93b07354d645e7c49a8049b411e6f
Media Queries
Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/19fb18931c47e8c5064c9222d6929d02
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
Next lectures
Next two lectures are support. For the lecture you will be given an opportunity to voice what you would like covered or re-covered. Please ask any and all pending questions to the online quiz.
Next lecture
Technical Questions
A lecture for answering any lingering questions you have about the final project, HTML, or CSS.