Blog

The process of creating a website from a developer’s perspective

 

The development team at Project: People supports international clients in designing and implementing websites. Projects differ in character, scope, and requirements. In short, each project is different and we work differently with every client. Why? Because we are lean. We work based on feedback, which allows us to maximize results. Our development team adapts the coding and implementation process to the client’s needs. In a broader perspective, however, we notice many common elements that make the cooperation between the development team and a client easier to manage. The following text presents a step-by-step process of website development. 

Website project – how does the collaboration begin

The collaboration between a client and the developers begins when we prepare a reply to a request for proposal. We start by understanding the client’s needs and verifying whether the technologies we use are optimal for the project at hand. At Project: People, we specialize in creating websites on the WordPress platform.

Before writing a single line of code, we collaborate closely with a content designer responsible for creating logical, structured, and accessible text and a UI designer whose job is to design the initial layout of content and graphic elements on the page, the so-called mock-ups. After the mock-up phase, the designer begins creating the design. At this stage, close cooperation and feedback from the entire team are crucial. This ensures creating websites that are not only aesthetically pleasing and graphically interesting but also well-thought-out to ensure ease of navigation and information finding. 

Once we get the final approval of the design and content for the website, the actual development stage begins. It consists of the following steps: 

  1. Getting accesses and authorizations 
  2. Set up of the project environment
  3. Dividing sub-pages into reusable blocks
  4. Coding
  5. Integrations 
  6. Optimization 
  7. Testing 
  8. Publishing 

An important and often overlooked stage in the development process is determining with a client where and how the website will be published. It is necessary to ask whether the domain (i.e., the address you enter to view the page, e.g., https://projectpeople.pl/) has already been purchased and configured, or if we are expected to help with that.

Another important element of the initial configuration is obtaining information about the server/hosting, i.e., the place on the Internet where the website will be placed.

You should also remember about the SSL certificate that ensures data encryption, i.e., website security. Nowadays, the SSL certificate is included in the packages offered by most good hosting providers. You can tell if a website has an implemented certificate by a padlock icon next to the website address in your browser and the “https” in front of the domain name.


Sites without a certificate will only have “http” in the address, and before entering such a website, you will see a window with a question if you are sure you want to visit an unsecured site. 

Set up of the project environment

Preparation of the project environment includes several steps that need to be done before the actual coding can begin. We start by downloading the latest version of WordPress to ensure the highest possible level of security.

The next step is to create a basic theme for the site. I rely on the Underscores starter template that I’ve been modifying for my needs for years. This way, we save the time we would otherwise spend writing boilerplate (repetitive code).

When setting up the starter template, we use Gulp for code automation which helps save a lot of time. Gulp is a set of tools for automating and streamlining work. Among other things, it allows for automatic browser refreshing when you save your code (BrowserSync), code and image/video optimization, or code compilation.

 


Next, it is worth taking care of code versioning. We use Git for this in conjunction with Bitbucket from Atlassian, a producer of Jira and Trello. Code versioning is a useful feature that allows you to save versions of your code and test changes without the necessity to delete what you’ve already written. Most importantly, it allows multiple developers to work on the same code without overwriting changes. In case of errors, it allows restoring a selected version of a single file or the whole application code. 

The last step in preparing the environment is to reset the styles in browsers so that each page displays the same way, and define the global CSS styles. Styles are responsible for the visual layer of the page. We mainly use Sass, which allows us to quickly create modular and transparent styles, and offers many other pragmatic functionalities. Global styles are values that apply to most subpages, for example, colors, fonts, container (page) width, buttons, etc.

Dividing sub-pages into reusable blocks

At this stage, it is always a good idea to consult a designer and make sure we understand each other 100%. Websites can be considered in a block layout that makes coding and structuring the code easier. Typical blocks include

  • navigation (header), 
  • section with a big catchy slogan (hero), 
  • section with testimonials,
  • section with logos, 
  • section with a contact form, 
  • footer.

These are standard blocks, but using them is optional.
After dividing the design into sections, you can move on to development.

Coding

Finally, we come to the longest stage of the development process. It’s time to open the editor and start coding. The first step is to create pages in WordPress that match the designed structure, and complete all navigation menus. 

Next, we create recurring sub-page elements (header, footer) and proceed with all sections according to the order agreed with a client. All pages and sections are fully dynamic, which means that the content can be edited in a simple editor, and subsequent subpages can be built using the coded sections. This way, after the project is finished, a client can create more subpages (e.g., for a new service) without programming skills and the need to contact us, which saves time and money. It is made possible by the ultra-fast Advanced Custom Fields plugin.

 


Once a week, we send an update to a secure test server for client review along with a progress update. Depending on arrangements with a particular client, we can also provide daily updates on what we are working on. 

Integrations

Integrations mean connecting the website with external systems. Some examples of integrations include: 

  • recruitment systems (tomHRM, eRecruiter), 
  • bug tracking software, 
  • maps, 
  • CRM, 
  • ERP, 
  • newsletter.

There is no need to do post-development integration. We have developed this method of process organization over the years, and it always works. Sometimes, we perform the integration earlier because the client needs to complete the data in the system and test them at an early stage of development. We take a flexible approach to this to ensure client convenience.
In this step, we also integrate the website with the Sentry.io system, which detects and records all errors.

Optimization

Once all sections are coded, and all external systems are integrated, the performance optimization process begins to achieve the best possible performance, such as: 

  • First Contentful Paint (FCP)
  • Speed Index (SI), 
  • Largest Contentful Paint (LCP)
  • Time To Interactive (TTI)
  • Total Blocking Time (TBT)
  • Cumulative Layout Shift (CLS)

Based on these metrics, Google evaluates a site’s performance. Page load speed has a huge impact on user satisfaction and affects search engine positioning. It is just the tip of the iceberg called proper optimization. If you are interested, we encourage you to read the information contained on PageSpeedInsights, GTmetrix, and WebPageTest.

When optimizing, the help of the previously mentioned Gulp is invaluable. It allows you to compile a properly optimized version of the code to the production version. You shouldn’t forget about good server/hosting. Choosing the right hosting, however, is a topic for a separate article, so I will not elaborate on it here.

An important element influencing the user experience is sharp, fast-loading graphics. Currently, the optimal extension for graphics is the modern webp format. 

We use a service called QUIC.cloud that automates and optimizes each background image and swaps them on the page. The tool works even after the website is handed over to a client, which means they can upload images themselves because QUIC.cloud will make the changes automatically in the background.

 

Testing 

After completing the above steps, we move to the stage of final website testing. Already at the stage of development, we constantly test the website on different web browsers such as Chrome, Safari, Edge, Firefox, and Opera. We check and adjust the website for macOS, Windows, iOS, and Android.

All our projects are based on responsive web design (RWD). It is a designer-developer approach that helps make websites display correctly regardless of the device and screen width. 

It is also time to review everything that the bug tracking software, Sentry.io, has recorded and fix the problems.

Publication


After the corrections are made and a client gives final approval, it’s time to publish the website. We start by creating backups and transferring access. Then, depending on the arrangements, we publish the site or help the client’s team to do it.

Describing the general publishing process is a difficult task because every hosting/server requires a different approach. Nevertheless, we always help to ensure a happy end to the project. 

It is a simplified description of the development process in Project: People.  In the next article, we will shed more light on the post-development process. We will talk about what we can offer a client after the website is delivered and published. 

 

Articles isn't enough?

Would you like to learn about the whole process and how we could carry it out in your organization?

Let's talk

See the service

Check out how we can
carry out this process
together in your company.

Check now