EPAM

Responsive Web Design

by Viacheslav Stetsenko

What is Responsive Web Design?

What problem does RWD solve?

The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework.

Elliot Jay Stocks,
Creative Director of Adobe Typekit

Responsive design is not about ‘designing for mobile’. But it’s not about ‘designing for the desktop’, either. Rather, it’s about adopting a more flexible, device-agnostic approach to designing for the web.

Ethan Marcotte,
author of Responsive Web Design
(TL;DR A List Apart article)

Responsive Web Design is:

a design approach for providing optimal viewing and interaction experience easy reading and navigation with minimum panning, zooming and scrolling across a wide range of devices (PC, laptop, tablet, smartphone etc.)

BASE PRINCIPLES OF RWD:

  1. Fluid grids
  2. Flexible images
  3. Media queries

Fluid grids

  • Define block sizes in %
  • Convert font sizes from px to em (rem)

TARGET / CONTEXT = RESULT

Grid frameworks

HTML based frameworks require adding classes into markup
Foundation, Bootstrap, Skeleton

Pure CSS based frameworks rely on pre-processor
Susy, Neat, Zen Grids, Singularity

MEDIA QUERIES

Type of media

aural (deprecated in CSS2), braille, handheld, print, projection, screen, tty, tv, embossed (CSS2), speech (CSS2), all (CSS2)

Media features

width, height
device-width, device-height
orientation
aspect-ratio, device-aspect-ratio
more css3-mediaqueries on w3c

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint!

Stephan Hay,
author of Responsive Design Workflow book

Flexible images

  • max-width: 100%
  • Image replacement
  • HTML5 picture tag
  • Vector graphic

Maaaan, use calc()

Power of calc()

The most useful ability of calc() is its ability to mix units, like percentages and pixels.

Use calc instead of percents


.thing {
  width: 90%; /* fallback if needed */
  width: calc(100% - 3em);
}

Use calc instead of percents


.column-1-7 {
   width: calc(100% / 7);
}
.column-2-7 {
   width: calc(100% / 7 * 2);
}
.column-3-7 {
   width: calc(100% / 7 * 3);
}

Use calc to create gutters

creating gutters


.area-one {
  width: 40%;
  float: left;
  margin-right: 1em;
}

.area-two {
  width: calc(60% - 1em);
  float: right;
}

Meta viewport


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

Pixel

The physical pixel

The CSS pixel

THINGS TO CONSIDER:

Screen size

  • Wearables (~280px)
  • Smartphones (320px – 640px)
  • Tablets (600px – 1280px)
  • Laptops, desktop screens (1200px +)
  • hi-res devices (@1.5x, @2x, @3x)
  • Media queries

Features

  • Touch screen
  • Orientation
  • Device API
  • Browser specifics

BONUS

WHERE TO LEARN MORE?

THANK YOU!

Any other questions?
mailto: viacheslav_stetsenko@epam.com