Responsive Web Design

Sheri German, Instructor Montgomery College

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)

RWD in a Nutshell

CSS3 Media Queries

Flexible images and media

Grid system that keeps its proportions no matter the window viewing width

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

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!

<link rel="stylesheet" type="text/css” media="screen and (max-width: 480px)” href="phone.css" />

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

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%;}

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

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.

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

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

DEMO OF THE FLUID GRID LAYOUT: See instructions in folder for this session

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

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

Twitter Bootstrap in Dw CC

http://twitter.github.io/bootstrap/ download Bootstrap

http://twitter.github.io/bootstrap/customize.html Customize

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/dmxzone-bootstrap

Reveal.js for Responsive HTML5 Presentations

https://github.com/hakimel/reveal.js At Github

http://lab.hakim.se/reveal-js/#/ Demo

http://slid.es Graphical online interface for mobile or desktop

Trunity Online Learning

HTML5 pages

An App for phones and tablets

Interlink books in the system for interconnected information