The Tenets of Responsive Design

Why When How

What the world looks like http://opensignal.com/reports/fragmentation-2013/

It’s impossible to design for them all. Therefore, we use
responsive design. ! “We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.” - Adam Kaplan

Ethan Marcotte ! “Responsive Web Design” May 25, 2010

Pretty much always.

3 Basic Ingredients in a Responsive Design

1. Media Queries 2. Responsive Images 3. Responsive Grids

Media Queries (are your best friend)

@media all and (min-‐width: 30em) {
[insert your CSS here] } "If [device width] is greater than or equal to [30ems], then do {...}"

.column { width: 100%; } !
@media all and (min-‐width: 30em) { .column { float: left; width: 50%; } }

@media all and (min-‐width: 30em) {
} Can use “screen”, “print”, “tv”, “handheld”. Just stick to “all”. Can use “max-width”, “min-height”, “max- height” (primarily use “min” values). Can use px, em, rem (use ems or rems)

Responsive Images

Your images will break the layout if you don’t ﬁx
them!

img { max-‐width: 100%;
height: auto !important; } The Best Way I’ve Found So Far

Don’t forget to: Optimize Optimize Optimize (even your background-images)

• Photoshop > Save for Web • imageoptimizer.net • kraken.io
• Lots more

Fluid Grids

float: left; width: 50%; float: left; width: 50%; float: left;
width: 33.3%; float: left; width: 33.3%; float: left; width: 33.3%; float: left; width: 40%; float: left; width: 60%;

float: left; width: 50%; float: left; width: 50%; float: left;
width: 33.3% ; float: left; width: 40%; float: left; width: 60%; float: left; width: 33.3% ; float: left; width: 33.3% ; Yuck.

float: none; width: 100%; Better! float: none; width: 100%; float:
none; width: 100%; float: none; width: 100%; float: none; width: 100%; float: none; width: 100%; float: none; width: 100%;

.col-‐50, .col-‐33, .col-‐40, .col-‐60 { width: 100%;
} How I do it: ! @media all and (min-‐width: 30em) { .col-‐50, .col-‐33, .col-‐40, .col-‐60 { float: left; } .col-‐50 { width: 50%; } .col-‐33 { width: 33.33%; } .col-‐40 { width: 40%; } .col-‐60 { width: 60%; } }

One More Thing

Don’t forget to set the viewport! <meta name="viewport" content="width=device-‐ width,
initial-‐scale=1”> ! (goes in the <head>)

Resources http://www.adamkaplan.me/grid/ http://bradfrost.github.io/this-is-responsive/ http://codepen.io/ojbravo/pen/owbLa

The Tenets of Responsive Design

The Tenets of Responsive Design

thebeckyhamm

More Decks by thebeckyhamm

Other Decks in Design

Featured

Transcript