The Development Process: How I Develop Websites

Web development is a very complicated task that involves many steps to achieve a goal. In this post, I want to quickly go over some of the steps. Though many of these steps would apply to any website development task, I’m specifically talking about ones that I am custom coding.

Initial Ideas
First I need to know what the website is. This is when I’ll sit down with the client and try to figure out what they are thinking of. This can be kind of tricky as I’ve found that clients tend to know exactly what they’re looking for, they just might not know it yet. This forces me to try to lead the conversation into them telling me more of what they actually want rather than something along the lines of “Your the developer, what works for the industry.” Though I do have some knowledge of various industries and the way their websites work, going off purely that is not a good call. You should love your own website.

Design Stage
Now we begin putting the ideas to paper. Well, in this case, digital files. Depending on the complexity of the site, I may start with hand-drawn sketches. If I do make sketches, it’s not usually of the entire website but of specific elements of the website. These sketches are usually not shown to the client has I will have digital versions available for viewing. If I decide I don’t need sketches or once they are complete, I will use either Adobe XD or Figma to make a working prototype of the website. Though these 2 programs are leading the industry, they both lack some key features for prototyping which forces me to leave notes about how things will function on the website.

Design Approval
Design has been completed and it’s time to show it to the client. Usually, the whole website will be completed once but some of the elements will have multiple layout options. I’ve found that this helps the client discuss more of what they like and dislike from each design rather than knowing they don’t like what you have but don’t have anything to compare it to. This step is usually not the fastest as websites are a really big deal so clients can be picky about what is displayed on them, this is okay and is to be expected.

Third-Party Integrations
Now is where I’d begin planning the third-party systems that will help make the website run well and easier to develop. This process usually begins before the official approval as I only need an idea of what the approved design is. Some of the integrations that are always used are Google Analytics, so we have an understanding of how users are using the website, and Bootstrap, a CSS framework that allows for much quicker layout design. Other elements I would think about are intractable elements or sliders that may be enhanced via third-party JavaScript/CSS libraries.

Development Begins
Now that the website is designed and approved I can begin developing the site. I start with a code document that is nothing more than this;
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>

</body>
</html>

From that simple HTML page, grows a full sized website. There are many complications along the way that have to be jumped through and I try to keep clients as updated as possible without annoying them with too many updates. While developing, I will often come up with new ideas for designs of certain elements, these will be sent to the client as they come up.

Testing
Development is done but it’s not quite ready to fully show the client yet. By this stage, the client has seen the website and can likely play around with it but I don’t want to fully discuss their thoughts until it’s been tested. During this phase, I use a system called BrowserStack that allows me to access the site from a large array of computers and browsers. This allows me to test the website for incompatibilities on different combinations of systems that I may not have access to without this program. I will also do a basic site audit which will find any irregularity in the speed of the pages and even some simple mistakes I made along the way.

Job Completion
Developed and tested, I’m ready to talk with the client. Almost always, there are a list of changes that need to be made. I said with the design approval, this is okay and 100% expected. If a client accepted a website without any changes, I’d begin to think they don’t actually want a website or realize the importance of one. I want clients to request changes as it shows they care about the website. The last 3 phases are done several times during the development of a website until the approval is finally given and the website goes live.

That’s about it. The website is live, the client is happy. After this, I may be asked to do some typical maintenance for the website but for the most part, my job is done. This process can take anywhere from a few months to over a year. It all depends on how complicated and large the website is. That’s it for this post and I greatly appreciate you taking the time to read it all.

Leave a Reply

Your email address will not be published.