CSC309 – LECTURE 04

RESPONSIVE WEB DESIGN

Khai Truong
Volunteer note taker(s)
Accessibility Services is seeking volunteer note takers for students in this class who are registered in Accessibility Services. By volunteering to
take notes for students with disabilities, you are making a positive contribution to their academic success. By volunteering as a note-taker,
you will benefit as well - It is an excellent way to improve your own note-taking skills and to maintain consistent class attendance. At the end
of term, we would be happy to provide a Certificate of Appreciation for your hard work. To request a Certificate of Appreciation please fill out the
form at this link: Certificate of Appreciation or email us at at [email protected]. You may also qualify for a Co-Curricular Record by
registering your volunteer work on Folio before the end of June. We also have a draw for qualifying volunteers throughout the academic year.
Steps to Register as a Volunteer :
1. Register Online as a Volunteer Note-Taker at: https://clockwork.studentlife.utoronto.ca/custom/misc/home.aspx
2. For a step-to-step guide please follow this link to the Volunteer Notetaking Portal Guide
3. Click on Volunteer Notetakers, and sign in using your UTORid
4. Select the course(s) you wish to take notes for. Please note: you do NOT need to upload sample notes or be selected as a volunteer to
begin uploading your notes.
5. Start uploading notes.
Email us at [email protected] if you have questions or require any assistance with uploading notes. If you are no longer able to
upload notes for a course, please also let us know immediately .
For more information about the Accessibility Services Peer Notetaking program, please visit Student Life Volunteer Note Taking .
Thank you for your support and for making notes more accessible for our students.
AS Note-taking Team
Additional content that could’ve
been covered on Monday
CSS animations
Supports animating HTML elements natively (without JS or Flash)

Keyframes are specified by describing what styles the element will

have at certain times
As many CSS properties can be changed as many times as you want
The element gradually changes from one style to another

Consult: https://www.w3schools.com/css/css3_animations.asp
CSS animations (example)
.loader {
margin: auto;
border: 40px solid lightgrey;
border-radius: 50%;
border-top: 40px solid orange;
width: 160px;
height: 160px;
/* short for name duration timing-function iteration-count */
animation: spinner 4s linear infinite;
}

@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
CSS functions
CSS is declarative, but has some useful functions

var()
● Use a custom defined variable in place of a property value
:root { --main-bg-color: pink; }
body { background-color: var(--main-bg-color); }
url()
● Use for properties that references a file (usually image)
background-image: url(“star.gif”);
max(), min()
● Selects the maximum or minimum of a set of values
width: max(20vw, 400px)
Miscellaneous properties
list-style-type
● The marker for list (unordered or ordered)
● https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
z-index
● Determines which element is on top when multiple elements overlap
● Larger the better
opacity
● Transparency of an element
● from 0.0 (invisible) to 1.0 (fully visible)
overflow
● Specifies what happens when content overflows the element’s box
● https://www.w3schools.com/cssref/pr_pos_overflow.php
Responsive Web Design (RWD)
Problem
Web pages were originally designed only for computer
screens
Web pages commonly had a static design and a fixed
size
Fixed size Web pages were too large to fit smaller
devices like tablets and mobile phones
Browsers on those devices “fixed” this issue by scaling
down the entire web page to fit the screen

https://www.w3schools.com/css/img_viewport1.png
Responsive Web Design (RWD)
A Web design approach in which pages adjust
themselves to render well on all screen sizes
Uses CSS and HTML
Resizes, hides, shrinks, enlarges, or moves content to
make it look good on any screen

https://www.w3schools.com/css/img_viewport2.png
Responsive Web design basics
1. Set the viewport
2. Size content to the viewport
3. Use media queries to set breakpoints for responsiveness

https://web.dev/articles/responsive-web-design-basics
Set the viewport
A Webpage can give the browser instructions on how to control the
page's dimensions and scaling by setting the viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This ensures that the viewport adjusts to current screen size and sets
the initial zoom level when the page is first loaded

Viewport:
The user’s visible area of a Web page
Responsive image
An image with dimensions larger than the viewport will cause a
scrollbar
Shrink the image to fit the space it has, if the viewport size is smaller
than the image
Don’t let the image stretch larger than its natural size
img {
max-width: 100%;
display: block;
}
Responsive text
Set font size to a percentage of viewport width, e.g., 10vw (10% of
width)
p {
font-size:10vw;
}

