Web Design Tips and Tricks

Differences between XP Icons and MAC Icons

Get Web Design Tips and Tricks on mps-web-design.com. Differences between XP Icons and MAC Icons topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

The icons in an application are the soul of the application; they give it the modern and dynamic look the application has. Also, if the icons are intuitive – the end user will easily remember the task behind the icon – easy to memorize then the end users will definitely choose the respective application against one with clogged and strange icons. Icon designers are trying their best to make their creation as intuitive as possible so to make it easier for the end users to work with the applications.

Furthermore, a too colorful or dynamic look given by the icons of an application is not a good thing especially for the commercial applications. That is because these types of applications are used in the business sector where we don’t need too many colors; the need is for simplicity and efficiency.

The differences between applications are, in part, given by their icons; different applications have different styles of icons. To the inexperienced eye, it might seem that some of them are alike but in fact they are definitely dissimilar when it comes to style, sizes, colors and file types. If we are to compare XP stock icons with MAC stock icons we can easily see they are different: different style, size, color, file type. But most of all their differences come from the way the end users perceive the icons: to some of us XP icons look better and are more appropriately used then the MAC icons, but for other the situation might be opposite.

When it comes to XP icons, many people say that XP’s interface is new and more beautiful then the previous version of Windows. If we look at the new face of XP we will surely see the differences between this version and the previous version of Windows. Some people say, that at a closer look at the icons, we can observe that not all of them are new and beautiful. A few of the icons are used from the previous version without being improved at all. Some of them don’t even look like the new ones and they are not even lined up with the new icons. Other people complain that some of the icons were not even changed compared with the previous version, and moreover they were borrowed from other tasks. As an example we can say that some of the icons in the administrator components of XP look alike few of the icons in the admin section. Other users complain about few font icons that were “left behind”, meaning when comparing the icons in the new, larger Tile view with the traditional 32 x 32 pixels icon we can see that some of them are just scaled up from the smaller icon. Apart from the end users that criticize the new look of XP there are also users that enjoy the new face of the application. They think the interface is more appealing then the one from the old version, it is easier to change it, more easily to understand the tasks behind the icons, and basically the icons are more attractive. So, we can say that it all depends on the taste of the end users: some of them like and others don’t like the new style of XP icons.

Compared with XP stock icons, MAC icons have more good reviews. It can be noticed that not too many people have something to complain about the MAC icons. Generally, people are happy and delighted about the style and colors of the MAC icons. They don’t say like for the XP icons that are to colorful and bright, the end users believe that MAC icons are serious and well integrated into the application. But comparing the number of XP users with the number of MAC users, the proportion is disadvantageous for the MAC users and this is maybe why the number of complaints about the look and the integration of the icons is so small almost nonexistent.

The XP icons and MAC icons have different file type extensions and that is why they cannot be exchanged between applications unless you convert them. There are various applications that can convert MAC icons to be used in XP style applications and the other way around. This is of course an advantage because if you use both operating systems it will be quite difficult to adapt to both of them, so it is best to adapt the applications by using the icons from one of them (which ever you like best) for the other. Because the XP and MAC icons are different, icon designer must know from the start for what type of application are you going to use the icons. It is best to know from the beginning if the icons are for XP or MAC applications because their style, format, file type are quite different and converting them after finalization is not that easy. Above this, after conversion the icons will not have the same good quality as before.

Regarding the file type extension, XP icons use the .ico extension and the MAC icons use the .icns extension. Compared with XP icons, that always have the extension besides the name of the file, MAC icons do not always display extension .icns. Another difference between XP and MAC icons is that MAC icons are not like traditional icons, their custom image is not displayed on the file like an image but it is stored inside the file as data. Unlike the MAC icons, XP icons display the image they represent, being easier to identify them. Another difference between those to types of icons is that for XP icons the number of sizes most often used is of four: 8 x 8 pixels, 16 x 16 pixels, 32 x 32 pixels and 64 x 64 pixels, while for the MAC icons the common sizes are 32 x 32 pixels, 48 x 48 pixels and sometimes 128 x 128 pixels.

This post was originally published on May 13th, 2004. As others are writing about the topic, I thought bringing it out of the archives would be worthwhile.

A little recap

The idea of placing multiple states of buttons and other elements that are used in background images took its roots, I believe, from Pixy's Fast Rollovers. The CSS Zen Master extended this to another purpose in CSS Sprites: Image Slicing’s Kiss of Death. Didier Hilhorst came up with a nice application of this method, and I worked it backwards in Responsible CSS - Recycle your background images.

The idea behind the 'sprites' method can obviously be extended to any html element, and there are tangible benefits for doing this, just as long as the designer does his or her usual homework.

Benfits of using the 'sprites' method

What are the possible the benefits of using this method? Essentially it lies in faster download times for your web content.

Readers of Andy Kings book, Speed Up Your Site: Web Site Optimization will notice that this method reduces http requests and makes more efficient use of the data packets used to transfer files to the users computer, and that that is a good thing.

Packet size and http requests

From Web Page Design and Download Time, by Jing Zhi of Keynote Systems (seen here - pdf), cited in Andy's book:

The basic performance principle is therefore to make fewer requests and transmit fewer packets. From this principle, we can derive two basic design rules for wellperforming Web pages. First, reduce the overall size of the page, thereby reducing the number of bytes (and packets) to be transferred over the Internet. Second, limit the number of embedded objects on the page, such as images, each of which must be requested and transferred separately from server to browser.

They also found that it was the number of packets and not necessarily the overall size of the page that was important. If a packet could hold 1460 bytes (the figure given in the article) and your object was 1600 bytes, it would require two packets. They found that this object would transfer at the same speed as another object that was greater in size but still fit in two packets.

Potential payoff

The potential payoff for using this method versus individual images, then, is a faster download time due to reduced number of packets and fewer http requests.

Reducing http requests is easy. One file instead of two or three etc. is simple. But packet requests? That depends...

An example

The number of packets sent will depend on the size of the file and the users internet connection.

As an example, lets look at the fiftyfoureleven.com logo at the top of the page. When this design was first being coded, that link consisted of two 3.34kb images, one for the link state and one for the hover state. Now, by using one image that contains both states and simply bumping it back and forth depending on the hover state, that has been reduced to one 5.35 kb image. Right there is a savings of 1.33 kb. Good news.

Now, for arguments sake lets say that a packet can hold 1460 bytes (packet size for connections greater than 128kb/s = 1500 bytes -40bytes for tcp/ip headers). The two image method used 6 packets, 3 for each image (3.34/1.46, rounded up). The single image method uses 4 packets (5.34/1.46, rounded up).

Things are looking good.

How to optimize

In his alistapart article, Dave refers to the image that holds all of the sprites as his 'master image'. The key to benefitting from this method is to ensure that the file size of your master image isn't a bloated equivalent versus the sum of its pieces.

Conclusion

Great benefits can be realized when combining a master image from slices that fall well below the size of one packet, as that unused packet space goes wasted.

After doing a little more research, it seems that packet size can vary depending on the connection rate. That being said, it may be rather difficult to come up with a firm rule here. To play it smart and safe, try and:

• build master images that are smaller then the sum of their collective slices (by combining images of similar colors, for example) or
• rather than use a different distinct image for a certain element, reuse one that you already plan on using elsewhere.

This isn't exactly groundbreaking advice, however having seen the results acheived with the logo on this page, it can be seen that using the sprite method versus individual images at minimum does reduce http requests and even further it can reduce file size which in turn can reduce the number of packets sent.

More Articles: