1. Responsive Web Design (RWD)
Session I
Responsive Web Design (RWD) Overview
Chapter 8 - How to Use Responsive Web Design (RWD)
Chapter 9 - How to Use Flex Box for Page Layout in Responsive Web Design (RWD)
Chapter 10 - How to Use Grid Layout for Page Layout in Responsive Web Design (RWD)
Front-End Web Design Contest
Master a Skill / Learn for Life

2. Class Outline Responsive Web Design (RWD) Flexible Layouts
Responsive Design Methods
Media Queries
Flexible Media
Mobile First – Viewports
Exercise 1
Chapter 8 - How to Use Responsive Web Design (RWD)
Exercise 2
Chapter 9 - How to Use Flex Box for Page Layout in Responsive Web Design (RWD)
Exercise 3
Chapter 10 - How to Use Grid Layout for Page Layout in Responsive Web Design (RWD)
Exercise 4
Front-End Web Design Contest
2/19/2019
Copyright © Profburnett.com

3. Responsive Web Design (RWD)
2/19/2019
Copyright © Profburnett.com

4. Responsive Web Design (RWD)
Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
2/19/2019
Copyright © Profburnett.com

5. Responsive Web Design (RWD)
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.
2/19/2019
Copyright © Profburnett.com

6. Components of Responsive Web Design
You use a fluid layout to adjust the width of a web page and its structural elements to the size of the screen.
You use media queries to adjust the appearance of a web page to different device sizes.
You use scalable images so the size of an image is scaled to the size of the element that contains it.
2/19/2019
Copyright © Profburnett.com

7. Responsive Design Methods
Float – Chapter 8
Flexbox – Chapter 9
Flexible Grid – Chapter 10
2/19/2019
Copyright © Profburnett.com

8. Media Queries Initializing Media Queries HTML CSS
<!-- Separate CSS File -->
<link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">
CSS
Rule */
@media all and (max-width: 1024px) {...}
Rule */
@import url(styles.css) all and (max-width: 1024px) {...}
2/19/2019
Copyright © Profburnett.com

9. Media Queries Logical Operators in Media Queries - and, not, and only.
@media all and (min-width: 800px) and (max-width: 1024px) {...}
@media not screen and (color) {...}
@media only screen and (orientation: portrait) {...}
2/19/2019
Copyright © Profburnett.com

10. Media Queries Media Features in Media Queries
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using Minimum & Maximum Prefixes
min - values of greater than or equal to
max - value of less than or equal to.
2/19/2019
Copyright © Profburnett.com

11. Media Queries CSS3 Media Types Value Description all
Used for all media type devices
print
Used for printers
screen
Used for computer screens, tablets, smart-phones etc.
speech
Used for screenreaders that "reads" the page out loud
2/19/2019
Copyright © Profburnett.com

12. Media Queries Breakpoints
RESPONSIVE DESIGN.is
W3Schools
Responsive Web Design - Media Queries
Screen Resolutions
CSS-Tricks
2/19/2019
Copyright © Profburnett.com

13. Flexible Media Flexible Media – Images Flexible Media - Video
Flexible Embedded Media – iframe
HTML <iframe> Tag
HTML Iframes
HTML DOM IFrame Object
Flexible Embedded Media Workaround
2/19/2019
Copyright © Profburnett.com

14. Mobile First Mobile First Demo
Ref:
2/19/2019
Copyright © Profburnett.com

15. <meta name="viewport" content="initial-scale=1, maximum-scale=1
Viewports
Viewport Basics
<meta name="viewport" content="width=device-width, initial-scale=1">
Viewport width and screen width
<meta name="viewport" content="initial-scale=1, maximum-scale=1
Common viewport sizes for mobile and tablet devices
Ref:
2/19/2019
Copyright © Profburnett.com

16. Viewport Viewport Height & Width Viewport Scale Viewport Resolution
Combining Viewport Values
2/19/2019
Copyright © Profburnett.com

17. Viewport Height & Width vw - Viewport width vh - Viewport height
vmin - Minimum of the viewport’s height and width
vmax - Maximum of the viewport’s height and width
2/19/2019
Copyright © Profburnett.com

18. Viewport Viewport Scale minimum-scale maximum-scale initial-scale
user-scalable
2/19/2019
Copyright © Profburnett.com

