Cascading Style Sheets didn’t get a lot of attention until about 5 years ago, when web standardistas such as Jeffery Zeldman and Eric Meyer started encouraging designers and developers to separate stylistic elements from semantic, structural elements. Doing so makes web sites consumable by a wide array of different applications.

CSS is a way of separating the look and feel of your website from the underling function of the data an content. This gives you the ability to apply several different style sheets to the same HTML to achieve wildly different results. For example, the following 5 links all point to the same HTML document, but each one uses a different style sheet to drastically change the appearance of that HTML

1. http://www.csszengarden.com/?cssfile=201/201.css
2. http://www.csszengarden.com/?cssfile=199/199.css
3. http://www.csszengarden.com/?cssfile=194/194.css
4. http://www.csszengarden.com/?cssfile=185/185.css
5. http://www.csszengarden.com/?cssfile=189/189.css

Here is the same HTML document without any style sheets: CSS Zen Garden Sample HTML

Quite a difference! The possibilities that this flexibility affords are endless. You could create a style sheet that renders your web site one way for regular web browsers, and another style sheet that renders your web site in a more compact view for mobile phones. You could even provide different designs for different types of users – and you can do this without ever touching the underlying content or HTML.

I want to illustrate this concept with an example. Here is a small snippet of HTML:

<h1>Hello World!</h1>
<p>Nice to meet you!</p>

Now, let’s write some CSS to add some pizazz. This is what a typical style sheet rule might look like:

h1 { color: red; font-size: 32px; }
p { font-weight: bold; }

Hello World!

Nice to meet you!

Here, I am setting the size and color of all text inside of h1 tags. I am also making all paragraph text bold. Now let’s say I want to change the style of all the headings across my entire site. All that needs to be changed is the single CSS rule.

h1 { color: blue; font-size: 28px; }

Hello World!

Nice to meet you!

Now, on every page of my web site, h1 tags will appear blue and in a slightly smaller font size. Notice that I did not change the underlying structure of the HTML. This illustrates the flexibility that separating structure and style provide to us.

CSS is still maturing and being improved. The W3C issues specifications that browser makers use when creating their software. The specifications layout rules for rendering different elements of CSS. Despite these specifications, however, many browsers still render the same rules differently, creating big headaches for designers.

It is not uncommon for larger web design shops to have a person who is dedicated entirely to creating HTML and CSS, although this is a luxury that most can’t afford. In most situations, it is the graphic designer who will be responsible for creating the CSS for your website. Make sure that the person designing your website is knowledgeable regarding the use of style sheets. A good way to test your site is to view it without the CSS file. Is the site still usable? If so, then your designer has done a good job.

In the next part of this series I will explain graphic design and how it can be integrated with CSS to create spectacular web sites. Stay tuned!

This is a long article, so for those who want a quick answer, here you go: For an interactive web site with custom design and quality coding, I would expect to pay somewhere in the range of $2,000 to $15,000. If you are paying less, you are probably getting an off-the-shelf CMS with a generic design template. Chris Pearson sheds some more light on graphic design pricing: How Much Should a Design Cost?

For more complex sites or online applications, expect to pay $20,000+.

… And Knowing is Half the Battle

As a consumer of web site development services it is important that you take some steps to educate yourself about the process. An informed consumer is knowledgeable about what he or she wants to buy and does research on options, availability, and market prices. These are the basic elements of an average web site project:

• Hosting
• Database Design
• Business Logic Programming
• Markup, Styling, and Graphic Design
• Standards-compliance, Accessibility, and Testing
• Ongoing Maintenance

Make sure that you have at least a high level understanding of each before working with a developer. Reading the articles here at Solo Signal is a good place to start. In addition, I would recommend picking up a copy of Web ReDesign 2.0: Workflow That Works by Kelly Goto and Emily Cotler. This book has an emphasis on redesigning existing sites, but the concepts discussed are the same for new web sites.

Placing Value on Time and Knowledge

Behind every web site is a programmer and a designer. The knowledge that these individuals possess and the time they put into every project is often overlooked and not considered when pricing a project. Sarah Lewis of Blogging Expertise explains this value nicely in A Frank Discussion About Pricing:

