Sights, Sounds & Tasty Treats

Resolution Independence and One Web Designer's Approach

Wed, 05 Sep 2012 08:10:00 -0700

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 meridianapps.com

When planning a redesign of the new meridianapps.com, 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 meridianapps.com 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 meridianapps.com 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 fontsquirrel.com 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 meridianapps.com. Go ahead, zoom wayyyy in. I dare you.

Color Autonomy in Website Theme Development

Sat, 30 Apr 2011 16:32:00 -0700

same transparent png, multiple theme colors.

As the thirst for website theme design seems unquenchable and ever-increasing for development within popular CMS’s like wordpress, drupal, joomla, tumblr, etc… I thought it’d be helpful to offer some tips to save time for designers & developers alike, when creating themes where multiple color options will be made available.

A prevailing myth out there in the interwebs is that a theme needs to be black, white, tan, or gray in order to appeal to the masses. Paint your house neutral colors so anyone can picture themselves living there, right? Well what if all it took to repaint a room was a little touch up over the nail holes? See, the truth is, website themes don’t need to be neutral-colored to be color autonomous. Let’s take a look at a theme I’m designing for a client and I’ll show you what I mean.

the inset circle and star is the same transparent png.

By designing illustrations, gradients and textures that can lay atop a variety of colored backgrounds as transparent png’s, you save the hassle of exporting a new graphic every time you add a new color option.

Just make sure you use the “normal” blend mode on all layer effects and a grayscale color fill, varying your fill opacity when creating these png’s so they look great on any color.

use the “normal” blending mode and a grayscale color.

Set up your photoshop file separating elements that are color-centric from those that apply to all color options. (ex: all your text will need to be a different color based on the color option. On the other hand, the same social media icons - pictured above - as well as the same bullet point arrow icons - shown below - can be used for every color option).

separate color-centric elements from color autonomous ones.

Lastly, images are quickly becoming a thing of the past for things like patterns, buttons, and other UI elements. Use CSS3 and awesome tools like www.patternify.com to generate Base 64 patterns to insert into your CSS and lay atop your different colored backgrounds.

So remember, you don’t always need to go color-neutral. Just get smart about how to stay color-autonomous.

Getting Physical with Mobile Design

Fri, 15 Apr 2011 11:30:00 -0700

san diego’s gaslamp quarter app

This is a shot of the home screen for an app we’re working on for the gaslamp district in san diego…another meridian-apps location. Trying to get a bit more “physical” lately in designing to fit the physical environment of a place. Instead of using the standard rounded rectangle “feature” or ad tiles that apple set a standard for, here I decided to make the lamp post banners you’ll find in the gaslamp clickable.

Check out the full view - http://cl.ly/2U251d0q253q1i170d2v

Adventures in Letterpress Printing

Thu, 14 Apr 2011 18:02:00 -0700

So today I took a dive into the world of letterpress printing. For those who don’t know what letterpress printing is, it’s basically relief printing using a certain type of press with a “type-high bed” and movable type. It’s really popular now with the new vintage craze among designers and it makes business cards and flyers look super fancy.

There are however, some important things to remember when preparing files for letterpress printing. These are things I had to learn, so I figured I’d pass them on.

tip #1: keep it to 1 or 2 pantone colors

First off, it’s important to limit your designs to 1-2 spot colors. Using more than 1-2 makes it tricky for the printer and raises cost significantly since each color needs its own run through the press. Make sure your colors are spot and not CMYK.

tip #2: Use at least .25 pt lines & 6 pt fonts

Don’t go smaller than 6 pt font for dark ink on light paper, and no smaller than 12 pt font for reverse type. Otherwise, you run the risk of your reverses clogging up on the press.

And there’s the quick and dirty. Check out Boxcar Press for more detailed info on letterpress printing. I found it to be super helpful.

You can see some great letterpress designs at carddsgn.com.

Oh, and if you’re interested, here’s a full view of my letterpress business card concepts.

Jacksonville Jaguars

Mon, 11 Apr 2011 14:06:00 -0700

grass ads are the future

Working on some designs for the Jacksonville Jaguar Stadium app. I’ve never lawn-mowed feature tiles into grass before. What do you think ;)?

Portland Art Museum

Fri, 08 Apr 2011 17:33:00 -0700

Portland Art Museum on meridian-apps

Here’s a shot of the Portland Art Museum app I designed to exist within meridian apps.

One App. Many Flavors.

Fri, 08 Apr 2011 17:32:00 -0700

introducing meridian

Some shots of potential “places” I designed within the Meridian App. One of the really cool things about this app is, unlike most platforms (facebook, google, myspace), Meridian accommodates branded design for every location found within the app. Each place is designed to be visually consistent with itself, not with some larger dull and faceless platform.

However, if Meridian takes over the world like we’re anticipating ;), my hope is that each location will enlist the help of designers in creating their place - lest we become the dreaded, fully customizable, and all but deceased Myspace. I’m confident that my brilliant friends here at Spotlight Mobile will come up with spectacular tools to avoid DIY disaster.

Image-free Buttons with CSS3

Fri, 08 Apr 2011 17:31:00 -0700

photoshop / css3 throwdown

Been digging into some CSS3 sweetness. Respectable browsers (sorry IE) can render things like border-radius and multiple box-shadows. Still looks plain and stupid in Internet Explorer, but IE users should be accustomed to seeing the world through ugly glasses by now. Above, you can see how close I was able to come to my original design by using these CSS3 properties. I’ve listed out a few of the key ones here…

-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
border: none;
-webkit-font-smoothing: antialiased;
-moz-outline: none;
-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.2), 0 1px 0 0 #64add7 inset, 0 31px 0 -10px #3081c1 inset, 0 0 0 3px rgba(124,149,171,0.2);
-moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.2), 0 1px 0 0 #64add7 inset, 0 31px 0 -10px #3081c1 inset, 0 0 0 3px rgba(124,149,171,0.2);