I’m going to skip the long introduction to CSS Sprites as they have been discussed in detail (see ‘Detailed tutorials’ below) many times across many websites.

This post is primarily here to only showcase websites that use CSS Sprites.

What is an Image Sprite?

Basically, an image sprite is one big (master) image that contains many smaller images. Part of this master image is then used in different places on a webpage.

Ok, so why should I use this? Basically, it helps load web pages quicker as the server only needs to make 1 image request to the server as opposed to 27, say.

It’s tough to implement and not needed for a small site however for the larger ones, it’s strongly recommend.

You’ll have to see the showcase below to fully understand them.

CSS Sprites showcase

Please note: I was going to display the image sprites on this page but due to their large size, thought it best to link to them directly.

Google

http://www.google.com/images/nav_logo6.png

AOL

http://euhp4.aolcdn.com/os/repos/p/skn/blue_v1/12-blue_skin.png
http://euhp4.aolcdn.com/os/repos/logo/1-uk_logo_sprite

Microsoft

http://i3.microsoft.com/en/shared/…/cspSearchComponent/sprite2.png
http://i3.microsoft.com/en/shared/…/cspMscomNewsBand/NB_ltr.4.png

Yahoo!

http://d.yimg.com/a/i/ww/met/gsprite_071309.gifhttp://d.yimg.com/a/i/ww/met/pa_icons/uk_pa_sprite_063009.png

Xing

http://www.xing.com/img/v/header_r3.png
http://www.xing.com/img/s/button_r3.png

Apple

http://images.apple.com/global/nav/images/globalnavbg.png

CNN

http://i.cdn.turner.com/cnn/.element/img/2.0/global/icons/share_sprite.gif

Digg

http://digg.com//img/menu-current.gif

Dragon Interactive

http://dragoninteractive.com/lib/i/navigation/sprite.jpg

Bing

http://www.bing.com/fd/s/a/j.png

Amazon

http://g-ecx.images-amazon.com/images/G/01/gno/…/navPackedSprites_v12._V222883957_.png

YouTube

http://s.ytimg.com/yt/img/master-vfl117997.png

MySpace

http://x.myspacecdn.com/modules/common/static/img/header/searchBg.gifhttp://x.myspacecdn.com/modules/common/static/img/header/header001.png
http://x.myspacecdn.com/modules/splash/static/img/cornersSheet.png

BBC

http://wwwimg.bbc.co.uk/home/release-34-2/img/bgsprite.gif

Firefox (Thanks to Esteban)

http://www.google.es/images/firefox/sprite2.png

If you know of any other, please post them in the comments!

Detailed tutorials

CSS Sprites: Image Slicing’s Kiss of Death
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

CSS Sprite Generator

Please don’t complain, I’ve never used any of these!!

http://printf.ru/spritr/

You can upload multiple images using this tool and then generate the CSS code for the sprite.

http://www.floweringmind.com/sprite-creator/index.php

This tool is awesome. Upload your CSS Sprite image and then create the code for the various areas. (Difficult to get pixel perfect though)

http://spritegen.website-performance.org/

http://www.csssprites.com/

Conclusion

The big question. Should you use CSS Image Sprites?

For most people, the answer is NO. It won’t make a difference to most websites and will only waste your time.

If your website receives hundreds of thousands of hits daily then you should consider using CSS Sprites to ease user experience.

For web design agencies, I would say it’s a must to attract large contracts.

Well, in the end, it’s your choice. It probably good do use CSS Sprites at least once to get a good feel for it.

A few years ago, if a web developer was asked to name some content management systems, then there would have been a few on their lips that were hardly known or had any strength in how the web worked. This was because of the inexperience of the user and complications of the CMS’s which led to it being very difficult to customise or modify the CMS. That was then.

These days, the hard working teams behind many of the popular open source CMS’ have led to it being very easy and simple to customise the packages to the pixel. This said, there are many good designers who still find it difficult to say you can customise anything other than Wordpress in fine detail. I aim to show you that Wordpress isn’t the only solution which offers good flexibility (I agree it’s the friendliest however, with a bit more work, you can easily become just as good on many other platforms).

I have chosen 5 popular content management systems and for each of these, have chosen 5 stunning designs to show you that you can just as well achieve similar results as if you were using Wordpress:

• Drupal
• Joomla
• Magento
• Expression Engine
• Prestashop

Drupal

A very popular content Management system.

Joomla

Another Popular CMS. There is generally a debate about which CMS is better; Joomla or Drupal?

Magento

Enterprise level eCommerce shopping cart.

Expression Engine

A CMS which has lots of functionality and has its advantages above other.

PrestaShop

Another eCommerce platform to use if Magento is not for you.

Conclusion

To build a stunning site like any of the above, there are a few requirements:

• Creativivity
• Design Skill
• Time
• Development Experience. (Just a little will do…)

Over the last few years, we have seen some amazing website designs with many unique characteristics that distinguish them from the rest.

Having a great-looking site is probably the best method of attracting the attention of your visitors to your services – This is true for whichever industry you’re in – However if you’re a web design company or freelancer, then having a top looking site is a requirement.

I have gathered 20 great looking ‘inspiring‘ website designs. My apologies as you will surely have seen most of these but I’m sure you’ll forgive me this once!

Also, Be sure to read the short and sweet conclusion!!!

20 Inspiring Website Designs

Komodo Media

This is one of my favourites. I’m quite sure it speaks for itself. Be sure to play around with the foilage-0-meter!

Pays-Sub Gatine

Kulturbanause

ma.tt

Wouldn’t expect anything less…

Drupalcon

Yoast

This design is very recent. The use of illustration is amazing.

New concept

Did you ever think the colour brown could be utilised to be so effective?

Banjax

This is also one of my personal favourites. Basic. Simple, Elegant.

Outline 2 Design

Navigant Consulting

Candy Buquet

Mint.com

Agami

Icon Dock

Nice.

Nine Lion Designs

Wollshed Grove

foehn

You and I Graphics

Stylized Web

3.7 Designs

This proves you don’t need an incredible backround image and use all the colours in a rainbow.

Conclusion

You will all agree with me that the designs above are all top notch, unique, enticing… and most importantly – Inspiring. The big question is, why?

Most people out there are under the false impression that you have to be a great designer to achieve a great design. This is true… to some extent!

The more important factor is time and pre-plan. Although it may not seem like it, I can write with confidence that all of the designs I have listed above were not done in a few hours overnight. Lots and lots of planning was required along with a lot of time and hard work.

All of the designers initiated with some sort of inspiration. Everyone is different and so are inspired differently.

Inspiration can be found in the centre of town, on the mountains of Guilin, the Grand Canyon, the Sahara Desert, and even in the corner shop. My point is that it all depends on who you are. And accordingly, you need to search.

I hope to help you crack this through the interviews I will showcase here in the near future.