I think they would be most happy if we could open up the magic website price book and provide them with a useful answer. Instead, we usually say … “Well, that depends upon the type of website you would like to build.”  (How’s that for helpful?)

Actually, it is helpful because such a question begins a discussion that allows both parties to thumbnail out the actual scope of the project at hand.

Here is my firm’s approach to collecting the information necessary to provide initial pricing estimates.  It is a four quadrant model that includes: scale, features & functionality, content development, and interactivity.

Scale – How many sections and pages are we thinking about here?  Is it a redesign of your current site whereby the size of the site might grow by a foreseeable percentage?  Is there a competing site that does a good job capturing the information we’re hoping to capture?  Have you jotted out a preliminary sitemap?  The more thoughts the client can provide on the scale of the site, the quicker we can provide helpful budgetary information.

Features & Functionality – Basically this means “what do you want visitors to be able to do on your site?” – and – “what type of management control and integration are you looking for on the back end?”.   Front end features are usually more obvious.  Are you looking for basic forms, links, and a search feature?  Do you want to post jobs, manage news & events, and host a forum?  Is ecommerce involved? (If so, get ready for a good many more questions.)  Back end features are typically not as thought through.  What degree of content management are you looking for?  Does the site need to integrate with any other software, servers, databases?  One atypical feature request can easily add 50% to the cost of a web project.

Content Development – Content covers both the copy (words on the page) and the images (photos, illustrations, video).  Will the client be providing final website copy?  Or, will you be in need of copywriting and/or copyediting services?  To what degree?  Is there any video production needed for the website?  Will we be using stock photography, client-provided photography, or custom photography?

Interactivity – How much interactivity are we wanting to incorporate into the website?  Hold all other parts equal (scale, features, content), a website with a high degree of interactivity (transitions, multimedia presentations, flash integration) can easily cost 2-3 times more than a basic static website.

To make the “how much?” question even more interesting, the “how much” often depends upon “who” you’re asking.

As you move across the scale from part timers/freelancers/students/friends to very-large-agencies, the cost of a similarly scoped project will increase exponentially.  Experience, team size, and overhead all get factored in and influence the pricing.  On the plus side, you do usually get what you pay for.  Not always.  Usually.  Also, it’s sometimes comforting to know that your web resource will be reliable and won’t be moving/leaving the industry/graduating/you-name-it any time soon.

Technologies used to create your website certainly influence price.  Microsoft licensing costs can add up.  Open source web technology provides a major value, though is not welcome in all organizations.

Lastly, certainly not least, is the degree of search engine optimization effort that is provided with your website.   If a web partner is going to invest the time and effort to identify how people find your business and then incorporate that knowledge into the architecture of the website, be prepared to see at least a few thousand dollars added to the cost of the project.

Some sites cost $1,200.  Others $300,000.  Still others $2MM.   There’s no one price for a website, only a series of trade-offs.

So there we have it, right?

Ideally your web developer will know about these practices, but you’ll be hard pressed to find someone who has the time to stay up-to-date on the constantly changing SEO world AND continue to move forward with the latest design techniques.  ViceVersa, don’t expect your average SEO consultant to be able to design and code your entire website.

There are people out there who are experts in both areas and can effectively build your site and manage your SEO, but they are few and far between.  Nine times out of ten attempting to cut costs by having one person do both will backfire.  Another option is to hire different people/agencies for each component.  It is a valid strategy, but there are inherent potential problems with this type of set up.  Any SEO consultant worth his salt will want to take a look at your website’s code, and will probably want to make at least a few changes.  Suddenly  issues of file access and permissions pop up that can really complicate, not to mention drastically slow down, the process.

The best possible solution is to have your site designed by an agency who employs both designers/developers and online marketing specialists.  You’ll end up with a coherent and more successful website because of the smooth communication between the two camps.

But sometimes it’s not so bad.  When a designer takes the time to create a custom 404 page it adds to the user experience.  Sure, you’re still a little annoyed you haven’t found what you were looking for – but running into an error page that’s funny or creative or just plain great to look at lessens the blow a bit.  You might even stick around and give it another go instead of bouncing right off the site.

We love well done custom 404 pages – here are 35 of our favorites for your inspiration!

Let’s be honest, most websites that enjoy any sort of traffic have some form of advertising placed on them.  If you have the resources, time or talent to create your own custom advertising solution that is probably the way to go.  But AdSense can be a good alternative if used effectively and, as with any advertising, the only major drawback is the potential ‘commercialized’ look of a site that runs ads.

Google’s AdSense is one of the easiest ad programs to use, so it’s great for everyone.  They place very relevant text or image ads onto your site immediately…and it’s free to use.  However, just sticking the ads on your site and leaving them won’t bring in much revenue.

To make running AdSense worthwhile you’ll have to do a bit of optimizing.  Placement is important, you’ll want to put the ads somewhere people will see them and click on them, but be careful not to make them too intrusive or your user’s will block them.  AdSense offers a pretty good variety of styles, colors and sizes to use, so be sure to test out a few and see which looks the best and fits in with your site’s overall design well.

AdSense automatically does the targeting of your ads…but you’ll want to make a few changes here as well.  The more relevant the ads are to your site’s content the more likely people are to click on them – making you more money.  They offer section targeting, which is a way to specify certain sections of your site that you would like to emphasize or downplay when it comes to matching content up with ad topics.  You can also filter out ads from certain domains with the Competitive Ad Filter.  For example, if you don’t want ads from a rival showing up on your site, or you notice a site that keeps advertising completely off topic, just enter in their domain to the filter list.

