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 www.profburnett.com Master a Skill / Learn for Life

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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

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

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

Mobile First Mobile First Demo Ref: http://learn.shayhowe.com/advanced-html-css/responsive-web-design/#mobile-first 2/19/2019 Copyright © 2007 - 2019 Profburnett.com

<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: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag 2/19/2019 Copyright © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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

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

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

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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: 96.875%; /* 930 ÷ 960 x 100 */ padding: 15px 1.5625%; /* 15 ÷ 960 x 100 */ border-bottom: 2px solid black; } main { width: 59.375%; /* 570 ÷ 960 x 100 */ float: left; } aside { width: 34.375%; /* 330 ÷ 960 x 100 */ float: right; } footer { clear: both; border-top: 2px solid black; } 2/19/2019 Copyright © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

Student Exercise 2 Chapter 8 - Exercise 8-1 1. 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 © 2007 - 2019 Profburnett.com

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

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

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

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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

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

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

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

Student Exercise 3 Chapter 9 - Exercise 9-1 1. 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 © 2007 - 2019 Profburnett.com

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

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

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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 © 2007 - 2019 Profburnett.com

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

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

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

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

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 © 2007 - 2019 Profburnett.com

Student Exercise 4 Chapter 10 - Exercise 10-1 1. 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 © 2007 - 2019 Profburnett.com

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