1. Responsive Web Design Sheri German, Instructor Montgomery College

2. Responsive Web Design (RWD) Coined by Ethan Marcotte through his awareness of what was taking place in the discipline of architecture. "Responsive architecture" – such as flexible walls bending as more people enter a room Responsive web design adapts to the device http://alistapart.com/article/responsive-web-design http://www.abookapart.com/products/responsive-web- design ($9 for eBook) http://www.abookapart.com/products/responsive-web- design

3. RWD in a Nutshell CSS3 Media Queries Flexible images and media Grid system that keeps its proportions no matter the window viewing width

4. What is a CSS3 Media Query? Place a style sheet in context of a set of conditions Expand on simple CSS media such print style sheets and screen The most commonly used media feature is width. Others include color, orientation (portrait and landscape) and resolution. You can find a list of media features at http://reference.sitepoint.com/css/mediaqueries http://reference.sitepoint.com/css/mediaqueries

5. Creating CSS3 Media Queries @media screen and (max-width: 480px) {.sidebar1 { float: none; } } NOTE: You can also create external style sheets for specific media and link or import them. Best practices currently suggest that using the @media directive limits the number of http requests – a good thing for mobile!

6. Note: CSS3 MQ Breakpoints In Dreamweaver the visual CS3 Media Query interface sets the breakpoints for devices widths Current best practices suggest that the breakpoints be content driven rather than device driven

7. How to Create Flexible Images? A simple solution: img, object, embed, video { max-width: 100%;} /* IE 6 does not support max-width so default to width 100% */.ie6 img { width:100%;}

8. The RWD Formula for Proportional Grids Not just fluid pages, but layouts in proportional grids The formula: Target / Context = Result Example: Comp of 960px with a sidebar of 330px 330 (the target) / 960 (the context) = 0.34375 (the result) Move the decimal to the left two places: 34.375% is the flexible width of the sidebar

9. Visual RWD: Fluid Grid Layouts Dreamweaver CS6 introduced the Fluid Grid Layout feature, a system for designing responsive websites. Fluid Grid Layout contains phone, tablet, and desktop layouts and typography presets, all based on a single fluid grid. This feature helps you create flexible, fluid grid layouts for pages using a column grid. You design the layouts visually, and Dreamweaver displays them in Live View. Dreamweaver also generates the source code for the layouts using CSS3 and HTML5. The Fluid Grid Layouts have matured in Dreamweaver CC.

10. The Fluid Grid Layout Framework Frameworks give you starting points based on best practices Often include templates, css documents, and scripts They go from basic to elaborate Adobe Fluid Grid Layouts are lightweight and basic Based on "Responsive Web Design" by Ethan Marcotte and the Golden Grid System by Joni Korpi

11. FGL Dependent Files Boilerplate.css starts you off with some best practice normalization of CSSproperties and values Responsive.js a polyfill script that enables CSS3 Media Query support in browsers that don’t natively support it http://helpx.adobe.com/dreamweaver/using/fluid- grid-layout-dreamweaver.html includes an overview of the Fluid Grid Layout framework http://helpx.adobe.com/dreamweaver/using/fluid- grid-layout-dreamweaver.html DEMO OF THE FLUID GRID LAYOUT: See instructions in folder for this session

12. Where Do We Go From Here? Dreamweaver’s Fluid Grid Layout is a relatively simple framework There are many robust and feature filled RWD frameworks You can develop sites with these frameworks from within Dreamweaver

13. Other Responsive Resources Twitter Bootstrap framework for responsive sites Reveal.js for responsive presentations Trunity for online digital textbooks WordPress Twentyeleven, Twentytwelve, and Twentythirteen for HTML5 responsive templates Edge Reflow for responsive prototypes – create your own breakpoints

14. Twitter Bootstrap in Dw CC http://twitter.github.io/bootstrap/ download Bootstrap http://twitter.github.io/bootstrap/ http://twitter.github.io/bootstrap/customize.html Customize http://twitter.github.io/bootstrap/customize.html A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and a web-based Customizer Free Extensionhttp://www.dmxzone.com/go/21759/dmxzon e-bootstraphttp://www.dmxzone.com/go/21759/dmxzon e-bootstrap

15. Reveal.js for Responsive HTML5 Presentations https://github.com/hakimel/reveal.js At Github https://github.com/hakimel/reveal.js http://lab.hakim.se/reveal-js/#/ Demo http://lab.hakim.se/reveal-js/#/ http://slid.es Graphical online interface for mobile or desktop http://slid.es

16. Trunity Online Learning HTML5 pages An App for phones and tablets Interlink books in the system for interconnected information