HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 1 of 10
HTML 5 and CSS 3 – Illustrated, 2nd Edition
Unit I: Implementing Responsive Design
A Guide to this Instructor’s Manual:
We have designed this Instructor’s Manual to supplement and enhance your teaching experience
through classroom activities and a cohesive chapter summary.
This document is organized chronologically, using the same heading in dark blue that you see in the
textbook. Under each heading you will find (in order): Lecture Notes that summarize the section,
Figures and Boxes found in the section, if any, Teacher Tips, Classroom Activities, and Lab Activities.
Pay special attention to teaching tips, and activities geared towards quizzing your students, enhancing
their critical thinking skills, and encouraging experimentation within the software.
In addition to this Instructor’s Manual, our Instructor’s Resources CD also contains PowerPoint
Presentations, Test Banks, and other supplements to aid in your teaching experience.
For your students:
Our latest online feature, CourseCasts, is a library of weekly podcasts designed to keep your
students up to date with the latest in technology news. Direct your students to
T
T
Ta
a
ab
b
bl
l
le
e
e
o
o
of
f
f
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
ts
s
s
Unit Objectives
2
234: Assess Responsive Design
2
236: Construct a Multipart Media Query
3
238: Test Layouts with an Emulator
4
240: Add a Column with a Media Query
5
242: Create a Widescreen Layout
6
244: Create Responsive Navigation
7
246: Implement Adaptive Content
8
248: Use Progressive Enhancement
8
End of Unit Material
9
Glossary of Key Terms
10
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 2 of 10
U
U
Un
n
ni
i
it
t
t
O
O
Ob
b
bj
j
je
e
ec
c
ct
t
ti
i
iv
v
ve
e
es
s
s
Students will have mastered the material in Unit I when they can:
• Assess responsive design
• Construct a multipart media query
• Test layouts with an emulator
• Add a column with a media query
• Create a widescreen layout
• Create responsive navigation
• Implement adaptive content
• Use progressive enhancement
2
2
23
3
34
4
4:
:
:
A
A
As
s
ss
s
se
e
es
s
ss
s
s
R
R
Re
e
es
s
sp
p
po
o
on
n
ns
s
si
i
iv
v
ve
e
e
D
D
De
e
es
s
si
i
ig
g
gn
n
n
LECTURE NOTES
• Point out that a website’s users may be using a wide variety of devices and screen sizes.
• Emphasize that a layout designed for one screen size may not work well at a different screen size.
• Introduce the term responsive design, explaining that it is an approach to design that allows a web
developer to specify multiple different layouts for a page’s elements based on the width of the
screen or browser window in which the document is displayed.
• Demonstrate the inclusion of a breakpoint and a media feature in a media query to create a
multipart media query.
FIGURE: I-1
TABLE: I-1
BOXES:
1. Quick Tip: Because mobile web usage is growing much faster than desktop usage, optimizing a
starting layout for small screens is a common practice.
2. Quick Tip: Media features and their values must be enclosed in parentheses.
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 3 of 10
2. Classroom Discussion: What websites have you visited that have different layouts on different size
screens? Are the layout changes for each minor or significant? Why do you think the developers made
these changes?
4. Critical Thinking: Media queries generally use the min-width and max–width media features, but
not min-height or max-height. Why do you think this is the case?
2
2
23
3
36
6
6:
:
:
C
C
Co
o
on
n
ns
s
st
t
tr
r
ru
u
uc
c
ct
t
t
a
a
a
M
M
Mu
u
ul
l
lt
t
ti
i
ip
p
pa
a
ar
r
rt
t
t
M
M
Me
e
ed
d
di
i
ia
a
a
Q
Q
Qu
u
ue
e
er
r
ry
y
y
LECTURE NOTES:
• Explain that the first step in implementing responsive design is to create a default layout for the
smallest or largest browser width you want to support.
TEACHER TIP
Mobile-first design is an approach that prioritizes the mobile experience by creating a mobile layout
as the starting layout. A designer using this approach would be more likely to create a default layout
for the smallest width to support, then use max-width media queries to specify layouts for larger
screens.
• Introduce the process of identifying a breakpoint, then creating a multipart media query using the
screen media type with the min-width or max-width media feature.
• Explain that multiple media queries can be separated by a comma, just like CSS selectors, so you can
add a multipart media query to an existing media query, such as a print media query. In this case,
the style rules in the media query apply to either selector.
FIGURES: I-2, I-3
BOXES:
1. Quick Tip: The comma before the word
print
in the media query means
or
, so the query applies to
any printed output regardless of the browser width when the Print command is activated.
2. Quick Tip: The @media print style rule includes the declaration page-break-before:
always for section elements, which causes each section element to start on a new page in
printed output.
3. Implementing Responsive Images
The img element accepts a single filename as the value for the src attribute. When you create a
responsive website that will be viewable in browser windows of different widths, you generally use a
large image, which looks good on a large screen, and scale it down for smaller screens. However, large
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 4 of 10
the sizes attribute lets you indicate the browser widths at which each image should be used. You can
read an overview of how these attributes are used at ericportis.com/posts/2014/srcset-sizes, and you can
track their current level of browser support at caniuse.com.
CLASSROOM ACTIVITIES
1. Classroom Discussion: Imagine you were creating a website with a home page that shows six images,
each with text below it. How might you lay these out on a smartphone screen? How might you lay
them out on a laptop screen? How might you lay them out on a widescreen monitor? Explain your
reasoning for each layout.
LAB ACTIVITY
1. Ask students to create a web page with a heading followed by 3 paragraphs of text, each including
an image. Have students preview the page in a desktop browser, then narrow and widen the
browser window. Have students choose whether the default layout will be the smallest or largest
size and add appropriate style rules to create that layout. Have students repeat the process of
narrowing and widening the browser window, identify the first breakpoint, then create a media
query specifying new styles for widths greater or lesser than that breakpoint.
2
2
23
3
38
8
8:
:
:
T
T
Te
e
es
s
st
t
t
L
L
La
a
ay
y
yo
o
ou
u
ut
t
ts
s
s
w
w
wi
i
it
t
th
h
h
a
a
an
n
n
E
E
Em
m
mu
u
ul
l
la
a
at
t
to
o
or
r
r
LECTURE NOTES
• Introduce the term emulator. Explain that an emulator allows you to run a preliminary test on a
range of devices without needing to own them all.
• Explain that individual emulators are available for specific devices, such as those from a particular
manufacturer. Note that a single emulator that approximates devices from multiple manufacturers
can save a lot of testing time.
TEACHER TIP
Apple’s Xcode developer tool includes an emulator for iOS devices including iPhones and iPads.
Google’s Android SDK includes an emulator for many devices that run Android. Other makers
including Microsoft include similar tools in their sofware development kits.
• Open Chrome Device Mode, point out the Toggle device mode, Media queries, and Swap
dimensions buttons. Demonstrate the function of each button.
FIGURES: I-4, I-5
BOXES:
1. Trouble: Click the Dock to main window button if you don’t see the device mode window or if the
developer tools panel is floating.
2. Trouble: If the Media queries button turns white after you click it, click it a second time to turn it
back to blue.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 5 of 10
3. Trouble: You can learn more about Chrome Device Mode at
developer.chrome.com/devtools/docs/device-mode.
4. Working With Device Pixel Ratios
The display for any electronic device, including a smartphone, a tablet, or a computer, is composed of a
grid of dots known as device pixels. These pixels do not always correspond to the pix- els used in either
CSS media queries or property values, which are known as logical pixels. Traditionally, a device’s
display showed each pixel of an image using a single pixel of the display. Over time, displays became
denser, packing more pixels into the same amount of space, which makes the content appear sharper.
However, displaying content on a high-density screen at a 1:1 ratio of logical pixels to device pixels
CLASSROOM ACTIVITIES
1. Critical Thinking: What is the relationship between the Swap dimensions button and the min–
width/max-width media features?
2. Quick Quiz:
LAB ACTIVITY
1. Ask students to open the website they created in the lab activity for the “Construct a Multipart
Media Query” lesson in Chrome, then view it using Chrome Device Mode. Have students view on
an Android phone, an iOS phone, and Android tablet, and an iOS tablet.
2
2
24
4
40
0
0:
:
:
A
A
Ad
d
dd
d
d
a
a
a
C
C
Co
o
ol
l
lu
u
um
m
mn
n
n
w
w
wi
i
it
t
th
h
h
a
a
a
M
M
Me
e
ed
d
di
i
ia
a
a
Q
Q
Qu
u
ue
e
er
r
ry
y
y
LECTURE NOTES
• Point out that when using responsive design, one of the most common patterns is to add or remove
columns based on the width of the screen.
• Introduce the idea that a single column layout is often well suited for small screens such as
smartphones.
• Explain that students already know the properties used to create columns in a layout, which are
often combinations of float, width, and/or position.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 6 of 10
• Point out that when a style sheet contains multiple media queries, some style rules from an earlier
media query may still apply even when a later media query is applied. When a later media query is
a subset of an earlier media query, it needs to include only style rules to augment or overwrite those
already in place.
FIGURES: I-6, I-7
BOXES:
1. Understanding mobile-specific websites
Although the practice of responsive design has become common, some developers choose to create and
maintain multiple versions of the same website instead. In this situation, users of desktop computers see
the default website, while mobile users see a version of the website with a layout optimized for small
screens. Maintaining separate websites comes with its own challenges. For instance, it can be easy to
CLASSROOM ACTIVITIES
1. Quick Quiz:
2. Critical Thinking: You could use a media query to add a column of information that is not available at
smaller screen sizes. What are the advantages and disadvantages of this approach? When would you
consider it acceptable to add such a column? When would it not be a good idea?
LAB ACTIVITY
Ask students to open the website they created in the lab activity for the “Construct a Multipart Media
Query” lesson in Chrome, then add a column to the layout using a media query.
2
2
24
4
42
2
2:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
a
a
a
W
W
Wi
i
id
d
de
e
es
s
sc
c
cr
r
re
e
ee
e
en
n
n
L
L
La
a
ay
y
yo
o
ou
u
ut
t
t
LECTURE NOTES
• Point out that media queries can be used to take advantage of the extra width that larger screens
provide. This may include highlights or links to content that is accessible another way.
• Explain that layouts generally benefit from a maximum size to avoid growing to a width that makes
them hard for users to view.
• Demonstrate the process of calculating the min-width value for a media query based on the
maximum width of the container element and any padding and margin on that element.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 7 of 10
FIGURES: I-8, I-9, I–10
BOXES
1. Quick Tip: You could achieve the same effect
by adding the declaration max-width: 1260px to
the default article div style rule in the
main content
section of the code, but including a style rule
to set the maximum width with your other media queries makes your design easier for other developers
to understand.
CLASSROOM ACTIVITIES
1. Critical Thinking: Why can a layout become hard to use on a larger screen without a maximum
width? For each reason, also explain how setting a maximum width prevents that issue.
2. Quick Quiz:
LAB ACTIVITY
Ask students to open the website they created in the lab activity for the “Construct a Multipart Media
Query” lesson in Chrome, then create a widescreen layout.
2
2
24
4
44
4
4:
:
:
C
C
Cr
r
re
e
ea
a
at
t
te
e
e
R
R
Re
e
es
s
sp
p
po
o
on
n
ns
s
si
i
iv
v
ve
e
e
N
N
Na
a
av
v
vi
i
ig
g
ga
a
at
t
ti
i
io
o
on
n
n
LECTURE NOTES:
• Explain that showing all elements on a small screen can make the layout cluttered and can prevent
users from seeing the main content without scrolling.
TEACHER TIP
Introduce the term
above the fold
, which describes what content is available to web page visitors
without scrolling. Explain that hiding elements such as navigation can make the main page content
visible above the fold.
• Introduce the term hamburger menu, and explain that menus are commonly replaced with this
standard icon.
• Explain that users touch or click the icon once to show the menu, and can either select an item on
the menu or touch/click the icon again to hide the menu.
FIGURES: I-11, I-12, I-13
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 8 of 10
BOXES:
1. Quick Tip: The script.js file contains JavaScript code that toggles the menu button between display
values of block and none when it is clicked or touched.
2. Quick Tip: Removing the display value inline-block from the nav bar list items causes
browsers to display them as a vertical list.
3. Trouble: Be sure to click the brown menu button to the right of the header and not the menu button
in your browser’s toolbar.
CLASSROOM ACTIVITIES
1. Classroom Discussion: Identify websites or apps that you’ve used on a handheld device that use
hamburger menus. Compare the different ways this icon is positioned on different sites, and the
different results that happen when you click the icon on different sites.
2. Classroom Discussion: Why do you think the icon is referred to as a hamburger menu?
3. Quick Quiz:
LAB ACTIVITY
Ask students to open the website they created in the lab activity for the “Construct a Multipart Media
Query” lesson in Chrome, then make the navigation responsive. Instruct students to use the script.js file
from the Unit folder where they store their data files for Unit I.
2
2
24
4
46
6
6:
:
:
I
I
Im
m
mp
p
pl
l
le
e
em
m
me
e
en
n
nt
t
t
A
A
Ad
d
da
a
ap
p
pt
t
ti
i
iv
v
ve
e
e
C
C
Co
o
on
n
nt
t
te
e
en
n
nt
t
t
LECTURE NOTES:
• Explain that in general, all content that is available on your website for users of a large screen
should also be available for users of smaller devices.
• Introduce the term adaptive content. Point out that in some cases, it is useful to limit the amount of
content shown by default and make related information available only if a user requests it.
• Explain that you can change the display of elements using class names to show or hide them.
• Explain that structural pseudo-classes allow you to select one or more elements without creating
class names.
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 9 of 10
1. Critical Thinking: Structural pseudo-classes make it easy to select single elements or groups of
elements. What might be some other applications of the structural pseudo-classes listed in Table I-2?
2. Quick Quiz:
2
2
24
4
48
8
8:
:
:
U
U
Us
s
se
e
e
P
P
Pr
r
ro
o
og
g
gr
r
re
e
es
s
ss
s
si
i
iv
v
ve
e
e
E
E
En
n
nh
h
ha
a
an
n
nc
c
ce
e
em
m
me
e
en
n
nt
t
t
LECTURE NOTES:
• Explain that older browsers like IE8 doen’t support recently added CSS properties.
• Introduce the term shim, which is JavaScript code that recreates a feature for older browsers.
Explain that multiple methods are available for incorporating newer features when a web page that
uses them is displayed in an older browser.
• Introduce the term progressive enhancement, which is the practice of using newer features in a way
that doesn’t affect the meaning or functionality of page content. Explain that specifying a fallback
background color for a background image is an example of progressive enhancement.
TEACHER TIP
Progressive enhancement enables us to establish a solid baseline of cross-browser support and then
enhance the design with advanced CSS features for supportive browsers.
• Introduce the border-radius property, which rounds the corners of elements.
FIGURES: I-15, I-16
TABLE: I-3
BOXES:
1. Quick Tip: When a parent element and a child element share one or more corners, the border–
radius property often must be applied to both elements for the effect to be visible.
2. Trouble: If the media queries are not applied in IE8, ensure that you are opening the page from a web
server (using the
http
protocol) rather than opening it from your local file system (using the
file
protocol).
CLASSROOM ACTIVITIES
1. Quick Quiz:
HTML 5 and CSS 3 – Illustrated 2nd Ed. Instructor’s Manual: Unit I Page 10 of 10
2. Classroom discussion: The text-shadow and box-shadow properties are supported only by
modern browsers. Ask students if these properties require progressive enhancement. If so, how, and if
not, why not?
E
E
En
n
nd
d
d
o
o
of
f
f
U
U
Un
n
ni
i
it
t
t
M
M
Ma
a
at
t
te
e
er
r
ri
i
ia
a
al
l
l
•
•
•
Concepts Review – Includes screen identification, multiple choice, and matching questions.
•
•
•
Skills Review – Provides additional hands-on exercises that mirror the progressive style of the
lesson material.
•
•
•
Independent Challenges 1, 2 and 3 – Case projects that require critical thinking and application of
the unit skills. The Independent Challenges increase in difficulty, with the first being the easiest
G
G
Gl
l
lo
o
os
s
ss
s
sa
a
ar
r
ry
y
y
o
o
of
f
f
K
K
Ke
e
ey
y
y
T
T
Te
e
er
r
rm
m
ms
s
s
• adaptive content (246)
• breakpoint (234)
• device pixel ratio (239)
• device pixels (239)
• emulator (238)
• hamburger menu (244)
• logical pixels (239)
• media features (234)
• progressive enhancement (248)
• responsive design (234)
• shim (248)
Top of Document