WEBSITE DEVELOPMENT STEPS

GENERAL INFORMATION.

WEBSITE DEVELOPMENT STEPS. What is a site, how is it created, and at what stages is its creation broken down? This question is of interest to everyone who wants to open a “representative office” on the Internet. The understanding of most people in website design is simply a drawn design. But this is only one of the stages, and the most interesting is that it is not the first and not the most important. If we consider the correct approach to the development of the site, then the following steps are distinguished:

definition of the site concept and functionality;

site structure development;

drawing block structure of pages;

 design development;

layout and creation of an adaptive version;

selection of the administrative heading of the site (CMS);

“Stretch” of layout on the admin panel;

implementation of the functionality on the site;

creating an internal partition structure;

filling the site with goods and content;

final testing of site functionality;

implementation of additional technical changes.

So, let’s take a look at all the steps in more detail.

SITE CONCEPT AND FUNCTIONALITY.

At this stage, what happens in the future decides the whole fate of the site, you choose its type. When making a decision, it is necessary to clearly determine what goals he should solve. You need to sell something and in what assortment, or it should simply inform people about you as a person and a specialist, or there will simply be interesting articles on a specific topic, or it will be a news portal. All of 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 only one – landing – page, which displays all the information about the product/service, the company that provides it and all the benefits. All this is displayed in separate block screens, usually from 6 to 12. Information is presented to them briefly, as attractively and as colorfully as possible. Everything is done so that a person makes an instant purchase.

Most often, landings are created for various types of paid advertising – search, multimedia, etc., since it is almost impossible to attract organic traffic to them.

This type is relevant only for similar services or goods. For example, the sale of Casio Swiss Army watches in various colors. Taking the entire assortment of watches is no longer practical since the conversion of the landing page is significantly reduced.

There is no special functionality on these sites. Perhaps the presence of simple calculators and feedback forms. A certain “questionnaire-questionnaire” is possible for involvement in the purchase. From the point of view of quick sales, nothing else should be there. Functionality for countdown timers or mail collection for further mailings is possible.

BUSINESS CARD SITE.

This is not large in size – by the number of pages and blocks on them, a site that is designed to simply inform potential customers about a person or a specific service. The number of pages is from 3 to 5, but a blog with articles or news is possible. There is practically no functionality on it, only text pages with pictures and benefit blocks. This is the simplest site in terms of development and content. The number of page templates is 2-3 (the same type of page with different content). It is used, most often, like an ordinary business card, only in digital form (from where the name comes from) – a person just needs to go to it, find contacts or specify the scope of activity.

SERVICE SITE, CORPORATE PORTAL.

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

The correct structure is thought over and developed on this site since they are already well ranked in search results with the right approach.

ONLINE STORE.

This is perhaps one of the most complex and time-consuming types of sites, especially if you do it wisely. Such a quantity of functionality as on IM is not used anywhere else. The most popular:

 Filters

 sorting;

 sampling;

 SEO filters;

 calculators;

 tagging;

 similar products;

 baskets etc.

A feature of the online store is precisely the presence of the Basket – the ability to place an order through the site. No other type of site has it.

SITE STRUCTURE DEVELOPMENT.

After you have chosen the type of site and thought out all the functionality that is needed, you can begin to develop the structure of the site. You need to think over a structure that will allow you to find this or that product as simple as possible and at the same time not be too “sophisticated” 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 simply copy from him.

The second option is to develop the structure yourself, simply relying 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 all the semantic core on the site for the entire assortment and manually, or by grouping by words or extradition, divide all the words into groups – cluster. This option is too complicated and expensive, especially with a huge assortment of goods that most often use the first or second option.

DESIGN PAGE STRUCTURE.

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

If this is done by a professional marketer, then he builds a certain chain of involvement of a potential customer in the purchase. This, in its own way, is a whole science of how to properly present a product/service and all its advantages, as well as the benefits of working with you right and at the right time, closing all objections and doubts.

This is all based on personal experience, analysis of competitors and the niche as a whole. It is also important to understand the needs of the client and the features of communicating with him, what is interesting for him, what can scare him off, and vice versa – attract him.

In our opinion, the development of a landing page structure should only be done by marketers, since with quick purchases, everything needs to be properly presented to potential customers.

WEBSITE DESIGN CREATION.

Once the site structure is ready and page layouts (page templates) are outlined and all the functionality that should be available, you can pass this on to the designer. Along with all this, he needs to provide several options that, according to the customer, are good and some that he did not like so that the designer understands “where to go next.” Let’s talk frankly, not everything you like will really sell. It is also important to provide the designer with everything that needs to be used in developing future appearance – logos, pictures, look-book, corporate colors, etc.

