1. Resolution Independent Progressive Enhancement or: How I learned to Love Scalable Vector Graphics

    png vs svg

    Unlike in print design, there are very few constants Web designers can count on. In the very recent past we had a standard width of 960 pixels to go by, then responsive Web design came along and changed all that. Now we’re seeing the proliferation of high resolution devices make 72dpi a relic of the past. With their extremely small file sizes and resolution independence, vector Web graphics look like a great way to address this new issue. And while SVGs aren’t appropriate in all cases, I’m going to demonstrate how and where to intelligently fold them in as progressive enhancement.

    SVG Basics

    For the uninitiated, (S)calable (V)ector (G)raphics are code-based images that render with paths instead of pixels — think Adobe Illustrator instead of Photoshop. The key benefit of this being that since their shapes are calculated with math, they can be redrawn at any size, effectively making them resolution independent. They are also built with XML, which means they can be searched, indexed or scripted as such. In other words, SVGs are a smart, efficient, flexible, and open format perfect for rendering small detailed graphics like logos and icons with razor-sharp clarity.

    Ways to Implement SVGs

    There are a number of ways to incorporate SVGs into your site. One method is to write the raw XML code and inject it directly into your markup. This works as long as you’re able to use HTML5:

    <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="20" cy="20" r="20" fill="#fac905" />
    </svg>
    </body>

    The above example is pretty simplified, so let’s say you have a more complicated shape like an icon or logo. In that case it would be far easier to create the graphic with a vector drawing program like Adobe Illustrator and then grab the raw XML output and drop it in your markup. Alternatively, you could just save that graphic as an .svg file and reference it like any other linked graphic:

    <img src=”logo.svg” />

    But my favorite way to use an SVG is in a CSS background image. CSS3 lets us do some really cool things like multiple background images, or a background color behind an SVG with a transparent background, and even the ability to resize the image! Create a single master logo at one size, and resize to reuse that same graphic throughout your entire project:

    #logo {
      height: 40px;
      width: 40px;
      background-image: url(“logo.svg”);
      background-size: 40px 40px;
      background-repeat: no-repeat;
    }

    Browser Compatibility

    By now you are probably wondering if you can start using SVGs. The short answer, like everything else, is “kind of.” As of today, all current versions of the major browsers have basic SVG support. However, if you plan to support legacy browsers you may run into some problems depending on how you choose to implement your SVGs. For an in-depth look at browser compatibility I recommend checking out caniuse.com.

    SVGs as Progressive Enhancement

    To address the growing popularity of high resolution displays like Apple’s iPhone, iPad and the new high-end MacBook Pro, many Web designers are creating multiple sets of bitmap graphics; one at normal resolution and one at high resolution. This may seem fine for now, but only two resolutions are being addressed by this approach. Who’s to say that in a couple years from now we won’t have more? Cutting a separate set of graphics for every resolution presents a scalability issue and this is where I believe SVGs can really shine.

    With media queries, it’s possible to selectively serve SVG replacements only to those devices that can use them. This is possible because in addition to dimensions media queries can also detect for pixel density. The following query targets Retina Display devices, non-Apple devices with the same resolution, as well as some Android devices (like the Samsung Nexus) that have a slightly lower resolution display:

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { 
      #logo { background-image: url(“logo.svg”); }
    }

    The first part of the query limits its effect to screen output only. The second part declares the resolution by device-pixel-ratio and is only for webkit browsers like Chrome, Safari, and Mobile Safari. The third part declares the resolution as well but in dots-per-inch (or cm), and is meant to cover everything else. To calculate the value for dots-per-inch multiply the device-pixel-ratio value of 1.5 by 96 to get a resolution of 144. To find out why this works read this W3C Working Group blog post. The third part is a proposed new unit of measure, dots-per-pixel, which will do away with extra math in the near future. The final part of the media query may be the most important, the use of min- for minimum. This applies our query’s rules to all resolutions above the one specified.

    In the above execution, if a device doesn’t meet the criteria of the media query it’ll simply display the normal resolution bitmap image you’ve specified. And here’s the best part, SVGs’ resolution independence makes them immune to changes in pixel density so there’s no need to create any more graphics! For those concerned with bandwidth — which should be all of us, really — try using two pixel density queries to specify your background image instead of overwriting a default. This ensures that only one asset gets downloaded:

    @media only screen and (-webkit-min-device-pixel-ratio: 1), (min-resolution: 96dpi), (min-resolution: 1dppx) {
      #logo { background-image: url(“logo.png”); }
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
      #logo { background-image: url(“logo.svg”); }
    }

    As you can see, combining SVGs with media queries can make for a powerful, future-ready, one-size-fits-all strategy for high-resolution image replacement. If you have any questions, concerns, or further insights on the subject feel free to get in touch via Twitter; I’d love to hear from you!

    Note: At of the time of this writing Firefox does not support high resolution displays, but this has been accounted for and the media query should perform as expected when that time comes.

  2. The Benefits of Prototyping and Designing in the Browser

    A little post for my day job on how prototyping and designing responsive sites in the browser increased transparency, accuracy, precision, and agility on a recent client project.

  3. Fixing the iOS Orientation Bug — In Three Steps

    Read More

  4. University of Michigan Medical School gets the Responsive Treatment

    Read More

  5. Archetype is a free, minimal, customizable, responsive Tumblr theme built by me. Let your content stretch out in style — see it in action, or install it here. 

    Archetype is a free, minimal, customizable, responsive Tumblr theme built by me. Let your content stretch out in style — see it in action, or install it here