Stages of site development

A good website is an important part of an online presence in today’s digital world. The process of creating a website requires detailed planning and a thorough approach to completing all the steps.

What is a website, how is it created and into what stages is its creation divided? If we consider the correct approach to the development of a website, then the following stages are distinguished:

• definition of the concept of the site and functionality;
• development of the structure of the site;
• drawing block structure of pages;
• design development;
• layout and creation of adaptive version;
• selection of the site’s administrative panel (CMS);
• “stretching” the layout on the admin;
• implementation of functionality on the site;
• creating the internal structure of sections;
• filling the site with goods and content;
• final testing of the site functionality;
• implementation of additional technical corrections.

So, let’s look at all the stages in more detail.

Site concept and functionality

At this stage occurs that further decides the entire fate of the site – you choose its type. When deciding, you need to clearly define what goals it should solve. Need something to sell or it should just inform people about you as a person and a specialist, or there will just be interesting articles on a particular subject, or it will be a news portal. All this will affect the appearance of the site and its structure. Below we will analyze the main types of sites.

LandingPage

This is a site consisting of just one – landing page, which displays all the information about the product/service, the company providing it and all the benefits. All this is displayed in separate blocks-screens, usually they are from 6 to 12. Information on them is presented briefly, as attractive and colorful as possible. Everything is done so that a person made an instant purchase.

Most often landings are created under various types of paid advertising – search, multimedia, etc., because to attract organic traffic to them is almost unrealistic.

This type is relevant only for similar services or products. For example, the sale of watches Casio Swiss Army different colors. To take the entire range of watches is no longer practical, because the conversion of landings will significantly decrease.

There is no special functionality on these sites. It is possible to have simple calculators and feedback forms. Possible certain “questionnaire” for involvement in the purchase. There may be functionality on countdown timers or collecting e-mail addresses for further mailings. In terms of quick sales, nothing else should be there.

Business card site

This is not a large in size, number of pages and blocks on them site, which is designed simply to inform potential customers about a person or a particular service. The number of pages – from 3 to 5, but it is possible to have a blog with articles or news. There is virtually no functionality on it, only text pages with pictures and blocks of benefits. This is the simplest site in terms of development and filling. The number of page templates – 2-3 (one-type pages with different content). It is used, most often, as a regular business card, only in digital form (hence the name) – a person just has to go to it, find contacts or clarify the field of activity.

Service site, corporate portal

This site may consist of a sufficiently large number of pages and have a deep internal structure, for example, web resources of legal topics. There may be hundreds of pages with services rendered. The functionality of the site can be quite diverse – from the simplest forms of communication to complex calculators. The number of page templates – from 3 to 8. The number of blocks on the page more than a business card. Blocks are arranged in a certain sequence to involve a person in the sales funnel.

The right structure is thought through and developed on this site, as they are already ranking well in search engine results with the right approach.

Online store

This is probably one of the most complex and labor-intensive types of sites, especially if you make it “smart”. Such a lot of functionality, as on the IM, is not applied anywhere else. The most popular:

• filters;
• sorts;
• selections;
• SEO filters;
• calculators;
• tagging;
• similar products;
• baskets, etc.

The peculiarity of an online store is the presence of a “Shopping Cart” – the ability to place an order through the site. No other type of site has it.

Development of the structure of the site

Once the type of site has been selected and thought through all the functionality that is needed, you can begin to develop the structure of the site. You need to think about the structure, which is as simple as possible to find this or that product and at the same time would not be too “muddled” and confusing (this is the case if there are a lot of goods or services).

The development of the structure can be done in different ways.

• The simplest option is to find a top competitor with a similar assortment and just copy it.
• The second option is to develop the structure yourself simply based on the structure of various competitors and integrating it under your assortment.
• The third option is the most difficult – it will require a lot of knowledge and skills on SEO. It is necessary to collect the entire semantic kernel on the site for the entire range and manually, or with the help of grouping by words or rendition, to divide all the words into groups – clustering. This option is too complex and expensive, especially with a huge range of products, so, most often use the first or second option.

Example of the developed structure in the X-Mind program

Developing the structure of pages

All work in this stage is carried out in order to show the designer what blocks and in what, approximately, the form needed on the pages of the site. This stage is most often needed only for service sites and online stores, when the user needs to show certain information in certain moments of familiarization with the site.

If it is done by a professional marketer, he builds a certain chain of involvement of a potential customer in the purchase. It is, in its way, a science of how to properly present the product/service and all its advantages, as well as the benefits of cooperation with you, closing all objections and doubts.

All this is developed on the basis of personal experience, analysis of competitors and the niche as a whole. It is also important to understand the needs of the client and the peculiarities of communicating with him: what he is interested in, what can scare him off, and what on the contrary – to attract.

In our opinion, the development of the structure of landings should be done only by marketers, because in the case of quick purchases it is necessary to present everything correctly to potential customers.

Creating a website design

Once the structure of the site is ready and outlined schemes of pages (page templates) and all the functionality that should be, you can pass it to the designer. Along with everything he should provide several options that, in the opinion of the customer, good and a few that he did not like, so that the designer understands “where it is further to move”. Let’s be frank, not everything you like will really sell. It’s also important to provide the designer with everything that needs to be used in developing the future look – logos, images, look-books, corporate colors, etc.

Design development and approval can be done in several schemes.

The first option is block-by-block approval. Each block/page is approved separately and the design of the next one is not drawn without approval of the previous one. In the final version no edits are made.

