Responsive Web Design. Sheri German, Instructor Montgomery College

Size: px

Start display at page:

Download "Responsive Web Design. Sheri German, Instructor Montgomery College"

Homer Quentin Chambers
5 years ago
Views:

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! ($9 for ebook)

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

5 Creating CSS3 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 directive limits the number of http requests a good thing for mobile! <link rel="stylesheet" type="text/css media="screen and (max-width: 480px) href="phone.css" />

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) = (the result) Move the decimal to the left two places: % 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! includes an overview of the Fluid Grid Layout framework 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! download Bootstrap! Customize! A 12-column responsive grid, dozens of components, JavaScript plugins, typography, form controls, and a web-based Customizer! Free Extension

15 Reveal.js for Responsive HTML5 Presentations! At Github! Demo! Graphical online interface for mobile or desktop

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

Responsive Design for Web Applications R.I.T. S. Ludi/R. Kuehl p. 1 R I T. Software Engineering

Responsive Design for Web Applications S. Ludi/R. Kuehl p. 1 What is the Problem? S. Ludi/R. Kuehl p. 2 Credit: Matt Griffin What is the Problem? Mobile web access is ubiquitous One interface design does