• Details. Professional designers and firms pay particular attention to the details that will make or break your site.
• Time. Most people who end up using a professional designer or firm understand that their time is worth something, and that spending your time on your core business is one of the best places you can invest your time. Working with web professionals allows you to tap into our experience and knowledge and save hundreds of hours.
• Experience. A professional designer or design firm isn’t just selling you hours on a project; we’re selling you years of experience in the sometimes-overwhelming world of the Internet.
• Knowledge. When you hire a professional designer or firm, you are also getting access to a wealth of information that we’ve gathered and are happy to share.

Keep in mind that you are not just paying for the developer’s time, you are paying for the knowledge and insight they have acquired over many years of experience. Here is a story to illustrate this point:

Once upon a time there was a steam generating plant that was not producing much steam. After a frustrating search for the cause, the plant manager, in desperation, called in an expert. After only two hours on site, the expert found the problem and placed “X’s” on two pipes that were causing the problem, saying that they had to be removed.

 

When presented with the bill, the plant manager asked the consultant how he could charge $5,000.00 for only two hours of work. When he asked for an itemized bill, this is what he got:

 

1. $400.00 – Placing “X’s” on two pipes

2. $4,600.00 – Knowing where to place the “X’s”

 

The plant manager got what he paid for and probably a lot more. He had already used up more than that amount on his own staff not to mention the loss in revenue while the plant was shut down. For him, securing the advisory services of a consultant was the right thing to do.

The same is true for a web site designer or developer. You may feel you are paying way too much for the actual time spent, but in reality you are paying for knowledge, not just time.

Paying for Quality

As with most things, it comes down to this: You get what you pay for. If you want a successful website that is attractive, standards-based, accessible, search engine optimized, stable, and fast, then take the time to find a good developer/designer and be prepared to pay them what they are worth. You will not regret the purchase.

Sure your computer geek nephew knows HTML and could build a web site for just $100. He also knows how to use a screwdriver. Does this mean he could build a safe, reliable, and fuel-efficient car for you? Probably not, so why take the same risk with your web site, a potentially large value-center for your company?

A good way to gauge what you can afford is to ask designers and developers for their prices and rates. Ask for examples of past projects and how much was charged for each. This will give you an idea of what you can expect to pay. If you can’t afford what you originally had in mind, consider scaling back the project and breaking it into smaller chunks that can be completed when you have the budget.

Find Someone You Truly WANT to Work With

Don’t try to wrangle a bunch of individuals and firms into a bidding war, for two reasons. First, you are basically saying that you don’t care who develops your site, as long as it is cheap. If this is the case, you might as well just call up your nephew. Second, this just makes the winning developer bitter because he or she had to bid beneath their real costs to land the project. Now you have an angry developer who is under-paid and trying to minimize the damage by finishing as quickly as possible. Does this sound like a good situation for you and your web site? I don’t think so either.

Let me illustrate my point: A few weeks ago I decided that a new look was in order for my personal site (Aaron Forgue). The first step I wanted to take was to have a logo created. I knew that I wanted to work with James Mathias, an excellent designer who has done some amazing work. I asked James for information regarding pricing and quickly discovered that I couldn’t afford him. Instead of trying to find a cheaper designer, I made the decision to wait until I could afford him. James is the person I want to work with, and I am not going to sacrifice the quality of my site just to save a buck or two.

Interestingly, James wrote an outstanding article related to this very topic: Respect.

A Quick Overview of Hosting and Other Costs

Hosting is a topic that I will write about in more detail later on, but for the purposes of this article, it is important that you factor in recurring fees. There are basically three recurring web site fees: domain Registration, site hosting, and on-going site maintenance.

• Domain Registration – Domain registration is simple, I recommend purchasing your domain for as many years as possible (e.g. 10 years.). I buy domains through GoDaddy, you can usually get a discount there by using the coupon code “diggnation“.
• Web Hosting – There are several different levels of hosting, but to give you a ball park estimation, I would expect to pay anywhere between $15 – $500/month for hosting. Obviously this is another example of getting what you pay for. At $15/month you will be sharing server space with a bunch of other websites. At $500/month you will most likely have your own dedicated machine that is managed by an experienced server administrator.
• On-going Site Maintenance – Site maintenance is typically billed at an hourly rate. For freelance developers this is usually between $40-$100/hour. For emergency, 24/7 maintenance, be prepared to pay $200+/hour.

The bottom line: educate yourself. Not nearly enough businesses understand the value of a well-designed website and suffer because of this ignorance. More and more people are using the Internet to research and purchase goods and services. If your online presence is lacking, you will miss out on a lot of potential business.