Introduction to Internet Technology and Web Design ITec2092

Chapter One
Introduction to Internet Technology and Web Design
1.1. Overview of Internet

What is Internet?

The Internet is a worldwide system of interconnected computer networks. The computers and
computer networks exchange information using TCP/IP (Transmission Control Protocol/Internet
Protocol) to communicate with each other. The computers are connected via the
telecommunications networks, and the Internet can be used for e-mailing, transferring files and
accessing information on the World Wide Web.

Advantages

Here, we will discuss some of the advantages of Internet:

• Social Networking
• Education and Technology
• Entertainment
• Online Services

Internet allows us to communicate with the people sitting at remote locations. There are various
apps available on the web that uses Internet as a medium for communication. One can find
various social networking sites such as: Facebook, Twitter, Yahoo, Google+, Flickr, Orkut etc

One can surf for any kind of information over the internet. Information regarding various topics
such as Technology, Health & Science, Social Studies, Geographical Information, Information
Technology, Products etc can be surfed with help of a search engine.

Apart from communication and source of information, internet also serves a medium for
entertainment. Following are the various modes for entertainment over internet. These are
Online Television, Online Games, Songs, Videos and Social Networking Apps.

Internet allows us to use many services like Internet Banking, Matrimonial Services, Online
Shopping, Online Ticket Booking, Online Bill Payment, Data Sharing & E-mail.

Internet provides concept of electronic commerce that allows the business deals to be
conducted on electronic systems

1 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

Disadvantages

However, Internet has proved to be a powerful source of information in almost every field, yet
there exist many disadvantages discussed below:

• Threat to Personal Information: There are always chances to lose personal information
such as name, address, credit card number. Therefore, one should be very careful while
sharing such information. One should use credit cards only through authenticated sites.
• Spamming: it corresponds to the unwanted e-mails in bulk. These e-mails serve no
purpose and lead to obstruction of entire system.
• Virus attack: Viruses can easily be spread to the computers connected to internet. Such
virus attacks may cause your system to crash or your important data may get deleted.

1.1.1. The World Wide Web (WWW)

WWW is also known as W3. It offers a way to access documents spread over the several servers
over the internet. These documents may contain texts, graphics, audio, video, hyperlinks. The
hyperlinks allow the users to navigate between the documents.

The World Wide Web is a system of Internet servers that use HTTP (Hypertext Transfer
Protocol) to transfer documents formatted in HTML (Hypertext Mark-up Language). These are
viewed by using software for web browsers such as Netscape, Safari, Google Chrome and
Internet Explorer. Hypertext enables a document to be connected to other documents on the web
through hyperlinks. It is possible to move from one document to another by using hyperlinked
text found within web pages.

1.1.2. Browser and Web Server

Web Browser is application software that allows us to view and explore information on the
web. User can request for any web page by just entering a URL into address bar.

Web browser can show text, audio, video, animation and more. It is the responsibility of a web
browser to interpret text and commands contained in the web page.

2 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

Browser Vendor

Internet Explorer Microsoft

Google Chrome Google

Mozilla Firefox Mozilla

Netscape Navigator Netscape Communications Corp.

Opera Opera Software

Safari Apple

Sea Monkey Mozilla Foundation

K-meleon K-meleon

Web Server

Web server is a computer where the web content is stored. Basically web server is used to host
the web sites/systems but there exists other web servers also such as gaming, storage, FTP,
email etc.

Web site is collection of web pages while web server is software that responds to the request for
web resources.

Web Server Working

Web server respond to the client request in either of the following two ways:

• Sending the file to the client associated with the requested URL.
• Generating response by invoking a script and communicating with database

Figure 1.1.2 Client Server Architecture

3 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

1.1.3. Document(media) Types

A media type (formerly known as MIME(Multipurpose Internet Mail Extensions) type) is a two-
part identifier for file formats and format contents transmitted on the Internet.

A media type consists of a type and a subtype, which is further structured into a tree. A media
type can optionally define a suffix and parameters:

type "/" [tree "."] subtype ["+" suffix] *[";" parameter]

The currently registered types are: application, audio, example, font, image, message,
model, multipart, text and video.

As an example, an HTML file might be designated text/html; charset=UTF-8. In this

example, text is the type, html is the subtype, and charset=UTF-8 is an optional parameter
indicating the character encoding.

A subtype typically consists of a media format, but it may or must also contain other content,
such as a tree prefix, producer, product or suffix, according to the different rules in registration
trees.

