This makes it difficult for people who are looking for someone to build their web site. The overall cost of the project is always one of the primary considerations and rarely do web design and creative agencies provide a price list for their services. It’s not that these agencies are trying to be secretive, but rather that we’re trying to avoid misleading anyone. Because every project is different, we prefer to work with our clients in the beginning phases of the project to work out what the required features are, who will be responsible for building and maintaining those features, how all those features will work together, and how much work it’s going to be to get it all up and running.

Two Approaches to Budget

The typical approach

Since most people have no idea how much a web site costs, they’re at a loss when it comes to determining an appropriate budget for their project. Lacking this important knowledge, they approach several different agencies, hand over a few vague requirements, and collect the quotes. Then they choose the agency who seems the most reliable and whose quote is within their range of affordability.

But turning your web design project into a sort of game of Price is Right isn’t the right approach. You’re likely to get a wide range of price tags which is only going to make the process more confusing. You’ll wonder why the cheapest agency is so cheap – do they do shoddy work and provide poor service? You’ll wonder why the most expensive agency is five times as much – are they just ripping you off? Furthermore, having no idea of what your budget should be can make you reluctant to contact an agency at all. What if the most you can manage to scrape together for the project is $1,000 and they come back with a quote for $16,000? You’ll have wasted your own time and theirs and feel a little foolish.

A better idea

Here’s a better solution. Do a little bit of legwork on your own, before you contact anybody. Look at your competitor’s web sites and see what they have on offer. Look at web design galleries and showcases. Get some ideas of what’s possible, and then put together a wish list for your own site. Then crank some numbers and figure out how much you can afford, both up front and for ongoing costs. Web sites need maintenance on a regular basis and it’s best to budget for a regular monthly cost in addition to the initial costs to build the site.

When you’re done, turn over your wish list and your budget to a few different agencies and see what they come back with. With this approach, an agency can tell you up front if they can’t take your job and you won’t have wasted any time. The agencies who do put together a quote for you will all do so within your budget. Then you can choose the one who can offer the most features and expertise for a price you can afford.

Pricing Rules of Thumb

Well, that’s all well and good I can imagine you saying, but I still have no idea how much money I should be budgeting. So let’s talk about some general pricing rules of thumb. The prices I’m quoting here are inclusive of everything you’ll need, including domain name registration, hosting account, merchant account, design, development, training for you and your staff, and so on.

Simple web sites

Web designers refer to simple web sites as ‘brochure sites’ or ‘brochureware’. This means that the web site is basically an electronic brochure. You’ll find some information about the company and its staff, services and/or products. You’ll find their location, contact information, and operating hours. If you need a site like this for your business, ideally look to budget $2,000 to $5,000 up front and $100-$400 per month for maintenance. If that’s out of your range, see the section below about exceptions to the rules.

Complex web sites

If you need a more complex site with features like ecommerce, social networking features (sites like Facebook), user accounts, appointment scheduling, multimedia, etc. then ideally look to budget $12,000 to $20,000 and up for the initial design and development and then between $500 and $2,000 each month for maintenance. If that price is more than you had in mind, see the section below about exceptions to the rules.

Keep in mind for all types of sites that often a bit extra can be spent up front that will reduce the maintenance costs down the road. These extra fees up front are often quickly recovered when the site is easy for you and/or your staff to update and maintain without having to learn any coding languages.

An Exception to Every Rule

Keep in mind that the prices I quotes above are just rules of thumb, and that web site projects can often be tailored to meet a wider range of budgets than you might think. Purple Pen Productions can, and has, built simple brochure sites for as little as $200 and has provided customers with simple ecommerce sites for as little as $1200.

On the other hand, I’ve also been involved with simple brochureware sites that cost as much as $16,000 and have contributed to robust web sites with lots of features that cost over $500,000.

$200 vs $16,000

Why the big differences in price? There are a few different factors. Let’s compare a simple brochureware site that cost the client $200 to the one that cost the client $16,000. What were the differences?

The $200 site used a free open source content management system and a free theme (design) that was simply customized a bit to fit the business. The client didn’t need any fancy features and hired a single freelancer to do the entire project in a single day. The client already had experience working with a blog she had previously, so required minimal training for updating and maintaining the site. The client also had a treasure trove of photos ready to be put on the site and wrote all of her content herself.

