COMP 135 Web Site Design Intermediate

1. COMP 135Web Site Design Intermediate Week 8

2. Responsive Design • Adaptive Design Responsive Web Design

3. Fluid grids • 960.gs and other frameworks • Flexible images • Media Queries Pillars of Responsive Design

4. <meta name="viewport" content="initial-scale=1.0, width=device-width"> • Provides a more standard viewing experience to mobile devices Viewport Meta Property

5. html { background: url(grid.jpg) repeat-y; } Use a Grid

6. Frameworks can create complex layouts • Uses non-semantic classes and IDs that make sense in the context of the framework itself • .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { display:inline; float: left; position: relative; margin-left: 10px; margin-right: 10px; } Or a Framework

7. target ÷ context = result Target = element we’re working with Context = DOM location of target Result = what we place in the stylesheet What is the relative font size we need if our base design should be 12px and the default font size is 16px? target / context = result 12 / 16 = 0.75 p { font-size: 0.75em; } Responsive Typography

8. img { max-width: 100%; } Fluid images

9. The pixel at which a layout might need to change • Only two to four major ones needed • May require adding ones for specific devices 0 400 > 1280 600 Breakpoints

10. base.css small.css medium.css 0 400px 960px 600px Breakpoint graph with minor breakpoint

11. Media Query Device Features

12. @media screen and (min-width: 1024px) {body { width 100%; }} screen is a traditional media type min-width is a feature and the query is within the parentheses Can chain multiple queries together with and keyword @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px) Media Queries