Types, subtypes, and parameter names are case-insensitive. Parameter values are usually case-
sensitive, but may be interpreted in a case-insensitive fashion depending on the intended use.

Common examples

• application/javascript
• application/xml
• application/zip
• application/pdf
• application/sql
• application/msword (.doc)
• application/vnd.openxmlformats-
officedocument.wordprocessingml.document(.docx)
• application/vnd.ms-excel (.xls)
• application/vnd.openxmlformats-officedocument.spreadsheetml.sheet (.xlsx)
• application/vnd.ms-powerpoint (.ppt)

4 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

• application/vnd.openxmlformats-
officedocument.presentationml.presentation (.pptx)
• application/vnd.oasis.opendocument.text (.odt)
• audio/mpeg
• audio/ogg
• multipart/form-data
• text/css
• text/html
• text/xml
• text/csv
• text/plain
• image/png
• image/jpeg
• image/gif

1.1.4. Uniform Resource Locators (URLs)

Uniform Resource Locator (URL) refers to a web address which uniquely identifies a document
over the internet. This document can be a web page, image, audio, video or anything else
present on the web. For example: www.dmu.edu.et/index.html.

URL Types

There are two forms of URL as listed:

• Absolute URL
• Relative URL

Absolute URL

Absolute URL is a complete address of a resource on the web. This completed address
comprises of protocol used, server name, path name and file name.

For example http:// www.dmu.edu.et/index.htm. where:

• http is the protocol.

• dmu.edu.et is the server name.
• index.htm is the file name.

The protocol part tells the web browser how to handle the file. Similarly we have some other
protocols also that can be used to create URL are: FTP, https, Gopher, mailto, news

5 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

Relative URL

Relative URL is a partial address of a webpage. Unlike absolute URL, the protocol and server
part are omitted from relative URL. Relative URLs are used for internal links i.e. to create links
to file that are part of same website as the WebPages on which you are placing the link. For
example, to link an image on dmu.edu.et/bids/bids.pdf, we can use the relative URL which can
take the form like / bids/bids.pdf.

Difference between Absolute and Relative URL

Absolute URL Relative URL

• Used to link web pages within the same

• Used to link web pages on different websites
website.
• Difficult to manage.
• Easy to Manage
• Changes when the server name or directory
• Remains same even of we change the server
name changes
name or directory name.
• Take time to access
• Comparatively faster to access.

1.1.5. Domain Name System (DNS)

DNS is an application layer protocol used to resolve hostnames to IP addresses. Although a host
can be accessed by using only its IP address, DNS makes your life easier by using domain
names. For example, you can access the Google website by typing http://208.117.229.214 in
your browser, but it is much easier to type http://www.google.com.