So, yes, AdSense is worth running if you are realistic about the levels of extra cash you can make and if you take the time to create ads that fit in stylistically with your current site design.

For more info, or to get started and try it out head to the Google Adsense page.

We respectfully disagree when it comes to free web design templates.  Templates in general have bad rap – especially the free ones.  There are so many sites out there offering free templates that are thrown together, look like they belong in 1996 or are just plain ugly – you also run the risk of having a website that looks exactly the same as your competitor’s.  Don’t get discouraged!  If you don’t have the talent, time or money to get a custom designed site there are plenty of free templates out there that are not only presentable – but actually quite well designed and even unique.

Here are 12 to prove our point:

And here are 6 reliable sites that offer well-designed free templates:

TemplatesBox.com
FreeTemplatesOnline.com
TemplateWorkz.com
Open Source Web Design
FreeLayouts.com
DotComWebDesign

Happy Hunting!

HTML Quick Reference – Online quick reference for HTML coding.

W3 Schools HTML Tutorial – Everything you could possibly need to know about HTML, all in one place.

How to Serve Better HTML – 8 tips on how to serve better HTML or XHTML.

HTML Cheatsheet – One page document for use as an HTML quick reference.

HTML Character Cheatsheet – Yet another HTML cheatsheet, but this time for HTML character codes.

HTML Editors

NVU – Free, open source HTML authoring software.

SquareFree HTML Editor – Online, real-time HTML editor for quick coding checks.

CoffeeCup – WYSIWYG editor for HTML. Inexpensive considering the feature set.

HTML Templates

Free HTML/CSS Templates – Free HTML templates to base other designs off of or just customize one to suit your needs.

Layout-o-Matic – Generate a quick HTML and CSS skeleton layout to base your design off of.

SitePoint CSS Tutorials – Sitepoint’s collection of useful CSS tutorials for advanced CSS users.

CSS Slicing Guide – Tutorial covering how to create a CSS structure by slicing a single image file.

Position is Everything – Analysis of common CSS bugs and instructions on how to fix them.

Floatutorial – Comprehensive tutorial on using float with CSS.

CSS Properties – Alphabetical listing of every CSS property.

glish CSS Layouts – Examples of some basic cross-browser CSS layouts.

DynamicDrive Code Library – Collection of submitted CSS code samples showing how to make good looking menus, forms, divs and more.

Web Design Library – Extensive library of CSS articles, tutorials and example code.

CSS Font Reference Sheet – Reference sheet for using CSS.

The blogosphere really is another world, with it’s own set of rules and etiquette that you’ll need to learn.  You should set aside time to read other people’s blogs, and try to establish relationships with other bloggers.  Learn when to comment, when to post your own content, and when to link to other blogs.  Staying up to date can quickly turn into a full time job if you let it, so here are a few tips to help:

1. Write about something you like and write often.  Seems like common sense, but readers will know if you aren’t sincere and you’ll build up loyal readership faster by making new content available regularly.
2. Stay well-informed.  Get your facts straight and be aware of what others are writing about the same topic.  Readers will nail you to the proverbial wall for obvious duplicate posts or not fact checking first.
3. Promote your blog.  Readers will not be magically drawn to your site so you’ll need to do some grunt work, especially in the beginning.  Ping, use trackbacks, and leave comments on other relavent blog posts to let others know what you are up to.  Use gimmicks, wit, a specific tagline – anything to get noticed, the internet is a black hole of information that is easy to get lost in.  Lastly, make use of social bookmarking and article submission sites by submitting one of your better posts once in a while to reel in new visitors.
4. Don’t just blog for the sake of blogging.  Have an opinion or something useful/interesting to say or no one will pay attention
5. Have thick skin.  Readers will leave harsh comments, its part of the game.  Respond (tactfully) if you must and then move on.  If it bothers you, use comment moderation to weed out the particularly hurtful ones.
6. Hang in there.  It will get easier.  Most bloggers who get discouraged and quit do it in the first few months.  Building an audience takes time, and it doesn’t really matter how many people you are reaching as long as that number keeps growing.  The older your blog gets the more credibility it will earn.

It’s hard, and its not for everyone – but blogging can be very rewarding.  Adding a blog is a great way to make sure your site has fresh content, you’ll get your point across to lots of people, and hopefully you’ll have fun and gain satisfaction from sharing information with others and participating in online communitites.

Some uber professional sites: A financial/trading company, an advertising agency, and a large well-respected mobile phone service provider…all using pink!

Even a few professional web design firms…

And even if the pink seems overwhelming, keep in mind the type of company and intended audience.  Character design or a stuffed animal designer for example…

Then again, you don’t want to get too carried away…

This is the Google toolbar that turns these fields yellow. On the toolbar there is an “auto fill” option. This tells the user that they can use this option to auto fill certain fields on your form (which are marked in yellow).

In CSS if you declare a background color of your form fields this will typically change the background color for all the fields except the fields that are marked by Google for auto fill.

For example, CSS code that looks like:

input {
background: #F3F4EC;
}

Results in a form that looks like:

Not only are some of the fields an ugly yellow color, but the coloring is also misleading to users. Most web users are unaware of the yellow, “auto fill” option and instead assume that yellow indicates a required field. In the case of the form above, the Phone field is yellow even though it’s not a required field.

As you can probably guess, these yellow fields are bad news:

Confusing Forms = A Drop in Conversions

To override the yellow background all you have to do is declare your background as important.

Change the CSS to:

input {
background: #F3F4EC !important;
}

Then the form looks like this:

Problem solved. The yellow fields are gone and the form is much more user-friendly.