How Much Should Web Site Design, Development, and Hosting Cost?

What’s the easiest way to create awkwardness, spite, and frustration between clients and web site developers? Bring up the price of the project and you will instantly create a volatile situation. In most interactions between clients and web site designers/developers, expectations of project costs are drastically different. So how much should a web site really cost? The answer is more involved than most people assume.

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.

Comments

72 Essential Acronyms Related to Web Site Development

Warning: getimagesize(wp-content/uploads/2007/07/istock_000000130164xsmall.jpg) [function.getimagesize]: failed to open stream: No such file or directory in /home/solosign/public_html/wp-content/plugins/BetterThumbs.php on line 150

Acronyms are a tradition in the tech world. To the untrained eye, they can be confusing and intimidating. To help clear some of the letter-fog, we’ve listed 72 common web site development acronyms with their definitions. Bookmark this page if you are getting ready to start a web site project - you are sure to have some of these letters flung your way.

Markup and Styling

1. CSS: Cascading Style Sheets — CSS is a stylesheet language used to define how a web page written HTML or XHTML should be presented and displayed in a web browser.
2. DHTML: Dynamic HyperText Markup Language — DHTML is the term used when HTML, JavaScript and CSS are used to create animated or interactive web sites.
3. HTML: HyperText Markup Language — HTML is a tag-based markup language used to create web pages. Every site on the internet uses HTML in some form.
4. WML: Wireless Markup Language — WML is an XML-based markup language for content accessed through a wireless mobile device. Similar to HTML.
5. XHTML: Extensible HyperText Markup Language — XHTML is a special type of HTML that conforms to the strict rules of XML. This allows for cleaner code and code that can be understood by a wider array of software.
6. XML: Extensible Markup Language — XML is a general purpose markup language for describing data in a structured manner.

Business Logic Programming

1. ASP (Microsoft): Active Server Pages — ASP is a server-side scripting language used to add business logic and database interactivity to dynamic websites.
2. CGI: Common Gateway Interface — CGI is a protocol that allows server applications to interact with client web browsers.
3. JSP: JavaServer Pages — JSP is a server-side scripting language used to add business logic and database interactivity to dynamic websites.
4. PHP: PHP Hypertext Preprocessor/Personal Home Page — PHP is a server-side scripting language used to add business logic and database interactivity to dynamic websites.
5. RoR: Ruby on Rails — RoR is a web application framework based on the Ruby scripting language. It has been used by several popular Web 2.0 web sites.
6. SSI: Server Side Includes — SSI is a server-side scripting language used primarily to include the contents of one file in another.

Web Services

1. ASP: Application Service Provider — An ASP is any business that provides online, Internet-delivered applications to customers.
2. AWS: Amazon Web Services — AWS are a collection of remote application services offered by Amazon.com.
3. RSS: Really Simple Syndication — RSS is an XML specification for publishing frequently updated web content to subscribers. RSS is the secret sauce behind blogging.
4. S3: Amazon Simple Storage Service — Amazon S3 is a storage solution that offers unlimited data stored for a small fee through a simple web service interface.
5. YUI: Yahoo! User Interface — The YUI library is an open-source JavaScript library for building rich interactive web applications.

Databases

1. CRUD: Create, Read, Update and Delete — CRUD are the four basic functions of any persistent storage system, most commonly a database system.
2. DBMS: Database Management System — A DB is a structured collection of data organized to allow for easy retrieval by computer programs using SQL.
3. SQL: Structured Query Language — SQL is a special programming language used to retrieve data from and modify relational database systems.

Servers and Hosting

1. CRON: Command Run ON — CRON is a scheduling program on most Unix system. It is used to schedule time-sensitive activities for software programs to perform.
2. IIS: Internet Information Services — IIS is a set of internet-based services for servers running Microsoft Windows.
3. VPS: Virtual Private Server — A VPS is a partition of a physical server that has the ability to run a separate operating system and reboot itself independently of other VPSs on the same physical server.