The $16,000 site used a proprietary content management system, built just for their site. The client in this case hired a traditional creative agency who provided them with a professional copywriter, a photographer, and a small team of designers and developers to build the entire site from scratch. The agency also provided a project manager to coordinate the efforts of everyone involved and keep the project moving in the right direction. Once the site was finished, the agency provided several members of the client’s staff with a couple of hours of one-on-one training in maintaining and updating the content.

In the end, were the two projects all that different? Could someone visiting the sites tell that one cost $200 and one cost $16,000? Probably not. Could the $200 site have been improved by doubling or tripling the budget? Definitely. Could the $16,000 have been done equally well with half the budget? Possibly – using an open source content management system would have gone a long way toward reducing the final cost, but it’s hard to replace the impact of well-written copy, custom design, and professional photographs.

Share Your Budget

Take the information provided here and use it to put together a budget for your own web site project. Decide which features you think are worth paying for, which you can do yourself, and which you can do without.

And when you contact an agency or a freelancer to design your site, be sure that your budget is one of the first things you discuss. Give the person or agency you’re hiring the opportunity to tailor the project to fit both your needs and your budget. You’ll be much happier with the result.

And maybe most importantly, keep in mind that launching a web site is not like printing a brochure. Once a brochure is printed, you’re pretty much stuck with it – the printer can’t make changes to it after the fact. A web site, on the other hand, is a living, breathing thing. If you haven’t got the budget to make your dreams come true right away, figure out what you can afford now and get started on it – you can always add features and change things later.

Templates and Template Tags Demystified: A WordPress Workshop
presented by Austin Passey

Austin Passy is a freelance web designer and WordPress developer. You can find his work at Frosty Web Designs, and follow him on Twitter.

This workshop is open to all, but is particularly intended for our web developer members who are learning to develop custom WordPress themes or who are interested in customizing prebuilt themes. Thorough knowledge of HTML and CSS are required for creating custom themes, but if you just know a little you might pick up a few tidbits for tweaking a theme.

Our sponsor, Packt Publishing, has also provided us with a copy of WordPress Theme Design that we’ll be raffling off during the meetup. Automattic (the company behind WordPress) has also provided us with WordPress swag – pencils, buttons, stickers and tattoos.

Purple Pen Productions, our group’s sponsor, will be providing light refreshments. Please note any special restrictions (vegetarian, vegan, allergies, etc) when you RSVP.

Avoid the Con Artists

The first thing you should know is that nobody can guarantee you placement in a search engine – absolutely nobody. A sure sign that you’re dealing with a con artist is a guarantee of number one placement or first page placement.

Understand How Search Engines Work

Search engines work very hard to keep their methods for determining search results a secret. They also are updating and changing those methods constantly. A simple tweak to Google’s search algorithm could move your site from page 6 to page 1 or from page 1 to page 11 overnight.

Keep in mind that a search engine stays in business by reliably delivering relevant content to searchers. When someone wants to know about the diet of elephants, for example, a search engine has to figure out what are the best sites for learning about what elephants eat. If that person gets sent off to a weight loss blog where someone wrote, “I feel like an elephant! I need to go on a diet”, they’re not going to be very satisfied with the search engine they used.

Of course, your goal is to get your content in front of as many people as possible. So try to strike a nice balance. Help the search engines figure out which searchers are looking for your content. You may not get as much traffic that way, but you’ll get quality traffic. I’d much rather have 10 visits from people actually interested in my services than 1000 visits from people with no interest in my services whatsoever.

Stay Off the Blacklist

If your sites makes use of what have become known as ‘black hat’ techniques, there’s a very good chance that the search engines will figure this out and will remove your site from their index. Avoid techniques like this:

• Keyword stuffing. Read your site’s content aloud, or have someone read it to you. The number of times your keywords are mentioned should sound natural. If the text sounds awkward, then it probably needs to be reworked to use keywords with a little less frequency.
• Hidden text and links. Don’t add paragraphs of text or chunks of links the same color as your background to pages. Don’t use CSS to hide content that contains a high concentration of keywords.
• Extra pages. Don’t add a bunch of extra pages with duplicate content to your site. Sometimes this is done by rewording one article several different ways and posting it up 10 or 20 times.

