Web Icons & the iPad Retina Display


By

I am now a proud owner of the brand new iPad 3 and must admit I’m rather impressed. I’ve never been an Apple fan but I think the new iPad 3 Retina Display is truly something to behold. The pin-sharp, full HD screen has the potential to make your websites and apps look stunning. But beware, at such a high resolution raster graphics can let the side down.

This quick tutorial will cover one approach to creating resolution-independent scalable images that will look great on any screen at any resolution.

The Process

A project I am currently working on requires a simple home icon. To begin the icon design process I always follow the same steps.

Visual research

I always start by jumping into Google and doing an image search. This helps stimulate ideas in terms of form and stylistic treatment. The focus here is on ‘inspiration’. Just mimicking nice examples you find not only creates a risk of litigation but can drain your creative motivation.

Icon research

Searching for the term ‘Home icon’ resulted in a very clear direction. Whilst it is good to be original and not follow the other sheep, it is far more important that the icons fulfil their purpose. Icons need to be intuitive and ultimately instantly recognisable. Usability is vastly improved if you use familiar conventions that people don’t need to think about. They should instinctively know what the icon represents.

The problem

Using raster images (.gif, .jpg, .jpeg) at a resolution of 72dpi has long since been the standard approach for creating web icon graphics. This is fine if you know the icons will only ever be displayed on a standard resolution screen (72 dpi) and there is no requirement for zooming or scaling. The new iPad has now thrown a spanner in the works, causing your 72dpi raster images to look fuzzy and pixelated compared to the crisp, clean appearance of text and other html elements. This contrast in visual quality can dramatically deteriorate the look and feel of an icon.

Problem with raster images on the iPad

One solution could be to detect the screen resolution and serve larger images but this will bloat the file sizes and add yet more http requests, further slowing down page download times. The more elegant solution is to create icon graphics that are resolution-independent. Enter Scalable Vector Graphics!

SVG

Poor old Scalable Vector Graphics. It’s been an official standard since before Internet Explorer 6 was released yet has never gained much of an audience on the web, certainly not the audience it deserves. Just as SVG was beginning to establish browser support, along came the canvas tag, stealing the thunder of dynamically generated client-side images. Despite all the attention being paid to canvas, there’s still a place for good old SVG, particularly for developers looking to replace plug-ins like Flash for data visualization or ensure graphics look crisp at any resolution.

Wikipedia definition:

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.”

An open language for an open web

The web is all about open standards and unencumbered technologies. W3C standard SVG fits the open web perfectly. An added bonus is that SVG graphics, in the majority of cases, have a much smaller file size than their raster counterparts.

The icon

Following the visual research phase, it became immediately apparent what the form off the icon should be. In the context of this project the style needed to be simple and minimalistic.

Having a clear picture in my mind of how the final icon should look I jumped into Adobe Illustrator 5 to create my SVG home icon.

To begin with I created the individual components required for the home icon.

Once the icon components are ready, it’s simply a case of combining them into a single icon, then simply save the icon using the .svg extension.

SVG in the browser

Now that we have a low file size, resolution-independent, scalable icon, it’s time to implement it into the web page.

This is a simple task following the same approach as used with raster graphics: by using CSS to apply the SVG icon as a background image. In this case it will be an html link.

The HTML

<a class="btn_home" href="#"></a>

The CSS

a.btn_home
	{
	background-color:#FFF
	width:45px;
	height:40px;
	position:absolute;
	top:20px;
	right:0px;
	margin:0;
	z-index:999;
	background:url(../images/icon_home_svg.svg) #FFF center center no-repeat;
	background-size:30px 30px;
	cursor:pointer
	}

The result

We end up with a neat, standards-based solution to our original problem. This will look good at any screen resolution, and retains a very small file size. As it’s driven by CSS as well as SVG, there’s plenty of flexibility to achieve different effects and to fit in with different designs without having to alter the SVG file.


Top
This page may contain affiliate links. At no extra cost to you, we may earn a commission from any purchase via the links on our site. You can read our Disclosure Policy at any time.