Finding the right web design company to design your website can be a daunting task. There are so many web design companies out there (at least 200 in Vancouver alone), so hopefully this guide will help you make a good decision.

1. Know your own business
The more you know about your own business and what you'll need in a website, the more prepared you will be when you speak to a web design company about your needs.

Do you know who your target audience is? What kind of image you want to portray online? What kind of emotional reaction you want to elicit?

These will be important questions that your web design company should want to understand before they start work on your site.

Also, do you know what your budget is? You don't need to divulge this information when you're researching web design companies, but at least have an idea of what you can invest.

For example, having a $1,000 budget will narrow down the field considerably -- especially if you're looking for something more than a 6 page brochure site. Remember, you get what you pay for.

2. How long has the web design company been in business?
While this may not be a major determining factor, it can still be important. A company that has been in business longer will more likely have the experience and processes in place to take you through the development process smoothly.

More established companies will also usually have a faster turnaround time on your project, and be able to troubleshoot issues before they arise.

3. Do they have samples of web design work that are in line with what you are looking for?
Look through the company's web design portfolio. Do you like the work? Are there web design projects in the same "style" of what you want for you own website?

Take a look at the actual websites (beyond the screenshot, outside of the portfolio). Does the website function well? Is it easy to navigate? These are important factors to consider beyond the "look" of the site.

4. Do they design using proper web standards?
Some people recommend to look for web designers/developers that have some kind of formal education. Frankly, I disagree. I know quite a few designers that went to school, and don't do good work (no names mentioned).

More importantly, look at the work. Does it follow proper web standards? While you may not what proper standards are, there are ways to find out.

One way in particular is to validate a website using the W3C's (World Wide web Consortium) Markup Validation Service at http://validator.w3.org/.

Take the web design company's address and plug it into the validator, and see if it validates. Do the same for any of their client's sites that you like.

Educated or not, the proof of qualification is in the work.

Hopefully, these tips will help you in your search for a web design company - in Vancouver, or anywhere else.

This list will expand over time as I add to it, but here's a few (about 100) web design companies in Vancouver to start:

0hour Creative Media
25 Hour Design
4am Group
604 Media
Able Web
AL6400 Solutions
All Crystal Clear
Asgard Forge
Astatic Solutions
Autobahn Web
awdd media
Barezan Media
Be Seen
Bloody Mental
Bluelime Media
Brave Media
Centauria Design
Chunyitech
Click.net
Coreillia
Creative Gorilla
Custom Fit Online
Darvak
Datacentrik
DataCreatives
Deejays
D-Mack Media
Double Dog Graphics
DPG Associates
Duess Design
Empty Project
Eqqy
Escunid Web Development
Excellence Lab
FCV Technologies
Free Spirit Media
Fromson Consulting
Frynge
Glacier Design
Graphically Speaking
iContext Internet
Idea Lounge
ikrave
Image X Media
Infectious
Inxtera
JAM Consulting
JD Media Design
Jklassen
Jolted Pixel
KDG Web Design
Maple Ridge Web Design
Mastermynde
Media Corner
Medora Solutions
Merge
MJA Impressions
Montage Web Design
Mr Website
Netgenetix
Nine Mile Studio
Parm Web Designs
Pbase Media
Pixel Perfect
Pixel Science
Portal 80
Professional Business Systems
Propagandahaus
Relentless Technology
Rotten Pumpkin
Seascape Web Design
Sharkbit Design
Shim Design
Simple Creative
SmartWeb
Speedy Web Concepts
Spyder Baby
Star Designs
Sterlingklor
Stir
Switch Interactive
Synthium
Techness
Think Profits
Thinking Cap
Tidal Multimedia
Tundra Interactive
Twelve Seas Web Design
Unique Web Development
Valley Interactive
Veratta
Vibe9 Design
VKI Studios
Wallop Creative
Water's Edge Media
Web Weaver
Web4Business Design
West Coast Web
World Exposure
Xdigitalnet

Note: This list was compiled by hand, so if you find any broken or incorrect links, please let me know.

Search engine optimization isn't particularly difficult, but there are some things that can definitely work against you if you let your web designer run rampant on your site. Here's a quick guide to ensure you don't shoot yourself in the foot.

