Since the introduction of high pixel density displays, the classic notion of the pixel, as well as the concept of a standard dpi, are fading. Web designers are no longer constrained to fixed-width web elements. With the evolution of modern display devices, designers are now responsible for thinking beyond layout and must also consider the impact of resolution. This paper will focus on various tools and techniques web designers can use to achieve resolution independence. Topics will include the pros and cons of delivery methods, resolution independent design alternatives, common responsive design techniques and more.

1. Mo‟ Pixels Mo‟ Problems
Moving Toward a Resolution
Independent Web
Matt Gipson (@msg317) and Rita Troyer (@ritaelise)
Indianapolis Museum of Art, USA
MW2013 – Portland, OR

2. 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.”

3. History: The Pixel
A device pixel (or
physical pixel) is the
tiniest physical unit in
a display.

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

5. Screen Density
CSS 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 10
Samsung Galaxy S III, Samsung Galaxy Note II, Sony
Xperia S
HTC One X
CSS Pixel Ratio:
3.0
HTC Butterfly

6. Implementation
Key factors: Performance and Audience
Don‟t want to make assumptions about our
users‟ device performance capabilities

7. Implementation
• Designing With Code
(CSS)
• Responsive Design
• EMs / Percentages
• CSS Media Queries
• Hi Resolution Imagery
• JavaScript
• Vector Graphics (SVG)
• Web fonts (@font-face)

8. Design with Code
Use of CSS to
replicate UI
elements
Example: gradient
fills, drop
shadows, borders, o
utlines, opacity, etc.

9. Responsive
Design
Seamless
experience across
devices
First, target a single
column, mobile first
approach and then
work up / down

10. Using EMs / Percentages
Using ems allows your
designs to
be resolution
independent.
Relies on default
browser settings to
dictate a user‟s body
font size
Design for readability

11. CSS Media
Queries
Ability 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 */
}

12. Hi Resolution
Imagery
Beautiful, sharp and
polished user
experience
Double the image size
means 4 times the
pixels
Can cause slow
download times and
negatively impact
performance

13. JavaScript
Checks 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

14. Vector Graphics
(SVG)
Resolution
independent,
lightweight, and
infinitely scalable
Support across all
modern web browsers
Much smaller file type
than its bitmap
counterparts

15. Web Fonts
Crisp, legible,
resolution
independent
Icon Fonts
Flexible
Each icon may be
resized, colored,
rotated and styled
individually

16. Case Studies

17. 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

18. ArtBabble.org

19. 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

20. ArtBabble.org
Web Font Icons
Pictogram web font “Sociolico”
used for social icon buttons.
ul.social-links li.twitter a:after {
content: "l";
font-family:
'socialicoregular‟;
}

21. 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;

22. 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)

23. IMAMuseum.org

24. 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

25. IMAMuseum.org
CSS “background-size” property
Modern web browsers Old web browsers (IE8 and below)

26. 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

27. 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)

28. 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="” />

29. AIC LaunchPad

30. AIC LaunchPad
High Resolution Imagery / Design with Code (CSS)
• All UI elements created
through CSS
• Heavy on photographic
elements, initially chose to
use retina optimized images
throughout

31. 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.

32. Future
• User experience is always number one.
• Avoid focusing on the device
• Device agnostic future
• Learn new techniques, stay curious.

33. Thank You
Questions?
Matt Gipson (@msg317) and Rita Troyer (@ritaelise)
IMA Lab / Indianapolis Museum of Art, USA
MW2013
Thursday, April 18 2013