The Website Coding or Website Development Process

The website coding side is really where the website design, all the meetings and discussions come to life as the functionality required gets built in and the website ultimately, at the end of this stage is ready for testing and / or final approval.

Again, as mentioned through this article series, every web agency operates differently, so in this particular article, we will be sharing with you our process when it comes to coding the website.

The process for BEFORE coding commences would typically be as follows:

  1. Technologies are finalized between project manager and coder(s). These would have been discussed with the project manager during the “Choosing a Web Agency” and / or “Choosing a Web Hosting Company” stage of the website process.
  2. Website structure discussed and finalized between designer and coder(s). Some agencies have chosen to work with HTML tables; others choose to use CSS (Cascading Style Sheets) and some to choose both for different projects. While we are focussing more on the CSS side for our development now, there is sometimes a need to make use of the good-old fashioned table way. During this phase, we discuss which would work best for the site.
  3. Specifications and Functionality (if any) clarified between project manager, designer and coder(s). Everything that has been handled between project manager and client is handed down to the coder. The Website Designers may also be involved during this process specifically if they have designed a specific feature or fancy feature that needs to be implemented. The designer will then explain how the functionality may work – this would typically be for menus or navigation types.

What happens during coding?

Well, in summary – A WHOLE LOT!

Our typical process once a full understanding of the website has been clarified is the following:

  1. Setup the basic framework based on the approved design. This would typically be the home page that we start with as the home page is where “it all begins” when a visitor visits your website. The home page also dictates the framework, so it’s the best and most obvious place to start. This setup process would include:
    • Setting up of CSS – setup positioning and styles for the text that will be displayed on the site.
    • Cutting, slicing and optimising of images. Image slicing and optimising is crucial during the coding phase as images contribute to a large portion on your website speed. You want a website that loads quickly and not slowly due to too large images or to poorly optimised images.
    • Implementing the HTML and any special functionality (discussed in step 2 above)
  2. Identify reusable sections of the coded framework (called Server Side Includes). For hosting accounts that allow particular scripting languages to be used such as PHP or ASP, reusable pieces of code can be separated into their own files and pulled in through the necessary commands. A typical use for “Server Side Includes” sections would be for menus, footers, advertising areas, banners, etc. One doesn’t HAVE to have ASP or PHP enabled, but if the hosting company allows for SHTML to be implemented, the same process would be followed. Hosting companies / account that only support HTML will not be able to use this facility as well.
  3. Implement the “Server Side Includes” into the framework. This doesn’t take too long to do and will only need to be done once really. Other “Server Side Includes” may be required for other pages, but the key ones at this point are ones that help with the structure.

** See “Why use Server Side Includes?” for a better explanation on these “Server Side Includes”

Once the framework has been setup, the following will take place:

  1. The home page is tested in different browsers – this is particular important when building using NO tables and just CSS. The most common browsers that we will test on include:
    • Internet Explorer (v.6 up until current version)
    • Firefox (Mac and PC)
    • Safari

    Generally speaking, if the site works across the above mentioned browsers, it will more than like work across other browsers such as Opera.

  2. Review by the designer. This can be a very painful time for the coder, but it’s crucial that the client gets the design they approved. This includes structure, colours, spacing, etc. The designer typically has a good eye and any issues picked up will be corrected and the coder can then continue once approval is done.
    Then, the wheels can start turning a little faster. The remaining pages will be developed according to the designs setup for each page and a very similar process mentioned above will take place for each page which will include some of the following:

    • Menu options and hyperlinks will be setup
    • Text and images (cut, sliced and optimised) will be implemented
    • Special functionality will be implemented
    • Testing in various browsers
    • Etc

Then what?

Now, the coder and the project manager will run through the site and check everything is in order such as:

  • Menu options look and link correctly
  • Text is correct
  • Functionality works correctly
  • Website looks and runs correctly on major browsers
  • Check that everything in the spec has been covered

Once all is in order, the website will be uploaded to a temporary link for the client to review. Any minor text changes can be addressed.
Once the client has approved the website, and possibly the odd tweak, the website is set live and the client is finally in business and his / her website has come to life!!

What about Search Engine Optimization(SEO)?

This would depend on the client and whether they wanted search engine optimisation (SEO) done. There are no guarantees with SEO, but there are some standard and good practices that can be made use of.

If the client requested SEO, towards the end of the coding, the project manager would request some search terms and phrases the client would like to be found for.

Once we receive that information, each page is manually optimised as close as possible to the requested search terms.

But, we may cover the search engine optimisation in another article in the future. For some information on SEO, you can keep an eye on our South Africa SEO category in our blog.

Why use Server Side Includes?

This is a great question and we just love using these so-called “Server Side Includes” because of the following:

  1. It allows more flexibility within the site. If a client has a website that has 100 pages, only 1 simple change in 1 file needs to be implemented opposed to in EACH page on the site. This saves both the client FINANCIALLY and makes things more practical from a development point of view.
  2. They make your file size smaller. Websites, when opened in an web browser such as Firefox, Internet Explorer, etc, look so beautiful. But, what is actually making them look like that is code which is ultimately like a text file. Have 1 line in this “text file” that tells the server to pull in “Server Side Include” opposed to having all the text in the reusable file in the “text file” makes far less text in the text file. Make sense? If not, then don’t worries – leave the technical stuff to us or your website coders – just know that these little “Server Side Includes” can be a godsend.
  3. Reduces development time. Doesn’t that sound great to you as a client? Well, it’s true. It makes changes / tweaks to the site easier and it makes working in the code much nicer.