COMP 135 Web Site Design Intermediate Week 8

Responsive Web Design Responsive Design Adaptive Design

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

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

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

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

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

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

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 >

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

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

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 handheld and (max-width: 480px), screen and (max- device-width: 480px), screen and (max-width: 600px)