When it comes to web design, most designers are just that -- designers. Their first priority is to come up with something that looks good and makes a great first impression, but sometimes that means that functionality, ease of use, and search engine optimization go out the window.

Web Design Don'ts

1. Don't build an all Flash website. Ah, Flash. So cool, so animated and lively, but oh so impractical (in most developers hands).

Search engines cannot index Flash website. 'Nuff said. If you want to rank well in the search engines (and you're not a huge, well-established online brand), don't build an all Flash website.

Ideally, you can use Flash elements within an HTML website fine. From an SEO perspective, you'll be fine.

If you want absolutely must have a Flash website, make sure that it's not built as one big movie file. This is how you see most Flash sites designed. You navigate around in the site, decide to hit back in your browser, and

2. Don't use images for all of your text. I still see this here and there and, frankly, I'm surprised.

If you have a web page where all the blocks of text are comprised of images, good luck getting rankings. In the same way that search engines can't read Flash, they can't read images either. Sure, you can make sure that you're using the image ALT tag, but all image text is bad.

More stuff to come...

HTML Web Design Resources

W3Schools
I end up here a lot because they tend to be at the top of the results whenever I google an HTML tag.

They've got tutorials on pretty much anything web-related: HTML, XHTML, CSS, XML, Javascript, PHP, ASP, and a whole ton of others.

Most of the tutorials also have demos where you get an example of a command/tag and can test changes live.

Webmonkey
They've been around for ages. Tons of guides and tutorials to help you learn how to develop for the web. When I first started building websites in 1998, Webmonkey taught me a lot. Now I tend to stick to W3Schools above, but I still gotta give Webmonkey some props.

HTML and XHTML Validator
Great tool for validating your code. Having your code validate can be important if you're trying to optimize your site for the search engines. It's minor, but can make a difference.

If you've got the Web Developer Firefox add-on (mentioned below) installed, you can do this validation with the click of a button.

They've also got a CSS validator.

CSS Web Design Resources

CSS Zen Garden
This is CSS magic, and can give you some wicked ideas of what you can do with CSS.

The HTML is provided, and people submit their CSS. Inspiring... Dave Shea (the mastermind behind CSS Zen Garden) is a local boy -- born and raised here in Vancouver, BC.

He's also got a book out called The Zen of CSS Design. It's not a tutorial by any means,

Firefox has some great add-ons that can make any web designer's life a lot easier. Here's a list of some good ones that I always lean on when I'm working on a web design...

Web Developer Tools
If you could only have one Firefox add-on to help you with your web design,
this is the one to have. This is the one that I lean on the most whenever I'm working on a site.

Features: Where to start?! This extension adds a menu and toolbar giving you access to a whole host of web design and development tools.

I'll just start at one end of the toolbar and work my way down...

Disable
I don't use this one a lot, except if I want to disable Javascript for a site I'm browsing. Otherwise, you can disable things like Java, meta redirects, referrers, and more.

Cookies
I don't use this one a lot either, it allows you to disable and delete cookies, or view cookie information.

CSS
I gotta tell you, this one is a HUGE timesaver for me. The biggest feature I use here is Edit CSS. Enabling this splits your Firefox window, and adds a code pane at the bottom showing you the stylesheet for the page you're viewing. If the page uses multiple stylesheets, you'll see tabs for each one.

You can edit the stylesheet directly and see your changes applied live as you type. Don't like the spacing of an element or the padding seems off? Play around with the numbers until it looks good. Want to try different colors? No problem.

I tell you, this takes a lot of time out of the whole 'edit CSS file, save, refresh page' process. All you have to do is play around with the CSS, figure out what looks right, then copy and paste everything into your CSS file. It's gold, I tell you, gold!

Another extremely handy element is View Style Information. Activate this, and mouse over different areas of a page. A red box will be displayed when you mouse over a CSS element.

A click of the mouse will then give you information on that element including class or id name, attribute information, x and y positions, width and height, ancestor elements, as well as child elements.

Otherwise, you can disable styles (with a variety of options), and add a user stylesheet.

Forms
I don't think I've ever used this one, but it looks like it would be handy if I ever had a reason to...

