LESSON 5

PLANNING A WEBSITE

Start up

At any point of this lesson, you should be able to:

• Identify what makes a great website;
Determine the phases and steps in website development;
• Define goals, audiences, content and functionality of a website;
• Create in MS Excel a proposed schedule in building your personal website;
• Make in MS Word a project plan in building your personal website; and
• Develop an MS PowerPoint presentation to explain the phases and steps to take in developing
your personal website.
 start up A great website offers a great user experience. It is focused and has
Among the projects you did in your EPP, HELE, or
THE classes, which do you consider is your best clear purpose. It is easy to use because it has clear navigation. Its
work? Why? Did you use a project plan before design is simple, yet elegant and unobtrusive. Its colors and design
doing it? How did the project plan help you
complete the project?
are consistent. It has original, relevant, and up-to-date content which
A project of any nature-whether in school, is easy to find within the website. It meets the exact needs of its
business, or at home-must start with a plan. Why target audience. It helps the users achieve their primary intention in
do you think so?
visiting or using the website without any hassle
Creating a great website is not as easy as it may sound.
Most of the time when a big website development project is in progress, there are many people involved
to do it. Each person or a group of people involved is focused on accomplishing tasks to complete the
website at a specified schedule. Designers focus on visual appearance while developers are eyed on its
technical aspects. Marketing people are busy spreading the news about the website even if it is still in
development phase. The boss, or the owner, is making sure his or her ideas are being implemented.
But it does not mean that a website cannot be done by a single person. Many small-scale websites Did You Know?
Mark Zuckerberg,
these days are created and being maintained by a single person right at the comfort of their homes. creator of
If this is the case, that person is wearing different hats. He is taking the roles of a web designer, a Facebook, is among
those who started
web developer, a web marketing person, and you are the boss who wants to create a website and
their career in
put it online. This is nothing new since there are a lot of people who became rich and famous by information
creating a website (not necessarily a personal website) right inside their bedroom or living room. technology when
they were still in
college and are
now making
millions of dollars.
 WEBSITE DEVELOPMENT
PROCESS
Website development is a process of creating a new website or making changes to an already existing website.
These changes may range from as simple as adding new section in the website or as complex as changing the
look and feel of the website.
Just like building a house from the ground or renovating a part of it, creating a website requires serious
planning. There are eight steps in website development. These are:

• Planning: Deciding why you want a website and what to create.

• Content: Making a list of the content you want.
• Design: Creating a design for displaying the content.
• Construction: Writing the code and loading up your content.
• Test: Making sure everything works properly.
• Hosting: Choosing a domain name and finding a home to your website on the Internet.
• Publicity: Building traffic be promoting the site.
Review: Reviewing the site periodically to ensure it is up and running.
This eight-step website development can be categorized into four phases-pre-production, production,
publication, and post-publication.
 PRE-PRODUCTION PHASE: PLANNING AND CONTENT
This initial phase is the most important part of the process.
It starts everything. Though everything takes off with a concept, there are basic elements that must be accounted for.

• Purpose in building a website

• People involved in doing the project
• Budget allocated for the project
• Timeframe

If the project is considered to be a big one, a system for communication and an analysis of project risks, dependencies,
and assumptions must also be accounted for.

Planning plays a very crucial role. This involves a good understanding of what your goals are and how the web can be
used to meet those goals.

identifying the goals and purposes

It is important to ask yourself a lot of questions to help you understand your goals and purposes in creating a
website.
• Why do you want to do this project? What are your general and your specific goals?
• What is the purpose of the website?
• What is the message you want to convey through the website?
• Will the website support your goals?
• What do you want to accomplish with the website?
There are different goals and purposes in creating a website.
Either you want to share information or you want to make money out of it. Either you are an adventurer
who wants to share your travel experiences or you are paid to feature airline promos in your website.
Either you are a foodie who likes to guide other people where and what to eat based on your experience
or you are paid to write a review about a restaurant. Either you are a DIY craft person who wants to
share your project with other DIY fanatics over the Internet or you are paid to blog about a new set of
craft tools sent to you to try.

Whether there is a demand for the type of website you wish to build or none, there is a purpose why you
want to build a website. Sometimes even if you have the desire to build a website but you are at total
lost with your purpose and goals, it is better to consult those who have been building and maintaining
websites on a small and large scale projects.

Determining the Target Audience