Protocols

1. FTP: File Transfer Protocol — FTP is a commonly used protocol for transferring files from one computer to another over a network.
2. HTTP: HyperText Transfer Protocol — HTTP is a communications protocol used for transferring data available on the Web.
3. HTTPS: Secure HypterText Transfer Protocol — HTTPS is a variation of HTTP used to specify that the data being transferred is/should be encrypted and secure.
4. SSH: Secure Shell — SSH is a network protocol that allows data to be exchanged over a secure channel between two computers.
5. SSL: Secure Sockets Layer — SSL is a cryptographic protocol used for encrypting sensitive data while being sent through the Internet.
6. WAP: Wireless Application Protocol — WAP is an international standard for accessing Internet content on a wireless mobile device.

Standards and Accessibility

1. 508: Section 508 — Section 508 is an amendment to the Rehabilitation act of 1973 that requires federal agencies to make their electronic and information technology accessible to people with disabilities. It is commonly used as a standard for accessible web sites.
2. W3C: World Wide Web Consortium — The W3C is the international standards organization for the Web.
3. WAI: Web Accessibility Initiative — The WAI is an initiative enacted by the W3C for improving the accessibility of web pages for people using software other than web browsers (e.g. screen readers).
4. WCAG: Web Content Accessibility Guidelines — WCAG is a series of web accessibility guidelines published by the WAI.

Client-Side Scripting

1. AJAX: Asynchronous JavaScript And XML — AJAX is a web programming technique that uses JavaScript to transparently interact with a web server, eliminating the need to reload a web page to see changes.
2. DOM: Document Object Model — DOM is a standard object model for representing HTML and XML formats as objects.
3. JS/ECMAScript: JavaScript — JavaScript is a scripting language used for client-side (web browser) web development.

Development

1. CRAP: Contrast, Repetition, Alignment, Proximity — CRAP is a design methodology applied to the design and layout of web pages.
2. CVS: Concurrent Versions System — CVS is a version control system that allows several developers to collaboratively work on a single set of code.
3. GUI: Graphical User Interface — A GUI is a computer interface that allows users to interact with the computer through graphical icons and windows, typically with the aid of a mouse.
4. SVN: Subversion — SVN is a version control system that allows several developers to collaboratively work on a single set of code.
5. WYSIWYG: What You See Is What You Get — WYSIWYG is used to describe web development applications in which the authoring environment closely resembles the final output of the program.

Graphics and Images

1. CMYK: Cyan Magenta Yellow Key — RGB is a subtractive color model used by computers to display various colors by subtracting different levels of cyan, magenta, and yellow.
2. FLA: Flash Authoring File — FLA files are the primary authoring output files of Adobe Flash
3. GIF: Graphics Interchange Format — GIF is a popular graphics format most commonly used for graphics in web sites.
4. JPEG: Joint Photographic Experts Group — JPEG is an image compression codec commonly used to encode pictures for the Web.
5. PNG: Portable Network Graphics — PNG is an image format that was developed to replace the aging GIF image format for web sites.
6. PSD: PhotoShop Document — PSD files are the primary authoring output files of Adobe Photoshop.
7. RGB: Red Green Blue — RGB is an additive color model used by computers to display various colors by combining different levels of red, green, or blue.
8. SVG: Scalable Vector Graphics — SVG is an XML markup language used to describe two dimensional vector graphics.
9. SWF: Small Web Format/ShockWave Flash — SWF is a proprietary vector graphics format used to create animations on web sites.

E-commerce

1. AVS: Address Verification System — AVS is a method of verifying the identity of a person using a credit card to make a purchase online.
2. CSC/CVV: Card Security Code/Card Verification Value — CSC is a security feature available on most major credit cards that is used to prevent credit card fraud.
3. MID: Merchant ID — A MID is a unique identifier assigned to companies selling goods and used for billing purposes.
4. FAQ: Frequently Asked Questions — FAQ lists are a common support mechanism on many web sites that provides answers to questions that are commonly asked of the company.