Each host that wants to use DNS needs to have a DNS server configured. When you type a URL
in your browser (e.g. http://www.google.com) , your host will query the DNS server for the IP
address of www.google.com. The DNs server will resolve the query and send the answer back
to the host. The host will then be able to establish a connection to http://www.google.com.

1.2. Communication Protocols

In telecommunication, a communication protocol is a system of rules that allow two or more

entities of a communications system to transmit information via any kind of variation of a
physical quantity. The protocol defines the rules, syntax, semantics and synchronization of
communication and possible error recovery methods. Protocols may be implemented by
hardware, software, or a combination of both.

6 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

Multiple protocols often describe different aspects of a single communication. A group of

protocols designed to work together are known as a protocol suite; when implemented in
software they are a protocol stack.

1.2.1. TCP/ IP, HTTP, FTP and Email Protocols

TCP

TCP is a reliable, guaranteed-delivery protocol. TCP specifies the methods hosts use to
acknowledge the receipt of packets, and requires the source host to resend packets that are not
acknowledged. TCP protocols also govern the exchange of messages between the source and
destination hosts to create a communication session. TCP is often compared to a pipeline, or a
persistent connection, between hosts. Because of this, TCP is referred to as a connection-
oriented protocol.

TCP requires overhead to keep track of the individual conversations between source and
destination hosts and to process acknowledgements and retransmissions. In some cases, the
delays caused by this overhead cannot be tolerated by the application. These applications are
better suited to UDP.

UDP

UDP is a very simple, connectionless protocol. It has the advantage of providing for low
overhead data delivery. Because UDP is a "best effort" Transport Layer protocol, UDP
datagrams may arrive at the destination out of order, or may even be lost all together. UDP
does not provide guaranteed data delivery or flow control. Applications that use UDP can
tolerate small amounts of missing data. An example of a UDP application is Internet radio. If a
piece of data is not delivered, there may only be a minor effect on the quality of the broadcast.

TCP Vs UDP

UDP is a very simple protocol. Because it is not connection-oriented and does not provide the
sophisticated retransmission, sequencing, and flow control mechanisms of TCP, UDP has a
much lower overhead.

UDP is often referred to as an unreliable delivery protocol; because there is no guarantee that a
message has been received by the destination host. This does not mean that applications that
use UDP are unreliable. It simply means that these functions are not provided by the Transport
Layer protocol and must be implemented elsewhere if required.

Although the total amount of UDP traffic found on a typical network is often relatively low, key
Application Layer protocols that use UDP include:
7 Chapter One DMU
 Introduction to Internet Technology and Web Design ITec2092

• Domain Name System (DNS)

• Simple Network Management Protocol (SNMP)
• Dynamic Host Configuration Protocol (DHCP)
• Routing Information Protocol (RIP)
• Trivial File Transfer Protocol (TFTP)
• Online games

HTTP and HTTPs

The Hypertext Transfer Protocol (HTTP), one of the protocols in the TCP/IP suite, was
originally developed to enable the retrieval of HTML formatted web pages. It is now used for
distributed, collaborative information sharing. The HTTP protocol has evolved through
multiple versions. The version currently used by most ISP (Internet Service Provider) to provide
web-hosting services is HTTP version 1.1. Unlike earlier versions, this version enables a single
web server to host multiple web sites. It also permits persistent connections, so that multiple
request and response messages can use the same connection, reducing the time it takes to
initiate new TCP sessions.

HTTP specifies a request/response protocol. When a client, typically a web browser, sends a
request message to a server, the HTTP protocol defines the message types the client uses to
request the web page. The HTTP protocol also defines the message types the server uses to
respond.

Although it is remarkably flexible, HTTP is not a secure protocol. The request messages send
information to the server in plain text that can be intercepted and read. Similarly, the server
responses, typically HTML pages, are also sent unencrypted.

Some HTTP commands (your browser sends these internally)

❖ GET resource -- requests data from a specified resource

❖ POST resource -- submits data to be processed to a specified resource

❖ PUT resource -- uploads a representation of the specified URL

❖ DELETE resource -- deletes the specified resource

HTTP Status Codes

When a request is made by the browser, a response is sent back by the server with a status code,
possibly followed by a Web resource.

8 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

For secure communication across the Internet, the Secure HTTP (HTTPS) protocol is used for
accessing or posting web server information. HTTPS can use authentication and encryption to
secure data as it travels between the client and server. HTTPS specifies additional rules for
passing data between the Application Layer and the Transport Layer.

When contacting an HTTP server to download a web page, a uniform resource locator (URL) is
used to locate the server and a specific resource. The URL identifies:

• Protocol being used

• Domain name of the server needing to be accessed
• Location of the resource on the server, such as
http://example.com/example1/index.htm

Many web server applications are available that allow for short URLs. Short URLs are popular
because they are easier to write down, remember, or share. With a short URL, a default resource
page is assumed when a specific URL is typed. When a user types in a shortened URL, like
http://example.com, the default page that is sent to the user is actually the
http://example.com/example1/index.htm web page.

To safeguard data, especially confidential information, some ISPs provide secure web services.
To support secure web services ISPs, use HTTPS (HTTP over secure sockets layer (SSL)). HTTPS
uses the same client request-server response process as HTTP, but the data stream is encrypted
with SSL before being transported across the network.

When the HTTP data stream arrives at the server, the TCP layer passes it up to SSL in the
server's Application Layer, where it is decrypted.

The maximum number of simultaneous connections that a server can support for HTTPS is less
than that for HTTP. HTTPS creates additional load and processing time on the server due to the
encryption and decryption of traffic. To keep server performance up, HTTPS should only be
used when necessary, such as when exchanging confidential information.

9 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

File Transfer Protocol (FTP)

FTP is a connection-oriented protocol that uses TCP to communicate between a client FTP
process and an FTP process on a server. FTP implementations include the functions of a
protocol interpreter (PI) and a data transfer process (DTP). PI and DTP define two separate
processes that work together to transfer files. As a result, FTP requires two connections to exist
between the client and server, one to send control information and commands, and a second
one for the actual file data transfer.

Protocol Interpreter (PI)

The PI function is the main control connection between the FTP client and the FTP server. It
establishes the TCP connection and passes control information to the server. Control
information includes things such as commands to navigate through a file hierarchy, as well as
renaming or moving files. The control connection, or control stream, stays open until closed by
the user. When a user wants to connect to an FTP server:

1. The user-PI sends a connection request to the server-PI on well-known port 21.

2. The server-PI replies and the connection is established.

3. With the TCP control connection open, the server-PI process begins the login sequence.

4. The user enters credentials through the user interface and completes authentication.

5. Now the data transfer process can begin.

Data Transfer Process (DTP)

DTP is a separate data transfer function. This function is enabled only when the user wants to
actually transfer files to or from the FTP server. Unlike the PI connection, which remains open,
the DTP connection closes automatically when the file transfer is complete.

10 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

Email Protocols

One of the primary services offered by an ISP is email hosting. Email is a store and forward
method of sending, storing, and retrieving electronic messages across a network. Email
messages are stored in databases on mail servers. ISPs often maintain mail servers that support
many different customer accounts.

Email clients communicate with mail servers in order to send and receive email. Mail servers
communicate with other mail servers to transport messages from one domain to another. In
other words, an email client does not communicate directly with another email client when
sending email. Both clients must rely upon the mail server for transport of the messages. This is
true even when both users are in the same domain.

Email clients send messages to the email server configured in the application settings. When the
server receives the message, it checks to see if the recipient domain is located on its local
database. If it is not, it sends a DNS request to determine the mail server for the destination
domain. Once the IP address of the destination mail server is known, the email is sent to the
appropriate server.

Email supports three separate protocols for operation: SMTP, POP3, and IMAP4. The
Application Layer process that sends mail, either from a client to a server or between servers,
implements the SMTP protocol. A client retrieves email using one of two application layer
protocols: POP3 or IMAP.

11 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

Simple Mail Transfer Protocol (SMTP)

The functions specified by the Simple Mail Transfer Protocol (SMTP) enable the transfer of mail
reliably and efficiently. For SMTP applications to do this, two conditions must be met:

The mail message must be formatted properly

SMTP processes must be running on both client and server

SMTP message formats require a message header and a message body. While the message body
can contain any amount of text, the message header must have a properly formatted recipient
email address and a sender address. Any other header information is optional.

When a client sends email, the client SMTP process connects with a server SMTP process on
well-known port 25. Once the connection is made, the client attempts to send mail to the server
across the connection. Once the server receives the message, it either places the message in a
local account or forwards the message using the same SMTP connection process to another mail
server.

The destination email server may not be online, or may be busy, when email messages are sent.
Therefore, SMTP provides for the spooling of messages to be sent at a later time. Periodically,
the server checks the queue for messages and attempts to send them again. After a
predetermined expiration time, if the message is still undelivered, it will be returned to the
sender as undeliverable.

One of the required fields in an email message header is the recipient email address. The
structure of an email address includes the email account name or an alias, as well as the domain
name of the mail server. An example of an email address:

recipient@gmail.com.

The @ symbol separates the account and the domain name of the server.

When a message is sent to recipient@gmail.com, the domain name is sent to the DNS server in
order to obtain the IP address of the domain mail server. Mail servers are identified in DNS by
an MX record indicator. When the destination mail server receives the message, it stores the
message in the appropriate mailbox. The mailbox location is determined based on the account
specified in the first part of the email address, in this case, the recipient account. The message
will remain in the mailbox until the recipient connects to the server to retrieve the email.

12 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

If the mail server receives an email message that references an account that does not exist, the
email is returned to the sender as undeliverable.

Post Office Protocol (POP)

The Post Office Protocol - Version 3 (POP3) is used to enable a workstation to retrieve mail from
a mail server. With POP3, mail is downloaded from the server to the client and then deleted on
the server.

The server starts the POP3 service by passively listening on TCP port 110 for client connection
requests. When a client wishes to make use of the service, it sends a request to establish a TCP
connection with the server. Once the connection is established, the POP3 server sends a
greeting. The client and POP3 server then exchange commands and responses until the
connection is closed or aborted.

Since email messages are downloaded to the client and removed from the server, this means
that there is not a centralized location where email messages are kept. This makes the POP3
protocol undesirable in a centralized backup solution for a small business.

The POP3 protocol is desirable for an ISP since it alleviates the ISP's responsibility of managing
large amounts of storage for their email servers.

Internet Message Access Protocol (IMAP)

Internet Message Access Protocol (IMAP4) is another protocol that describes a method to
retrieve email messages. However, unlike POP3, when the user connects to an IMAP-capable
server, copies of the messages are downloaded to the client application. The original messages
are kept on the server until manually deleted. Users view copies of the messages in their email
client software.

1.3. Web Design

Web design is the process of creating websites which is front end design. It encompasses
several different aspects, including webpage layout, content production, and graphic design
using the different technology. Web designers build webpages using HTML tags that define the
content and metadata of each page. Most websites include a combination of HTML and
CSS(Cascading Style Sheet) that defines how each page will appear in a browser. Designer must
keep in mind that website run on all platform and browser.

13 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

Website design means planning, creation and updating of websites. Website design also
involves information architecture, website structure, user interface, navigation, website layout,
colors, contrasts, fonts and imagery (photography) as well as icons design.

What is web Development?

Web development usually refers to the main non-design aspects of building web sites like
writing markup and coding. Basically, Web development ranges from creating plain text pages
to complex Web-based applications, social network applications and electronic business
applications.

You can understand it by following hierarchy.

• Client-side coding
• Server-side coding
• Database technology
There are two broad divisions of web development – front-end development (also called client-
side development) and back-end development (also called server-side development).

Front-end development refers to constructing what a user sees when they load a web
application – the content, design and how you interact with it. This is done with three codes –
HTML, CSS and JavaScript.

You can use following technology or platform to develop a website.

• PHP, Ruby on Rails, Asp.net, Perl, Java, Node.js, Python etc

Web Designer and Developer

Web designers are those who transform an idea or a story into a visually appealing design and
use their layout to build the user experience throughout the whole website. They design the
website’s look and feel. As an architect would create a plan of your house prior to start building
it, similarly a web designer would model the layout of your website before a web developer can
start developing it.

Web developers sometimes called programmers, take the design created and build a fully
functioning website. To put it (very) simply, think of the design as a non-interactive “picture” of
a website. Developers take that design and break it up into it’s components. They then either
use just HTML or a more dynamic approach incorporating programming languages such as
PHP to develop the various website pages. More advanced web developers may choose to

14 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

utilize a Content Management System (CMS) like WordPress or Joomla in order to streamline
development and allow clients an easy way to maintain and update their website.

Web developers may convert a static layout into a dynamic website by using image and content
sliders, active states for links and buttons, and other interactive elements.

1.3.1. Website Design and Development Process

Despite conventional wisdom, the core part of website development and design is not necessary
the coding process. Indeed, such technologies as HTML, CSS, and JavaScript give the web we
know its shape and define the way we interact with the information. But what usually stay
behind the scenes and, at the same time, remain the crucial part of website development life
cycle are the stages of preliminary information gathering, detailed planning, and post-launch
maintenance.

There are numerous steps in the web site design and development process. From gathering
initial information, to the creation of your web site, and finally to maintenance to keep your web
site up to date and current. The exact process will vary slightly from designer to designer, but
the basics are the same.

1. Information Gathering
2. Planning
3. Design
4. Development
5. Testing and Delivery
6. Maintenance
Phase 1: Information Gathering

The first step in designing a successful web site is to gather information. Many things need to be
taken into consideration when the look and feel of your site is created. This step is actually the
most important one, as it involves a solid understanding of the company it is created for. It
involves a good understanding of you – what your business goals and dreams are, and how
the web can be utilized to help you achieve those goals. It is important that your web designer
start off by asking a lot of questions to help them understand your business and your needs in a
web site. Certain things to consider are:

✓ Purpose: What is the purpose of the site? Do you want to provide information,
promote a service, sell a product … ?

15 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

✓ Goals: What do you hope to accomplish by building this web site? Two of the more
common goals are either to make money or share information.
✓ Target Audience: Is there a specific group of people that will help you reach your
goals? It is helpful to picture the “ideal” person you want to visit your web site.
Consider their age, sex or interests – this will later help determine the best design style
for your site.
✓ Content: What kind of information will the target audience be looking for on your site?
Are they looking for specific information, a particular product or service, online
ordering…?
Phase 2: Planning

At this stage of website development cycle, the developer creates the data that can give to a
customer an opportunity to judge how the entire site will look like.

On the basis of the information that was gathered together in the previous phase, the sitemap is
created. The sitemap should describe the relations between the main areas of your website.
Such representation could help understand how usable the final product will be. It can show
you the “relationship” between the different pages of a website, so you can judge how easy it
will be for the end-user to find the required information or service if he starts from the main
page. The main reason behind the sitemap creation is to build a user-friendly and easy to
navigate website.

16 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

The sitemap allows you to understand how the inner structure of a website looks like, but
doesn’t describe the user interface. Sometimes, before you start to code or even work on a
design, there’s a necessity to get approval from a customer that everything looks fine so you can
begin the next phase of developing. In this case, a wireframe or mock-up is 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.

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

Phase 3: Design

Drawing from the information gathered up to this point, it’s time to determine the look and feel
of your site. 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.

17 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

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.

Phase 4: Development

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.

Phase 5: Testing and Delivery

Testing is probably the most routine part of a process. You should check every form, every
script, run a spell-checking software to find possible errors. Use code validations 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.

Phase 6: Maintenance

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.

18 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

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.

1.3.2. Web Design and Development Principles

The most important thing to keep in mind is that design is about communication. If you create a
web site that works and presents information well, but looks ugly or doesn't fit with the client's
brand, no one will want to use it. Similarly, if you make a beautiful web site that isn't usable
and accessible, people may not be able to use it. Indeed, the elements and functionality of a
finished web site design should work as a single cohesive unit.

Here is the list of 8-good design principles which will make your website aesthetic, user-
friendly, effective, and engaging:

1. Simple is the best

Over-designed website may not work. Putting too many elements on the page may lead to
distract visitors from the main purpose of your website. Simplicity always works in an effective
web page design. Clean and fresh design of your website not only makes the website appealing,
but also help user to navigate from one page to another seamlessly. Loading a website having
design features which do not serve the purpose may be frustrating. Keep your design as simple
as possible so that the visitors can feel it easy-to-use and can find their ways easily.

2. Consistency

Consistency in website design matter a lot. Give your attention to match design elements
throughout each of the pages. It can be understood that your fonts, sizes, headings, sub-
headings, and button styles must be the same throughout the website. Plan everything in
advance. Finalize the fonts and the right colors for your texts, buttons etc, and stick to them
throughout the development. CSS (Cascading Style Sheets) would come in handy to keep the
complete information about design styles and elements.

3. Typography & Readability

No matter how good your design is text still rules the website as it provides users the desired
information. You should keep your typography visually appealing and readable for visitors,
consider using fonts that are easier to read. The modern sans-serif fonts as Ariel, Helvetica etc.
can be used for the body texts. Make proper combinations of typefaces for each and every
design element such as headlines, body texts, buttons etc.

19 Chapter One DMU

 Introduction to Internet Technology and Web Design ITec2092

4. Mobile compatibility

Keeping in mind the ever-growing usage of smartphones, tablets and phablets, web design
must be effective for various screens. If your website design doesn’t support all screen sizes,
chance is that you’ll lose the battle to your competitors. There are a number of web design
studios or service points from where you can turn your desktop design into a responsive and
adaptive one for all screen sizes.

5. Color palette and imagery

A perfect color combination attracts users while a poor combination can lead to distraction. This
necessitates you to pick a perfect color palette for your website which can create a pleasing
atmosphere, thus leaving a good impact on visitors. Enhance users experience by selecting
complementary color palette to give a balanced-look to your website design. Remember to
white space use as it avoids your website from visual clutter and mess. Also avoid using too
many colors. 3 or 4 tones for the whole websites are ample to give appealing and clear design.
Same is the case with images. Don’t use multiple vibrant images

6. Easy loading

No one likes the website that takes too much time to load. So take care of it by optimizing image
sizes, combing code into a central CSS or JavaScript file as it reduces HTTP requests. Also,
compress HTML, JavaScript and CSS for enhanced loading speed.

7. Easy Navigation

Study shows that visitors stay more time on the websites having easy navigation. For effective
navigation, you may consider creating a logical page hierarchy, using bread scrums, and
designing clickable buttons. You should follow the “three-click-rule” so that visitors can get the
required information within three clicks.

8. Communication

The ultimate purpose of the visitors is to get information, and if your website is able to
communicate your visitors efficiently, most probably they would spend more time on your
website. Tricks that may work to establish effortless communication with the visitors are –
organizing information by making good use of headlines and sub-headlines, cutting the waffle,
and using bullet points, rather than long gusty sentences.

Keeping the above principles, you can easily develop an aesthetic and functional website.
Without this base, it would be difficult to travel a long path. Only with a clean and user-friendly
design, you can think to succeed.

20 Chapter One DMU

Introduction to Internet Technology and Web Design ITec2092

21 Chapter One DMU