With a clearer idea of your goals and purposes in creating a website, you can now identify your target
audience. Is there a specific group of people you want to reach to help you achieve your goals?
Considering their age, gender, and interests will definitely help in determining the best design for a
website. Aside from the target audience, are there other audiences you haven't thought about? What
will they do when they visit your website?
How can they reach or interact with you? What will make them come and return to the website?
With your target audience in mind, it is now easy to identify the type of content that
they will be looking for in a website. Will they be interested in specific information? TECH TERMS
Content Management
Are they tech-savvy or tech-limited? Will they be availing a particular service? Will System (CMS). Is a
standalone application to
they be ordering online? create, deploy, manage,
and store content on
Web pages. Web content
Determining what you want your target audience to do when they visit is identifying includes but is not
limited to text, graphics,
the website's "Call for Action." Your target audience will share the information you photos, video, audio, and
featured in the website. code that displays
content or interacts with
They will recommend or buy the product you sell. They will call you to inquire. They the user.

will subscribe to mailing list.

There are different things that you want your audience to do when they visit the
website. You should be able to identify it at this phase of the process.
Do you have other websites in mind that you think are similar with what you want your website to be?
Aside from identifying your target
audience, it helps to research on similar websites. Check on its contents, features, and design
components that you like and don't like.
With the information gathered, it is easy now to take planning further. It is advisable that a site map is made.
A site map is a list of all main topic areas of the site. This map serves as your guide as to what content will be
included in the site. This map is also a big help in developing a consistent and easy-to-understand
navigational system.
When information gathering is complete, it is easier to get started with planning. List down the features and
functionality you might want for your website. Your list might include the basics like the Homepage, About
the Site, Contact Us Form, and FAQs. You might need to add audio, video, or social media application like
Facebook, Twitter, or Instagram. If you intend to offer products and services, an online order form is best to
use.
You might add special graphics, slideshows, tabbed or dynamic navigation menus, and content sliders. You
might think to add a content management system (CMS) so you can update easily.

considering the budget

Whether the project is big or small, it still involves money. It is a must to consider the budget when
building a website. A website will have start-up costs and periodic maintenance expenses.

Start-up costs include web development expenses, domain name registration, and web hosting. Periodic
maintenance expenses, on the other hand, include technical support expenses and web hosting. lake
note that these expenses are usually involved in corporate, big, or sourced-out web development
project.
But for a personal website, initially, some prefer to use Blogger. com, Wordpress.com, or other free blogging
systems across the Internet. There is no need to spend for start-up costs because these systems provide an
online presence for your website (www. yoursitename.blogspot.com or www.yoursitename.wordpress.
com) for free, unless you want to get your own domain name. You just need to provide a name for your site.

To give a name to your website, ask yourself these questions:

• Is it easy to spell and remember?

• Does it reflect you as a blog owner or writter?
• Does it reflect your personality,the compant name,or the product line?
• Does the domain name match what the users and customers will be searching for online? The closer, the
better.

organizing and Structuring Content

Now that you have a clear idea of what you want to do with your website, what you want to achieve
through your website, and who your target audience are, you better start thinking about what you will put
in your website—the contents and functions.
 There are different ways of determining the content and function requirements of your website.

• Contents from an Existing Website - Check the contents of an existing site, whether it is similar to the
website you have in mind or not. Use its content inventory as a starting point. Choose what to eliminate,
duplicate, modify, and add for your own website.

• Wish Lists of Target Audience - Invite friends, if possible those who are members of your target
audience, to make wish lists of the kinds of contents they would like to see on the website.

• Brainstorming - Gather people who you think can give you substantial ideas. Get them together in one
room with a whiteboard or flip chart. Explain what you are doing and ask them what they think needs to
go on the website. Write their ideas on the board for all to see.

• Questionnaires and Surveys - For larger projects, conducting surveys and administering questionnaires
to gather quantitative data can be very useful to find out what the audience thinks about it. This method
is also used in evaluating current site to determine what the audience likes or dislikes about a website.

Contents have a lot to do to identify the desired personality, tone, and manner of the site. These elements
are communicated to the website users and visitors depending on how the contents are organized. There
are two ways to organize web contents— an exact and an ambiguous. The exact organization scheme
divides the information into well-defined and mutually exclusive sections.
 Contents are grouped in alphabetical, chronological, or geographical manner. The ambiguous organization
scheme divides information into categories that defy exact definitions.
Information can be grouped by subject or topic, task-oriented, audience-specific, or metaphor-driven.

The contents should consist of more than just plain text to enhance the appeal and usefulness of the website. It is
up to you to determine what format will deliver the maximum value.

