The Complete Web Site Development Process In a Nutshell (Part 2/3)

4. Graphic Design

If you’re doing both the graphic design and front-end web site development then this step should be pretty straightforward.

In other circumstances, be sure to inform whoever is creating the site design of what type of functionalities the site will require. Have the designer check in with you periodically with updates so you can verify that developing the HTML/CSS and implementing the SEO (if applicable) won’t be an issue. Sometimes graphic designers can get a little too crazy for the web and some minor changes can be made to correct some for those issues.

Do not forget to get client approval of the final design. The last thing you want to do is get 80% of the way through HTML/CSS development only to have the client want a major change in the layout.

5. Creating a Staging (Testing Environment) for Web Site Development

This is the first major technical jump in your web site development process thus far. Web site development should never be done on a live domain. In fact it can hurt your sites ranking in Google, Yahoo, and Bing.

Set up a sub-domain on your live domain and have it blocked from the SERPs with a robots.txt file. This way, when in the development process, you won’t have duplicate content issues with the live site. Staging sites enable a fixed group of people to work on the site without concerns of traffic inputting or accessing information that may yet to be secured within the new project.

This also allows for the old site to remain as a source of information to users to happen upon it. Nothing is more irritating than coming across a site that looks helpful only to find, “Sorry our site is being updated please try back in a few weeks!”

6. Client Side Development (HTML / CSS / JavaScript / jQuery)

Ahhhhhhh yes! Now we are finally in the hands-on stages of what this whole post is about.

Here are the steps for front-end web site development I recommend:

• Create a staging site file on your local machine
• Create an HTML skeleton with filler content (Lorem Ipsum)
• Chop up the PSD / AI file into graphic components
• Skin the HTML skeleton with CSS
• Apply JavaScript / jQuery effects where needed.
• Validate your CSS / HTML and check for browser compatibility
• Convert the local mockup into a CMS theme/skin (If applicable)

The above allows for a quick front-end web site development process. Working in a local environment allows for fast coding of HTML and CSS without having to constantly upload files to the staging environment.

When coding my HTML skeleton, I make sure to comment the opening and closing tags for each element on the page. This helps when chopping the files up into the different sections needed for each CMS.

7. Server Side Development (Database development & Scripting)

Now for my favorite part of web site development–making the site function properly. Obviously, if the project site is mostly static in nature, then this step may be little to no work. However, due to the fact that most sites nowadays are running on custom CMS implementations, this step is becoming the most important and extensive part of the web site development process.

Without getting overly technical in this article, here are some steps I like to take:

• Develop the database and make sure it is properly normalized (may be unnecessary if using a CMS)
• Script functionalities into applicable portions of the web application
• Make the application as secure as possible

Again, without getting over technical for this article, here is why you need to do this.

Proper development of the database is the most important step of any dynamic web application. In the event that the database is poorly developed, it may cripple the functionality of the application entirely. Therefore, a lot of time and analytical thought must go into making the database as flexible as possible.

The other steps are quite obvious. Once the database is developed, you can then start to add the functionalities of the site or application. You should also keep in mind that every application should be secure as possible to prevent hackers from trying to dismantle it.

**COUGH**hackedcms**COUGH**

Move on to part 3 of the Web Site Development Process.