Search Engine Optimization

1. CPC: Cost Per Click — CPC is the amount an advertiser pays every time a user clicks on one of their advertisements in a PPC campaign.
2. CPM: Cost Per 1000 Impressions — CPM is the amount an advertiser pays for every 1000 (or, roman numeral “M”) users who view their advertisement on a web page.
3. CTR: Click Through Rate/Ratio — CTR is a measure of the amount of users who click an advertisement as compared to the number of users who see the advertisement.
4. PPC: Pay Per Click — PPC is an advertising model used on the Web in which advertisers only pay when a user actually click their advertisement.
5. PR: PageRank — PageRank is an algorithm used to measure the value of a particular document relative to other documents in the same set. Commonly used by search engines to rank web site popularity.
6. SEO: Search Engine Optimization — SEO is the process of tweaking web sites so that they are more likely to be indexed higher in search engine results.
7. SERP: Search Engine Results Page — SERP is the listing of web pages returned by a search engine in response to a user search

Security

1. XSS: Cross-Site Scripting — XSS is a common web page security vulnerability where an attacker rigs a site they do not own to run malicious code.
2. CSRF: Cross-Site Request Forgery — CSRF is a common web page security vulnerability where an attacker poses as an authenticated user to execute actions.

Addressing

1. CNAME: Canonical Name — A CNAME is an alias of one hostname to another.
2. DNS: Domain Name System — DNS servers as the phone book of the Internet. It translates human-readable hostnames such as solosignal.com into numeric IP addresses used by networking equipment.
3. DTD: Document Type Definition — DTD is a document used to describe and specify the structure and organization of an XML document.
4. ICANN: Internet Corporation for Assigned Names and Numbers — ICANN is a non-profit organization formed to oversee the management of domain names and IP addresses.
5. IP: Internet Protocol — IP is a protocol for transferring data across a packet-switched network.
6. SLD: Second-Level Domain — SLD is a domain directly below the TLD. For example. In “solosignal.com”, “solosignal” is the SLD and “.com” is the TLD.
7. TLD: Top-Level Domain — TLD is the last part of any Internet domain name. For example: .com, .net, and .org are all TLDs.
8. URL: Uniform Resource Locator — URLs are the addresses used to request files through the Web.
9. WWW: World Wide Web — The WWW is the network of interlinked hypertext documents available through the Internet.

Comments

Web Stack Series Part 3: The Database

Parts 1 and 2 of our look at the Web Stack introduced us to the Physical Server and the Webserver Software. Part 3 of the series brings us to the second piece of software installed on the physical server: the Database.

Dynamic, database-driven web sites have become the gold standard on the Web. Sites are updated in real time, user-generated content fills ever page, custom-tailored data targets specific users, and data is changed on the fly - all thanks to the database. It is rare to find a website that doesn’t make use of a database in some way or another. The database has become the brain of the modern web site.

So what is a database? Let’s check in with our old pal Wikipedia for a quick and dirty definition:

In computing, a database can be defined as a structured collection of records or data that is stored in a computer so that a program can consult it to answer queries.

Though this may sound simplistic, the definition is spot on. A database is nothing more than a bunch of data (usually plain text) stored and indexed in a structured manner. This allows for specific data to be found quickly and painlessly. Perhaps an analogy is in order: A library is like a database - it is a central repository of books stored in a structured system (Dewey Decimal). This system makes it easy for a person to quickly find a specific book.

The larger and more complex sites on the internet typically store all of their content in a database and retrieve the appropriate data when necessary. The web page that is requested by the user is said to “query” the database for the appropriate data to be displayed. Databases can be queried using a special language called Structured Query Language or “SQL” (pronounced like “sequel”). SQL is simply a special type of language that makes it easy and intuitive to extract data from a database. There are people who spend their entire careers mastering SQL, although you can probably teach yourself the basics of SQL in about a month or two.

Here are a couple of things you should know about database systems:

