Similar to the traditional software development process, the website development life-cycle too can be divided into different steps. Such bifurcation helps align different activities towards a progressive goal that ultimately culminates in successful project completion. Knowing more about these steps will also help the team to understand their respective roles in the context of a given task and extract maximum quality.
This article explains the different steps in the development process of web engineering. This is just a guideline to help you to know, how a process can be done. The steps may vary from application to application. Do feel free to write to me about your suggestions and comments on this article to [email protected]
Note: Throughout this text, the words ‘websites’, ‘Web applications’, ‘Web-based applications’, and ‘Intranet/extranets’ can be interchangeably used.
Introduction
A systematic development process can follow a number of standard or company-specific frameworks, methodologies, modeling tools, and languages. As an industry practice, the software development life-cycle (Web development process, In our case) adheres to certain set standards which need to be followed by the development team to stay on track with respect to timelines and quality control. Just like software, websites can also be developed using certain concrete methods that have provisions for customization to the existing software development process.
Let us analyze the steps involved in any web development process:
1. Review, Assessment, and Analysis:
The first step in web project management is understanding client requirements. It may involve various dynamics around the client’s existing systems, as the website or web application will eventually be integrated into this system. The analysis will then cover all the aspects of clients’ business and their needs especially on how the website is going to be merged with their existing system.
The first important thing is finding the target audience. Then, all the present hardware, software, people, and data should be carefully assessed. For example, if a company XYZ corp is in need of a website to have its Human Resource details online, the analysis team may look to review the existing data about the employees from the present database and what migration plan will be best suited to complete the transition.
The analysis should be done in a way, that is neither too time to consume nor lacking information. The team should be able to come up with a detailed cost-benefit analysis. As the plan for the project will be an output of analysis, it should be realistic. To achieve, this the analyst should consult the designers, developers, and testers to come up with a realistic plan.
Input:
- Kick off an interview with the client, initial Emails and supporting docs by the client, discussion notes,
- Online chat transcripts, recorded telephone conversations, and
- Model sites/applications
Output:
- Work plan,
- Estimating cost
- Team requirements (No of developers, designers, QA, DBA, etc)
- Hardware-software requirements
- Supporting documents and
- Final client approval to go ahead with the project.
Tools: There are not enough tools available in the market, But we found one good tool to try is:
Requirement Heap.
2. Specification Building:
Preliminary specifications are drawn up by covering up each and every element of the requirement. For example, if the product is a website then the modules of the site including general layout, site navigation, and dynamic parts of the site should be included in the spec. Larger projects will require further levels of consultation to assess additional business and technical requirements. After reviewing and approving the preliminary document, a written proposal is prepared, outlining the scope of the project including responsibilities, timelines, and costs.
Input: Reports from the analysis team.
Output: Complete requirement specifications to the individuals and the customer/customer’s representative (Technically, the project stakeholders)
Tools: For specification building, we recommend you try Django-req and a requirement management tool called ReqView.
3. Design and development:
After the specification building, work on the website is commenced after receipt of the signed proposal, a deposit, and any written content materials and graphics you wish to include. In this stage, the layouts and navigation will be designed as a prototype.
Some customers may be interested only in a fully functional prototype. Some with full UI and UX. In this case, we may need to show them the interactivity of the application or site. But in most cases, the customer may be interested in viewing two or three design alternatives with images and navigation.
Be prepared to note down quite a lot of suggestions and changes from the customer side. All the proposed changes should be finalized before moving into the next phase. The revisions could be redisplayed via the web for the customer to view.
This is the most vital stage in the project lifecycle to gain client trust that the project is in capable hands. Encourage customer comments, feedback, and approvals to be communicated by e-mail, fax, and telephone. Engage in constant communication to give clients peace of mind.
Throughout the design phase, the team should develop test plans and procedures for quality assurance. It is necessary to obtain client approval on design and project plans.
In parallel, the Database team will assess and understand the requirements and develop the database with all the data structures. In this stage, the sample data will also be prepared.
Input: Requirement specification.
Output: Site design with templates, Images, and prototypes.
Tools: There are plenty, The most popular one is Adobe Photoshop and SketchApp for Mac.
4. Content writing:
This phase is necessary mainly for the websites. There are professional content developers who can write industry-specific and relevant content for the site. Content writers need to add their text in such a way as to utilize the design templates. The grammatical and spelling check should be over in this phase. The type of content could be anything from simple text to videos.
Input: Designed template.
Output: Site with formatted content.
Tools: Grammarly
5. Coding:
Now, it’s the programmer’s turn to add his code without disturbing the design. Unlike traditional design, the developer must know the interface and the code should not disturb the look and feel of the site or application. This calls for the developer to understand the design and navigation of the site. If the site is dynamic then the code should utilize the template. The developer may need to interact with the designer, in order to understand the design. The designer may need to develop some graphics buttons whenever the developer is in need, especially while using some form buttons. Designers and developers may require to meet frequently to make sure the User Experience matches with UI and functionalities.
If a team of developers is working they should use a CVS to control their sources. The coding team should generate necessary testing plans as well as technical documentation. For example, Java users can use JavaDoc to develop their documents to understand their code flow. The end-user documentation can also be prepared by the coding team. This can be used by a technical writer who can understand them, and develop help and manuals later.
Note: If what you are building is an ECommerce Site, don’t miss reading a detailed write-up on our ECommerce Development Process.
Input: The site with forms and the requirement specification.
Output: Database-driven functions with the site, Coding documents.
Tools: For coding normally an IDE (Integrated Development Environment) will help you. Adobe Dreamweaver, PhpStrom, Netbeans, etc are popular choices, and We can not really recommend the one – so feel free to choose yours. Check out our blog that discusses 4 IDEs for PHP developers.
6. Testing:
Unlike software development, web-based applications need intensive testing, as the applications will always function as a multi-user, multi-tier system with bandwidth limitations. Some of the testing which should be done are Integration testing, Stress testing, Scalability testing, load testing, resolution testing, and cross-browser compatibility testing. Both automated testing and manual testing should be done without fail.
For example, it’s vital to test fast loading graphics and to calculate their loading time, as they are very important for any website. There are certain testing tools as well as some Online testing tools which can help the testers to test their applications. For example, ASP.NET developers can use Microsoft’s Web Application Test Tool to test the .NET applications, which is a free tool available from the Microsoft site to download.
After doing thorough testing at the live server too is necessary for websites and web-based applications. After uploading the site there should be complete testing (E.g. Testing Links, Unit testing, )
Input: The site, Requirement specifications, supporting documents, technical specifications, and technical documents.
Output: Completed application/site, testing reports, error logs, frequent interaction with the developers and designers.
Tools: There are aplenty. Just Google it.
7. SEO and Social Media Optimization:
This phase is applicable only to websites. Promotion needs preparation of meta tags, constant analysis, and submitting the URL to the search engines and directories. There is a detailed article on this site on Search Engine Optimization, for further read. Search Engine Optimization and Social Media Marketing is normally an ongoing process as the strategies of the search engine may change quite often. Submitting a site URL once in 2 months can be an ideal submission policy. If the customer is willing, then paid click and paid submissions can also be done with additional cost.
Input: Site with unique and great content, Competitor study, keyword analysis.
Output: Site submission after necessary meta tag preparation.
Tools: We at Macronimous use few popular tools, you can check them at the bottom of our SEO service page
Also, To learn more about the SEO life cycle click here.
8. Maintenance and Updating:
Websites will need quite frequent updates to keep them fresh and relevant. In such a case, we need to do the analysis again, and all the other life-cycle steps will be repeated. Bug fixes can be done during the time of maintenance. Once your website is operational, ongoing promotion, technical maintenance, content management & updating, site visit activity reports, staff training, and mentoring are needed on a regular basis, depending on the complexity of your website and the needs within your organization.
Input: The Web Site or Web Application, content/functions to be updated, re-Analysis reports.
Output: Updated application, supporting documents to other life cycle steps and teams.
Tools: For easy website maintenance CMS is the right choice. Investing in a CMS like WordPress or Joomla will make your site easy to maintain without much recurring expenditure.
The above-mentioned steps alone are not restricted to web application or website development. Some steps may not applicable for certain tasks. It depends largely on the cost and time involved and the necessity. Sometimes if it is an intranet site, then there will be no site promotion. But even if you are a small development firm, if you adopt certain planning along with these web engineering steps in mind, it will definitely reflect in the top-notch quality of the final outcome.
See the flowchart “How we do web development in Macronimous?“[PDF format]
How do we develop web applications at Macronimous?