When doing repetitive tasks, such as website development, it makes sense that I to stick to a routine, something that’s tried and tested and gets me where I want to go, quickly. Over the years working as a website developer I’ve fine-tuned a web development process that helps speed things up to get the project finished on time, every time. Read on…

The 4D Web Development Process

My web development process is called the The 4D Process: Discover, Design, Develop, Deploy. No matter how big or small your project it makes sense for me to follow these steps:

1. Discover

   Discovery is, perhaps, the most important aspect of the web development process or, indeed, any process. I’m sure you’ve come across the following quote

   By failing to prepare, you are preparing to fail.

   And this rings true for me and my 4D Process. The discovery component is broken down into the following segments:

   Client Requirements

   To kick off proceedings I need to sit down with my client to discuss their goals and objectives of having a website, establish their target market and review any content that they have already gathered.

   Proposal

   Only after I have a gained a detailed insight into my clients requirements am I able to issue a quotation. I need to fully understand what the project will entail to ensure I’m not selling myself short or misinterpreting the clients requiements. It’s during this phase that I map out a preliminary sitemap, figure out which tools I’m going to use and think about all the various components that will be built into the website so I can figure out how long its actually going to take.

   Contract

   Upon approval of the proposal a contract that outlines payment terms and various legal things to protect both the client and I is sent to the client. Once that’s signed off and I’ve received the deposit, the fun begins!

2. Design

   The next step of the web development process is the website design phase. This is where I review everything that was established during the discovery phase and begin creating a visual representation of what the client needs. Before I crack open Photoshop though I need a trusty pencil and paper…

   Wireframes & Sketching

   A wireframe is a web designers version of a set of blueprints. It helps me to figure out what goes where without the distraction of colours, fonts and graphics. The aim here is to establish the best hierarchy for the content and layout for the best user experience. With pencil in hand I go about sketching some ideas before recreating it in photoshop.

   Photoshop Design

   Because I’ve completed the wireframes in Photoshop I can quickly and easily begin to turn them into the initial design. These will be fired off to the client who can finally see what we discussed during the discovery stage come to life.

   Client Feedback and Iteration

   This is the time for the client to have their input and provide feedback on the design, generally a couple of rounds of revision should be enough for the client to sign off on something that they’re totally happy with. I don’t mind a few additional tweaks here and there in order to attain perfection because I know that once the design has been finalised changes become cumbersome and may incur additional expense for the client.

3. Devlop

   With my crayons tucked away in my desk and a design rubber-stamped by the client I’m ready to delve into the third ‘D’ of my web development process – coding the website. This will turn a pretty picture into a functioning website and, eventually, the end product that the client will be delighted with.

   Static, CMS, eCommerce

   Depending on the clients requirement I’ll probably be creating one of these three types of website, and a Content Management System (CMS) website is the most common which I will generally develop using WordPress. Using a tool such as WordPress means I can code few different page designs and get the basic site up and running in super-quick time.

   Add Bells & Whistles

   The basic shell of the site can be developed quickly but adding custom functionality such as reservation forms, user registrations, form validation and so on, can take time. Throughout the whole development process I’ll be constantly testing the site and will have the site on a test server for the client to witness the progress.

   Content

   Once the website development is complete I’ll begin to add all the content that the client has given me. Any content not handed over at this point will be up to the client to add which can cause problems; the amount of times I’ve seen a CMS website handed over in perfect working order only for the client to ruin it all by changing the font to comic-sans and the font colour to green… gaaaah. (note to self: write article on clients ruining good designs!)

   Test, test, test.

   The client and I will continuously test the website to ensure it’s working satisfactorily and that all systems are go for launch. Assuming there are no bugs and that the client is content, we move to deployment.

4. Deploy

   The actual website development process is now complete and the final step is to get the site up and running, emails set up and the website optimised on the live server.

   Upload to Server

   The time has come for the site to be uploaded to the clients server – I recommend using MediaTemple.net. Once all the files are uploaded, I’ll remove the holding page or the old site and the site will go live.

   Test & Optimise

   I’ll ask the client to test the site in tandem with me to pick out and errors that may have occurred during upload. We’ll test in all browsers to ensure a cohesive look and once we’re sure the site is functioning properly, I’ll begin optimising the site. There are plenty of tools that help website developers test the site, for example WebPageTest.org. This is not specifically Search Engine Optimisation (although this will help SEO), rather it’s tweaking the website to make sure it’s running lightening-quick – if a user is waiting too long for a site to load, they’ll leave and never return. I’ll make sure the meta-data is stripped from and each image is compressed, I’ll minify and combine HTML, CSS and JS files and, where possible, I’ll serve files from a Content Delivery Network – all this (and more) will help the site run quickly.

   Analytics, PPC and More

   So the web development process is complete, the site is live all that’s left to do is make sure we have a way to track visitor stats on the site and get visitors to the site. Google is our friend here. Their Google Analytics software is perfect for monitoring the success of the site. We can see who your visitors are, where they are and what they’re up to. This will help us understand your customers and help you, for example, adjust your marketing campaigns accordingly. In addition to Analytics, Google offers Pay Per Click (PPC) advertising through Google Adwords. I can set this up for the customer which will put them to the top of Google within hours.

And that, folks, is my 4D Web Development Process. If you need me at any stage of your current web development process, get in touch.