COMP 135Web Site Design

Intermediate

Week 8

Responsive Web Design

Responsive Design

Adaptive Design

Pillars of Responsive DesignFluid grids

◦960.gs and other frameworks

Flexible images

Media Queries

Viewport Meta Property

<meta name="viewport" content="initial-scale=1.0, width=device-width">

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 layoutsUses 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 withContext = DOM location of targetResult = what we place in the stylesheetWhat is the relative font size we need if our

base design should be 12px and the default font size is 16px?

target / context = result12 / 16 = 0.75p { font-size: 0.75em; }

Fluid images

img {max-width: 100%;}

BreakpointsThe pixel at which a layout might need to

changeOnly two to four major ones neededMay require adding ones for specific

devices

0 600 > 1280400

Breakpoint graph with minor breakpoint

small.cssmedium.css

0 600px 960px400px

base.css

Media Query Device FeaturesFEATURE NAME DEFINITION HAS 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 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)