1. COMP 135 Web Site Design Intermediate Week 8

2. Responsive Web Design Responsive Design Adaptive Design

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

4. Viewport Meta Property Provides a more standard viewing experience to mobile devices

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

6. Or a Framework 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; }

7. Responsive Typography 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; }

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

9. Breakpoints 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 600 > 1280400

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

11. Media Query Device Features FEATURE NAMEDEFINITIONHAS min- AND max- PREFIXES width Width of display area yes height Height of display area Yes device-width Width of device rendering surface Yes device-width Height of device rendering surface Yes orientation portrait or landscape values Yes aspect-ratio Ratio of display area’s width over height Yes device-aspect-ratio Ratio of device’s rendering surface width over height Yes resolution Tests density of pixels in device Yes scan For TVs tests whether display is progressive or scan No grid Tests for grid-based display no

12. Media Queries @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)