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