Achieving Responsiveness

betweenbrain.com/talks/rwd

Responsive Web Design

an approach [where] a site is crafted to provide an optimal viewing experience across a wide range of devices Wikipedia: Responsive Web Design

3 Elements of RWD

  • Media Queries
  • Fluid Grid
  • Flexible Images
    • [objects too!]

Media Queries

consists of a media type and zero or more expressions that check for the conditions of particular media features. W3C: Media Queries

For Example

/* Default styles for small screens */

body { font-size : 76%; }

#body-container { width : 95%; }

@media only screen and (min-width: 40em) {...}

@media only screen and (min-width: 50em) {...}

@media only screen and (min-width: 64em) {...}

@media only screen and (min-width: 82.6em) {...}

@media only screen and (min-width: 115em) {...}
Construct5: construct-responsive.css

Media Types

  • all
  • braille
  • embossed
  • handheld
  • print
  • projection
  • screen
  • speech
  • tty
  • tv

Media Features

  • width
  • height
  • device-width
  • device-height
  • orientation
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • scan
  • grid

Fluid Grid

Break out of our reliance on "minimum screen resolution" [and] put control of our designs firmly in the hands of our users and their browsing habits. Ethan Marcotte: Fluid Grids

Added Benefit

Help accommodate for what happens between "break points", future proof your design.

target รท context = result

.entry .main {
  float: left;
  width: 82.938%; /* 700px / 844px = 0.82938 */
}

.entry .meta {
  float: right;
  width: 14.692%; /* 124px / 844px = 0.14692 */
}
  • Fluid grid != grid system
  • Start using fluid grids for everything, even with fixed width designs.

Flexible Images

working with non-fixed layouts can be more difficult once you introduce fixed-width elements (images) into them. Ethan Marcotte: Fluid Images

Achieving Flexibility

img, object {
  max-width: 100%;
}

Other Approaches

Filament Group:Responsive Images
Dynamically rewrites src attribute to serve dramatically different image sizes at different resolutions.
Adaptive Images
... detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled ... images
HiSRC
The simple jQuery plugin for adaptive images in responsive web design

Approaching Responsiveness

a.k.a. we have the ingredients, but how do we make the soup? Achieving responsiveness requires a mental shift, a different approach, a new way of thinking. me

Why RWD?

Luke Wroblewski

People are accessing the web in an ever increasing variety of ways. In some cases, content is being removed from the presentation and re-displayed in another manner.

Content-first, mobile-first, user-first! win=win Seth Warburton

Content First: Design

Treat visual design as progressive enhancement of content.

  1. Develop content and messaging.
  2. Implement un-styled, logically organized content.
  3. Deploy supporting features.
  4. Design to enhance the user experience.

Content First: Fluidity

Ems for Media Queries

Ems for Media Queries

The atomic unit of measure for a site's media queries should be based on the ideal line length of a single column of text.

This approach has have nothing to do with screen size or resolution.

Ethan Marcotte: Real World Applications of Responsive Web Design

Mobile (Tiny screen) first...

... [instead of] from the desktop down. (Oh how we laughed when we realised our mistake.) Andy Clarke: The new 320 and Up

Mobile First CSS

Baseline CSS (design) is for all devices, then progressively enhanced for larger screens and modern browsers that understand this enhancement.

/* Default styles for small screens */

body { font-size : 76%; }

#body-container { width : 95%; }

@media only screen and (min-width: 40em) {...}

@media only screen and (min-width: 50em) {...}

@media only screen and (min-width: 64em) {...}

@media only screen and (min-width: 82.6em) {...}

@media only screen and (min-width: 115em) {...}

Focus

80% Less

When you design for mobile first... 80% of the content, navigation, promotions, and interactions needs to go. And that's... great. Luke Wroblewski : Mobile First Helps with Big Issues

User First

Websites are created to convey messages and provide a gateway to interaction. The user experience, and maximizing accessibility, must comes first to achieve this.

Think Progressive Enhancement & Graceful Degradation

Think Web Accessibility

Epitome

RWD is more than using media queries, fluid grids, and flexible images.

Achieving responsiveness involves:

  • Approach content before design.
  • Use visual design as enhancement.
  • Develop for mobile first.
  • Progressively enhance with media queries.
  • Maximize user experience and accessibility.

Do everything you can to put the user in control of their experience.

More Reading & Viewing

THE END

betweenbrain.com/talks/rwd