mo’ pixels mo’ problems: moving toward a resolution independent web

Mo’ Pixels Mo’ ProblemsMoving Toward a Resolution

Independent Web

Matt Gipson (@msg317) and Rita Troyer (@ritaelise)Indianapolis Museum of Art, USA

MW2013 – Portland, OR

What is Resolution Independence?

“Resolution independence is a computing concept whereby elements on a computer screen are rendered at sizes independent from the pixel grid, resulting in a UI that is displayed at a consistent size, regardless of the size of the screen.”

History: The Pixel

A device pixel (or physical pixel) is the tiniest physical unit in a display.

Screen Density

The number of device pixels on a physical surface. Often measured in pixels per inch (PPI).

Screen DensityCSS pixel ratio: 1.0

All non-Retina Macs, All non-Retina iOS devices, Acer Iconia A500, Samsung Galaxy Tab 10.1, Samsung Galaxy S

CSS pixel ratio: 1.3

Google Nexus 7

CSS Pixel Ratio: 1.5

Google Nexus S, Samsung Galaxy S II, HTC Desire, HTC Incredible S, HTC Velocity, HTC Sensation

CSS Pixel Ratio: 2.0

iPhone 4 -5, iPad 3-4, Macs with Retina displays, Google Galaxy Nexus, Google Nexus 4, Google Nexus 10Samsung Galaxy S III, Samsung Galaxy Note II, Sony Xperia SHTC One X

CSS Pixel Ratio: 3.0

HTC Butterfly

Implementation

Key factors: Performance and Audience

Don’t want to make assumptions about our users’ device performance capabilities

Implementation

• Designing With Code (CSS)

• Responsive Design• EMs / Percentages• CSS Media Queries• Hi Resolution Imagery• JavaScript• Vector Graphics (SVG)• Web fonts (@font-

face)

Design with CodeUse of CSS to replicate UI elements

Example: gradient fills, drop shadows, borders, outlines, opacity, etc.

Responsive DesignSeamless experience across devices

First, target a single column, mobile first approach and then work up / down

Using EMs / PercentagesUsing ems allows your designs to be resolution independent.

Relies on default browser settings to dictate a user’s body font size

Design for readability

CSS Media QueriesAbility to target a variety of specific pixel ratios

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */}@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Retina-specific stuff here */}

@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi) { /* Retina-specific stuff here */}@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) { /* Retina-specific stuff here */}

Hi Resolution ImageryBeautiful, sharp and polished user experience

Double the image size means 4 times the pixels

Can cause slow download times and negatively impact performance

JavaScriptChecks each image on the page to see if there is a hi-res version on your server

If a high-res variant exists, the script will swap that image in-place

http://retina.js

Vector Graphics (SVG) Resolution independent, lightweight, and infinitely scalable

Support across all modern web browsers Much smaller file type than its bitmap counterparts

Web FontsCrisp, legible, resolution independent

Icon FontsFlexible

Each icon may be resized, colored, rotated and styled individually

Case Studies

ima.tc/mopixels

Mo’ Pixels, Mo’ Problems Paper

• Goldilocksapproach.com• Three states:

multi column (too big)narrow column (too small)single column (just right)

• Use of ems• Web fonts• SVG Graphics

ArtBabble.org

ArtBabble.org

• Pictogram web font “Sociolico” used for social icon buttons

• Using CSS “background-size” property to downscale retina optimized images across the interface

• Responsive design

ArtBabble.org

Web Font IconsPictogram web font “Sociolico” used for social icon buttons.

ul.social-links li.twitter a:after { content: "l"; font-family: 'socialicoregular’;}

ArtBabble.org

CSS “background-size”Using CSS “background-size” property to downscale retina optimized images across the interface.

#nav ul#main-menu li { background: url(‘../images/arrow.png’) no-repeat right 13px; background-size: 9px 11px;

ArtBabble.org

Responsive Design• Use of media queries to

adjust the layout according to device widths at 4 break points

• Shows what our site would look like on mobile devices without the media query (un-readable without pinching and panning)

IMAMuseum.org

IMAMuseum.org

CSS “background-size” property• Swapped retina background images with standard

72dpi graphics for older browsers

• Added media-queries to ensure high-density pixel displays are the only place high-res interface images are loaded

• Used an inline image on the page as opposed to a background image w/ CSS for the logo. Inline width and height on images are supported in older browsers

IMAMuseum.org

CSS “background-size” property

Modern web browsers Old web browsers (IE8 and below)

IMAMuseum.org

Design with Code (CSS)

• Only two images used on the right (the slideshow image, and logo)

• All shadows, borders with opacity, and background colors are achieved with CSS

IMAMuseum.org

CSS Media Queries• Use of media queries to

adjust the layout according to device widths at 4 break points

• Shows what our site would look like on mobile devices without the media query (un-readable without pinching and panning)

IMAMuseum.org

JavaScript• Use of JavaScript to detect what image needs to be

loaded• Custom JavaScript that works w/ Drupal. We created an

Image Cache derivative for retina vs. non-retina images.• Use data attribute to define the url path for each of our

image derivatives.

<img alt="" title="" class="imagecache imagecache-item-listing-rectangle retina-off" data-retina="http://www.imamuseum.org/sites/default/files/imagecache/item-listing-rectangle_retina/attachments/AiWeiweiNeverSorry.jpg" data-normal="http://www.imamuseum.org/sites/default/files/imagecache/item-listing-rectangle/attachments/AiWeiweiNeverSorry.jpg" src="” />

AIC LaunchPad

AIC LaunchPadHigh Resolution Imagery / Design with Code (CSS)• All UI elements created

through CSS

• Heavy on photographic elements, initially chose to use retina optimized images throughout

AIC LaunchPad

High Resolution Imagery• Testing revealed if there

were more than 4 visible retina images, performance plummeted (even in the native app).

• As a compromise, we scaled the images back.

Future

• User experience is always number one.

• Avoid focusing on the device

• Device agnostic future

• Learn new techniques, stay curious.

Thank You

Questions?

Matt Gipson (@msg317) and Rita Troyer (@ritaelise)IMA Lab / Indianapolis Museum of Art, USA

MW2013 Thursday, April 18 2013