show & tell - the anatomy of a responsive website

MAKING

STUFF

FIT PROPER

THE KEYINGREDIENTS

Viewport meta tag (HTML)

Media queries (CSS)

A fluid grid (HTML & CSS)

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

Tells the browser how to handle the page

Viewport

METATAG

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

Instructs the page to match the screen's width in device

independent pixels

Tell the browser what this meta tag does

Establishes a 1:1 relationship between CSS pixels and device independent

pixels regardless of device orientation

TitleThis is a test page for different viewport attribute settings.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat maximus nisi aliquet tempor.

Morbi eros magna, rutrum eget lectus vitae, malesuada consequat mauris. Cras sodales est non ornare convallis.

Title

This is a test page for different viewport attribute settings.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat maximus nisi aliquet tempor.

Morbi eros magna, rutrum eget lectus vitae, malesuada consequat mauris. Cras sodales est non ornare convallis.

WITHOUT WITH

MEDIA

QUERIES

A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and colour

MEDIA

QUERIES

@media (max-width: 728px) { background-color: green; }

- Widths (Minimum and maximum)

- Orientation (Landscape and portrait)

- Device (TV, handheld...)

- Display (Screen, print ...)

MEDIA

QUERIES

A grid system that combines fixed sizes with percentages to make a grid that can 'flow' across any device size.

FLUID

GRIDS

100%

25% 25% 25% 25%

20px 20px 20px

100%

20px 20px 20px

25% 25% 25% 25%

100%

OFFICIAL

IS IT RESPONSIVE? TEST