ITI 256 HTML 5 Level III Responsive Web

Class Outline � Responsive Web Design (RWD) � Flexible Layouts � Media Queries � Mobile First � Flexible Media � Strategy & Structure � Style Architecture � Performance Driven Selectors � Reusable Code � Minify & Compress Files � Reduce HTTP Requests � Cache Common Files � RWD Front-End Frameworks � HTML 5 Frameworks � CSS 3 Frameworks � Java. Script Frameworks � Mobile Frameworks � Exercise 2 Next – Session II 8/31/2015 Copyright © Carl M. Burnett

Responsive Web Design (RWD) 8/31/2015 Copyright © Carl M. Burnett

Responsive Web Design (RWD) Flexible images are also sized in relative units, so as

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 10/2/2020 Copyright © Carl M. Burnett 5

Viewport �Viewport Height & Width �Viewport Scale �Viewport Resolution �Combining Viewport Values Ref: http: //learn. shayhowe. com/advanced-html-css/responsive-web-design/#viewport 8/31/2015 Copyright © Carl M. Burnett

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 8/31/2015 Copyright © Carl M. Burnett

Viewport �Viewport Scale �minimum-scale �maximum-scale �initial-scale �user-scalable 8/31/2015 Copyright © Carl M. Burnett

Viewport �Viewport Resolution �target-densitydpi �device-dpi �high-dpi �medium-dpi �low-dp 8/31/2015 Copyright © Carl M. Burnett

Viewport �CSS @viewport { width: device-width; zoom: 1; } Some browser do not support

Responsive Design Built-In Responsiveness Ref: http: //www. w 3 schools. com/w 3 css_responsive. asp Responsive Grid Ref: http: //www. w 3 schools. com/w 3 css_grid. asp 10/2/2020 Copyright © Carl M. Burnett 11

Flexible Grid HTML <div class="container"> <section>. . . </section> <aside>. . . </aside> </div> 8/31/2015 Copyright © Carl M. Burnett CSS . container { width: 538 px; } section, aside { margin: 10 px; } section { float: left; width: 340 px; } aside { float: right; width: 158 px; }

Flexible Grid CSS. container { width: 538 px; } section, aside { margin: 10 px; } section { float: left; width: 340 px; } aside { float: right; width: 158 px; } 8/31/2015 section, aside { margin: 1. 858736059%; /* 10 px ÷ 538 px =. 018587361 */ } section { float: left; width: 63. 197026%; /* 340 px ÷ 538 px =. 63197026 */ } aside { float: right; width: 29. 3680297%; /* 158 px ÷ 538 px =. 293680297 */ } Copyright © Carl M. Burnett

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. 8/31/2015 Copyright © Carl M. Burnett

Media Queries Initializing Media Queries HTML  <link href="styles. css" rel="stylesheet" media="all and (max-width: 1024 px)"> CSS /* @media Rule */ @media all and (max-width: 1024 px) {. . . } /* @import Rule */ @import url(styles. css) all and (max-width: 1024 px) {. . . } Ref: http: //learn. shayhowe. com/advanced-html-css/responsive-web-design/#media-queries 8/31/2015 Copyright © Carl M. Burnett

Media Queries Logical Operators in Media Queries - and, not, and only. @media all and (min-width: 800 px) and (max-width: 1024 px) {. . . } @media not screen and (color) {. . . } @media only screen and (orientation: portrait) {. . . } 8/31/2015 Copyright © Carl M. Burnett

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. 8/31/2015 Copyright © Carl M. Burnett

Media Queries CSS 3 Media Types Value all print Description Used for all media type devices Used for printers screen Used for computer screens, tablets, smart-phones etc. speech Used for screenreaders that "reads" the page out loud 8/31/2015 Copyright © Carl M. Burnett

Flexible Media �Flexible Media Demo �Flexible Embedded Media �max-width property �Flexible Embedded Media Demo �iframe �Flexible Embedded Media Workaround Ref: http: //learn. shayhowe. com/advanced-html-css/responsive-web-design/#flexible-media 8/31/2015 Copyright © Carl M. Burnett

Strategy & Structure 8/31/2015 Copyright © Carl M. Burnett

Strategy & Structure �Style Architecture �Performance Driven Selectors �Reusable Code �Minify & Compress Files �Reduce HTTP Requests �Cache Common Files Ref: http: //learn. shayhowe. com/advanced-html-css/performance-organization/ 8/31/2015 Copyright © Carl M. Burnett

Style Architecture �Responsive Web Design (RWD) �Object Oriented CSS (OOCSS) �Scalable & Modular Architecture for CSS (SMACSS) �Adaptive Web Design (AWD) �Responsive Server Side Components (RESS) 8/31/2015 Copyright © Carl M. Burnett

Object Oriented CSS �Separation of Structure From Skin �Separation of Containers and Content �The Benefits Of OOCSS �Faster Websites �Maintainable Stylesheets Ref: http: //www. smashingmagazine. com/2011/12/an-introduction-to-object-oriented-css-oocss/ 8/31/2015 Copyright © Carl M. Burnett

