Sep 5

Resolution Independence and One Web Designer’s Approach

the web is a brave new world

Web designers can’t design the way we did a year ago.

Since its inception, progress in the world of web development has been swift. But come on, this past year was exceptionally progressive with the widespread adoption of high-resolution devices of all shapes and sizes. The “Resolutionary” iPad, the 493 flavors of Android tablets, and…drumroll please…the Macbook Pro with Retina Display.

With high-res devices, it’s like looking through a microscope with 20/10 vision. Designing like we did a year ago before the advent of these devices would be like asking people to wear miscalculated eyeglass prescriptions. 

The bar has been raised and it’s up to us to build a more beautiful web.

The new

When planning a redesign of the new, I knew I had to approach matters differently with high-res devices in mind. But I had no idea how much I’d learn along the way.

Here are five tips and a few tools to make your designs look great on any device, regardless of resolution.

1) Use as much CSS as possible

Before you export that rendered graphic from photoshop, stop and ask yourself if you can re-create it using CSS. Because it’s code, CSS loads faster & looks great on every device imaginable. Plus, with CSS, your site will scale up nicely when showing it off on the big-screen to your significant other who doesn’t really understand what you’re asking them to praise you for.

CSS looks great on every device

And I’m not just talking about buttons. You’d be surprised what the kids are doing with CSS these days. I posted a few of my CSS illustrations for the site on CodePen.

All CSS/jquery animated timeline

2) You don’t need two of every animal—just one big animal.

For those beautiful photos and graphics that shan’t be rendered in CSS, there’s still room on the web for raster images. I will say I was quickly overwhelmed at the thought of creating and maintaining two sets of graphics for the meridian site. That would mean twice the code and additional media queries.

As you may know, graphics on pixel-dense devices look best when they’re exported at twice the pixel dimensions of the original design and then scaled down using CSS. Furthermore, they look really crappy when you don’t do this. However, your old computer monitor isn’t going to benefit from displaying giant images sized down, thus the inclination to create two sizes for every image. 

Use CSS to scale down @2x images

In the end, I decided it isn’t necessary to maintain two sizes if you can keep the page-load zippy. For small to medium graphics, I sized them up to 200% before exporting and called it a day. For very large images like the homepage slideshow backgrounds, I kept them at 100% due to file size concerns. Unfortunately, there’s still compromise in the battle of beauty vs. bandwidth. My suggestion? Be reasonable. Scale up things like raster icons to make them crisp and let your huge blurred hero shots live in 1x world a bit longer.

I optimized my png’s using ImageOptim—a drag and drop OS X app that removes extraneous file information in png 24’s. For a more hands-on and lossy compression, check out ImageAlpha. Both are free.

ImageOptim reduces png file sizes

Here’s the CSS I used for all my @2x images:

#logo {
display: block; 
width: 100px; 
height: 100px; 
background: url(/images/200x200_image.png) no-repeat; 
background-size: contain;

I made sure to specify a width and height that’s half the size of my image. That way, “background-size: contain” scales it to the correct size.

Unfortunately, I had to concern myself with how the site looks in Internet Explorer. I setup an IE-only stylesheet and added the following code for each image:

#logo {
background-image: none !important; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/images/200x200_image.png’, sizingMethod=’scale’); 
-ms-filter: “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’200x200_image.png’, sizingMethod=’scale’)”;

Here’s what looked like in Internet Explorer before I added the IE-only stylesheet and told it to recognize html5 tags using the html5shiv script:

Internet Explorer. Before the fixes. Microsoft. #goingplaces

3) Sprite is a Soda

What about image sprites? You know, those giant image sheets where every UI element on your website is part of the same image and you just move it around using the background-position property? Yeah, that’s not gonna fly if you use the method I’ve detailed above for accommodating versions previous to IE10. If you can give IE the bird, or if you want to save out two sizes of your sprite, then sure, sprite it up @2x and set the CSS background-size property to the @1x dimensions (background-size: 100px 100px;). I, however, recommend drinking Sprites over designing them.

4) Icon fonts! Icon fonts! Icon fonts!

For solid-colored icons you may want to reuse in various colors, at various sizes, with various css effects, don’t use images. Make them into a font. They’re so much more scalable and versatile. Plus, you’re sooooo not cool if you don’t use icon fonts.

Icon fonts are more scalable and versatile than images

You may be familiar with services like that generate web fonts to implement using @font-face. Well I came across this really cool web app called icomoon that lets you upload custom SVG icons and then generate webfonts in .EOT, .SVG, .TTF, and .WOFF formats, along with the CSS to implement them.

*Side note: SVG’s alone can be pretty large, and they can’t be read by every browser. It’s best to offer “lighter” formats alongside SVG’s.

Some great articles on creating and displaying icon fonts:

Displaying Icons with Fonts and Data- Attributes 

The Making of Octicons

5) LESS CSS is such a time-saver

Ok, a bit unrelated to resolution independent design, but you should be using LESS or SASS to create your CSS stylesheets. On this project, I used LESS. LESS allows you to write variables, operations, and functions in your CSS and then compile to valid CSS on the client-side using a jquery extension. It makes things like changing colors, adding multiple vendor pre-fixes, and designing dynamic grid layouts so much faster.

LESS CSS is a miracle. And it’s so easy to use.

For development, it’s great to use the less.js file to compile. Before going live, I’d recommend using an app like SimpLESS to compile minified CSS and decrease load time. See, this is related to designing for high pixel densities! You’re decreasing load time so your giant images can increase it.

I also used CodeKit to minify my jquery files before launch.

And there you have it. Now let’s rid the world of fuzzy websites. Can we start with this one? It’s due for a refresh.

Take a look at the new Go ahead, zoom wayyyy in. I dare you.