• Just like a webserver, the database system is just another piece of software
  Database server software is installed on the physical server. Once installed, the database is turned on and left to run indefinitely in the background
• Database systems range in price from free (MySQL, PostgreSQL) to really, really, really expensive (Oracle, Microsoft SQL Server)
  The majority of small to medium sites on the Web today are run on MySQL. This is a natural consequence of it being free and easy to use. If you were to ask my opinion, I would always recommend MySQL, I love it.
• Database optimization is absolutely crucial if you want your web site to scale gracefully and handle high traffic loads
  Don’t be bashful about spending some money on a good developer who understands how to set up a database system properly. When your site explodes in popularity and handles all of the traffic without a hiccup, you will be thankful you did.

In the next part of this series, we will talk about the glue that connects the user, the webserver and the database all together. Make sure you are subscribed so you don’t miss out!

Comments

Solo Signal Series: The Web Stack Explained

Websites, at their core, are very simple things: a single file of plain text and markup that tells the user’s browser what to display. Sometimes there are hyperlinks, images and forms included on those pages, but that is typically as complex as the majority of websites ever get. So why does it cost so much to have a quality website developed? What takes place behind the curtains of a website?

As a visitor to a web page, you only see the final output of a series of tasks that must be completed to generate that page. I refer to the components that are responsible for executing these tasks as the Web Stack. The web stack contains approximately 8 levels, each essential for storing, generating and delivering any standard web page to the end user. Over the next two weeks we will go into detail on each of these pieces of the stack and explain how they relate to the overall web development process.

At the end of this series you will have an understanding of all the back-end processes involved in delivering web content to your users. I will also provide a graphic that visually represents the stack and shows exactly how all the pieces link to each other. This knowledge will be invaluable for you as you take on the task of architecting your own website (whether your build it yourself or outsource the work).

The Web Stack

1. Physical Server and Infrastructure
2. Webserver Software
3. Database Management System
4. Business Logic Programming
5. HTML and Markup
6. Cascading Style Sheets
7. Graphic Design
8. Client-side Scripting

Comments

Get Subscribed!

• Most Popular Posts

  • How Much Should Web Site Design, Development, and Hosting Cost?
  • 72 Essential Acronyms Related to Web Site Development
  • Solo Signal Series: The Web Stack Explained
  • Web Stack Series Part 3: The Database

• Recent Comments

  • merchant services: I would add the the best way to ensure you are fully compliant, secure, with 100% uptime is to...
  • UK SEO Services: Thats a great explanation for the need to correctly use anchor-text. Many thanks!
  • Hypotheek: nice article. I can use this for my thesis! thank you
  • SEO Studio Melbourne: I just found this article (a bit late, huh?) but I loved it. Very nice and clear.
  • John: Very useful tips - there are a few marketplaces for freelancers in the UK too. Check out...

• Categories

  • Accessibility (3)
  • Copywriting (1)
  • Database (1)
  • Design (2)
  • E-Commerce (2)
  • Education (1)
  • General (10)
  • Reference (1)
  • Search Engine Optimization (1)
  • Security (1)
  • Technology (5)
  • Tips (3)
  • Web Site Development (7)

• Archives

  • August 2007
  • July 2007
  • June 2007

• 
  

• About Solo Signal

  Solo Signal is a blog for anyone interested in learning more about web site development as it relates to business through simple, easy-to-understand articles. We hope to provide business-minded individuals with the information, tools and understanding needed to successfully leverage the Web for their benefit.

  Read more »

• Tags

  accessibility acronyms apache bids budget business logic content management cost credit cards CSS databases definitions design ecommerce elance elliott cross encryption freelancing hardware html http integration links low cost mark up marketplace microsoft mysql navigation open source optimization oracle outsourcing page rank patterns price programming projects reference rent a coder rss scalability security seo server server side scripting shopping cart software structure style sheets taxes tips usability value w3c web browser web design web development web hosting web site web stack web standards webserver xhtml

• Add Feed To...

  

• Recent Readers