19. Viewport Viewport Resolution target-densitydpi device-dpi high-dpi
medium-dpi
low-dp
2/19/2019
Copyright © Profburnett.com

20. Viewport CSS @viewport { width: device-width; zoom: 1; }
Some browser do not support unless updated by Modernizer
2/19/2019
Copyright © Profburnett.com

21. Student Exercise 1
1. Complete Dreamweaver Development Environment 2. The development site is located in the root folder on your local site. 3. Students will upload development site to development site. 4. Students will preview in browser development files. 5. Students will upload development site to live site. 6. Students will preview in browser live files.
2/19/2019
Copyright © Profburnett.com

22. Chapter 8 - How to Use Responsive Web Design (RWD)
2/19/2019
Copyright © Profburnett.com

23. A comparison of fixed and fluid widths in a two-column layout
Fixed Width: 960px
Flexible Width: 95%
Fixed Width: 960px
Flexible Width: 100%
Fixed Width: 600px
Flexible Width: 62.5%
Fixed Width: 360px
Flexible Width: 37.5%
Fixed Width: 960px
Flexible Width: 100%
2/19/2019
Copyright © Profburnett.com

24. Benefits of Fluid Layouts
Page layouts are proportional to the size of the screen, so they will fill the screen equally at all sizes.
They are scalable, so when new screen sizes become available in the future, they will automatically adapt to those new sizes.
They can be used without media queries in some cases, although that’s not common.
2/19/2019
Copyright © Profburnett.com

25. CSS for a Fluid Layout 2/19/2019
body { width: 90%; /* changed from 960px */ max-width: 1024px; /* maximum width of page */ margin: 0 auto; border: 2px solid black; } header { width: %; /* 930 ÷ 960 x 100 */ padding: 15px %; /* 15 ÷ 960 x 100 */ border-bottom: 2px solid black; } main { width: %; /* 570 ÷ 960 x 100 */ float: left; } aside { width: %; /* 330 ÷ 960 x 100 */ float: right; } footer { clear: both; border-top: 2px solid black; }
2/19/2019
Copyright © Profburnett.com

26. CSS that Specifies the Font Sizes in ems
body {
font-size: 100%; /* 16 pixels */
width: 90%;
max-width: 1024px;
margin: 0 auto;
border: 2px solid black; }
h1 { font-size: 1.75em; } /* 28 ÷ 16 */
h2 { font-size: 1.5em; } /* 24 ÷ 16 */
h3 { font-size: 1.125em; } /* 18 ÷ 16 */
footer p { font-size: .75em; } /* 12 ÷ 16 */
How to calculate the font size in ems
Divide the font size in pixels by 16.
How to calculate the font size as a percent
Multiply the result of the calculation above by 100.
2/19/2019
Copyright © Profburnett.com

27. Student Exercise 2
Chapter 8 - Exercise Complete Chapter 8 - Exercise 8-1, Page 317 using Dreamweaver. 2. Students will upload development site to development site. 3. Students will preview in browser development files. 4. Students will upload development site to live site. 5. Students will preview in browser live files.
2/19/2019
Copyright © Profburnett.com

28. Chapter 9 - How to Use Flex Box for Page Layout in Responsive Web Design (RWD)
2/19/2019
Copyright © Profburnett.com

29. Flexible Box Layout
2/19/2019
Copyright © Profburnett.com

30. Navigation Menu using Flexbox
2/19/2019
Copyright © Profburnett.com

31. The HTML and CSS for a Navigation Menu
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="speakers.html">Speakers</a></li>
<li><a href="tickets.html">Get Tickets</a></li>
<li><a href="member.html">Become a Member</a>
</li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
</nav>
CSS that displays the menu vertically
ul {
display: flex;
flex-direction: column; list-style-type: none;
padding: 0;
margin: 0; }
2/19/2019
Copyright © Profburnett.com

32. Layout of the Navigation Menu
2/19/2019
Copyright © Profburnett.com