You can tell if your site has been blacklisted by going to a search engine and typing in your domain name. For example, if you go to a search engine and type in yourdomain.com and there are no results, that’s a sure sign you’ve been blacklisted. The best way to correct the situation is to remove the black hat seo techniques from your site, then contact the search engine via email or a contact us form to let them know you’ve corrected the error of your ways and wish to be included again in their index.

In the End, It’s Passive Marketing

If you’re focusing on SEO alone to promote your site, you probably want to reconsider your approach for a few reasons:

• SEO is an awful lot like gambling. There’s no guarantee of results and no guarantee that any results you do get will last.
• It’s passive marketing – you’re only marketing to potential customers who are already aware of your product or service.
• Too much focus on SEO can hurt the usability of your site. A site built with only search engines in mind often becomes difficult and frustrating for people to use. Don’t put up barriers for your customers.

Things to Avoid

The following things can hurt your search engine optimization efforts, and sometimes your site’s usability:

• Splash pages. A splash page is a site that exists only for design purposes, and often contains a Flash animation. They’re often included to make a good impression, but they’re frustrating to returning visitors who just want to find your hours of operation or your phone number, but are forced to wait through the animation. They’re also a barrier to search engines.
• Flash navigation. Flash navigation can be made accessible, usable, and search engine friendly, but more often than not, the developer doesn’t take the extra steps necessary to accomplish any of these goals. Flash navigation can be confusing to your site visitors and can prevent search engines from being able to index your site.
• “Click here”. A search engine examines the text inside your links to find any keywords that might be relevant to the linked page. “Click here” doesn’t include any keywords or give any indication what content might be found behind the link. Disabled users browsing only your links and not the surrounding text will have a hard time finding their way around. Instead of saying, “To view our contact page, click here” say “View our contact information“.

Best Bet Techniques

These are the best ways to improve the quality of your traffic sent by search engines:

• For developers and coders:

  • Semantic markup. Use the HTML tags that are most relevant to your content. Don’t use tables for layout and be sure to use heading tags for headings.
  • Progressive enhancement: Remember, search engines don’t have Flash or JavaScript, so make sure your content is available without either.
  • Friendly URLs: If your site is built on a CMS or blog engine, there’s a good chance that the default link structure won’t be easy to remember for human beings. The link to your ‘contact’ page could look like this: http://www.mysite.com?page=3. Figure out how to make those easier to remember, like this: http://www.mysite.com/contact.
  • Site structure. Arrange your pages in a hierarchy that makes sense with related content together.
  • Clean code. Keep your markup as light and clean as possible.

• For everyone:

  • Natural use of keywords: Don’t over-saturate your content with your keywords. Read it aloud or have someone else read it aloud to you to make sure it sounds natural and not like name-dropping.
  • Be clear and concise. Keep your sentences and paragraphs short. Make use of headers and lists where appropriate.
  • Encourage quality link backs. Particpating in link exchanges with sites whose content is unrelated to the content of your site will hurt your search engine ranking. If you do participate in a link exchange, be sure that the other sites are relevant. Even better are incoming links to your content from blogs, wikis, social networking sites, and news sites. The more trusted and established the site linking to you, the better the quality of the link.
  • Focus on pages, not sites. Search engines index your pages, not your site. Not everyone will land on your homepage, so make sure all your pages have navigation and branding and make it clear what type of site you have and what type of content is on offer.
  • Useful titles. The page title of your page is what appears on the tab inside your browser, it’s the text the user will see when they bookmark your site, and it’s the text visible on the title bar of your browser window when you’re looking at your site. Make sure your title is relevant and includes a couple of keywords relevant to the content of that page. Don’t use the same title on all pages of your site.
  • Alt attributes. Make sure that any images added to your site have an alt attribute so that visitors who can’t see images for any reason will be able to tell what content they’re missing, and so that search engines will be able to index your image content. Without alt text, there’s no way for unsighted viewers or search engines to know what information is contained in your images.
  • Use headers, strong, and emphasis tags. Sometimes the buttons to include these elements are easy and obvious in a content management system or blog, but sometimes, they’re tucked away. Learn how to add them to your content so that your headers are marked up as headers and emphasized words receive more emphasis to search engines.

