Blog

One of my first icon projects for Campaign Monitor was to create a set of Apple iOS icons for our mobile web application. These are the icons that show up when you bookmark our mobile site to the ‘home screen’ on your Apple device. Now, with all of the iOS devices floating around out there, you can do things the easy way by creating one large icon which is then scaled down for that particular device, or you can do it properly by creating a pixel-perfect icon for each device. For the iPod Touch/iPhone 2.5/3G/3GS, the icon size is a miserly 57 pixels square. For the iPad, it’s 72 pixels square, and for the newer iPhone4, it’s a whopping 114 pixels square.

The challenge with iOS icons, or for that matter, any icon that will be used at multiple sizes, is that you need to come up with an idea that is memorable and interesting, whilst keeping things clear and concise enough that it is still recognisable at smaller sizes.

The value of sketching

As an interface designer, I have found that in this digital day and age, we don’t rough out ideas with pen and paper nearly enough as we should. Sketching allows you easily develop and expand upon simple idea in a few strokes. I find sketching especially useful for roughing out ideas for icons and logos, as well as general layout throw-downs. Even if you think you haven’t got a knack for it, practice makes all the difference. Don’t be scared to try. Even as early as a few months ago, I shied away from sketching out ideas because, to me, they looked mediocre at best, but as I kept pushing myself to practice, designing becomes a much more organic experience.

Push yourself!

One of the easiest traps to fall into is to stop sketching after a few ideas; even if you’re excited about a particular iteration, push on and try and play with at least half a dozen ideas. Even if it doesn’t seem useful at the time, they act as food for thought when refining and polishing ideas.

Refined sketches of my two main ideas

The design process

My general approach to icon design, is to start at the larger sizes with all the detail, then scale down to the smaller sizes, remove any superfluous detail that would get lost in translation, then redraw or tweak all of the vector shapes so that they snap to a pixel grid. This ensures that the icon retains the sharpness and pixel-perfection it needs to really stand out.

One thing I pride myself in with my interface work is the super-crisp and pixel-perfect look and feel. I combat blurry edges by setting a grid in Photoshop’s preferences so that I have a grid line every 16 pixels with 16 subdivisions. That gives me a grid line every pixel, with a solid grid line every 16 pixels for reference. Make sure ‘Snap to grid’ is checked under View > Snap To > Grid, and you’re golden. This great article by Marc Edwards of Bjango, runs you through a few different methods for getting pixel-perfect results when using the rounded rectangle tool. (The same premise applies to the majority of the shape tools).

Close-up image of my pixel grid in use and the snapped anchor points of the pie graph

One of the more difficult parts of this project was the fact that the icon couldn’t be branded. Because Campaign Monitor was created for designers to rebrand for their own clients, the final icons couldn’t directly reference Campaign Monitor as a company. All in all, I’m happy that as a white-label icon, it still manages to convey it’s meaning and is still instantly recognisable as a part of Campaign Monitor.

The refined and polished end products

Implementing the icons

When it came to implementing the finished icons, I came across quite a conundrum — all devices running iOS 4 return the same user-agent, regardless of the actual device, this means, there’s no way do individually target a device, on the operating system. Sure, I could’ve just used the larger 114 pixel version for all devices and let the OS scale it down, but the obsessive compulsive designer in me wanted to display the individually tweaked icons for it’s intended device. After searching around for ways to individually target the individual devices, and coming up short, I thought back to an article I was reading on A List Apart which discussed the use of media queries to load different stylesheets for different devices with different resolutions.

The code

After a little trial and error, I fell upon the idea of using the same premise of serving different stylesheets according to the pixel density of the device, and instead serving up individual icons instead. I put together three simple snippets of code which target each individual iOS device according to their pixel densities. 163dpi for the iPhone 3G/3GS and iPod Touch, 132dpi for the iPad and a whopping 326dpi for the iPhone4.

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 163dpi)" href="/link/to/iOS-57px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 132dpi)" href="/link/to/iOS-72px.png" />

<link rel="apple-touch-icon-precomposed" media="screen and (resolution: 326dpi)" href="/link/to/iOS-114px.png" />

If you notice in the above code I have used apple-touch-icon-precomposed. The addition of -precomposed stops iOS from automatically rendering gloss atop my icon and rounding it’s corners. If you do want iOS to auto-apply the gloss and rounded corners automatically (so you can supply a flat, square image), simply use rel=“apple-touch-icon”.

For more information on media queries, do check out the A List Apart article, and for an excellent example of media queries in use (for stylesheets), take a peek at Jon Hicks’ new journal for truly superb execution.

Uh oh! Why isn’t this working on the iPhone4?

iOS has an annoying bug for web app developers. If you use the apple-mobile-web-app-capable feature to indicate that your site should launch as it’s own app (ie. fullscreen, sans toolbars), rather than in MobileSafari, the OS creates a low-resolution version of your apple-touch-icon on the home screen:

Left: Icon as rendered on an iPhone4. Right: How it should render.

Easily creating your own iOS icons

If you’re looking to try your hand at creating an iOS icon, then you can’t go wrong with this excellent template by Sebastiaan de With which has base icons in all the relevant sizes for you to build upon. A quick little tip for those that want their site to render an icon on the homescreen when bookmarked, simply save out your icon as “apple-touch-icon.png” and dump it in the root directory of your domain.

I’m looking forward to sharing more tips and tutorials in the future, so keep your eyes peeled. For a sneak peak at some of my upcoming work, check out my Dribbble profile.