Design development and approval can be carried out according to several schemes.

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

The second option is to draw the design of all the page templates and make changes after the end. This method is used most often, but it is important to remember that the designer can limit the number of edits. At first glance, this may sound a little wrong from the point of view of the customer. But once again I remind you that a good designer (especially if he has experience in UX) understands much better what he is doing and why. He clearly knows what colors and how to combine, what should be the distances between the elements and how best to arrange them. Very often, the credibility of the designer is confirmed by the high conversion of the site.

CREATING LAYOUT BASED ON DESIGN.

After the design is fully approved, you need to convert it to HTML code that is understandable for browsers. This process is called layout. Also at this stage, all the animation on the site and all interactive elements are being developed. The main thing that you need to remember and immediately voice to the front-end programmer (layout designer) is that all work should be done only according to the latest specifications of CSS and HTML. Since using your old tricks, your site in new browsers may not look like 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 starting work, you need to indicate that you also need an adaptive layout (if you do not have a separate mobile version of the site). This will help the site display correctly on mobile devices. This is a prerequisite, given that almost half of all traffic on all modern resources is mobile.

SELECT CMS (ADMIN 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 the admin panel is self-written. This is a type of CMS that is created individually for each site. In this article, we will not consider self-written admins, 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 you cannot create an info site on OpenCart, but it will not be advisable in terms of improving the functionality.

For example, WordPress is great for info sites, blogs, business cards, and service sites, and with a certain setup of small online stores. But it is categorically impossible to implement a large IM on it – it will fail and break. For a full-fledged store, it is better to use the CMS sharpened for this – OpenCart, Bitrix. They have already implemented the functionality of online shopping – Cart and filtering by parameters.

Therefore, in order to choose the right CMS, you can consult with specialists, preferably several. And so they painted all the benefits and possible problems of working with each other.

Table of CMS options depending on the type of site.

 

Site type              CMS

Recommended Permissible

Landingpage         WordPress          Joomla

Business card     WordPress          Joomla

Website Services, Corporate       WordPress          Joomla

Little IM               OpenCart, Bitrix WordPress, Joomla

Big IM   OpenCart, Bitrix Drupal

Other options are possible, but in our experience working with these CMS is optimal in terms of functional costs for the programmer.

FUNCTIONALITY IMPLEMENTATION.

After the administrative panel is selected and installed, work is underway to implement the entire functionality of the site and configure its proper operation. At this stage, the back-end programmer deploys and configures the site database, uploads and downloads data from it, and links this all to the site’s functionality. Installs all the necessary plugins, additions and add-ons, which are necessary for the proper operation of the site and its technical part. It optimizes all processes associated with its functional part and the stability of its work.

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

All work must be performed by standard methods or solutions, so that, if necessary, other programmers can figure out the code and correct it or fix it. The so-called “crutches” can only be used in exceptional cases when a standard solution cannot be applied. Also at this stage, basic functional testing is carried out. When everything is functioning normally, you can proceed to the next step, if “bugs” are detected, then changes are made and the functionality is tested again.

LAYOUT STRETCH.

This is the process of combining the functional part of the site with its appearance. At this stage, the programmer converts the layout into specialized CMS theme files. Each administrative panel has its own, so the approach to layout stretching 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 database is configured in the necessary blocks on the site. In order for the programmer to correctly implement everything, the correct ToR must be compiled, which describes what information and where it should be displayed for each page.

After completing the layout stretch, test products and sections are added to the site and basic testing of the output and functionality of the functional 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.

The adaptive version of the site is also tested at any screen resolution – from the phone to the 4K monitor. All for the mobile adaptive to be as correct and convenient as possible. Cross-browser typesetting is also performed at various resolutions – the layout is checked on various types of devices and browsers.

SITE CONTENT.

After the functional with the layout was tested, the full structure of sections, subsections, and goods is entered on the site, according to the developed scheme at the beginning of the design. All necessary fields are filled in all elements, and the correctness of their display is checked. Products are divided into sections and filled with information, basic auto-generated metadata is made on the site (if there are no ready-made ones), and content is added to the pages.

Very often, filling a site 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.

 

FUNCTIONAL CHECK.

After the site is fully populated and a full functional check is made:

 

 display and output of elements;

 correct pagination;

 output of goods;

 functioning filters and sorts;

 operability of the basket;

 verification of feedback forms;

 the performance of registration on the site;

 checking internal functionality for placing orders.

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

 

And now that’s all – the site is fully functional and ready for promotion.