Ways to Make your Banners More Click-able

The main purpose for creating online banners is to increase the viewership of your website. Based on researches, I think there are some points that we can consider when making our banners so they will look more "click-able". Do share with us if you have other interesting and useful ideas as well! Let us update the list together.
 

Use Contrasting Colors

Do not use colors or a design style that blend into background of the website that you are putting your banner at. It will make your banner look much less visible than others who use total different color themes.
 

left: less contrast colors VS right: more contrast colors

 

Keep the File Size Small

People will not wait for a large banner to load finish before scrolling down to read further on the content. Make sure your banner is small in file size and be one of the first few images to complete loading when visiting the website.
 

left: slow loading image VS right: fast loading image

 

Include a Call to Action

A short phrase like "Find out more" or "Sign up now" will better capture people’s attention. It also allow them to roughly get an idea of your banner nature, whether are you selling a product, sharing an article or signing up for an application.
 

left: without call to action VS right: with call to action

 

Subtle Animation is Useful

Animated objects or short movie clip make great banners. Some designers also integrate a small flash game which is enticing people to play and click on them. But of course, make sure your file size is kept small, or do your preloading progressively.
 

left: without animation VS right: with animation

 

Straight to the Point Heading

Keep your message short and straight to the point. Make sure people can understand the purpose of your banner and the benefits that they will get if they were to click on it.
 

left: general heading VS right: specific heading

 

Create an Obvious Button

Include a good button design within your banner so it will look clickable instead of a plain picture on display. Try to make it obvious that people can click on your banner.
 

left: without button image VS right: with button image

 

Track the Statistics for Banner Clicks

This is very useful in understanding your own performance after every banner design. You will be able to identify which are the more effective approaches towards your audience and apply them throughout your future works.
 

19 Popular CSS Tools For Web Developers and Designers

1. CSS Type Generator

CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content.

2. Drawter

This tool gives you the possibility to draw your website’s code.

3. CSS Sprite Generator

Very helpful tool to generate sprites for your web projects.

4. Deploy

“Whenever starting a web project, I used to always begin with the tedious process of creating the basic framework structure for the site. This included creating folders for CSS and images, downloading and including jQuery, and adding a CSS reset, among other things.”

5. CSS Compressor

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

6. Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

7. Button Maker Online

Use this online tool to easily and visually create those popular “XHTML valid” micro buttons (80×15). You can also opt for the larger 88×31 button instead.

8. CSS Layout Generator

This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.

9. CSSFly

CSSFly is a web 2.0 tool for easy editing websites direct and in real-time in your browser. Simply edit the (X)HTML-code and the external Style-Sheet files.

10. CSS Button & Text Field Generator

Very helpful tool to create buttons and text fields.

11. CSS Colors Palette Generator

Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.

12. Spanky Corners

‘Spanky Corners’ is an experimental technique for using only CSS to produce ’round-cornered content boxes’ with semantically pure markup. It does not require JavaScript to work

13. Replace CSS Colors Editor

Change the entire color scheme of your site with this CSS Color Editor.

14. The Box Office

The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

15. EM Calculator

Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design.

16. Page Maker – The Generator Form

CSS Source Ordered Variable Border 1-3 Columned Page Maker.

17. Clean CSS

A tool to optimize and format your CSS.

18. W3C CSS Validation

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

19. Markup Maker

Markup Maker takes a simple list of page ids that you enter and converts it to a valid XHTML/HTML document (scaffolding, if you like). Now includes HTML5 support