Web Site Development Process - The Life-Cycle Steps
Web Site Development Process - The Life-Cycle Steps
Note:Throughout this text, The words web sites, web applications, web based applications and Intranet/extranets are interchangeable.
A system development process can follow a number of standard or company specific frameworks, methodologies, modeling tools and
languages. Software development life cycle normally comes with some standards which can fulfill the needs of any development team.
Like software, web sites can also be developed with certain methods with some changes and additions with the existing software
development process. Let us see the steps involve in any web site development.
1. Analysis:
Once a customer is started discussing his requirements, the team gets into it, towards the preliminary requirement analysis. As the web
site is going to be a part of a system, It needs a complete analysis as, how the web site or the web based application is going to help the
present system and how the site is going to help the business. Moreover the analysis should cover all the aspects especially on how the
web site is going to join the existing system. The first important thing is finding the targeted audience. Then, All the present hardware,
software, people and data should be considered during the time of analysis. For example, if a company XYZ corp is in need of a web site
to have its human resource details online, the analysis team may try to utilize the existing data about the employees from the present
database. The analysis should be done in the way, that it may not be too time consuming or with very less informative. The team should
be able to come up with the complete cost- benefit analysis and 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:Interviews with the clients, Mails and supporting docs by the client, Discussions Notes, Online chat, recorded telephone
conversations,Model sites/applications etc.,
Output: 1. Work plan, 2. Cost involved, 3. Team requirements, 4. Hardware-software requirements, 5. Supporting documents and 6. the
approval.
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 web
site 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.
After building the specification, work on the web site is scheduled upon receipt of the signed proposal, a deposit, and any written content
materials and graphics you wish to include. Here normally the layouts and navigation will be designed as a prototype.
Some customers may be interested only in a full functional prototype. In this case we may need to show them the interactivity of the
application or site. But in most of the cases customer may be interested in viewing two or three design with all images and navigation.
There can be a lot of suggestions and changes from the customer side, and all the changes should be freezed before moving into the
next phase. The revisions could be redisplayed via the web for the customer to view.
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 sit and understand the requirements and develop the database with all the data structures and sample
data will also be prepared.
Input: Requirement specification.
Output: Site design with templates, Images and prototype.
4. Content writing:
This phase is necessary mainly for the web sites. There are professional content developers who can write industry specific and relevant
content for the site. Content writers to add their text can utilize the design templates. The grammatical and spelling check should be
over in this phase.
Input: Designed template.
Output: Site with formatted content.
5. Coding:
Now its programmers 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. So the developer should understand the design and
navigation. 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 graphic buttons when ever the developer is in need, especially
while using some form buttons. If a team of developers is working they should use a CVSto control their sources. 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, which can be used by a
technical writer who can understand them, writes helps and manuals later.
6. Testing:
Unlike software, web based applications need intensive testing, as the applications will always function as a multi-user system with
bandwidth limitations. Some of the testing which should be done are, Integration testing, Stress testing, Scalablity testing, load testing,
resolution testing and cross-browser compatibility testing. Both automated testing and manual testing should be done without fail. For
example its needed to test fast loading graphics and to calculate their loading time, as they are very important for any web site. There
are certain testing tools as well as some online testing tools which can help the testers to test their applications. For example ASP
developers can use Microsoft's Web Application Test Tool to test the ASP applications, which is a free tool available from the Microsoft
site to download.
After doing all the testing a live testing is necessary for web sites and web based applications. After uploading the site there should be a
complete testing(E.g.. Links test)
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.
7. Promotion:
This phase is applicable only for web sites. Promotion needs preparation of meta tags, constant analysis and submitting the URL to the
search engines and directories. There is a details article in this site on site promotion, click here to read it. The site promotion is
normally an ongoing process as the strategies of search engine may change quite often. Submitting a site URLs 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.
Web sites will need quite frequent updations to keep them very fresh. In that case we need to do analysis again, and all the other life
cycle steps will repeat. Bug fixes can be done during the time of maintenance. Once your web site is operational, ongoing promotion,
technical maintenance, content management & updating, site visit activity reports, staff training and mentoring is needed on a regular
basis depend on the complexity of your web site and the needs within your organization.
The above-mentioned steps alone are not strict to web application or web site development. Some steps may not applicable for certain
tasks. Its depend on the cost and time involved and the necessity. Sometimes if it is a 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 this web engineering steps in mind, it will
definitely reflects in the Quality of the outcome.
Sites providing search facilities are of two types. A search engine is a software compiled Index (like Lycos, Hotbot etc.,) or a human
compiled directory (like Google, Yahoo ,dmoz etc.,). In other words, it's a huge database which contains links to all the websites that
have been submitted to them including a few details about each site. The main difference between the two is that one is reviewed by a
human being and the other by a Spider or Robot.
In some cases the person who reviews your site may reject it because it is not submitted in the proper category or if the site is not good
in its quality. But in the case of a computerized search engine, a program called a Robot or Spiders sent by the engine to visit the
submitted site, collect the information about the site and then include it in the search engine database. These Robots are faster and not
as discriminating as human beings.
Before submitting your site to any search engine you'll need to make sure it is ready. You may need prepare the webpage title, META
tags (keywords and Description) and some of the first few lines of text of the page you submit.
Client amusement:
"Yesterday I got my first order from website. Maybe soon others will find me. It was exciting.. Thanks - Michael Kelly"
<title> Tag
The title is the one you see in the top of the browser as your website title.. It is not the one which appears on your web page. The
search engine will give a high degree of importance on the words in the title. Therefore, if someone is searching for Alaska logistics and
if the word Alaska Logistics is in the title of the site then there is a good chance of the site appearing on the first page of a search. If you
open the HTML source of this webpage you would find something that looks like this.
<title>Alaska Logistic solutions</title>
You need to type your title of your site in the place between <title> and </title> as it appears above.
META tags
META tags announce all the details about your site to a search engine. They are hidden in the code of the website and can give different
information to the search engines for example, keywords, description, author and more. Though these are all optional in any web page
it's a must for marketing your site through search engines. Each search engine gives its own weightage to each META tag. It is therefore
important to know some of the things that interest these search engines.
Keywords
Keywords are the words or phrases which are used by search engine to locate a site. It is really important to phrase the keywords
carefully so that any user who is using a search engine may find your site when he/she enters the appropriate keywords or phrases.. You
should come up with a set of keywords that exactly fit into the content of your site and its goals and purpose. If you view the source of
this page you'll be able to find the keywords which I used. The example below gives you an idea of what the keywords would look like for
the page you are now reading.
You need to really work hard on finding the best keywords. Try and put yourself in the shoes of the person looking for your site. What
words or phrases would she/he use?
Description
This is also a META tag that tells the search engine about your site. It is the description that appears below the title in the search results.
This should be around 50 to 60 words. The description is often difficult to prepare. On one hand it needs to be very appealing and cause
the person to click and go to your site. On the other hand it should contain good keywords and phrases to get a high ranking in the
search results. To get a good ranking it is necessary to prepare a very good description which repeats your title and at least one or two
keywords on which you want to focus.. This META tag like the others should be added in the HTML source, may look like this:
You can learn more on meta tags at www.searchenginewatch.com, read more on theVancouver-webpages dictionary of meta tags.
What is Spamming?
Search engines are very sensitive to the data that you feed them. The keywords that you use might be repeated in the title, keywords,
description and in the content. This is OK but there is a limitations in repeating the keywords. You should be really careful of how many
times you repeat them. All the search engines will allow a certain level of repetition of keyword. However, if it is higher than what they
permit, it will be considered spamming and your page will never get indexed. The spiders can calculatethe keyword ratios faster than
you can.
Do not use text color of same as the page background color and hide text.
Avoid repeating keywords more than 3 times. Do not dump page with keywords.
Do not try to create one page for promotion to not change it with some other page after getting indexed.
Put only relevant keywords. Do not try to use some popular keywords just to get hits which are related to your page.
Form your keyword wisely. Do not use words like "Great" "Extraordinary" or Sentences like "we are the only one...".
Submitting a site to any search engine is fairly simple. On the home page of the search engine locate the "Add your site" or "Register
url" or "Submit your site" link. Simply follow the instructions given by each search engines to add your site. Some of the search engines
may ask you to submit all the pages that you want indexed, for example AltaVista. Some ask that you submit only one page URL of your
entire site and all the remaining pages will be spidered. This means that the search engine will automatically add the remaining
pages. Google is an example of this. In google there is no direct link like "Add URL", then where will you submit it? Just do a search
at Google.
Submitting to the directories like Yahoo!, dmoz, and Looksmart is a tiresome job. Since they keep web pages under separate categories
(directories), you will need to find the best category under which your site will fit. Remember, these are viewed by human beings. If you
submit to irrelevant categories it may be considered spamming causing your site submission could be omitted.
Now you know that submitting your site is not a big deal, but how sure are you that your site will be indexed? Getting indexed is nothing
but getting a place for you site in the search engine's database. How do you find out if your site has been added to the search engine?
It's easy. If you search with your URL or domain name as the keyword and the results of the search will show whether you are indexed
in that search engine.
Each search engine has its own policies (secrets!) to accept URLs that have been submitted. Some search engines take less time than
others to get you listed. Be patient. Directories take more time since they need human intervention. It is good practice to resubmit the
pages once in thirty or forty days regardless of whether the site has been listed or not.
AltaVista
In the search box enter http://mysite.com. You need to add the promotion code which appears on the site.
HotBot
Enter your domain and subdirectory in the form given.
Excite
Select Advanced Search.Select the option "URL must contain the phrase" and enter the URL.
Lycos
Enter the complete URL, like http://www.mysite.com/
Overture
You have to pay per click. First you bid one your keyword and pay. This search engine supports askjeeves, lycos, msn and more.
If your site has been listed then you may want to know where you rank. If you can find your site in the first 20 positions you have done
a nice job. If you are not ranked in the first two pages, then again you need to do some work. To save time finding your rank you can
use a position analysis tools. But we don't recommend any tools.
You can submit your site but in my opinion, if you are not in the first three pages then there is no benefit. If this is the case then you
need to start thinking about professional services!
Professional services can offer result oriented promotion. It takes a lot of effort and understanding of the inner workings of search
engines as well as fine tuning your site. Here are some steps that you can do to improve your rankings.
To understand search engines and their ranking strategies you need to study their secrets constantly. The only way to do this is through
researching and listening to what others say. Here are some links which can help you to learn more.
Searchengines.com
SearchEngines.com offers four highly effective solutions to achieve targeted web traffic for your company's web site
Spider-food.net
This is a good place to go for an easy explanation of site promotion. She also describes each major search engine in detail with pointers
on how to submit to each. Lots of resources and articles.
Searchengineworld.com
This site is the home of the widely read Search Engine World Quarterly Magazine for webmasters and search engine promotion
specialists
Selfpromotion.com
A great site containing a lot of information. It has a web based application developed by the site's owner Robert Woodhead which is
really helpful. You can avail his secret tools like "Rankulator" for a small fee. Robert unleashes the secrets of search engines.
Searchenginewatch.com
Great tips and news about each search engine's characteristics by Danny Sullivan. Secret tips for paid subscribers. A must read for all
web masters
Searchengineforums.com
An archive of all the search engine message boards and some site promotion forums. You can post your questions at the board and
exchange ideas with other like you.
Linkpopularity.com
Link popularity is the total number of web sites that link to your site. It's important because good link popularity can dramatically
increase traffic to your web site. Well placed links are an excellent source of consistent and targeted traffic. Due to recent developments,
they can even generate additional search engine traffic to your site. You can check your link popularity here. We feel some search
engines give weightage to link popularity too.
Bruceclay.com
Plenty of good information about site promotion and site promotion tools. Bruce Clay shares his experience and he offers many paid
tools which can help you a lot.
One of the most common questions we're asked is to explain the process of developing a professional Website. In this article,
we'll be covering what is involved in producing and managing a large Web project. Although the process is more about large
projects, most of this information pertains to smaller Websites as well. The process would also pertain to an online ad banner
or marketing campaign, but with fewer planning documents.
Phase 1: Plan
The first part of any new project is discovery; which involves researching a client's business and/or product.
This can involve meetings and interviews with key individuals, as well as researching the marketplace and
competitors. The amount of time it takes depends on the complexity of the business or the budget allowed. A
Website cannot communicate effectively without the discovery process.
Planning documents
The actual documents produced by Dragonfly can vary
depending on size, complexity, components and budget. A
project with a content management system, four product
categories, online ad campaign and several sub-brands will
obviously require more planning that an eight page Web
site that introduces a new business service to a limited
market. No matter how large or small, there are some
basic planning documents that we develop for all of our
Web projects.
Proposal: A bid document that outlines the basics of the
project, rough time frame, budget and tasks. The proposal
is just a guide, and the parameters of the project can grow
beyond what is outlined.
Letter of Agreement: Outlines the exact details of the
project up to the date and is signed by all parties involved
-similar to a contract.
Project Questionnaire: A basic series of questions used
to help us write a more effective creative brief and/or
technical brief. The questionnaire is typically answered by
the client.
Marketing/Creative Brief: A simple, one-page document that outlines the creative and marketing objectives of the project.
The end result will guide the Website design.
Flow Chart (site map): A visual planning element that shows all of the site’s major architecture and page relationships. The
flow chart will visualize the page hierarchy and any back-end data development. The end result is a document that shows
where a user will travel for content and the source from which it's published. (see sample)
Wire frames: Document shows the rough mock-up of page content in relationship to positioning and emphasis. This is a
rough visual representation of what to expect on a page not a design document. Some projects will have multiple wire frames
for various sections, depending on complexity.
Design Comps: Visual designs that illustrate the look and feel of the site. We produce from two to four design comps for a
project, depending on budget. The comps will be static representations of Web pages, and can change slightly once moved into
production. A typical comp will consist of a home page and inside page layout.
Optional Documents, depending on project scope:
Content Plan: Depending on project size and other variables, this is a plan for how the site’s content will be developed. When
redesigning an existing site with good content, the needs will be minimal. For most site overhauls, the required amount of new
content can be extensive. Having a plan that outlines what’s needed, who will develop new content is key to keeping the
production on track.
Back-end development plan: For projects requiring extensive back-end Web development, we’ll put together a planning
document that shows how the data will be stored, administered and published to pages within the site. This document is
reserved for more extensive Web projects or when working with data from a client’s existing system. Development plans have
their own flow chart that illustrates the data paths.
Design Guide: A useful guide for anyone who needs to add additional pages or content to the Website. The guide will list such
visual elements as text styles, spacing, color usage, image usage, page sizes and style sheet parameters. The size and detail
of the design guide will depend on the complexity of the site. This document is reserved for larger sites where new pages will
be added on a regular basis, especially by persons within the company. Not every Website requires a design guide, but it's a
must with sites managed by internal departments or corporations. (see sample)
Phase 2: Design
Design has several meanings when it comes to Web development. There's the obvious look and feel of the site as it pertains to
layout and brand identity, but with Web design, there's an equally important task known as content design or information
architecture. This carries the visual design aspects over to how information is designed on a page and how it relates to other
pages/sections of the site. This is a key requirement to a successful Website, one that assures the end user can find the right
information in a logical manner. Our goal as information architects is to create a user experience that captures interest,
communicates the major marketing points, sets the tone, and allows information to be logically and easily found throughout
the site. A good design will keep your audience focused on your marketing message, which is even more critical online than
with traditional media, for a competitor's Website is just seconds away.
Design concepts are presented in a static form, with each design shown as a home
and inside page comp. Some larger sites may have other pages shown in each
design, like an administrative or special product page. The overall goal of the design
agency is to show the client a complete visual representation of each design concept.
If new marketing copy is needed, it's often presented along with the comps. The
number of designs can vary based on project size and budget, but three is the
average.
SEO Myths and Facts
A growing trend is to design Websites for search engine optimization, or SEO. There
are two schools of thought on this subject, the first involves developing a Website's
design strictly for Web search engine rankings. This involves simplistic looking Web
sites with copy written specifically to repeat key words and minimize images. While
this may increase the site’s Google ranking for the moment, there’s the often
forgotten issue of how the user reacts when landing on the home page. Having the
top Google ranking doesn't mean much if your users are greeted with generic design
and copy written for search engines instead of a solid marketing message.
At Dragonfly, the importance of the user experience is our first priority. When a user
comes to a client's site, there is immediate recognition of a professional company with a legitimate product or service. The
purpose, content and direction of the site is clear. Despite the SEO trend, our method of building sites for ease of usability has
allowed our clients to market well, increase page views, and retain users while sustaining respectable search engine results.
Need proof? Just do a Google search for "Princeton Website design" and see who's ranked #1 and 2.
Phase 3: Develop
Production is often the most time consuming stage of a Web project. It involves all of the necessary tasks to develop the final
pages, such as coding, graphic production, copywriting, and back-end Web development. The larger the project, the more time
is required.
At this level, the client can be involved in many ways. Approval phases will be set up for production templates and major
sections. If we're developing new content, an approval plan will be in place to review the pages being written. This can be as
simple as obtaining the latest product information or developing original copy. We will manage the flow of content in an
effective, time efficient manner that
keeps the project on schedule and on
budget.
Establishing the right imagery is key to
the production process. Many Website
projects require us to work with a
client's existing library of product and
marketing images. At times,
photography is required for a new
product or to replace existing low quality
images. Dragonfly works with local
photographers to capture quality
images. Our experience in managing
photo shoots helps get the best results from each photo session.
Another major production item is back-end Web development, which includes content management systems, database
development, e-commerce, etc. While these systems constitute a major production effort on our end, most client involvement
is reserved for reviewing the final stage functionality. Some extensive systems require back and forth feedback as the
functionality comes to life. Most of the back-end systems we develop are custom, which offering any level of flexibility to adapt
to client needs. Custom solutions also give clients the ability to add new functions down the road without being locked in to a
turn-key package.
Phase 4: Launch
We often involve clients in the testing stage to work out any issues that come up with the final site. Improvements are often
made to the content, as the site is reviewed in its final form. This stage also involves some automated processes, such as
checking links and file locations. For larger sites with higher budgets, we would involve a third party company to conduct
usability testing in a controlled
environment.
Proofreading is a key element of the
final testing stage. We often ask the
client to be involved in a final read
through before the site is transferred to
a live server.
There is a great deal of technical testing
to be done with any new back-end
system created for the site. This
involves putting the systems through
user testing- entering and retrieving
data on a regular basis. Any technical
bugs are reported and corrected during
this phase, as well as any usability
improvements that may be needed.
Visual testing is done across Windows
and Macintosh platforms and across
Microsoft and Firefox browsers.
During this stage, we will manage the transfer of domain names and/or transferring files and accounts from any testing servers
to live servers. All final links are re-checked on the live server along with the testing of back-end systems and server e-mail
functionality.
Registering the site with the major search engines and appropriate business directories is the final step. Keyword and Meta
tags are incorporated early, usually in the copywriting phase.
Phase 5: Market
The final stage in the Web design process is to meet with the client
after the site has been operational for a few weeks to collect usage
information. Due to the dynamic nature, we often find that clients
start realizing the full potential of their Website once it’s up and
running. This usually results in a request to add new content or
features. Employee and customer feedback also starts rolling in at
this phase, which also accounts for changes. In some cases, we are
asked to do updates on a retainer basis as new products or
information is brought to market.
Marketing is critical to the success of a Web site. Fortunately, most
clients understand the importance of publishing their Web address
on all media, which helps considerably. We can help with increasing
traffic to the Website through other sources such as online ad
banner campaigns, keyword advertising, PR and new print media.
Companies with newer Websites tend to believe that all of their Web
traffic will come from Google searches. Unless you have a very
unique business or product, you can easily be up against thousands
of Websites on Google. The days of secret search engine tricks are
over, and most Website developers already have them in place. This
leaves traditional and online marketing as the only true method of
bringing quality traffic to your Website.
To see some of our online marketing campaigns, view our online portfolio
The Dos
reference your templates that were created in stage 2; though it is fine to deviate from your original layout, you shouldn’t need to
do some research before creating your actual design; get ideas from other sites and make them your own (without plagiarizing)
include color and graphics to create the final look for your web pages
use CSS (cascading style sheets) to convert your designs from images into markup understandable by web browsers
reference your flowchart from stage 1 when coding your pages with hyperlinks; it is better to use a drop down menu that includes all
(or the majority) of the links in your website on every page; this will allow for easier navigation and also make your pages easier to crawl when the
search engine spiders stop by; a great place to get CSS drop down menus is atDynamic Drive
finalize your design while working in Photoshop or whatever image editing software you use; it can be a pain to make changes to your
The Donts
don’t include the text in your navigation menus when converting to CSS; instead of using image text, use regular text that is readable
don’t use tables when converting; even if you need to buy a book on CSS, it will be worth it; tables are dead
don’t skip the first two stages just to save time; your website WILL be better if you start from the beginning of the web design process
don’t forget to compress your images when they are cut apart for CSS; there is nothing worse than a slow loading website because of
large image files; Photoshop has a “Save Optimized For Web” option (CS3 – “Save for Web and Devices”)
Complete list of E-Commerce Features