Introduction to Internet technology and Web Design SEng3

073

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 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

2 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

Browser Vendor
Internet Explorer Microsoft
Google Chrome Google
Mozilla Firefox Mozilla
Netscape Netscape Communications
Navigator 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

3 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

Figure 1.1.2 Client Server Architecture

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.

4 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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)
 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

5 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

 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

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 on different  Used to link web pages within the same
websites website.
 Difficult to manage.  Easy to Manage
 Changes when the server name or  Remains same even of we change the
directory name changes server 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

6 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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

7 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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:

 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.
8 DMU Chapter One
2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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
9 DMU Chapter One
2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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

10 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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.
11 DMU Chapter One
2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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.

12 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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:

[email protected].

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

When a message is sent to [email protected], 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.

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.

13 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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

14 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

 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 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

15 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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 … ?
 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

16 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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.

17 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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

18 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

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.

19 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

4. Mobile compatibility

20 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

21 DMU Chapter One

2014E.C.
 Introduction to Internet technology and Web Design SEng3
073

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.

22 DMU Chapter One

2014E.C.