Transcript Responsive Web Design for Teachers

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-webdesign ($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/fluidgrid-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/dmxzon
e-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