Scalable & Modular Architecture for CSS �Categorizing CSS Rules �Base �Layout �Module �State �Theme � Depth of Applicability � Selector Performance � HTML 5 and SMACSS � Prototyping � Preprocessors � Drop the Base � The Icon Module � Complicated Inheritance Ref: https: //smacss. com/ 8/31/2015 Copyright © Carl M. Burnett

Adaptive Web Design �Three layers of Progressive Enhancement �Content layer = rich semantic HTML markup �Presentation layer = CSS and styling �Client-side scripting layer = Java. Script or j. Query behaviors Ref: http: //www. techrepublic. com/blog/web-designer/what-is-the-difference-between-responsive-vs-adaptive-web-design/ 8/31/2015 Copyright © Carl M. Burnett

Responsive Server Side Components (RESS) Server-side components (RESS) in conjunction with client-side ones such as media queries can produce faster-loading sites for access over cellular networks and also deliver richer functionality/usability avoiding some of the pitfalls of device-side-only solutions. 8/31/2015 Copyright © Carl M. Burnett

Performance Driven Selectors Keep Selectors Short Favor Classes /* Bad */ #container header nav {. . . } /* Bad */ header nav ul li a {. . . } /* Good */. primary-link {. . . } /* Good */. primary-nav {. . . } /* Bad */ button strong span {. . . } button strong span. callout {. . . } /* Bad */ article. feat-post {. . . } /* Good */ button span {. . . } button. callout {. . . } /* Good */. feat-post {. . . } Ref: http: //learn. shayhowe. com/advanced-html-css/performance-organization/#performance-driven-selectors 8/31/2015 Copyright © Carl M. Burnett

Reusable Code /* Bad */. news { background: #eee; border-radius: 5 px; box-shadow: inset 0 1 px 2 px rgba(0, 0, 0, . 25); } /* Good */. news, . social { background: #eee; border-radius: 5 px; box-shadow: inset 0 1 px 2 px rgba(0, 0, 0, . 25); } /* Even Better */. modal { background: #eee; border-radius: 5 px; box-shadow: inset 0 1 px 2 px rgba(0, 0, 0, . 25); } Ref: http: //learn. shayhowe. com/advanced-html-css/performance-organization/#reusable-code 8/31/2015 Copyright © Carl M. Burnett

Minify & Compress Files �gzip Compression -. htaccess file �Measuring Compression � Fire. Fox – Firebug � Chrome – Web Inspector �Image Compression � Image. Optim for Mac � PNGGauntlet for Windows. Ref: http: //learn. shayhowe. com/advanced-html-css/performance-organization/#minify-compress-files 8/31/2015 Copyright © Carl M. Burnett

Reduce HTTP Requests �Combine Like Files �Image Sprites �Image Data URI �AJAX Ref: http: //learn. shayhowe. com/advanced-html-css/performance-organization/#reduce-http-requests 8/31/2015 Copyright © Carl M. Burnett

Cache Common Files Expires. By. Type text/css "access plus 1 year" Expires. By. Type application/javascript "access plus 1 year" Ref: http: //learn. shayhowe. com/advanced-html-css/performance-organization/#performance-driven-selectors 8/31/2015 Copyright © Carl M. Burnett

RWD Front-End Frameworks 8/31/2015 Copyright © Carl M. Burnett

RWD Front-End Frameworks �HTML 5 Frameworks �CSS 3 Frameworks �Java. Script Frameworks �Mobile Frameworks

HTML 5 Frameworks �HTML Kick. Start �HTML 5 Boilerplate �http: //www. getskeleton. com/Skeleton �Montagejs

CSS 3 Frameworks: �Stylesheet Languages � Sass (Syntactically Awesome Stylesheets) � LESS (Leaner CSS) � Stylus �W 3. CSS �Responsive �Foundation �Bootstrap 8/31/2015 Copyright © Carl M. Burnett � Toast � Yaml � Gumby � Less Framework � Susy � Kube � CSS Framework Comparison

Java. Script Frameworks �j. Query �Dojo �Moo. Tools �Wakanda �Comparison of Java. Script frameworks

Mobile Frameworks �j. Query Mobile �Sencha Touch �Kendo UI Mobile �Chocolate Chip UI �mobile-frameworks-comparison-chart.

Responsive Web Design (RWD) Webflow is one of the few professional sitebuilders that lets

Initializr is an HTML 5 templates generator • Classic HTML 5 Boilerplate • Responsive

Exercise 2 �Review Site Requirements �Review Examples of Frameworks �Continue completion of RWD Website

Class Review � Responsive Web Design (RWD) � Flexible Layouts � Media Queries � Mobile First � Flexible Media � Strategy & Structure � Style Architecture � Performance Driven Selectors � Reusable Code � Minify & Compress Files � Reduce HTTP Requests � Cache Common Files � RWD Front-End Frameworks � HTML 5 Frameworks � CSS 3 Frameworks � Java. Script Frameworks � Mobile Frameworks � Webflow � Initializer Next – Session II 8/31/2015 Copyright © Carl M. Burnett