Keeping the same basic design, we made it more modern by making the colors a bit darker and richer and making the design elastic to the browser window size. To make the site easy to update, it was built on WordPress.

Web Design: Natalie MacLees
Web Development: Natalie MacLees
Technology: WordPress

Know What You Want

Spend some time thinking about why you want a web site and what purpose it will serve. Will you sell products and services through the site? Use the site to communicate information about your brick and mortar business? Publish articles to share your knowledge and establish yourself as an authority? Will your site visitors be able to post content and interact with one another? Will be you be looking to build an online community around a purpose or topic?

If you’ve already got a web site but it’s falling short of its goals or has grown outdated, think about why it’s falling short, and how you’ll approach the next site differently.

Spend some time looking around the web at your own site, at your competitor’s sites, and at sites completely not related to your field. Spend some time using them, trying out different features, and see what you like and what you don’t. Get some ideas for some features you’d like to include on your own site.

Look at designs of other sites. Most people don’t spend a lot of time talking about design, so it can be a bit challenging, but try to put words to what you like or don’t like about different designs. A lot of the time, you’re going to be talking about colors and emotions because design can resonate with us on many different levels. Don’t go looking for the perfect design that you can just copy – but look around to get a general idea of what types of design seem to fit the look and feel you’re looking for.

Know who your target audience is – designers are experts at tailoring an idea or a feeling to appeal to certain target audiences. And don’t be fooled into thinking your target audience is ‘everyone’. That’s a temptation for all of us, but it’s not useful. Think about the demographic that your most enthusiastic and loyal customers fall into. Also think about the demographic you’d really like to reach but haven’t yet.

Know what your message is. It should be clear and concise – something you could explain to someone in the time it takes to ride an elevator from the first to the fifth floor. Why should someone be interested in doing business with you?

Establish a Budget

A well-done web design is an investment in your business. It can help to increase visibility of your business and increase sales. It can establish a presence. So think about how much you can afford to spend on a web site. If you’re looking for a simple site, then probably somewhere in the $1000-$2000 range is suitable and upward from there as you add complexity to the site.

Once you know what you can afford, don’t keep your budget a secret from web designers that you might talk to. Web designers can tailor a project to fit a budget and can often find ways to build you a great site within your budget with a few small compromises. If you keep your budget a secret, then hiring a web designer turns into a game of Price is Right where the one with the estimate closest to your budget wins the job. Be up front about your budget and hiring a web designer becomes a question of who can get the most mileage out of your money. Sometimes a few relatively small changes turns an expensive project into an affordable one.

Gather Information and Assets

Remember, the person you’re hiring to build your site knows little or nothing about you or your business. You’re going to have to provide all of the content that will fill the site up. Think about what kinds of things you’d like to include – testimonials from your customers, contact information, a biography of yourself, biographies and photos of your staff, news articles and press releases, information about your products, photos of your store front, staff or products.

It can be an overwhelming task, so think about hiring a copywriter or a copy editor to help you put it all together. Figure out if you need to hire a photographer for the photos you’ll need. If you want to include video, start planning for that – who will appear in the video? Who will shoot it? Who will edit it?

Keep an Open Mind

Once you’ve found the web designer you’d like to hire, be sure to keep an open mind. Have a good idea of what you want, but be open to suggestions or modifications the web designer might have. You should be hiring an expert that you trust. Get your money’s worth by considering the ideas that he or she might have for improving your site or streamlining the process of building it. You might be surprised by the things you didn’t know.

By the same token, remember that you’re the expert on your business and your product or service. If something doesn’t feel right to you, speak up. Make sure your web designer listens to you and understands your message, your target audience, and the goals you’d like the web site to accomplish.

Be Involved

Stay involved in the process as it goes along. There will be many points in the process where you’ll be sent designs or site maps to review and approve. Ask questions about anything you don’t understand, and try to answer emails and phone calls promptly. Sometimes work on your project comes to a standstill waiting for an approval or a photo or a bit of content.

