Successfully reported this slideshow.
Mo‟ Pixels Mo‟ ProblemsMoving Toward a ResolutionIndependent WebMatt Gipson (@msg317) and Rita Troyer (@ritaelise)Indianap...
What is Resolution Independence?“Resolution independence is a computingconcept whereby elements on a computerscreen are re...
History: The PixelA device pixel (orphysical pixel) is thetiniest physical unit ina display.
Screen DensityThe number of device pixels on a physicalsurface. Often measured in pixels per inch(PPI).
Screen DensityCSS pixel ratio: 1.0 All non-Retina Macs, All non-Retina iOS devices, AcerIconia A500, Samsung Galaxy Tab 10...
ImplementationKey factors: Performance and AudienceDon‟t want to make assumptions about ourusers‟ device performance capab...
Implementation• Designing With Code(CSS)• Responsive Design• EMs / Percentages• CSS Media Queries• Hi Resolution Imagery• ...
Design with CodeUse of CSS toreplicate UIelementsExample: gradientfills, dropshadows, borders, outlines, opacity, etc.
ResponsiveDesignSeamlessexperience acrossdevicesFirst, target a singlecolumn, mobile firstapproach and thenwork up / down
Using EMs / PercentagesUsing ems allows yourdesigns tobe resolutionindependent.Relies on defaultbrowser settings todictate...
CSS MediaQueriesAbility to target a varietyof specific pixel ratios@media(-webkit-min-device-pixel-ratio: 2),(min-resoluti...
Hi ResolutionImageryBeautiful, sharp andpolished userexperienceDouble the image sizemeans 4 times thepixelsCan cause slowd...
JavaScriptChecks each imageon the page to see ifthere is a hi-resversion on your serverIf a high-res variantexists, the sc...
Vector Graphics(SVG)Resolutionindependent,lightweight, andinfinitely scalableSupport across allmodern web browsersMuch sma...
Web FontsCrisp, legible,resolutionindependentIcon FontsFlexibleEach icon may beresized, colored,rotated and styledindividu...
Case Studies
ima.tc/mopixelsMo’ Pixels, Mo’ Problems Paper• Goldilocksapproach.com• Three states:multi column (too big)narrow column (t...
ArtBabble.org
ArtBabble.org• Pictogram web font “Sociolico” used for socialicon buttons• Using CSS “background-size” property todownscal...
ArtBabble.orgWeb Font IconsPictogram web font “Sociolico”used for social icon buttons.ul.social-links li.twitter a:after {...
ArtBabble.orgCSS “background-size”Using CSS “background-size”property to downscale retinaoptimized images across theinterf...
ArtBabble.orgResponsive Design• Use of media queries toadjust the layout accordingto device widths at 4 breakpoints• Shows...
IMAMuseum.org
IMAMuseum.orgCSS “background-size” property• Swapped retina background images with standard 72dpigraphics for older browse...
IMAMuseum.orgCSS “background-size” propertyModern web browsers Old web browsers (IE8 and below)
IMAMuseum.orgDesign with Code (CSS)• Only two images used onthe right (the slideshowimage, and logo)• All shadows, borders...
IMAMuseum.orgCSS Media Queries• Use of media queries toadjust the layout accordingto device widths at 4 breakpoints• Shows...
IMAMuseum.orgJavaScript• Use of JavaScript to detect what image needs to be loaded• Custom JavaScript that works w/ Drupal...
AIC LaunchPad
AIC LaunchPadHigh Resolution Imagery / Design with Code (CSS)• All UI elements createdthrough CSS• Heavy on photographicel...
AIC LaunchPadHigh Resolution Imagery• Testing revealed if therewere more than 4 visibleretina images, performanceplummeted...
Future• User experience is always number one.• Avoid focusing on the device• Device agnostic future• Learn new techniques,...
Thank YouQuestions?Matt Gipson (@msg317) and Rita Troyer (@ritaelise)IMA Lab / Indianapolis Museum of Art, USAMW2013Thursd...
Upcoming SlideShare
Loading in …5
×

Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web

1,152 views

Published on

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.

Published in: Design
  • Be the first to comment

Mo’ Pixels Mo’ Problems: Moving Toward a Resolution Independent Web

  1. 1. Mo‟ Pixels Mo‟ ProblemsMoving Toward a ResolutionIndependent WebMatt Gipson (@msg317) and Rita Troyer (@ritaelise)Indianapolis Museum of Art, USAMW2013 – Portland, OR
  2. 2. What is Resolution Independence?“Resolution independence is a computingconcept whereby elements on a computerscreen are rendered at sizes independentfrom the pixel grid, resulting in a UI that isdisplayed at a consistent size, regardless ofthe size of the screen.”
  3. 3. History: The PixelA device pixel (orphysical pixel) is thetiniest physical unit ina display.
  4. 4. Screen DensityThe number of device pixels on a physicalsurface. Often measured in pixels per inch(PPI).
  5. 5. Screen DensityCSS pixel ratio: 1.0 All non-Retina Macs, All non-Retina iOS devices, AcerIconia A500, Samsung Galaxy Tab 10.1, SamsungGalaxy SCSS pixel ratio: 1.3 Google Nexus 7CSS Pixel Ratio:1.5Google Nexus S, Samsung Galaxy S II, HTCDesire, HTC Incredible S, HTC Velocity, HTC SensationCSS Pixel Ratio:2.0iPhone 4 -5, iPad 3-4, Macs with Retina displays, GoogleGalaxy Nexus, Google Nexus 4, Google Nexus 10Samsung Galaxy S III, Samsung Galaxy Note II, SonyXperia SHTC One XCSS Pixel Ratio:3.0HTC Butterfly
  6. 6. ImplementationKey factors: Performance and AudienceDon‟t want to make assumptions about ourusers‟ device performance capabilities
  7. 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. 8. Design with CodeUse of CSS toreplicate UIelementsExample: gradientfills, dropshadows, borders, outlines, opacity, etc.
  9. 9. ResponsiveDesignSeamlessexperience acrossdevicesFirst, target a singlecolumn, mobile firstapproach and thenwork up / down
  10. 10. Using EMs / PercentagesUsing ems allows yourdesigns tobe resolutionindependent.Relies on defaultbrowser settings todictate a user‟s bodyfont sizeDesign for readability
  11. 11. CSS MediaQueriesAbility to target a varietyof 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. 12. Hi ResolutionImageryBeautiful, sharp andpolished userexperienceDouble the image sizemeans 4 times thepixelsCan cause slowdownload times andnegatively impactperformance
  13. 13. JavaScriptChecks each imageon the page to see ifthere is a hi-resversion on your serverIf a high-res variantexists, the script willswap that image in-placehttp://retina.js
  14. 14. Vector Graphics(SVG)Resolutionindependent,lightweight, andinfinitely scalableSupport across allmodern web browsersMuch smaller file typethan its bitmapcounterparts
  15. 15. Web FontsCrisp, legible,resolutionindependentIcon FontsFlexibleEach icon may beresized, colored,rotated and styledindividually
  16. 16. Case Studies
  17. 17. ima.tc/mopixelsMo’ 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. 18. ArtBabble.org
  19. 19. ArtBabble.org• Pictogram web font “Sociolico” used for socialicon buttons• Using CSS “background-size” property todownscale retina optimized images acrossthe interface• Responsive design
  20. 20. ArtBabble.orgWeb Font IconsPictogram web font “Sociolico”used for social icon buttons.ul.social-links li.twitter a:after {content: "l";font-family:socialicoregular‟;}
  21. 21. ArtBabble.orgCSS “background-size”Using CSS “background-size”property to downscale retinaoptimized images across theinterface.#nav ul#main-menu li {background:url(„../images/arrow.png‟)no-repeat right 13px;background-size: 9px 11px;
  22. 22. ArtBabble.orgResponsive Design• Use of media queries toadjust the layout accordingto device widths at 4 breakpoints• Shows what our site wouldlook like on mobile deviceswithout the media query(un-readable withoutpinching and panning)
  23. 23. IMAMuseum.org
  24. 24. IMAMuseum.orgCSS “background-size” property• Swapped retina background images with standard 72dpigraphics for older browsers• Added media-queries to ensure high-density pixel displaysare the only place high-res interface images are loaded• Used an inline image on the page as opposed to abackground image w/ CSS for the logo. Inline width andheight on images are supported in older browsers
  25. 25. IMAMuseum.orgCSS “background-size” propertyModern web browsers Old web browsers (IE8 and below)
  26. 26. IMAMuseum.orgDesign with Code (CSS)• Only two images used onthe right (the slideshowimage, and logo)• All shadows, borders withopacity, and backgroundcolors are achieved withCSS
  27. 27. IMAMuseum.orgCSS Media Queries• Use of media queries toadjust the layout accordingto device widths at 4 breakpoints• Shows what our site wouldlook like on mobile deviceswithout the media query(un-readable withoutpinching and panning)
  28. 28. IMAMuseum.orgJavaScript• Use of JavaScript to detect what image needs to be loaded• Custom JavaScript that works w/ Drupal. We created anImage Cache derivative for retina vs. non-retina images.• Use data attribute to define the url path for each of our imagederivatives.<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. 29. AIC LaunchPad
  30. 30. AIC LaunchPadHigh Resolution Imagery / Design with Code (CSS)• All UI elements createdthrough CSS• Heavy on photographicelements, initially chose touse retina optimized imagesthroughout
  31. 31. AIC LaunchPadHigh Resolution Imagery• Testing revealed if therewere more than 4 visibleretina images, performanceplummeted (even in thenative app).• As a compromise, wescaled the images back.
  32. 32. Future• User experience is always number one.• Avoid focusing on the device• Device agnostic future• Learn new techniques, stay curious.
  33. 33. Thank YouQuestions?Matt Gipson (@msg317) and Rita Troyer (@ritaelise)IMA Lab / Indianapolis Museum of Art, USAMW2013Thursday, April 18 2013

×