Web Development

12 min. read

Web Development

Introduction

This document highlights the common process in web development.

Website Development Timeline
Time and price

You should always keep in mind that website development project doesn’t start with coding and doesn’t end after the day you finally launch your website. The phase of preparation affects all subsequent stages, defining how productive the development process will be. A profound and deep discovery of such aspects like age, sex, and interests of your end-user may become the key to success. The post-launch period is rather significant. Your project should be agile and flexible enough to have a possibility to change your website according to users’ feedback or spirit of the time. Keeping in mind that there’s no such thing as insignificant website development phase will prevent you from unexpected troubles and give you confidence that everything flows as it should, and you have full control over the project.

Educate

Website Development Life Cycle

Step 1. Gathering Information

AKA: Analysis
Estimated time: 1 - 2 weeks

Purpose, Main Goals, and Target Audience

This is actually the most important phase. The team looks at the overall purpose of the website and how the users will interact with it. If the website will be used to interact with the existing systems then the new website must be done judiciously to ensure smooth integration. It also involves understanding the target audience so that the design can match the people using it. With various ways of gathering information, carrying out a complete analysis can take some time. The selection methods are also done carefully to ensure they give accurate information at the cheapest price.

Input:
Online chats
Interview with users
Discussion notes
Recorded conversions
Documents and emails from clients
Output:
Costs involved software and hardware requirements
Work plan and supporting documents

Step 2. Planning

AKA: Specification
Estimated time: 2 - 6 weeks
Sitemap and Wireframe Creation

Site map should describe the relations between the main areas of the website. Wireframe of mockup should be created. A wireframe is a visual representation of user interface that you’re going to create. But it doesn’t contain any design elements such as colors, logos, etc. It only describes the elements that will be added to the page and their location. It’s artless and cheap in production sketch.

Apps:
https://moqups.com/

The other important thing is select technology stack – programming language, frameworks, CMS that you’re going to use.

Input:
Reports from the analysis team
Output:
Complete specification to the customer’s representative and the individuals

Step 3. Design
Estimated time: 4 - 12 weeks
Page Layouts, Review, and Approval Cycle

During the design phase, your website takes shape. All the visual content, such as images, photos, and videos is created at this step. Once again, all the info that was gathered through the first phase is crucial. The customer and target audience must be kept in mind while you work on a design.

Website layout is the result of designer’s work. It can be a graphic sketch or an actual graphic design. The primary function of the layout is to represent the information structure, visualize the content, and demonstrate the basic functional. Layouts contain colors, logos, images and can give a general understanding of the future product.

After that, the customer can review the layout and send you his feedback. If the client is not sure about some aspects of your design, you should change the layout and send it back to him. This cycle should be repeated until the customer is completely satisfied.

Input:
Requirement Specification
Output:
Images
Site design with template and prototype

Step 4. Content Writing and Assembly
Estimated time: 5 - 15 weeks
Content writing and compiling usually overlaps with other stages of website creation, and its role can’t be underestimated. At this step it is necessary to put in writing the very essence you’d like to communicate to the audience of your website, and add calls-to-action. Content writing involves also creation of catching headlines, text editing, writing new text, compiling the existing text, etc., which takes time and effort. As a rule, the client undertakes to provide website content ready to migrate to the site. It is better when all website content is provided before or during website coding.

Input:
Designed template
Output:
Site with formatted content

Step 5. Coding
Estimated time: 6 - 15 weeks
At this step, you can finally start creating the website itself. Graphic elements that have been designed during the previous stages should be used to create an actual website. Usually, the home page is created first, and then all sub-pages are added, according to the website hierarchy that was previously created in the form of a sitemap. Frameworks and CMS should be implemented to make sure that server can handle the installation and set-up smoothly.

All static web page elements that were designed during the mock-up and layout creation should be created and tested. Then, special features and interactivity should be added. A deep understanding of every website development technology that you’re going to use is crucial at this phase.

When you use CMS for site creation, you can also install CMS plugins at this step if there’s a need. The other important step is SEO (Search Engine Optimization). SEO is the optimization of website elements ( e.g., title, description, keyword) that can help your site achieve higher rankings in the search engines. And, once again, valid code is pretty important for SEO.

Input:
Site with requirement specification
Forms
Output:
Coding documents
Database driven functions

Step 6. Testing, Review and Launch
Estimated Time: 2 - 4 weeks
Testing is probably the most routine part of a process. Every single link should be tested to make sure that there are no broken ones among them. You should check every form, every script, run a spell-checking software to find possible typos. Use code validators to check if your code follows the current web standards. Valid code is necessary, for example, if cross-browser compatibility is important for you.

After you check and re-check your website, it’s time to upload it to a server. An FTP (File Transfer Protocol) software is used for that purpose. After you deployed the files, you should run yet another, final test to be sure that all your files have been installed correctly.

