DESIGN RESPONSIVELY

a presentation by Tsachi Shlidor

Made with Drupal, Impress, Sass & more...

Responsive websites

respond

to their environment

WHAT?

"The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints."
--John Allsopp, “A Dao of Web Design”

WHAT IS THE PROBLEM?

We don't know shit!

How big is our canvas?
How many layouts will it need?
What capabilities do we have?

WHAT DO WE WANT?

Fastest.
Universal.
Layout agnostic.
Best support.
Most usable/readable.
Easiest.
Best revenue.

OUR OPTIONS

Native app
Hybrid app
Dedicated site / Web app
Responsive site

“Stop Thinking in Pages. Start Thinking in Systems.”

- Jeremy Keith

Style Tiles

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.

Coding progressively

or

The web is responsive by default!

Media queries

@media screen/print
@media (max-width: 699px)/(min-width: 520px)
@media (resolution: 96dpi)
@media (orientation: landscape)
@media (resolution: 96dpi) and (max-width: 1024px)
@import url(red.css) (min-width:400px);
<link rel="stylesheet" media="(max-width: 799px)" />

Don't forget the meta tag!

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

This tells viewport-aware browsers that a website shouldn’t be scaled down, and that the width of the browser window should be treated the same as the overall device width

Fluid layouts

Use a layout system

many more...

5 Lines grid system

// 5 Lines responsive grid system
@mixin grid($width, $flow: left) {
  float: $flow;
  width: 100% * $width;
  @include box-sizing(border-box);
}

// Example
.main {
  @include grid(7/10);
}
.sidebar {
  @include grid(3/10);
}

Browser sniffing

Feature detection

If you have to use browser detection, make sure you take the version into consideration and only use this approach to detect legacy browsers. Otherwise - make sure you use a well maintained library.
Usually feature detection is much more reliable and future proof for determining if a specific feature exists.

Responsive media

img {
  max-width: 100%;
  height: auto;
}

This will make sure your layout won't break. but consider using one of the many techniques available for actually serving the right image for the client (e.g. size and type of screen and bandwidth available).

Responsive Email

KISS - single-column layouts of 500 to 600px work best.
Links and buttons - minimum target area of 44 × 44 pixels.
Don't count on @media queries (Gmail...).
Progressive enhancement - think mobile first.
Use a template