1 / 16

Responsive Web Design

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

eddy
Télécharger la présentation

Responsive Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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)

  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

  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! <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 330px330 (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 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 • WordPressTwentyeleven, 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/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

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

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

More Related