Review for accurate spelling and proof reading content including page titles.
Testing forms and other interactive page elements
Testing each web in various browsers and versions to ensure they display well
Checking graphics to verify they are linked correctly and they display properly
Printing each page to ensure the print output is correct.
Input:
coded website
Technical specifications
Technical documents
Supporting documents
Output:
Testing documentation
Completed site
Error logs
Testing reports
Frequent interaction with designers and developers

Step 7: SEO and Social Media Optimization
After the website is live, search engine optimization starts. URL is submitted to search engines, the keywords are analyzed, a sitemap is created etc. SEO is an ongoing process because search engines always change their requirements and strategies. Social media like tweeter and Facebook should also be used to ensure that the site can rate high. The inputs are the information on the clients’ competitor and sites with content.
Input:

Information on the clients’ competitor
Sites with content
Output:

Keyword analysis
Sitemaps
Site submission to search engines
robots.txt file

Step 8. Maintenance
Estimated time: ongoing
Opinion Monitoring and Regular Updating
What’s important to remember is that a website is more a service than a product. It’s not enough to “deliver” a website to a user. You should also make sure that everything works fine, and everybody is satisfied and always be prepared to make changes in another case.

Feedback system added to the site will allow you to detect possible problems the end-users face. The highest priority task in this case is to fix the problem as fast as you can. If you won’t, you may find one day that your users prefer to use another website rather than put up with the inconvenience.

The other important thing is keeping your website up to date. If you use a CMS, regular updates will prevent you from bugs and decrease security risks.
Input:

Content to be updated on the website
Re-analysis reports if needed
Output:

Supporting documents
Updated website

Courses

https://www.oreilly.com/videos/modern-html-and/9781838822828/

Tools

http://input.glitchpack.com/

https://runwayapp.io/

https://codepen.io/anthonydugois/full/RpYBmy

http://animista.net/

https://github.com/jonathantneal/postcss-normalize

https://mavo.io/

https://topol.io/

http://vivify.mkcreative.cz/

https://dollarshaveclub.github.io/stickybits/

https://fabianlindfors.se/multijs/

https://svelte.technology/

https://foundation.zurb.com/building-blocks/

https://www.celljs.org/

http://bojler.slicejack.com/

http://quasar-framework.org/

https://josephuspaye.github.io/Keen-UI/#/ui-alert

https://engineering.wingify.com/across-tabs/introduction.html

http://thednp.github.io/kute.js/

http://imakewebthings.com/waypoints/

https://pawelgrzybek.com/siema/

https://haltu.github.io/muuri/

https://thinker3197.github.io/progressively/

https://infinite-scroll.com/

https://ilkeryilmaz.github.io/timelinejs/

https://pushjs.org/

https://shopify.github.io/draggable/

https://hyperform.js.org/

https://github.com/muicss/sentineljs

https://nadbm.github.io/react-datasheet/

https://github.com/necolas/react-native-web

http://reactide.io/

https://reactstudio.com/

https://github.com/ory/editor

https://eugeny.github.io/terminus/

https://codesandbox.io/

http://myjson.com/

https://css-in-js-playground.com/

http://www.pwabuilder.com/generator

https://github.atom.io/

https://octobox.io/

https://www.netlifycms.org/

https://developers.google.com/web/tools/lighthouse/
https://micro-editor.github.io/

https://henrygd.me/bigpicture/

https://alloyteam.github.io/pasition/

https://feathericons.com/

https://521dimensions.com/open-source/amplitudejs

https://angelmmiguel.github.io/svgi/

https://www.creativebloq.com/inspiration/7-game-changing-web-design-tools-for-2018

http://tachyons.io/

http://www.20thingsilearned.com/en-US

Examples

https://xbsoftware.com/
https://www.volpc.com/

https://www.creativebloq.com/inspiration/css-animation-examples
https://www.creativebloq.com/inspiration/learn-the-10-rules-of-great-user-experience
https://www.creativebloq.com/features/the-5-biggest-ux-design-trends-for-2018

https://www.creativebloq.com/rwd/responsive-web-design-tutorials-71410085
https://www.creativebloq.com/how-to/build-your-own-webgl-physics-game

Execution

References

6 Phases of the Web Site Design and Development Process
https://www.idesignstudios.com/blog/web-design/phases-web-design-development-process/#.WjhRe1RdJhE

Website Development Process: Full Guide in 7 Steps
https://xbsoftware.com/blog/website-development-process-full-guide/

8 Phases of the Web Design Process
http://www.printmag.com/featured/phases-of-the-web-design-process/

8 Steps to Website Development Life Cycle
https://www.volpc.com/website-design/8-steps-to-website-development-life-cycle/

Web design company – 5 stages of web designing life cycle
https://www.slideshare.net/peterthommgreek/web-design-company-5-stages-of-web-designing-life-cycle

Website development life cycle
https://www.macronimous.com/resources/web-development-life-cycle.asp

Website Design Process: Milestones & Timeline
https://digitalagencynetwork.com/website-design-process-milestones-timeline/

The Website Development Life Cycle
https://canadawebservices.com/website-development-life-cycle/