Week 7
Web Design + Interaction
COMD 2451
Fall 2024
For today’s class,
open up:
Administrative Stuff
Midterm Grades
I am currently working on Midterm progress reports.
Midterm scores (P, BL, U, SA) do not show on your final grade record but give you and your advisors a snapshot of where you are at this point. I will alert you when they are available.
Midterm assessment for this class will include 2 quizzes, attendance, and seven weeks of homework assignments.
If you are missing the quiz: you may have a chance to make it up. Ask me ASAP.
If you are missing homework: get it in! All grades are cumulative so even a partial score is better than a zero.
Midterm Assignments Submitted
If you are missing assignments, you should have emails from me. Grade so far is made of:
Quiz (10% of grade)
Attendance (15% of grade)
Assignments (35% of grade):
Always Read Assignment Instructions!
WHAT I LOOK FOR WHEN GRADING
CHECK: ALL INCLUDED IN SUBMISSION?
VERY HELPFUL; SAVES AGONY!
Week 6 Review: Information Architecture
Last Week we learned | You should know… |
Information Architecture Definition | Information Architecture(IA) is the design and structure of information spaces for understanding and findability. |
IA Tools and Practices | Several user testing and expert tools help designers structure their website: Heuristics, Taxonomy, Controlled Vocabulary, Content Mapping, Affinity Diagram, User Task Flow, Site Map, and Wireframes. |
Preparing for your Final Project (Portfolio Website)
More Details
Final Project Requirements: Both parts required
● Cover page
● Project Proposal ✅
● Mood Board ✅
● Style Guide ✅
● CSS Stylesheet, HTML file
● Supporting images/sketches ✅
● “Thank you” page with your portfolio URL and email address
Format:
Can use Powerpoint, Google Slides, Keynote, etc.
2) Portfolio Website
● Home page 🚧
● Portfolio pages
● Image Gallery 🚧
● Portfolio samples and description
● Resume
● Contact Form
Format:
Must be a working website at your personal domain
Portfolio Website Requirements
Sample Portfolio Website
Home
Portfolio
About
Contact
* Resume page is also required (although not shown here)
Sample Resumes
Skills
Name
Title
Contact info
(email, phone)
About paragraph
(you can change this to a paragraph)
Work experience
Education
Responsive Web Design + Layout
Responsive Web Design Topics
● What is Responsive Design?
● Grids and Breakpoints
● Media Queries
● Responsive Frameworks
● Activity: Grid Layout
● LAB: Begin building your responsive page template
What is Responsive Web Design?
Responsive Web Design (RWD)
Responsive Web Design: “...design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.
“The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries.”
Source: Responsive Web Design – What It Is And How To Use It. (January 12, 2001). Smashing Magazine. https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
Responsive Web Design (RWD)
Source: Muhammad Rafizeldi (MRafizeldi). (November 14, 2013). Responsive Web Design for Desktop, Notebook, Tablet and Mobile Phone.png. Wikimedia Commons. https://commons.m.wikimedia.org/wiki/File:Responsive_ Web_Design_for_Desktop,_Notebook,_Tablet_and_Mobile_Phone.png
Responsive Web Design (RWD)
Source: Jes Kirkwood. (February, 26, 2018). 11 powerful examples of responsive web design. InVision. https://www.invisionapp.com/inside-design/examples-responsive-web-design/
Ways CSS can help achieve responsive design
Classes and Containers
Containers and Positioning
Everything on a web page is a box.
Layout is determined by:
Review: Body
<body>
contains everything in the viewport.
Think of the body as a box around the whole viewport!
Containers and Positioning
To make our layout flexible, we must create containers for our content. Then we have to define their position with box offset properties.
<nav>
<h1> Headline
Hero <img>
Call to Action
<button>
<article>
<article>
Notice the body is a container for the containers!
containers
Review: Block vs Inline
Block-Level Element: An HTML element that starts on a line of its own. Examples: <p> <h1> <ul> <li> <div>
Inline Elements: An HTML element that flows between surrounding text. Examples: <img> <b> <i>
Containers
Think of containers as boxes that hold other boxes of content. Any block-level element can be a container. Designers often use the <div> element to serve as a container.
Review: Classes and IDs
Classes let you create a special category of HTML elements styled in the same way. Any element using that class gets those styles for its content.
IDs are similar to class but you can have ONLY ONE of each ID per page.
HTML
<article class=”column1”>
<section class=”column2”>
CSS
.column1, .column2 {
some: css;
}
HTML
<article id=”top_story”>
<section id=”second_story”>
CSS
#top_story {
some: css;
}
We can only use top_story on ONE element in the whole html file.
Positioning and Layout
The way block-level elements (boxes) are laid out depends on 3 things:
Source: https://chenhuijing.com/blog/understanding-positioning-in-css/#%F0%9F%8E%99
REALLY helpful article for understanding CSS layout
What’s the “Normal” flow?
It’s how the containers naturally lay out based on the order we write them in our code.
Top to bottom, left to right
<div id=”left”>
<nav></nav>
<h1></h1>
<div id=”articles”>
<article></article>
<article></article>
</div>
</div>
<div id=”right”>
<img>
<button></button>
</div>
<nav>
<h1> Headline
Hero <img>
Call to Action
<button>
<article>
<article>
Floats
YOU can set an element’s behavior to:
Boxes that are given a float property are considered out of the flow.
Positioning Schemes
CSS allows us to determine the position of box elements so to get them to behave outside of the Normal Flow, where each item appears on a new line and the next one appears below it.
Let’s look at these positioning schemes:
Source: https://www.w3schools.com/cssref/pr_class_position.asp
Positioning and Layout
The way block-level elements (boxes) are laid out depends on 3 things:
Source: https://chenhuijing.com/blog/understanding-positioning-in-css/#%F0%9F%8E%99
REALLY helpful article for understanding CSS layout
Box Offset Properties
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Box Offset Properties
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Absolute position always starts from top left corner of container element
100px
150px
Box Offset Properties
It’s not what you might expect. It tells you where you start from, then move in the opposite direction of that.
Top. “Move the box x distance down, starting from the top of where it is now”
Left. “Move box x distance, starting from the left side of where it is now”
Bottom. “Move the box x distance up, starting from the bottom of where it is now”
Right. “Move box x distance, starting from the right side of where it is now”
Explained another way
Source: https://chenhuijing.com/blog/understanding-positioning-in-css/#%F0%9F%8E%99
Source: https://chenhuijing.com/blog/understanding-positioning-in-css/#%F0%9F%8E%99
Source: https://chenhuijing.com/blog/understanding-positioning-in-css/#%F0%9F%8E%99
Source: https://chenhuijing.com/blog/understanding-positioning-in-css/#%F0%9F%8E%99
Video: Positioning
Now that you’ve tried the different types of positioning, this video should clarify a few things:
https://youtu.be/3PDQDRJq5Ls?si=8oRKgvDCk-wujOmY
3:54
Take notes, and at the end of the video, I’ll ask you to:
Name two major differences between absolute and relative positioning.
Code along!
We will adjust the CSS as we go along and see how it changes things
Relative Positioning
Relative Positioning: Shifts the elements from its original position to the top, left, right or bottom.
Absolute Positioning
Absolute Positioning: position is fixed relative to the closest positioned containing element.
It will move up and down with its container as the user scrolls.
h1.example {
position: absolute;
top: 0px;
left: 500px;
width: 250px;
}
p {
width: 450px;
}
Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do
elusmod tempur incididunt ut
labore et dolore magna aliqua.
Ut enim ad minum veniam, quis
nostrud exercitation ullamco
laboris nisi ut alquip ex ea
commodo consequat.
Duis Aute irure dolor in
reprehendeerit in voluptate
}
Box Offset Properties: Fixed Positioning
Fixed Positioning: Places elements in an exact or absolute location relative to
the browser window, e.g. always in the top left or always in the footer.
CSS:
h1 {
position: fixed;
top: 30%;
bottom:30%;
margin: auto;
}
HTML:
<h1>DRAFT</h1>
<p>Lorem ipsum dolor…</p>
Box Offset Properties: Overlapping Elements
The z-index defines what objects sit in front when they overlap. The higher the number is, the closer to the top it will be.
Box Offset Properties: Float ing Elements
Float: Turns a box element such as an <ingredient> or a <p> piece of text into a block-level element that floats to the left or right in the browser. Breaks the element out of the normal flow.
In this example, the initial Cap “L” floats to the top left edge of the rest of the paragraph. It will scroll with the content as the user scrolls.
Using Floats to Place Elements Side-by-Side
If you set a series of containers to float: left; they will display beside each other, along the width of the browser window, as long as there is space.
Clearing Floats to Correct the Alignment
The clear property allows you to force the block to render in the next line.
Grids and Breakpoints
960 Pixel Wide 12-Column Grid
960gs: 960 Pixel Wide 12-Column Grid
One of the first grid frameworks that uses a CSS file was created by 960.gs. The CSS file is located in the Handouts directory in the Class Folder or at 960.gs.
Responsive Grid Frameworks
There are other frameworks, like the W3.CSS framework below that do not rely on fixed widths. These allow columns to shrink and expand with the size of the device window.
A col-1 block is 8.33% or 1/12th of the width of the screen.
A col-12 block fills 100% of the screen width.
Four equal width blocks stretching across the screen has 4 col-3 blocks.
Responsive Grid Frameworks
https://www.w3schools.com/w3css/default.asp
https://www.w3schools.com/w3css/4/w3.css
Putting it All Together
Semantic Web Page
Two Columns
Suppose we have a narrower
viewport, such as tablet, portrait
orientation.
We want to change the layout so
that we have a maximum of two
columns.
You will see that the articles that
used to be side by side are now
stacked in one column.
One Column
Narrower devices, like an iPhone
12 Mini, may require a single
column of content to be read
comfortably.
The articles are now shifted to a
single column.
One Column + Hiding Extra Stuff
After collapsing content to a
single column you may decide
some content is not important.
Removing unimportant content
provides more room for the
important stuff.
Even More Room
Mobile devices use graphic shortcuts for content that would normally appear in the navigation menu, utilities or footer.
Hamburger and meatball menu icons are familiar. Different devices may have preferred icons or locations for this content.
Revealing Content
CSS allows you to hide and reveal
content by setting the visibility and
z-index of blocks.
When the hamburger menu is
activated, a new block is revealed
on top of the other content.
.menu-expanded {
position: absolute;
margin: 0, 0;
}
Resumes (Grid VERY helpful here!)
Skills
Name
Title
Contact info
(email,
phone)
About paragraph
Work experience
Education
So How Do You Do That?
Steps TO Set Up A RESPONSIVE FRAMEWORK - 4 steps
1.Set the viewport
2.Arrange content on a grid
3.Use media queries to detect device size
4.Apply a responsive framework
1.Set the Viewport
The Viewport is the user’s visible area of a web page. Add the following to the <head> section of your HTML document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What do the variables mean?
width=device-width sets the page width to the width of the device
initial-scale=1.0 sets the initial zoom level
Viewport Meta tag
Source: https://www.w3schools.com/css/css_rwd_viewport.asp
2. Arrange Content on a Grid
2. Arrange Content on a Grid
3. Use Media Queries to Detect Device Size
Use a Media Query to detect the size of the user’s screen. When you know the size of the user’s screen you can direct CSS to style content to fit.
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width:100%; }
}
In this example, any class starting with “col-” will have a width set to 100% for screens up to 768 pixels wide. Any blocks using a narrower column width will expand to the width of the screen and add a line break before displaying the next block.
Source: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Other Media Queries
You can use media queries to find not only the screen width, but also detect specific devices. There are dozens of possible screens. For now, we will just use minimum screen size to detect phone, tablet or desktop screens.
/* iPads (portrait and landscape) -----------*/@media only screen and (min-device-width:768px)and (max-device-width:1024px){/* Styles */}
/* iPhone XS Max, XR -----------*/@media only screen and (min-device-width:414px)and (max-device-height:896px)and (orientation:landscape)and (-webkit-device-pixel-ratio:3){/* Styles */}
4. Apply a Responsive Framework
A number of Responsive Web Design frameworks are available. These are essentially preset CSS stylesheets you can use with your HTML files.
Each requires you to include classes from the responsive CSS stylesheet that correspond to the framework.
Some of these frameworks include:
Responsive Frameworks
w3.CSS Framework
We will use the w3.CSS framework in this class to build a responsive web template that will look good in multiple screen sizes.
W3.CSS contains a set of CSS classes that you can use to define columns, rows background colors and containers for your responsive web page.
w3.CSS Framework
Container classes
w3-row Container for responsive classes, no padding
w3-row-padding Container for responsive classes, 8px left & right padding
w3-content Container for fixed size centered content
w3.CSS Framework
Column classes
w3-half Occupies 1/2 of the window (medium & large screens)
w3-third Occupies 1/3 of the window (medium & large screens)
w3-twothird Occupies 2/3 of the window (medium & large screens)
w3-quarter Occupies 1/4 of the window (medium & large screens)
w3-threequarter Occupies 3/4 of the window (medium & large screens)
w3-rest Occupies the rest of the column width
w3-col Defines one column in a 12-column
w3.CSS Framework
w3-row Container for responsive classes, no padding
w3-row-padding Container for responsive classes, 8px left & right padding
w3-content Container for fixed size centered content
l1-l12 Responsive column widths for large screens (must use w/ w3-col)
m1-m12 Responsive column widths for medium screens (must use w/ w3-col)
s1-s12 Responsive column widths for small screens (must use w/ w3-col)
w3.CSS Framework
We will use the w3.CSS framework to build a responsive web template that will look good in multiple screen sizes.
Find the responsive.html file in the Class Folder and open in vs code.
The first thing you will notice is the <HEAD> has two CSS <LINK> tags.
<head><title>W3.CSS</title><metaname="viewport" content="width=device-width, initial-scale=1"><linkrel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"><linkrel="stylesheet" href="my-styles.css"></head>
w3.CSS Framework
The next thing you will notice is there are w3 classes for the <header>, <section> and <article> tags.
Let’s look at a few of them.�
<header class="w3-container w3-green">�
w3-container defines basic styles for containers in the framework.
W3.CSS also has a number of preset values for background colors.
w3.CSS Framework
The next part defines the styles for rows and columns.
<section class="w3-row">
<article class="w3-col s12 m4 l4">
w3-row defines the section as a row.
w3-col defines each articles as a column with a specified width.
The s12, m4 and l4 figures indicate how many columns across each block in that row will take up. You can change these to whichever width you like.
You can also create different configurations of rows and columns.
LAB: Responsive Portfolio
LAB and Homework: Responsive Portfolio
Download the responsive template files, then Open these files in VS Code.
Note: read the w3schools w3.css material before doing this assignment (see next page).
Edit the html file with your name and your own gallery images. Rename it to “index.html” so it works in GitHub. See what happens if you change colors or add more than three blocks to a row.
Explore the resume template and notice how it is structured. Update the “resume.html” file with your information. Write down any questions you have about how it is organized.
When you are happy with your index.html and resume.html, create a new GitHub repository called “week7responsive”, and upload all your files (including html, css and assets). Copy the repository link and paste it in the Week 7 Assignment page in Brightspace. Upload any photos that you use in the /assets/ folder also.
(continued)
Reading Homework
https://www.w3schools.com/htmL/html_links.asp
https://www.w3schools.com/htmL/html_images_imagemap.asp
What are some good uses for hyperlinked image maps on a website or app?
FOR NEXT WEEK
Quiz & Attendance
Quiz: week after next -- Bug bash! (need to know your coding well to identify errors in code)
We will START ON TIME!!!
Be prompt or you will miss the quiz 😱!