A quick and easy way to help web designers find the perfect colour combinations for their web site designs.

Selecting the colour scheme for a website design can be a difficult task. Finding colours that compliment each other, while also providing contrast, to highlight important content is often hard. This colour scheme must also be compatible with the client's field of business and their branding.

Colorcombos.com

Colorcombos.com is a great website that has a number of tools to make selecting the perfect colour palette much easier.

They have a large collection of colour combinations to inspire any web designer. You can view and compare any combination of colours side by side as well as overlaying text and they also have a tool where you can enter a url and it will display all the colours used on that website.

Think what colours mean to people

As well as selecting a combination of colours that look good together, you should also think about what those colours symbolise to different people eg. red can mean love and romance but also danger and activity.

For an interesting article that discusses this in more depth please visit the excellent Veerle's Blog : Choosing color combinations.

This also contains a link to an impressive Flash presentation - Color in Motion by Claudia Cortes which explains the meanings of colour in a fun and interactive way.

A short guide on using CSS to style lists and custom bullet points for your website.

Having recently discovered the excellent selection of free bullet images at Stylegala's Bullet Madness, it reminded me that custom bullet points on your lists can be a stylish addition to your website design if used correctly.

Apply CSS to your lists

With CSS you can quickly modify the bullets used on your lists. Using the list-style property you can change the default selection of the bullet point.

Produces

• list item 1
  • sub list 1
  • sub list 2
• list item 2

Custom images for bullets

You can also use images instead of the standard bullet point symbols.

Produces

• list item 1
  • sub list 1
  • sub list 2
• list item 2

If you want more control over how the lists are displayed then you can remove the list-style and use background images and padding to position your bullets and content.

Produces

• list item 1
  • sub list 1
  • sub list 2
• list item 2

These simple examples show how you can quickly change the way your lists look with minimal changes to your CSS.

Lists are also great used in combination with CSS to produce website navigation menus as this article over at A List Apart demonstrates.

A short guide on ways to embed media on a website, with links to a number of widely used scripts.

There are a wide range of methods and scripts (both free and commercial) for embedding media on the web. This short list contains methods for embedding Flash, video and images using scripts that are search engine friendly, degrade gracefully and can be used in valid html and xhtml documents.

SWFObject (Flash)

Used by a huge amount of websites, this small script uses Javascript snippets to insert Flash content into your normal html website. This means that search engines will spider your normal html content and users that don't have Flash will still see a complete website using your non-Flash alternative content.

Lightbox2 (Image slideshow)

Again this script is everywhere and it is a great example of how scripts can be easily used to enhance the user experience on the web. It uses Javascript and CSS to overlay an image in the browser while fading the background. Images can be grouped which then lets the user cycle round the images.

Embed QuickTime (Video)

Embed QuickTime is a jQuery plugin that helps you embed QuickTime movies to play directly on your webpage, instead of redirecting your video to a separate page or forcing you to embed a video using Flash. It changes regular image links to the embedded QuickTime video when they are clicked. It works with .mov, .mp4 and .m4v files.

A short guide to some of the best free and low price stock photography web sites - a useful resource for any web designer.

The importance of selecting the right stock images to use on your website is often not fully appreciated. The difference between good and bad stock photos and images can be vast and are a vital factor in good web design. A picture can say a thousand words after all, so careful selection of quality and relevant stock images is important.

There are a large number of free (or very cheap) stock photography web sites out there and while it may take more effort to find the correct image (compared to using the large expensive sites) if you are on a tight budget then it is definitely worth it.

Here is a short list of some of the more popular free (or very cheap) stock photography websites.

• stock.xchng - Probably the best free stock image website and one I use regularly.
• Stockxpert - A chargeable service from the makers of stock.xchng. Lots of useful images at low prices.
• iStockphoto - Another very cheap but professional stock photography website that is one of the major players in the industry. Its business template has been copied by many other stock photography websites.
• Big Stock Photo - Another excellent site to rival iStockphoto.
• Microsoft Office Clip Art and Media - A range of more than 150,000 free images and sounds from Microsoft.
• Wikimedia Commons - A large range of images that very widely in quality.
• Photos.com - A slightly more expensive service but useful as a tool to compare the range of images and quality available. If you require large amounts of stock photographs then a subscription to a site such as this may save you a lot of time and money in the long run.
• Best of the rest
  • Gimmestock.com
  • Shutterstock
  • Freepixels
  • Can Stock Photo
  • Fotolia
  • dreamstime