Don’t let text get too small to read and too big to display properly
● Use clamp function, e.g., font-size:clamp(1rem,10vw,2rem);
Responsive layout
Allows elements to be placed flexibly depending on screen size
Many Web pages are based on a grid-view and are divided into
columns
CSS layout techniques, such as Flexbox and Grid Layout, facilitate the
creation of flexible grid-views
Flexbox
Flexibly places items inside the parent element (a.k.a., a container)
Container size automatically adjusts to size of child elements
.flex-container {
display: flex;
}
Flexbox properties
flex-direction
● Decides whether the items form a row (default) or a column
● column (top down), column-reverse (bottom up), row, row-reverse
flex-wrap
● Decides what happens on overflow of items, e.g., row completely
filled up
● wrap (to the next line), nowrap (default)
justify-content (main axis)
● right, left (default), space-evenly, space-between, space-around,
center
Flexbox properties (continued)
align-items
● Where to place child elements along the cross-axis of the flex
direction
● center, flex-start, flex-end, etc
align-content
● Determines where to place each flex line (row or column) along the
cross-axis
● center, flex-start, flex-end, stretch (default), space-between, etc.
Flexbox item properties
Flexbox item: the immediate child elements of a flex container

flex-grow, flex-shrink
● How much a flex item will grow or shrink. (Default is 0, no
growth/shrinkage)
● Relative to other item
flex-basic
● Initial length of the flex item (width if row, height if column)

align-self
● Overrides the container’s align-items property
Grid
Grid supports two-dimensional layout, similar to table
Use grid for layout
Use table for tabular data
.grid-container {
display: grid;
}
Grid properties
grid-template-columns
● For each column, specify a size value, e.g., 3 columns
grid-template-columns: auto auto auto;
grid-template-areas
● Uses named grid items to specify rows and columns
grid-template-areas: ‘menu top top’
‘menu bot bot’
gap, row-gap, column-gap
● Space between rows and/or columns
Grid item properties
Grid item: the immediate child elements of a grid container

grid-column-start, grid-column-end
● Similar to colspan for <td>; allows you to span multiple grid columns
.item1{grid-row-start: 1;grid-row-end: 3;}
grid-row-start, grid-row-end
● Similar to rowspan for <td>; allows you to span multiple grid rows

grid-area
● Specify which named area this grid item belongs to
e.g., .item1{grid-area: menu;}
● Can also be used to specify unnamed area to span both rows and
columns
Media query
Checks the capability of the device (e.g., width and height of the viewport,
orientation of the viewport, resolution) before applying CSS rules
Syntax: @media type and (expressions) { CSS Rules… }
● type is one of: screen, printer, speech
● common expressions: min-width, max-width
Example:
@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left: 216px;}
}
Media query
Different stylesheets can also be linked instead for different media and
different widths of the browser window (viewport)

<link rel="stylesheet" media="print" href="print.css">

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)"
href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and
(max-width: 900px)" href="example2.css">
How to choose breakpoints
Don't define breakpoints based on device classes–this won’t scale well
Let the content determine how the layout should adjusts to its
container
Pick major breakpoints by starting small, then working up
● Design the content to fit on a small screen size first (mobile first)
● Expand the screen until a breakpoint becomes necessary (e.g.,
there is too much white space between the elements)
Browser support
Not all browsers support the same CSS properties
Consult https://caniuse.com/ for whether a feature is supported
Example
● Media queries range syntax
● A media query can be written like this: @media (100px <= width <=
1900px)
● Easier to read compared to this: @media (min-width: 100px) and
(max-width: 1900px)
● Supported on Chrome 104 or higher, Firefox 63 or higher
● Currently not supported on Safari. (as of January 2023)
Chrome DevTools
Want to see how your Web page looks on different devices?
CSS frameworks
Ready-to-use CSS libraries (may include JavaScript)
● Bootstrap, Tailwind CSS, Bulma, W3CSS
Provides basic and advanced interface components
● E.g., Bootstrap modal
(https://getbootstrap.com/docs/5.3/components/modal/)
● Suggested for most web development project
● Easy to use and maintain consistent style
● Speeds up development cycle
● Browser compatibility is (mostly) handled by the framework
● CSS is optimized & “compressed” to reduce file size (and save
bandwidth)
Summary
You have learned about Responsive Web Design and the key steps to
making Webpages responsive
Learn more on your own:
https://web.dev/articles/responsive-web-design-basics and
https://www.w3schools.com/css/css_rwd_intro.asp
Experiment, search online, and/or read reference manuals

Monday: Django

Install Django on your local computer

https://docs.djangoproject.com/en/4.2/intro/install/
Much of this lecture was taken from content previously created by Jack Sun & Kianoosh Abbasi

Reproduction and/or sharing of course materials is prohibited. Course materials include lecture slides, course notes,
assignments, data and documents provided by the instructors. Course materials created by the instructors of this course
are their intellectual properties. They may not be shared, posted, rehosted, sold, or otherwise distributed and/or
modified without expressed permission from the authors. All such reproduction or dissemination is an infringement of
copyright and is prohibited. All rights are reserved by the instructors.

Thank you & questions?