ITI 256 HTML5 Level III Responsive Web Design (RWD) and Front-End Frameworks Session I – Responsive Web Design (RWD) Overview http://www.profburnett.com 8/31/2015 Copyright © Carl M. Burnett

Class Outline Next – Session II 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 HTML5 Frameworks CSS3 Frameworks JavaScript 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 to prevent them from displaying outside their containing element. 8/31/2015 Copyright © Carl M. Burnett

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

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

Responsive Design Built-In Responsiveness Responsive Grid Ref: http://www.w3schools.com/w3css/w3css_responsive.asp Ref: http://www.w3schools.com/w3css/w3css_grid.asp 12/31/2018 Copyright © Carl M. Burnett

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

Flexible Grid CSS .container { width: 538px; } section, aside { margin: 10px; section { float: left; width: 340px; float: right; width: 158px; section, aside { margin: 1.858736059%; /* 10px ÷ 538px = .018587361 */ } section { float: left; width: 63.197026%; /* 340px ÷ 538px = .63197026 */ float: right; width: 29.3680297%; /* 158px ÷ 538px = .293680297 */ 8/31/2015 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 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) {...} 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: 800px) and (max-width: 1024px) {...} @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 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 8/31/2015 Copyright © Carl M. Burnett

Media Queries Breakpoints RESPONSIVE DESIGN.is W3Schools Responsive Web Design - Media Queries Screen Resolutions CSS-Tricks 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 HTML5 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 = JavaScript or jQuery 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 Favor Classes Keep Selectors Short /* Bad */ header nav ul li a {...} /* Good */ .primary-link {...} button strong span {...} button strong span .callout {...} button span {...} button .callout {...} /* Bad */ #container header nav {...} /* Good */ .primary-nav {...} article.feat-post {...} .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: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } .social { /* Good */ .news, .social { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25); } /* Even Better */ .modal { background: #eee; border-radius: 5px; box-shadow: inset 0 1px 2px 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 FireFox – Firebug Chrome – Web Inspector Image Compression ImageOptim 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 ExpiresByType text/css "access plus 1 year" ExpiresByType 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 HTML5 Frameworks CSS3 Frameworks JavaScript Frameworks Mobile Frameworks Webflow Initializer 8/31/2015 Copyright © Carl M. Burnett

HTML5 Frameworks HTML KickStart HTML5 Boilerplate http://www.getskeleton.com/Skeleton Montagejs Zebra 8/31/2015 Copyright © Carl M. Burnett

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

JavaScript Frameworks jQuery Dojo MooTools Wakanda Comparison of JavaScript frameworks 8/31/2015 Copyright © Carl M. Burnett

Mobile Frameworks jQuery Mobile Sencha Touch Kendo UI Mobile Chocolate Chip UI mobile-frameworks-comparison-chart.com 8/31/2015 Copyright © Carl M. Burnett

Responsive Web Design (RWD) Webflow is one of the few professional sitebuilders that lets you build sites responsively. You can use it for free. 8/31/2015 Copyright © Carl M. Burnett

Initializr Initializr is an HTML5 templates generator Classic HTML5 Boilerplate Responsive Bootstrap 8/31/2015 Copyright © Carl M. Burnett

Exercise 2 Review Site Requirements Review Examples of Frameworks Continue completion of RWD Website Planning Worksheet 8/31/2015 Copyright © Carl M. Burnett

Class Review Next – Session II 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 HTML5 Frameworks CSS3 Frameworks JavaScript Frameworks Mobile Frameworks Webflow Initializer Next – Session II 8/31/2015 Copyright © Carl M. Burnett