The second option is to render the design of all page templates and make edits after completion. This method is used most often, but here it is important to remember that the designer can limit the number of edits. At first glance – this may sound a bit wrong from the customer’s point of view. But once again I remind you that a good designer (especially if he has experience in UX) has a much better understanding of what he is doing and what he is doing it for. He clearly knows what colors and how to combine, what the spacing between elements should be and how best to place them. Very often, trust in the designer is confirmed by a high conversion rate of the site.

Creating a layout based on the design

Once the design is fully approved, it needs to be converted into html code that is understandable to browsers. This process is called layout. Also at this stage all animation on the site and all interactive elements are developed. The main thing to remember and immediately voice front-end programmer (layout designer) is that all work should be done only on the latest specifications CSS and HTML. Because using old techniques, your site in new browsers may look far from the way you would like. It is also fraught with the fact that the site may have errors in the source code and style files.

Also, before you start work, you should specify that you need and adaptive layout (if you do not have a separate mobile version of the site). This will help the site to display correctly on mobile devices. This is a prerequisite, given that almost half of all traffic on all modern resources – mobile.

Choosing a CMS (administrative panel)

At the moment there are hundreds of different administrative panels in the world. Each of them has its own advantages, disadvantages, features. A separate segment of admin panels are self-descriptive. This is a type of CMS, which is created individually for each site. In this article we will not consider self-written admin, they are too expensive and not all programmers will be able to work with them in the future.

How to choose the right CMS

To do this, you need to understand what functionality will be on the site and what type of site you have. For example, some admin. panels were developed specifically for IM (OpenCart, Drupal), others – for information sites (WordPress, Joomla). This does not mean that it is impossible to make an info site on OpenCart, but it will not be reasonable in terms of finalizing the functionality.

For example, WordPress is great for infosites, blogs, business cards and service sites, and with some customization – for small online stores. But to realize a large IM on it is categorically impossible – it will glitch and break. For a full-fledged store it is better to use a customized CMS – OpenCart, Bitrix. They have already implemented the functionality of online shopping – shopping cart and filtering by parameters.

Therefore, in order to choose the right CMS, you can consult with experts, better several. And that they wrote all the advantages and possible problems of working with each.

Functionality implementation

After the administrative panel is selected and installed, work is carried out to implement all the functionality of the site and customize its proper operation. At this stage back-end programmer deploys and customizes the site database, uploading and downloading data from it and links it all with the functionality of the site. Install all the necessary plugins, add-ons and settings that are necessary for the proper operation of the site and its technical part. Conducts optimization of all processes related to its functional part and stability of its work.

Also in the administrative panel are configured internal fields for entering the necessary data into the database tables. What exactly should be the fields, it is necessary to specify in the ToR, so that the programmer realized everything correctly and fully.

All work should be performed by standard methods or solutions so that, if necessary, other programmers can understand the code and tweak it or correct it. So called “crutches” can be used only in exceptional cases when it is impossible to apply a standard solution. Also at this stage, basic testing of the functionality is performed. When everything functions normally, you can move on to the next stage, if “bugs” are found, you make corrections and test the functionality again.

Layout tensioning

This is the process of combining the functional part of the site with its appearance. At this stage of the work, the programmer converts the converted design into specialized CMS theme files. Each administrative panel has them different, so the approach to stretch layout may vary. They are created for each page template on the site, for which the design is made.

After that, the output of the necessary information from the base in the necessary blocks on the site is configured. In order for the programmer to implement everything correctly, a proper TOR must be drawn up, which describes what information and where it should be displayed for each individual page.

After the layout stretching is completed, test products and sections are added to the site and basic testing of the output and functionality of the functionality with the layout is carried out – how correctly and correctly the design and all elements of the site are displayed, whether the correct information is displayed on the pages, etc.

Adaptive layout

We also test the adaptive version of the site on any screen resolution – from phone to 4K monitor. Everything to make the mobile adaptive version as correct and convenient as possible. We also perform cross-browser testing of the layout at different resolutions – the layout is tested on different types of devices and browsers.

Filling the site

After the functionality of the layout has been tested, the site is filled with the full structure of sections-subsections and products, according to the developed scheme at the beginning of the design. All necessary fields in all elements are filled in, and the correctness of their display is checked. Goods are distributed by sections and filled with information, the site is made basic auto-generated metadata (if there is no ready) and added content to the pages.

Very often site filling can be done by importing or copying information from external sources – it can be the base of another site, 1C synchronization database, data tables, etc.

Functionality check

After the site is fully populated, a full functionality check is performed:

• display and output of elements;
• correct operation of pagination;
• output of goods;
• functioning of filters and sorting;
• functionality of the shopping cart;
• check of feedback forms;
• functionality of registration on the site;
• check the internal functionality of order placement.

And only after that the site is transferred to the main domain, if it was developed on the test domain. Or open to indexing, if it was closed in robots.txt.

And now everything – the site is ready to work and seo-promotion!

But this is not the last stage of site creation. Quite important and integral stage – the subsequent development and support of the site. It is necessary to constantly update the functionality and content, analyze data on the attendance of the resource, monitor its performance and analyze user behavior. Based on user feedback, it is necessary to make necessary changes, improve existing functions, optimize performance and provide users with site security. All this will help to maintain the competitiveness of the site.

Let’s summarize

Website development is a labor-intensive process that requires detailed planning, quality implementation and further support. Thanks to the algorithms and stages of development, you can achieve the desired result. And by paying due attention to each of them, you will create a successful site that will meet the expectations and needs of users.

Serhii Ivanchenko

CEO

Author's page