I try to remember to tell my clients at the beginning of a project that at least half of the work of building the site is theirs – gathering up content, writing biographies and product descriptions, reviewing designs, sending photos, logos, and videos. You can hire help for some of it, but in the end, nobody knows your business as well as you do, so some things have to come from you. You’ll be glad at the end when you’ve got a web site that conveys your message and accurately portrays your business – it’s the first step toward having a successful web site.

It was a really good foundation, so we were able to just take the ball and run with it. The logo and top banner of the site as well as the general layout all came directly from Vanesa Rey, founder of Campus Confidant. We added some details, touched up some spacing, and then integrated the design into a custom WordPress template.

Web Design: Vanesa Rey, Shoichi Shingu and Natalie MacLees
Web Development: Natalie MacLees
Technology: WordPress

A deep slate blue and lighter tones were used to anchor the site and lend an air of professionalism, while a bright orange brought warmth and liveliness. A curved flag shape motif brought softness and fun to the design to keep things from appearing too boxy and stuffy.

The logo features a student reaching for a star with the support of the ‘l’ in Miller – a fitting analogy for Miller Educational Excellence’s support of students.

Web Design: Allure theme from StudioPress customized by Natalie MacLees
Web Development: Natalie MacLees
Logo Design and Identity Development: Natalie MacLees
Photo Retouching: Shoichi Shingu
Technology: WordPress and Moo Tools

We worked with Teresina to develop a black and white design with bits of bright red to bring attention and emphasis. Her logo is simple and clean, works well in a variety of colors, and most importantly, shows an openness in the heart chakra.

Subtle animations were added to the web site for additional interest.

Web Design: Natalie MacLees
Web Development: Natalie MacLees
Techology: WordPress, jQuery
Business Card Design: Natalie MacLees

They already had a logo and had already chosen “USC red” as their business’s signature color.

We created a simple site in shades of red, allowing the focus to be on the projects themselves and the gorgeous photos and architectural renderings that often accompany those projects.

Web Design: Shoichi Shingu
Web Development: Tammy Wilson and Natalie MacLees
Technology: WordPress

Some general rules of thumb for pricing web sites and other considerations for budgets are included in our article, Don’t Keep Your Budget a Secret.

I wish that there was an easy answer – that I could just say $5,000 or between $200 and $500, but unfortunately, there is no easy answer to this question. Asking a web designer how much a web site costs is a bit like calling up a real estate agent and asking “How much does a house cost?”

The trouble pricing real estate is that while each individual house has a price based on its market value at any given time, houses in general don’t really have a set asking price, or even a reasonable range – houses can be had anywhere from below $10,000 to well above $100 million, depending on a lot of different factors.

Tell a real estate agent you’re thinking of buying a house and want to get an idea of how much it will cost, and he or she will barrage you with a series of questions before he or she will even venture to ballpark a price. Location, square footage, number of bedrooms, number of bathrooms, whether or not there’s a garage, the size of the lot, the age of the home, the state of repair, the style, the history, the tax rate in the area, the quality of the local schools, the desirability of the neighborhood, the anxiousness of the current owner to sell, etc. etc. etc. all influence the price of a home.

And a web site is a lot like that. There are so many different types of web sites, so many different types of features, that it’s hard to just name a price without asking a barrage of questions to rival a real estate agent. What kind of web site? Do you have photography, written content or other design work to use? Do you already have a logo? Do you already have a business identity and established color scheme or design guidelines? What kind of technology are you comfortable using? Are you looking to maintain and update the site’s content yourself? Do you need hosting and a domain name? And on and on and on.

Even after I get answers to these questions, I can only give you my price – because each person or company has their own methodology, their own way of working, and that’s going to influence the price a bit. Sure, this company might be charging 50% more, but maybe you’ll get a service you didn’t even know existed or you’ll have just one person to work with dedicated to your account, and your account only to help you every step of the way.

If you need a web site, shop around and ask a lot of questions. Be really clear on what’s included in the price and what’s not. Do some research and learn about what goes into the type of site you need, and learn what parts you’re comfortable doing yourself and what parts you need to hire someone else for. The best thing you can do for yourself when you’re in the market for a web site is to be an educated consumer.