WordPress Responsive Design Bootcamp

Responsive Websites adapt to mobile, desktop and tablet screensizes

with Flexible Images

FLEXIBLE GRID

He coined the term “Responsive Design” in 2010 in his article on A List Apart.

&

Ethan Marcotte

Who is...

MEDIA

QUERIES

CSS3

vs.

The Elements of

Responsive Design

Flexible, device-independent design for the web.

So what is Responsive Design?

Desktop / Laptop

Flexible Designs adapt to device and browser sizes.

or Fluid Grid

The Flexible Grid

Tablets

Mobile

And why is the future of web design

What is Responsive Design?

RESPONSIVE?

Because we don't want to and can't create separate sites for each new device.

Example:

ratio-based relationship between target and context is 0.6 to 1, which means the target's width is 60% of the context's width.

It’s all about

understanding the

ratio-based

relationships between

element and container

THE MAGICAL FORMULA:

target ÷ context = result

60%

100%

ROUTINE #1:

Making the Grid

FLEXIBLE

almost

Thank You!

Flexible EVERYTHING

Flexible Images & Media

Mobile

img,

video,

object,

iframe {

max-width: 100%;

height: auto; }

Tablet portrait

Sonja Leix

Twitter: @sonjaleix

The Power of

Laptop / Tablet landscape

CSS3

Flexible

Fonts

Desktop

Media Queries

body {

font-size: 100%; /* ~ 16px */

}

target ÷ context = result

h1 {

font-size: 2.25em; /* 36px / 16px */

}

ROUTINE #2:

iPad (portrait)

Example Media Query for:

@

Adding some

Media Queries

@media screen and (min-width: 480px) and (max-width: 768px)

media type

first query

second query

device feature