Five small business web design tools you can't live without

Getting your small business online can be difficult, until you have found the right combination of tools. In particular, creating a professional look and feel for your webpages is crucial for building trust and reputation (both hugely important for making sales).

This post isn't going to rehash the old favorites like wordPress, Joomla or Drupal. These CMS (Content Management Systems) are fairly well known and widely used. If you're not using one of these for your website or blog then you should definitely take a look.

Instead I thought I would list the online tools, relating to web design, that I can't do without. Tools that make the every day task of adding new pages, changing the look and feel of existing page elements, and updating code so much easier.

1. Firefox and Firebug

Firefox recently got into a bit of financial trouble before Google stepped in with a few dollars to back it up. Thankfully, the danger has passed and FireFox is set to continue doing a great job of building a world class browser.

Combined with Firebug, FireFox can help you to quickly improve your site's HTML, JavaScript, Image handling and CSS. Basically FireBug turns your browser into a real-time webpage code analyzer and editor. You can make changes to your code in FireBug and see them instantly on the browser. This saves your from having to refresh your browser every time you want to see what effect code changes have had.

There are also additional plug-ins that can combine with these to help you analyze page speed bottlenecks and more.

Even if you don't know anything about code, using these tools together can provide a lot of useful information about how your website is responding to page visits. Without doubt, the most important aspect of web design for me.

2. CSS3 Generator

If you hate having to code websites or webpages by hand, then this is the tool for you. CSS3 Generator is an online tool that allows you to create cool CSS3 effects in real time. Simply copy and paste the CSS code it generates into your own webpages and away you go.

Now, without knowing the first thing about CSS, it is possible to create some unbelievably cool effects, like:

• Border radius
• Box shadow
• Text shadow
• Multiple columns
• Transitions

There's actually quite a bit more to explore, so if you are in the mood for updating your website's look and feel with some flashy new CSS3, now's the time.

Remember, that before CSS3, the only way to achieve some of these effects was through the use of images. Using images slows down your website, which in turn can affect your SEO and PageRank. Replacing clunky images with CSS3 will make your website quicker and improve your SEO.

3. Flickr

Ok, Flickr isn't really about web design, but it does provide an endless supply of high quality free images that can be incorporated into the design of your blog pages. A blog page without images, after all, is not good design.

To make effective use of Flickr, bookmark a blank Flickr search result page (using a service like LinkDoozer) that filters results to only those with Creative commons licenses. These are images you can use freely on your blog, generally for non-commercial purposes, without having to pay.

It is likely you might have to attribute the image to its owner in the ALT or TITLE tag of the image, but that's a small price to pay - the alternatives being to take your own photos or pay for images using a service like iStockPhoto.

4. design-a-webpage

design-a-webpage.com shares similarities with WordPress in that it is an online platform for creating webpages. That's where the similarities end though. Whereas WordPress focuses on allowing you to create blog content, design-a-webpage takes your content and turns it into high converting, SEO optimized, professional marketing quality landing pages.

Not only is the underlying HTML, PHP, CSS, hosting, performance, social media integration and SEO handled automatically, but all the requirements of cutting edge landing page design are built right into each and every page.

design-a-webpage.com also has a number of neat tricks to make web design easier. For example, once you have created one landing page, you can simply "clone" it again and again. This allows you to edit the content without having to redesign each and every page - cutting your page creation time down to seconds.

There's an automatic one-week free trial for anyone who registers.

5. ColorZilla Gradient Generator

The ColorZilla Gradient Generator is a similar tool to the CSS3 Generator outlined in point 2. While they are both a real time online tools for generating CSS3, the gradient generator focuses specifically on providing flexible, powerful, beautiful and colorful background gradients.

Take a look at the "Connect with me" block at the top right hand side of this page. Notice that the orange background changes shade from left to right. If you're using Firebug, check out the CSS3 code used to do this. It might look like gobbledygook, but since I only had to copy and paste it without writing it out by hand, it was really no problem.

In addition, colorzilla has made sure that the code they generate is compatible with most browsers (certainly all major browsers), so you can be sure that any code you copy and paste will work the same in any browser.

You can also work with opacity and orientation, making almost any type of background gradient fun, quick and easy to create.

What tools do you use? If you've got some tools that you think are worth a mention, drop me a line in the comments below, or follow this thread on Twitter and Google+.

If you need help with your website design for SEO purposes, or otherwise, feel free to drop me a line using the contact form or view my consulting page.