• Plain Text - This is the most straightforward of all contents to be published on the web because it can be
authored in any word processor like MS Microsoft Word and viewed in any web browser, whether desktop or
mobile.
• Images or Photos - Any image is now easy to produce using a camera-ready mobile phone. But if you wish to
have a more quality image output, high-end digital camera can also be used. These images can either be self-
hosted or embedded from photo-sharing websites like Photobucket or Flickr.
• Documents - These documents can either be in a doc file or pdf file. The main advantage of PDF is that it
preserves the look of original documents while keeping file size to a minimum. But there are users who dislike a
PDF file because there is a need to download a PDF reader.
• Audio, video, or audio-video - Due to the growth in broadband in homes, many websites have been using audio-
video files. But producing these files can be expensive if done on a consistent basis. If working on limited
resources, it is advisable to schedule when to have an audio-video file in the website. Sometimes, it is better to
spend time and money producing many high quality pages of text, instead of a few videos that quickly go out-of-
date. The video files can be embedded from video-sharing websites like Youtube or Vimeo, or self-hosted.
Animation - This file format allows for highly interactive and other content to be published applications,
games, online. But this is expensive to be produced and not suitable in all situations.
Widgets - Other contents from other websites that can be embedded in the website to get real-time content

As such—as with all other contents —the main consideration is whether you have enough time and people to
manage them adequately.

With the emerging technology, there are new content formats emerging, but the main consideration now is
whether you have enough resources to maintain them adequately.

• Budget: What can you afford?

• Audience: Does your audience have any special needs?
Consider that other users do not have a broadband connection, so a video format is not advisable.
• Production and maintenance issues: Will you be able to maintain the content easily overtime? Will your
schedule allow you to update the website regularly?
• Experience of peers and industry: What type of content are your peers using?
• Emerging trends, the law, policies, etc.: Are there any constraints on content because of the law, policies,
and others?
 DESIGNING THE NAVIGATION SYSTEM
There are two types of navigation elements which can be integrated together or can be used alone
depending on the requirements of the website. Persistent navigation refers to navigation elements that
are present throughout the entire site.
This is also referred to as global navigation. Context-specific navigation refers to navigation elements that
change depending on the context of the page or main section. This is also called the local navigation.

It is best to make a diagram when working on the website's navigation

elements. This helps to easily identify which navigation buttons need to
have sub-categories. The diagram can also help the website owner or
developer to trace the flow throughout the site. Identify what elements
will funnel users into action pages.
For example, the "Branches" category of a fast food company website may
contain a lengthy listing or large information. This needs to be broken
down into small categories (by location or region then by province).
 Preparing a Mock-Up
Before going further and taking the next phase to build a website, it is better to start letting your ideas take on
more of a tangible state through mock-ups. Creating mock-up is like Sketching out an idea on a piece of paper
to visualize the website you have in mind. At this stage, there should be a serious thinking on the layout of the
website and the structure of the site and how the navigation will shape up.

Creating the mock-up gives chance to see what works best and what does not. It also gives opportunities to
experiment with different ideas even before working in Photoshop to make something more concrete.

choosing the Best Tools

During the planning phase, you should be able to decide what technology to use to build your website. Usually
web developers help their clients decide what technologies should be implemented in the website based on its
features and facilities.
Most web developers use WYSIWYG (what-you-see-is-what-you-get) tools to speed up the work. Commonly used
WYSIWYG web development tools include Microsoft FrontPage, Microsoft SharePoint Designer, Microsoft
Expression Web, and Adobe Dreamweaver.

In the case of big-scale database-driven websites, a customized content management system (CMS) is usually
integrated to provide an intuitive user-interface for building and modifying website contents. This system also
provides a web publishing tool that allows one or more users to publish updates live on the web. Most website
administrators prefer web-based CMS because it allows automatic updates anywhere and simplifies the
updating process.
Blogger.com and Wordpress.com use a web-based CMS tool which allows its users to
create and update a blog anywhere in an instant.

preparing the schedule

The last activity in the Pre-production phase is a preparation to kick off the next phase-the Production phase.
The bulk of work in building a website actually starts in the Production phase. So as the Pre-production
phase wraps up, its final output is a schedule which identifies project milestones until it reaches the target
completion date.

To be able to address both timing and process at the same time, it is advisable to see the schedule from
broad time frame and use the week-to-week methodology within that time frame.It is better to show the d
eliverables as a weekly summary instead of the specific dates. All activities are geared towards the desired
launch dates.
WEB DEVELOPMENT WEEKLY SCHEDULE PLAN
WBS
 GROUP
5

Alyssa Dizon Princess Angel Akisha Bernales Rochemel Dapicortal

Agrasada