Being Responsibly Responsive

Jason Occhipinti@occtopia

Agenda• Part I: Responsive Web Design (RWD) Overview

• Part II: New Developments in RWD

Part I: RWD Overview

Background• Consumer technology/media availability has fueled changes

in web design.

• Experts and futurists predicted the rise of the “magic box.”

• Boy, were they wrong.

Background• Now, media converges on users through many avenues:

– Desktop Computers– Tablets– Smartphones– Other web-enabled devices

So…how big is the mobile web getting?

There are over 1.2 BILLION mobile web users worldwide.

-MobiThinking.com

In the United States, 25% of web users are mobile-only (rarely use desktops).

-MobiThinking.com

“Apple sold more iPads in the June Quarter (2012) than any PC maker sold in their entire lineup.”

-Tim Cook

What is Responsive Web Design?

• Responsive Web Design (RWD) is creating web experiences that adapt to different methods of display.

“The primary design principle underlying the web’s usefulness and growth is universality.”

-Tim Berners-Lee

What is RWD Not?• RWD is NOT developing a separate “mobile” website.

• RWD is NOT native app development.

What is RWD?• “Responsive Web Design” was originally coined in 2010 by

designer + developer Ethan Marcotte.

– Article in “A List Apart” – May, 2010• http://www.alistapart.com/articles/responsive-web-design/

What is RWD?• RWD is comprised of three techniques:

– Fluid Grids– CSS Media Queries– Scalable Imagery

RWD Beyond Technology• RWD calls for a rethinking of the way we design websites.

• Concedes that one size DOES NOT fit all.

• Additionally, RWD touches on other areas of design, including:– Content theory + prioritization.– Tactile interface design + usability.

Why is RWD Important?• As mobile usage increases, so do the odds your site will be

viewed on a tablet or smartphone.

• RWD makes your content more accessible.

Why is RWD Important?• RWD SAVES MONEY

– No forking mobile websites– No forking app development (webkit interoperability)

Why is RWD Important?• Users, customers, and employers expectations are

increasing.

Fluid Grids• RWD calls for grids design with fluid measurements.

• Grid measurements should be percentage-based.

Fluid Grids• Converting existing pixel-based grid systems is simple via a

formula.

• Yes, I hate math too, but you know? Too bad!

Target Container (px)

Parent Container (px)X 100( )

Fluid Grids

Fluid Grids

Fluid GridsParent: 1000px

Target: 333px

Fluid GridsParent: 1000px/100%

Target: ?

333px

1000pxX 100( )

Fluid GridsParent: 100%

Target: 33.3%

33.3%

Are you confused yet?

Fluid Grids• Fluid layouts are nothing new.

• While fluid layouts are ideal, some use fixed-width layouts.

CSS Media Queries• Media Queries allow site layouts to change based on pre-

defined criteria.– Example: Screen Width + Orientation

• Introduced in Cascading Style Sheets, Level 3 (CSS3).

CSS Media Queries• Media Queries were designed to address the technical

shortcomings of CSS Media Types.

• Media Types:@media screen { /* your code goes here */ }@media print { /* your code goes here */ }@media handheld { /* your code goes here */ }

CSS Media Queries• Enter Media Queries:

@media screen and (min-width: 900px) {/* Your CSS code goes here! */

}

@media screen and (orientation:portrait) {/* Your CSS code goes here! */

}

CSS Media Queries• Each new set of styles creates a “breakpoint” (an area where

a new set of style rules begin).

• Set your breakpoints where your layout breaks, NOT targeting a specific device.

CSS Media Queries• Supported in all modern browsers:

– Internet Explorer 9+, Chrome, Firefox 3.5+, Safari 3+

• Older “trouble-making” browsers can use JavaScript to add functionality.– css3mediaqueries.js by Wouter van der Graaf

• http://code.google.com/p/css3-mediaqueries-js/

CSS Media Queries• Full W3C specification

– http://www.w3.org/TR/css3-mediaqueries/

Let’s Check Out An Example! Woo!

Scalable Imagery• Scalable imagery is simple CSS-based technique that allows

imagery to scale to the size of its container.

– HTML: <img src=“your/image/path.jpg” />

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

Scalable Imagery• Max-width CSS property is supported in all major browsers,

even Internet Explorer 7.

• Other responsive image techniques are arising, but none are official standards.

One more example in Part I. I promise.