Images
There's a wealth of information here. You can disable images (including stopping image animations -- very handy for those sites with animated GIFs), and you can display a variety of information about all the images on a page. Activating these will display a box next to each image with the information:
- alt attributes
- image dimensions
- image file sizes
- image paths

You can also do a bunch of other stuff with images on the page, but I don't use the others too much.

Information
This one is pretty handy and can give you a variety of information on a page. I don't tend to use this very often, but here's a sample of what's available:
- Display id and class details
- Display block size
- Display link details
- Display table information
- View anchor information
- View document size
- View javascript
- View meta tag information
- View page information
- View response headers

Miscellaneous
The tool I probably use the most here is Edit HTML. Much like Edit CSS above, this splits your Firefox window, and allows you to edit the HTML of a page in the edit pane. You get to see your changes live. Very handy.

Another cool feature is Line Guides. This is pretty much the same as using line guides in Photoshop. It gives you a horizontal and vertical line guide that you can reposition on the page. You can add as many guides as you like.

Better yet, there's also Ruler tool. Select this, and you'll be able to click and drag a box on the screen and you get to see not only the dimensions of the box, but the x and y coordinates of the corners.

I spent a long time trying to find a Windows program that did this, and all I found was crap. Little did I know that the Web Developer toolbar had it already.

There's also a page magnifier as well. Drag a box around the screen and it'll magnify the section that you're over -- much like Windows' screen magnifier.

Outline
This tool allows you to outline different HTML elements including frames, headings, links, and tables (either whole tables or table cells).

Resize
Another great one for me. Need to know what your visitors running at 800x600 resolution see? No problem. 1024x768, 1440x900, whatever? Easy as pie.

This tool resizes the Firefox window to whatever dimensions you like. You can create presets for any resolution, and immediately see what your visitors would see.

Mind you, this doesn't change your screen resolution, but it'll help you understand how much screen real estate is available for your design.

Tools
Some great tools here. You can validate your HTML, CSS, feed, links and more at the click of a button. No more need to manually go to w3c.org and enter the url or code to validate. Just click a button!

You can also get a Speed Report for the page from websiteoptimization.com.

View Source
Pretty self-explanatory. View for the page, or for a frame.

That's about it. The Web Developer extension does what so many individual add-ons do -- all in one. It slices, it dices... Download it now.

ColorZilla
Another add-on that I use quite a bit. Colorzilla gives you an eyedropper tool (like Photoshop), a color picker, and a page zoomer. You get a widget (or whatever it's called) in your status bar to access the tool, and it's available in the right-click menu.

I use the eyedropper most of all, and the color picker occasionally. Activating the eyedropper, and clicking on the screen picks that color. You then have the option of copying that color value to the clipboard in variety of formats. For example:
white
rgb(255, 255, 255)
rgb(100%, 100%, 100%)
#ffffff
ffffff
R:255, G:255, B:255

The color picker is handy when you're looking at the hex or RGB value for an element in CSS code, and you can't figure out what that color is.

The page zoomer is okay and let's you zoom in on a whole page. It can give you an idea of what a page would look like at a different resolution.

For example, my primary monitor runs at 1600x1200. If I want to see what a page looks like at 800x600, I zoom in 200%. For 1024x768, I zoom in to 150%. It's not perfect (should be ~156%), but close enough...

IE Tab
Quite handy for doing a quick cross-browser check. Simply right-click on a page, and choose 'View Page in IE Tab'. It's like opening up IE in a tab.

Viewing in a tab isn't ideal, because it's not 100% what it's going to look like, but you can just choose 'View Page in Ext.App.' and it'll open IE.

Screengrab!
This is a handy tool for taking screenshots in Firefox. You get a widget in your status bar, and it's also available in the right-click menu.

You have some options for what you can take screenshots of. You can select a region of a page by dragging a box, take a shot of the visible portion of the page, or (my favorite) take a shot of the whole page.

The last one is quite handy. If you have a long page that scrolls down quite a bit, it will take a screenshot of the whole page. Saves you from having to take multiple screenshots and stitching them together.

You can either save the image as soon as you take a screenshot (JPG or PNG), or copy the screenshot onto your clipboard to paste into your image editor.

So those are the Firefox add-ons that will make web design easier for you. Download them all!