33. CSS for Navigation Menu with Equal Spacing between Flex Items
ul { display: flex; justify-content: space-between; list-style-type: none; background-color: silver; } li { background: #999; padding: 15px; text-align: center; } a { text-decoration: none; color: #000; }
2/19/2019
Copyright © Profburnett.com

34. Justify-Content property for Flex Boxes
Justify-content set to space-between
Justify-content set to space-around
Justify-content set to space-evenly
Justify-content set to flex-end
2/19/2019
Copyright © Profburnett.com

35. CSS for Navigation Menu Centered Vertically
ul { display: flex; align-items: center; list-style-type: none; background: silver; height: 90px; } #home { align-self: flex-start; }
2/19/2019
Copyright © Profburnett.com

36. Align-Items Property for Flex Boxes
Align items is set to center
Align-items is set to stretch
2/19/2019
Copyright © Profburnett.com

37. Menu at Narrow Width With wrapping
With no wrapping and default alignment
2/19/2019
Copyright © Profburnett.com

38. The HTML for a simple page layout
<main>
<nav>Navigation</nav>
<section>Content</section>
<aside>Sidebar</aside>
</main>
2/19/2019
Copyright © Profburnett.com

39. CSS Flex-Basis Property
main { display: flex; }
nav, aside { flex-basis: 25%; }
section { flex-basis: 50%; }
The layout at 400 pixels wide
The layout at 800 pixels wide
2/19/2019
Copyright © Profburnett.com

40. CSS Flex-Basis and Flex-Grow Properties
nav, aside {
flex-basis: 100px;
flex-grow: 1; }
section {
flex-basis: 200px;
flex-grow: 3; }
The layout at 400 pixels wide
The layout at 800 pixels wide
2/19/2019
Copyright © Profburnett.com

41. CSS Flex-Basis and Flex-Shrink Properties
nav, section, aside { flex-basis: 250px; }
nav { flex-shrink: 0; }
section, aside { flex-shrink: 1; }
The layout at 500 pixels wide
The layout at 750 pixels wide
2/19/2019
Copyright © Profburnett.com

42. CSS Uses the Flex Property
nav, aside { flex: px; }
section { flex: px; }
The layout at 250 pixels wide
The layout at 500 pixels wide
The layout at 750 pixels wide
2/19/2019
Copyright © Profburnett.com

43. The HTML for a page
<body>
<header><h3>Header</h3></header>
<main>
<aside><h3>Sidebar</h3></aside>
<section><h3>Section</h3></section>
</main>
<footer><h3>Footer</h3></footer>
</body>
A media query that changes the flex direction and reorders flex items
@media screen and (max-width: 760px) {
main { flex-direction: column; }
section { order: 1; }
aside { order: 2; } }
2/19/2019
Copyright © Profburnett.com

44. Student Exercise 3
Chapter 9 - Exercise Complete Chapter 9 - Exercise 9-1, Page 349 using Dreamweaver. 2. Students will upload development site to development site. 3. Students will preview in browser development files. 4. Students will upload development site to live site. 5. Students will preview in browser live files.
2/19/2019
Copyright © Profburnett.com

45. Chapter 10 - How to Use Grid Layout for Page Layout in Responsive Web Design (RWD)
2/19/2019
Copyright © Profburnett.com

46. Components of a Grid Layout
2/19/2019
Copyright © Profburnett.com

47. HTML and CSS - 2 row by 3 column grid
The HTML
<main>
<div>Div 1</div> <div>Div 2</div> <div>Div 3</div>
<div>Div 4</div> <div>Div 5</div> <div>Div 6</div>
</main>
The CSS for laying out the grid
div { background-color: silver; }
main {
display: grid; grid-template: 100px 100px / 150px 150px 150px;
grid-gap: 15px 20px; }
2/19/2019
Copyright © Profburnett.com

48. Layout for the 2x3 Grid
2/19/2019
Copyright © Profburnett.com

49. CSS that uses the repeat() function
main {
display: grid;
grid-template: repeat(2, 50px) / repeat(3, 1fr);
grid-gap: 20px; }
The resulting layout
2/19/2019
Copyright © Profburnett.com

50. CSS that uses mixed units
main {
display: grid;
grid-template: repeat(2, 50px) / 100px 30% 1fr;
grid-gap: 20px; }
The resulting layout
2/19/2019
Copyright © Profburnett.com

51. CSS that repeats two columns
main {
display: grid;
grid-template:
repeat(2, 50px) / repeat(2, 50px 1fr);
grid-gap: 20px; }
The resulting layout
2/19/2019
Copyright © Profburnett.com

52. CSS that uses auto-fit and the minmax() function with the repeat() function
main {
display: grid;
grid-template:
repeat(2, 50px) / repeat(auto-fit, minmax(75px, 1fr));
grid-gap: 20px; }
The layout when the container is 360 pixels wide
The layout when the container is 720 pixels wide
2/19/2019
Copyright © Profburnett.com

53. CSS that uses auto-fill and the minmax() function
main {
display: grid;
grid-template:
repeat(2, 50px) / repeat(auto-fill, minmax(75px, 1fr));
grid-gap: 20px; }
The layout when the container is 360 pixels wide
The layout when the container is 720 pixels wide
2/19/2019
Copyright © Profburnett.com

54. A page layout that uses alignment
2/19/2019
Copyright © Profburnett.com

55. The grid lines and HTML tags for a grid container
2/19/2019
Copyright © Profburnett.com

56. Using numbered grid lines to define the grid areas
body { margin: 0; height: 600px; width: 100%; display: grid; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 80px 1fr 1fr 60px; grid-gap: 16px; } header { grid-row: 1 / 2; grid-column: 1 / 4; } nav { grid-row: 2 / 4; grid-column: 1 / 2; } #s1 { grid-row: 2 / 3; grid-column: 2 / 4; } #s2 { grid-row: 3 / 4; grid-column: 2 / 3; } #s3 { grid-row: 3 / 4; grid-column: 3 / 4; } footer { grid-row: 4 / 5; grid-column: 1 / 4; }
2/19/2019
Copyright © Profburnett.com

57. The named lines for a grid container
2/19/2019
Copyright © Profburnett.com

58. Using named lines to define the grid areas
body { display: grid; grid-template-columns: [body-start nav-start] 200px [nav-end sec-start] 1fr [sec3-start] 1fr [sec-end main-end]; grid-template-rows: [row1-start] 80px [row2-start] 1fr [row3-start] 1fr [row4-start] 60px [rows-end]; grid-gap: 16px; } header { grid-row: row1-start/row2-start; grid-column: body-start/body-end; } nav { grid-row: row2-start/row4-start; grid-column: nav-start/nav-end; } #s1 { grid-row: row2-start/row3-start; grid-column: sec-start/sec-end; } #s2 { grid-row: row3-start/row4-start; grid-column: sec-start/sec3-start; } #s3 { grid-row: row3-start/row4-start; grid-column: column3-start/content-end; } footer { grid-row: row4-start/rows-end;
2/19/2019
Copyright © Profburnett.com

59. The template names for the cells within a grid container
2/19/2019
Copyright © Profburnett.com

60. Using template names to define the grid areas
body { display: grid; grid-template-columns: 200px 1fr 1fr; grid-template-rows: 80px 1fr 1fr 60px; grid-gap: 16px; grid-template-areas: "head head head" "navi sec1 sec1" "navi sec2 sec3" "foot foot foot"; } header { grid-area: head; } nav { grid-area: navi; } #s1 { grid-area: sec1; } #s2 { grid-area: sec2; } #s3 { grid-area: sec3; } footer { grid-area: foot; }
2/19/2019
Copyright © Profburnett.com

61. The 12-column grid for a grid container
2/19/2019
Copyright © Profburnett.com

62. Using a 12-column grid to define the grid areas
body { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 80px 1fr 1fr 60px; grid-gap: 16px; } header { grid-row: 1 / 2; grid-column: 1 / span 12; } nav { grid-row: 2 / 4; grid-column: 1 / span 4; } #s1 { grid-row: 2 / 3; grid-column: 5 / span 8; } #s2 { grid-row: 3 / 4; grid-column: 5 / span 4; } #s3 { grid-row: 3 / 4; grid-column: 9 / span 4; } footer { grid-row: 4 / 5; grid-column: 1 / span 12; }
2/19/2019
Copyright © Profburnett.com

63. Student Exercise 4
Chapter 10 - Exercise Complete Chapter 10 - Exercise 10-1, Page 387 using Dreamweaver. 2. Students will upload development site to development site. 3. Students will preview in browser development files. 4. Students will upload development site to live site. 5. Students will preview in browser live files.
2/19/2019
Copyright © Profburnett.com

64. Front-End Web Design Contest
2/19/2019
Copyright © Profburnett.com