Web & Application Development (Chapter 5)

Fluid layout

uses proportional measurements so webpage content automatically resizes to fit the screen; changes in width based on the size of the viewport

Viewport

the viewing area for the webpage regardless of device, browser, screen size, etc.

Media queries

allow the webpage developer to detect the approx. pixel size of the current viewport; allows the developer to selectively apply CSS rules that work best for the viewport size

Flexible images

shrink and grow based on the size of the viewport; do not have height and width attributes or values in the HTML document

mobile-first strategy

designing a wireframe for the smallest viewport first, then adding more content as the viewport progressively grows; media queries are used to add styles as viewport grows

What factors contribute to web development approach?

target audience, current environment, available resources, time available to tackle a project

fixed layouts

use fixed measurements to define the width of the areas of the wireframe

Creating a Fluid Layout

created using percentages to measure the width of the webpage; no matter how small the browser becomes, the content shrinks and grows in response to the size of the viewport; media queries not required for liquid layout

Meta tag for responsive sites

<meta name=”viewport” content=”width=device-width, initial-scale=1”>; add to the <head> tag

Why do you need the meta name tag?

this code makes sure the page initially loads in a layout width that matches the viewport of the device