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

2. 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

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

4. 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

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

6. Viewport Viewport Height & Width Viewport Scale Viewport Resolution
Combining Viewport Values
Ref:
8/31/2015
Copyright © Carl M. Burnett

7. 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

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

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

10. Viewport CSS @viewport { width: device-width; zoom: 1; }
Some browser do not support unless updated by Modernizer
8/31/2015
Copyright © Carl M. Burnett

11. Responsive Design Built-In Responsiveness Responsive Grid
Ref:
Ref:
12/31/2018
Copyright © Carl M. Burnett

12. 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

13. Flexible Grid CSS .container { width: 538px; } section, aside {
margin: 10px;
section {
float: left;
width: 340px;
float: right;
width: 158px;
section,
aside {
margin: %; /* 10px ÷ 538px = */ }
section {
float: left;
width: %; /* 340px ÷ 538px = */
float: right;
width: %; /* 158px ÷ 538px = */
8/31/2015
Copyright © Carl M. Burnett

14. 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

15. 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) {...}
Ref:
8/31/2015
Copyright © Carl M. Burnett

16. 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

17. 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

18. 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

19. Media Queries Breakpoints
RESPONSIVE DESIGN.is
W3Schools
Responsive Web Design - Media Queries
Screen Resolutions
CSS-Tricks
8/31/2015
Copyright © Carl M. Burnett

20. Flexible Media Flexible Media Demo Flexible Embedded Media
max-width property
Flexible Embedded Media Demo
iframe
Flexible Embedded Media Workaround
Ref:
8/31/2015
Copyright © Carl M. Burnett

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

22. Strategy & Structure Style Architecture Performance Driven Selectors
Reusable Code
Minify & Compress Files
Reduce HTTP Requests
Cache Common Files
Ref:
8/31/2015
Copyright © Carl M. Burnett

23. 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

24. Object Oriented CSS Separation of Structure From Skin
Separation of Containers and Content
The Benefits Of OOCSS
Faster Websites
Maintainable Stylesheets
Ref:
8/31/2015
Copyright © Carl M. Burnett

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

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

27. 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

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

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

30. Minify & Compress Files
gzip Compression - .htaccess file
Measuring Compression
FireFox – Firebug
Chrome – Web Inspector
Image Compression
ImageOptim for Mac
PNGGauntlet for Windows.
Ref:
8/31/2015
Copyright © Carl M. Burnett

31. Reduce HTTP Requests Combine Like Files Image Sprites Image Data URI
AJAX
Ref:
8/31/2015
Copyright © Carl M. Burnett

32. Cache Common Files
ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year"
Ref:
8/31/2015
Copyright © Carl M. Burnett

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

34. RWD Front-End Frameworks
HTML5 Frameworks
CSS3 Frameworks
JavaScript Frameworks
Mobile Frameworks
Webflow
Initializer
8/31/2015
Copyright © Carl M. Burnett

35. HTML5 Frameworks HTML KickStart HTML5 Boilerplate
Montagejs
Zebra
8/31/2015
Copyright © Carl M. Burnett

36. 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

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

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

39. 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

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

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

42. 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