Chameli Devi Group of Institutions

Department of Computer Science and Engineering

Unit-1 Subject Notes

Subject code-CS 504 Subject Name- Internet & Web Technology

Internet overview
The Internet is a giant network of networks.
 A network may include PCs, and other devices like servers or printers.
 A network is connected through a communication channel.
Early research was performed by the US Department of Defense in 1962. This research group established ARPAnet
(Advanced Research Project Agency) in order to connect the US Defense Department network
 Original aim was to create a network that would allow users of a research computer at
one university to be able to ‘talk to’ research computers at other universities.
 A side benefit of ARPAnet’s design was that, because messages could be routed or
rerouted in more than one direction, the network could continue to function even if
parts of it were destroyed in the event of a military attack or other disaster.
 The users of the Internet took a direction of their own.

1.1 World Wide Web (WWW)

In the course of life, when people say “Internet”, most of the time they actually refer to the World Wide
Web or the WWW. The www is the collection of all the information that is available in the Internet. So, all the
text, images, audio, videos online all this forms the www. Most of this information is accessed through
websites and we identify websites by their domain names. There is huge amount of information available in
the www. Only a tiny part of this information is searchable through popular search engines like Google.
However, most of the information lies in the Deep Web and Dark Web. WWW uses http protocol to access the
information from various servers. Information is sent as web pages which are organized in the form of
websites. Various web pages are interlinked with each other through hyperlinks. Web pages and other pieces
of information in WWW are identified by their Uniform Resource Locator (URL) address.
 Figure 1.1: Internet

Differences between Internet and WWW

 
INTERNET WWW
Internet originated sometimes in late English scientist Tim Berners-Lee invented the World Wide
1.
1960s. Web in 1989
2. Nature of Internet is hardware. Nature of www is software.
Internet consists of computers,
3. routers, cables, bridges, servers, www consists of information like text, images, audio, video
cellular towers, satellites etc.
The first version of the Internet was
4. In the beginning WWW was known as NSFNET
known as ARPANET
Internet works on the basis of WWW works on the basis of Hyper Text Transfer Protocol
5.
Internet Protocol (IP) (HTTP)
6. Internet is independent of WWW WWW requires the Internet to exist
WWW is a subset of the Internet. Apart from supporting
7. Internet is superset of WWW www, the Internet’s hardware infrastructure is used for
other things as well (e.g. FTP, SMTP)
Computing devices are identified by IP Information pieces are identified by Uniform Resource
8.
Addresses Locator (URL)

Software or Applications and protocols:

 Chat- IRC (Internet Relay Chat) is used for live discussions on the Internet.
 Ecommerce - Taking orders for products and services on the Internet.
 E-mail - Exchanging electronic letters, messages, and small files.
  FTP - File Transfer Protocol is the most common method of transferring files between computers via
the Internet.
 Hosting - Making information available to others on the Internet.
 Search Engines - These tools are really a part of the World Wide Web and are often used when looking
for information because the Web has grown so large and is without any inherent organizational
structure.
 Telnet - Creation of a dumb terminal session to a host computer in order to run software applications
on the host system.

1.2 HTTP Protocol

What is http: HTTP full form Hyper Text Transfer Protocol used mainly to access data on the World Wide Web.
HTTP is a Server and Client communication Protocol, which is primarily set of rules for formatting and
transferring webpage data (text, images, video and Multimedia files) over the World Wide Web. This is the
Protocol used to create communication between Web Servers and Web Users. HTTP is an application layer
Protocol that works on the top of the TCP/IP suite of Protocols.
The features of the http protocol are as follows:
• Http is Connectionless: The http client, i.e., the web browser makes an http request and waits for the server
to respond. Now, it is the task of the server to process the request made by the client. So after processing, the
server gives the response to the client. After receiving the response, the client disconnects the connection.
• Http is media independent: Here, media independent means that any data can send. Also, we have to
mention the content type as per the requirement of the client and the server.
• Http is stateless: http is a stateless protocol. Only during the current request, the client and the server know
about each other and when the connection disconnects, both client and the server forgets about each other.
Due to this nature, both the client and the server do not retain the information between the different requests
processed.

Basic architecture client/server 
As we know, it is a client/server based architecture. So, it makes use of a request/response protocol. In this,
web browsers, search engines, act as the client of the system and the web server acts as the server of the
system.
This system is completely explained through the diagram also.
 Figure 1.2 Basic architecture client/server
Http Client: The http client makes the request in the form of a request method. Which is followed by the
message body over a TCP/IP connection?
Http Server: The request sent by the client, is responded by the server in the form of a status line followed by
the other necessary information with the message body.

HTTP Request Methods

Http Protocol can use two case sensitive request-response Methods between client/server such as GET and
POST that are used to handle form submissions.
GET Method
Get Requests data from a specified resource using a given URL to retrieve data.
POST Method
A POST request Submits data to be processed to a specified resource to the server.
NOTE: URLs that start with "http://" are use port 80 by default and URL with “https://” is secure connection
use port 443.

What is an HTTP request?

An Http request message consists of a request line, headers and sometimes a body.
An HTTP request is ways that web browsers ask for information to load website pages.

What is an HTTP response?

An HTTP response means when the web client gets the answer back from the web server. It contains the
information that was asked for in the HTTP request. HTTP response contains an HTTP status code,
1.401-“Unauthorized”
2.400-“Bad request”
3.404-“File not found”

HTTP is a stateless protocol: HTTP is a stateless protocol and it was likewise necessary. Because it executes
every command independently without knowing the other commands those came before it. Otherwise, if a
client sends multiple requests to the web server, the web server will handle multiple requests from one
connection for a long time. That's why HTTP is a stateless protocol.
1.3 Request and Response

The operation of Hypertext Transfer Protocol (HTTP) involves the communication between a Hypertext
Transfer Protocol (HTTP) client application (Usually web browser) and a Hypertext Transfer Protocol (HTTP)
server application (Web servers like IIS). Hypertext Transfer Protocol (HTTP) uses Transmission Control
Protocol (TCP) as the Transport Layer Protocol at Well Known port number 80. Once the TCP connection is
established, the two steps in Hypertext Transfer Protocol (HTTP) communication are

1) HTTP Client Request: Hypertext Transfer Protocol (HTTP) client sends an Hypertext Transfer Protocol
(HTTP) Request to the Hypertext Transfer Protocol (HTTP) Server according to the HTTP standard, specifying
the information the client like to retrieve from the Hypertext Transfer Protocol (HTTP) Server.
 2) HTTP Server Response: Once the Hypertext Transfer Protocol (HTTP) Request arrived at the Hypertext
Transfer Protocol (HTTP) server, it will process the request and creates an Hypertext Transfer Protocol
(HTTP) Response message. The Hypertext Transfer Protocol (HTTP) response message may contain the
resource the Hypertext Transfer Protocol (HTTP) Client requested or information why the Hypertext
Transfer Protocol (HTTP) request failed.

Figure 1.3 Hypertext Transfer Protocol (HTTP) Request and Response.

Multiple Host Name Support: HTTP/1.1 supports specifying a Hostname in header. This allows running
multiple websites using a single IP address helps preventing the depletion of IPv4 addresses. Any
combination of IP address, Port number and Hostname can be used to identify a website.
Persistent Connections: In HTTP/0.9 and 1.0, the TCP connection is closed after a single HTTP Request/HTTP
Response pair. In HTTP/1.1 a keep-alive-mechanism was introduced, where a TCP connection could be
reused for more than one request. The default working principle of HTTP was not changed and the
difference is that the TCP connection is kept open after each HTTP Request/HTTP Response pair. Persistent
connections reduce delay remarkably, because the client does not need to re-negotiate the TCP connection
if it wants to retrieve any resource immediately.
Partial Resource Selection: In HTTP/1.1 the client can request for a partial resource. This feature can reduce
the workload of the server and save the available bandwidth.

1.4 Web browser and Web servers

What is Web Server

Web server is a computer system, which provides the web pages via HTTP (Hypertext Transfer Protocol). IP
address and a domain name is essential for every web server. Whenever, you insert a URL or web address into
your web browser, this sends request to the web address where domain name of your URL is already saved.
Then this server collects the all information of your web page and sends to browser, which you see in form of
web page on your browser.

All the communication between client (web browser) and server takes place via HTTP. The main aim of a web
server is to work is a medium for storing, processing and granting access to web pages to the users to clients
of the internet. As it is already mentioned, HTTP that is a system for collaboration, distribution and
hypermedia information system is used for the channel of communication between server and client. HTTP
then delivers the pages in the format of HTML documents that comprises the information in the shape of
scripts, style sheets, videos and images in addition to simple text-based content. The process of getting the
desired information start by the web browser that sends the request for the specific page using the HTTP and
then the web server respond to that request by either providing the requested content or giving the error
message.

Web server is designed for the purpose of providing information, however, it also receive the data from the
clients as well. Uploading of files or data, submitting web forms, etc. are the common examples of giving
content to the web server. The four highlighted features of web server are virtual hosting, large file support
even greater than 2GB, bandwidth throttling, and server-side scripting to generate the dynamic web pages.
The web server can handle the limited load normally from two to 80,000 connections at once. This is not
common or everyone as by default most of the web server supports the load from 500 to 1000 connections
for a single IP address.

List of popular web servers

 Apache HTTP server
 Internet Information Server (IIS)

 NGINX (EN-jin-EKS)

 Oracle Iplanet web server

 Caddy

 Tomado

 Lighttpd

 And many more...

What is Web Browser?

Web browser is a client, program, software or tool through which we sent HTTP request to web server. The
main purpose of web browser is to locate the content on the World Wide Web and display in the shape of web
page, image, audio or video form. You can call it a client server because it contacts the web server for desired
information. If the requested data is available in the web server data then it will send back the requested
information again via web browser. Microsoft Internet Explorer, Mozilla Firefox, Safari, Opera and Google
Chrome are examples of web browser and they are more advanced than earlier web browser because they are
capable to understand the HTML, JavaScript, AJAX, etc. Now days, web browser for mobiles are also available,
which are called micro browser. The web browser is used as a medium for accessing information from any
web server in files in a file system or in private networks. The process of getting the information from the web
server starts by the web browser. The modern day web browser supports the display in almost all digital
media formats like images, scripts, videos, images, and text. The main aim of the web browser is to send the
request to the web server for any specific data and present them in any digital media format. However, the
features of the web browser can vary from one to another. Most of the latest web browser supports the
various other functions in the shape of email, internet relay chat, Usenet news, etc.

List of popular web browsers

 Firefox (Mozilla)
 Internet Explorer (Microsoft)

 Edge (Microsoft)

 Opera
 Safari

 Netscape

 Mosaic

 And many more.

1.5 What is a Web 2.0 technology?

 When it comes to define web 2.0. The term means such internet applications which allow sharing and
collaboration opportunities to people and help them to express themselves online.

 It’s a simply improved version of the first world wide web, characterized specifically by the change
from static to dynamic or user-generated content and also the growth of social media. The concept
behind Web 2.0 refers to rich web applications, web- oriented architecture and social web. It refers to
changes in the ways web pages are designed and used by the users, without any change in any
technical specifications.

Figure 1.4 Web 1.0 VS 2.0 technologies

 Major features of Web 2.0 allow users to collectively classify and find dynamic information that flows
two ways between site owner and site user by means of evaluation, comments and reviews. Site users
can add content for others to see. Web 2.0 sites provide APIs to allow automated usage by an app or
mash up like it provides location metadata that can be processed by a simple browser tool .
 Figure 1.5 Web Figure Feature

1.6 Concepts of effective web design

Web design is a concept of planning, creating, and maintaining websites. The very process of using creativity
to design and construct a website and updating it regularly to incorporate changes is also referred to as web
designing. Besides the creation and updating, this concept also involves taking care of the user interface, the
architecture of information present, the layout, the colors, content, navigation ergonomics, as well as the
designs of the various icons. Some other areas in web design include search engine optimization, user
experience designs, standardized codes, graphic design, as well as interface design.

Basic elements of a good web design

In order to come up with a good web design and an effective visual and technical appeal of a website, there
are some elements that must be incorporated. To know more about these elements, you can go through the
following given points.

Shape – On most websites and WebPages, the shapes used are squares or rectangular but they don’t
necessarily have to be. Shapes are responsible for the creation of an enclosed boundary in the overall design,
and you can experiment with any shape you seem suitable. It can either be a geometric shape or any other
abstract shape that fits in the design.

Texture – Texture is one element that can help provide your website with a feeling of a surface beneath.
There are several types of textures that you can incorporate, and some of them include natural textures and
artificial textures. This element must be used in such a way that it brings out the content given on the website
and makes it look more appealing.
Direction – Direction is the element of a web design which is responsible for lending it movement or motion. A
good web design is one which automatically makes our eyes move from one corner or content of the website
to another, according to relevance or hierarchy.

Colour – Another basic element of a good website is the use of color. A black and white website may work for
certain niches like photography websites, but it is always better to raise the appeal of a website using colors in
a creative way. The colors are added in the later stage and not during the designing.

Web design Principles

Web design is not only about how the website looks and feels but is also a lot about how it works and
responds. When web designers work on a website, they incorporate not just those elements that add a visual
appeal to it but also try to make it highly responsive, functional, quick and useful. In order to create a highly
usable and effective website, designers follow certain principles that act as thumb rules or standard points to
keep in mind. The following are the various principles of an effective web design
There are two ways to create a visual hierarchy, and they are given as follows:

Size hierarchy – As the name suggests, size hierarchy is the kind of hierarchy in which the most important
content or image is of the largest size on a webpage, followed by the second most important content or image
in the second largest size and so on. The distinction in sizes should be such that a visitor would view the items
in the order of importance, and the pecking order of things is obvious.

Content hierarchy – Besides the hierarchy of size, which is one of the best ways to create the order of
importance, another way you can incorporate this principle is by creating a hierarchy of content. You can place
content in such a way that the human eye first travels to the content that is most important, for example, the
business’s objective or purpose and then moves to the less important content blocks in a hierarchical order.

Accessibility

Another highly important principle that must not be ignored when designing a web page or website is the
accessibility of it. When a visitor enters the website, he/she must be able to access each bit of information in
the easiest manner. This means that the text must be legible, the colors must not be harsh on the eyes and the
background must not overpower the content, etc. To make the website accessible to everyone, you can follow
some of the following points:

Typefaces – Make sure you select a font type and font size which is readable to all and is not too fancy for
some to access or understand. For example, Fonts like Verdana, Times New Roman, Arial, etc. are simple fonts
that almost everyone can easily read online. Similarly, the font size that works the best is 16 px but you can be
a little flexible with it.

Colors – As far as the user experience is concerned, your color scheme and contrast must be well thought of
and should be able to create visual harmony and balance. It is always better to choose contrasting colors for
the background and written content so that it can be easily read. Choose a darker text color and a lighter
background shade so that the result is easy to the eyes. Extra bright colors must be used sparingly.

Images – Do you know that the human mind perceives and processes images a lot faster than text? Well, it is
thus a good idea to choose and place the right images on your web pages to communicate with the audiences
in a better way. Make sure they are high-quality images and are suitable for your purpose.
Communication and content

Everyone who visits your website is looking for some or the other kind of information or content, and thus it is
very important for you to communicate with them clearly and in an engaging manner. Your information must
be compelling, easy to read and easy to process. Communication is not just about providing written
information but also about offering images, info graphics and another form of media such as videos and audio
pieces. Web design takes into consideration a concept called ‘Visible language’. According to this concept,
visible language is the content people see on the screen and involves three fundamental principles. They are
given as follows:

Organize – The first principle of visible language or effective communication is to provide the visitors of your
website a clear and highly consistent layout or structure. Some important parts of the organization of concept
include the layout involving the division of content, consistency, navigation, as well as visual appeal. In order
to make your website communicate effectively, you need to organize and place your blocks of information in
an easy to process manner.

Economize – This principle involves achieving more by utilizing less. This means that you must try to deliver
the most information by taking helping of less visual elements. The design or layout must be free of clutter,
should be simple and must have a high degree of clarity. It must throw emphasis on what is important and
create distinctiveness between different elements.

Communicate – The user interface of the web design must be such that users are able to understand
everything in the most convenient way. There must be a balance between readability, legibility, color, texture,
and views.
Besides this, the content given on the website must be appropriate, well written, and easy to understand and
should be written keeping in mind the concept of search engine optimization. It is important that you adjust
the style of writing according to the preference of the target audience and avoid promotional writing. The
writing must pull visitors and must leave them intrigued and wanting for more. It must clearly spell out what
you do and what you aim to achieve.

White space and simple design

A simple design is an effective design. Complexity is just not something that a visitor wants to see on your web
page, and one of the most important aspects of a simple design is white space. White space is something that
web designers must not be afraid of. White space not only helps to take the cognitive load off the website but
also makes it easier for users to perceive the information provided on the website. White space helps to divide
the web page into several distinct parts or areas which makes it simpler to process information. It is always
better to have a whitespace solution to the problem of complex hierarchical structures. The following are
some of the other things that can be considered as a part of a simple design:

Grid-based layout – To avoid a messy structure or appearance of the website, you must opt for a grid-based
layout in which content is divided into columns, boxes, and different sections.

F-pattern design – It is a fact that the human eye scans screens in an ‘F’ pattern. Thus, it is a good idea to
design a web page or website in a way that complements the natural reading behavior of the visitors.

Conventional designs – Conventional designs are not always boring and rather work well as far as visitor
response or likeability is concerned. They add a hint of trust, reliability as well as brand credibility.
Regular testing

Test Early and Test Often or ‘TETO’ is another web design principle that all designers and website owners must
consider. Conducting usability tests every now and then provide important results and insights into many
kinds of problems and complications related to a website layout or aspects of design. What happens is that
websites often tend to get into certain issues and by not testing them often, they may create issues that could
be driving visitors away. Websites constantly need upgrades and updates so as to maintain the visitor
footsteps and customer interest.

The following are some points you must keep in mind to test your webpage or website:

 Testing one user at the beginning of a project is better than testing 50 users towards the end as it
makes way for improvements that could prove important for driving traffic and increasing sales. Also
solving errors during process is least expensive rather than later.

 Another point to be kept in mind is that testing is an iterative process which means that designers must
first design, then test, then fix and then test again. There is a strong chance that there may be some
problems that were not solved the first time because of diversion of attention to other major issues.

1.7 Web design issues including Browser

1. There's no clear path. You want to extend a warm welcome to your visitors. Give them an easy way in
and through. Too much competition for attention is a turn off. When you provide too many options,
the functional result is no options.
2. Outdated design. Your site was state of the art in 2009. It's got a header, a couple of sidebars, and a big
chunk of information running down the center. Guess what? It looks like it's nearly a decade old.
Because it is. Time to refresh with current design thinking. The layout of a page has evolved over the
past decade. These days the best sites break up content into smaller, digestible bits. 

3. Overused stock images and icons. If visitors see the same image on multiple sites, it erodes trust. That
picture of people sitting around the conference table? They sure get around to a lot of offices!

4. Too many textures and colors. You are trying to add interest, but you just add clutter. Limit colors and
fonts. Maintain a thematic color scheme. For professional sites, try to limit the variety of fonts to three
or fewer. 

5. Design for the wrong reasons. Always begin by identifying your target audience and customizing design
and content. You may want your site to look "modern" or like another site you've seen, but if you
haven't checked in with what your audience needs and wants, you can fail miserably.

6. Cute that doesn't cut it. When your links have adorable, witty names, the experience gets tired fast.
Links that don't make much sense are not user friendly and won't ingratiate you with your visitors. Be
practical and basic when naming links. Make it easy for people. Design for multiple visits. A rotating
banner is cool the first time, and maybe the second, but at some point it's just a stale eyesore.
Monotonous calls to action.

7. Your site isn't optimized for mobile. You shouldn't need to be reminded of this, but numbers don't lie.
Mobile is overtaking desktop. It's increasingly likely that your visitors see your site on a tiny screen. If
they have to pinch and stretch to read, they'll find a better source of information. Be sure to test your
site on smart phone and tablet.
 8. You play hard to get. If you want customers to find you, make sure your address, phone number and
hours of operation are easily accessible on your site. Too often, that information is hidden or
completely absent.

1.7.1 Main technical issues in web design

Before you create a website, you should consider the technical issues relating to web design, specifically:

 browser compatibility
 screen resolutions
 web technologies
 internet speed
1.8 Bandwidth and Cache

1. Bandwidth
The short answer is that caching saves money. It saves time as well, which is sometimes the same thing if you
believe that “time is money.” But how does caching save you money?
It does so by providing a more efficient mechanism for distributing information on the Web. Consider an
example from our physical world: the distribution of books. Specifically, think about how a book gets from
publisher to consumer. Publishers print the books and sell them, in large quantities, to wholesale distributors.
The distributors, in turn, sell the books in smaller quantities to bookstores. Consumers visit the stores and
purchase individual books. On the Internet, web caches are analogous to the bookstores and wholesale
distributors.
The analogy is not perfect, of course. Books cost money; web pages (usually) don’t. Books are physical objects,
whereas web pages are just electronic and magnetic signals. It’s difficult to copy a book, but trivial to copy
electronic data.
The point is that both caches and bookstores enable efficient distribution of their respective contents. An
Internet without caches is like a world without bookstores.
 Client requests must exhibit locality of reference.
 The cost of caching must be less than the cost of direct retrieval.
We can intuitively conclude that the first requirement is true. Certain web sites are very popular. Classic
examples are the starting pages for Netscape and Microsoft browsers. Others include searching and indexing
sites such as Yahoo! and Altavista. Event-based sites, such as those for the Olympics, NASA’s Mars Pathfinder
mission, and World Cup Soccer, become extremely popular for days or weeks at a time. Finally, every
individual has a few favorite pages that he or she visits on a regular basis.
It’s not always obvious that the second requirement is true. We need to compare the costs of caching to the
costs of not caching. Numerous factors enter into the analysis, some of which are easier to measure than
others. To calculate the cost of caching, we can add up the costs for hardware, software, and staff time to
administer the system. We also need to consider the time users save waiting for pages to load (latency) and
the cost of Internet bandwidth.
Let’s take a closer look at the three primary benefits of caching web content:
 To make web pages load faster (reduce latency)
 To reduce wide area bandwidth usage
 To reduce the load placed on origin servers

2. Cache
Another reason to utilize web caches is bandwidth reduction. Every request that results in a cache hit saves
bandwidth. If your Internet connection is congested, installing a cache is likely to improve performance for
other applications (e.g., email, interactive games, streaming audio), because all your network applications
compete for bandwidth. A web cache reduces the amount of bandwidth consumed by HTTP traffic, leaving a
larger share for the others. It is also correct to say that a web cache increases your effective bandwidth. If your
network supports 100 users without a cache, you can probably support 150 users with a cache.
Even if your Internet connection has plenty of spare bandwidth, you may still want to use a cache. In the
United States, Internet service is typically billed at flat rates. Many other countries, however, have usage-
based billing. That is, you pay only for the bandwidth you use. Australia and New Zealand were among the first
countries to meter bandwidth usage.

1.9 Display resolution

Web page resolution is a big deal. Many sites that teach web design have written about it and depending upon
who you believe, you should design pages for the lowest common denominator (640x480), the most common
resolution (800x600), or the most cutting edge (1280x1024 or 1024x768).

Facts about Screen Resolutions

 640x480 is not dead
 While 640x480 is not as common as it used to be, this resolution is still around. Older computers,
laptops with smaller screens, net books, and people who need larger fonts all use this resolution. Even
if you choose not to design your page to this resolution you should test your site at this resolution.
 800x600 is very common
 Many website design guides recommend designing websites for 800x600 resolutions. While this
resolution is more common on the web at large, this may not be the case for your customers. If you’re
planning on redesigning your website, take a few weeks to analyze your browser statistics to
determine the most common resolutions used by your customers.
 1024x768 is a lot more common
 Screens are getting larger and 1024x768 is the other popular size to design for because many designers
have monitors that support this natively. But this resolution can be fairly hard to read for many people.
A 14-inch laptop monitor might support 1024x768, but the text is virtually unreadable. And laptops are
very popular.
 1280x1024 and larger are less common
 Mostly you’ll see these larger resolutions on desktop computers, or high-end laptops. But often at
these larger sizes, the customers aren’t browsing full-screen. So designing a site that’s wider than 1000
pixels is going to cause horizontal scrollbars on most screens.

1.10 Look and Feel of the Web

One of the most frequently asked questions is: “How can I drive more visitors to my site”. The answer to the
question of generating good revenue is how well your website design is and how your web pages appear. The
success of your website layout lies in easy navigation, user friendliness and high functionality. Here we
discuss 10 Tips to improve your website and its look and feel:

1.  You’re website should be fast: One of the main reasons for the downfall of a website is when it loads too
slowly. Even if your site takes 20 seconds to load- that means a lifetime on the internet- and most people
don’t have the time and patience to wait for that long. Understand that wild graphics and animations are
traffic killers and only use them if you really have to. Make sure you design your website so that everyone can
view- not only the ones with high speed internet connection. If your website takes more than 10 seconds to
load, chances are that you may be losing more than half of your site’s traffic.
2.  Easy navigation: This is one of the most important and simple tips to improve a website. Statistics show
that websites lose more than 50% of site visitor’s every time they have to click on a link to find a page. Make
sure that all your web pages are not more than five clicks from the home page.

3.  Make your website mobile-friendly: More than half the population owns a mobile now and half of that
percentage uses Smartphone’s, so there are chances that your potential clients will land on your site from
mobile browsing. But it’s very tough to browse a website that is not optimized for a mobile screen. This is
another important factor for improving a website and there are plenty of ways to create a mobile version for
your current website.

4. Your website should match your company branding: If you update your company logo or colours, make
sure it matches your online presence to create brand awareness and also make it easy for customers to
recognize your company online.

5.  Never overdo Pop-ups: A lot of webmasters overuse pop-ups thinking that it will help customers make
more purchases but that’s not the case. You’ll probably lose a potential client if you have pop-ups everytime
they open or close a window or click on a link. Use pop-ups only to offer customers and site visitor’s
something of high value and something that they will be really interested in.

6.  Make sure to use appropriate colors and fonts: A simple and clean looking website is creative enough to
improve the look and feel of your site. Throwing all kinds of colors in your site is overwhelming and can put
site visitors off. Remember, nothing is easier on the eye than black text on a white background. Use small
amounts of colors and have your website looking elegant which is more appealing to the eye. Also make sure
to have fonts that can be easily read on any device or browser.  Check this info graphic about which
illustrates how your branding color scheme can affect your website visitors.

7. Incorporate Social Media widgets: Including social media widgets will help your business and website
become available to customers whenever they need to check any updates about your site. The widgets
shouldn’t be the most prominent feature in your site but they shouldn’t be hard to spot either.

8. Use images to your advantage: Images play an important role when people search for something on the
internet. A lot of web users are simply attracted to websites that have optimized images and clean, well
photographed images can enhance your business or service much more than words can.

9. Interact with customers: Interacting with customers, both present and potential is very important in any
business. With this in mind, consider supporting interaction among the web readers and with you where
having a comment box where they can easily exchange suggestions.

10.  Never forget your purpose: the most important factor to improve your website remember your purpose
of having a website. Each page of your site should be connected with the purpose of having a website. All your
images, graphics, colors and links should help you achieve what you wanted from having a website in the first
place. If you want more sales and to promote your business or service, you have to go for a sales-oriented
website instead of one that is just nice-looking.

1.11 SITEMAP

A sitemap is a resource that the client and the web design team can refer back to throughout the project. It’s a
handy tool that displays the relationships between your site’s pages and its content elements. Ultimately,
building a website without a sitemap is like building a house without a blueprint.
Why a site map is built before web design: starts these are four reasons why it is important to know what is a
sitemap and what does it accomplish.

Puts everyone on the same page: A web design project involves the participation of many different people,
including business owners, web designers and account managers etc.. By outlining a solid, agreed-upon plan at
the beginning of a project, the entire process tends to flow better.

Establishes the site’s goals and purpose: On the internet today, there are far too many websites that provide
poor user experience. These difficult-to-navigate sites typically lack a sitemap that outlines its goals and
purposes. Once a sitemap is created, the pieces of a website are more easily plugged into place.

Prevents creation of duplicate content: In this duplicate content is another preventable web design mistake
that can hurt your search ranking. Map out a sitemap beforehand, you will be able to avoid redundancy by
determining early on where all your content should be located in same.

Sets up a clear conversion funnel path: If you want to generate leads with digital marketing, you must have a
clear conversion path. To achieve the best results, this process should start in the sitemap phase. Then, you
can make sure your visitors are properly directed from your calls-to-action on each web page

1.12 Page Layout and linking

Page layout refers to the arrangement of text, images, and other objects on a page. The term was initially
used in desktop publishing (DTP), but is now commonly used to describe the layout of webpages as well. Page
layout techniques are used to customize the appearance of magazines, newspapers, books, websites, and
other types of publications.
The page layout of a printed or electronic document encompasses all elements of the page. This includes the
page margins, text blocks, images, object padding, and any grids or templates used to define positions of
objects on the page. Page layout applications, such as Adobe InDesign and QuarkXpress, allow page designers
to modify all of these elements for a printed publication. Web development programs, such as Adobe
Dreamweaver and Microsoft Expression Studio allow Web developers to create similar page layouts designed
specifically for the Web.
Since there are many applications that create customized page layouts, there is also a specific file format
category for page layout file types. These files are similar to word processing documents, but may contain
additional page formatting information and other types of visual content.

Linking Within a Web Page

Clicking a link usually loads a web page into the browser window. However, what if you want to link not only
to a web page but to a specific spot on that page? You’ll see this frequently on long web pages, where links at
the top of the page let visitors jump down to specific content lower on the page; see Figure 4-10 for an
example. You can create in-page links two ways: by using a named-anchor or by adding an ID to the target
section. The named-anchor method has been around since the earliest days of the Web; it uses a special type
of link. With the ID technique, you give the destination spot a unique ID and then link to that ID. Although this
method is newer, it works with all current web browsers. You’ll learn about both methods below .

1.13 User-Centered Design Basics

The User-centered design (UCD) process outlines the phases throughout a design and development life-cycle
all while focusing on gaining a deep understanding of who will be using the product. The  international
standard 13407 is the basis for many UCD methodologies. It’s important to note that the UCD process does
not specify exact methods for each phase. 

User-centered design process goes through six phases:

• Specify the use context and users’ needs;

• Specify business requirements;

• Build design solutions from rough concept to finished design;

• Evaluate designs with usability testing;

• Implementation — develop and deliver the product;

• Deployment — the final product is evaluated, as consumer needs change.

1.14 Planning and publishing website Publishing

Interesting, sharable content to your website on a regular basis is a key market strategy that successful
companies have been using for years.  Content planning and publishing creates an upward spiral of online
reputation building, industry credibility, and strong Google ranking…. which all lead to business growth

1. Set your purpose and goals.

What is the purpose of your website? Is it to gain publicity for your business? To rally support behind a cause.
It’s important to identify your website’s purpose, as well as your target audience. You should also define your
goals. How many visitors do you expect per month?
2. Create a budget.
Whether you’re an established, mid-sized organization or a fledgling start-up, you should always set a budget
for your website expenses. This will probably include funds for web design, programming, and web hosting
(though other expenses may apply).
3. Assign roles.
 Company stakeholders (owner, marketing manager, or whoever else represents a primary function of
the business)
 Web developer
 Content writer and/or editor
 HTML/CSS professional
4. Create a content strategy.
What kind of content will you be displaying on your website? Content is basically anything that gives your
visitors information. It can include, but is not limited to:
5. Structure your website.
Decide what pages you’ll be using and what features will be on each one. Most websites have an About and
Contact page, but the pages you use should meet your business’ needs.
6. Create a mock-up.
A page mock-up, also know as a wireframe, is essentially the outline of your website (with the initial design
being the first draft). Usually created in Photoshop or Fireworks, you don’t have to put too much detail into
your mock-
7. Start designing.
The importance of good web design can’t be stressed enough. Good website design includes both usability
and aesthetics. An ugly website will drive away visitors, as will a website that’s difficult to navigate.
8. Test it out.
Testing is important for getting out bugs out and catching details that you might have missed initially. Make
sure your website shows up the way you want it to in all browsers, including Chrome, Firefox, Internet
Explorer, and mobile web browsers like Safari and Opera Mini. Test it on your cell phone.
9. Maintain your site.
Once your site is launched, the work isn’t over. A website is an ongoing entity that continuously represents
your company, so maintenance is very important. Monitor your analytics software to see how your website is
performing with the public. Keep an eye on metrics like your number of unique visitors, bounce rate, and
which pages are most popular on your website.

1.15 Designing effective navigation

Navigation is all about the links you provide to enable people to move between the different parts and pages
of your website. Your navigation needs to address four key challenges:
 
 Visitors won’t know what’s on your website unless you tell them. Entire sections of your site could be
overlooked you tell people don’t know they’re there.
 People don’t have the patience or commitment to try to out how to use your website. They just want
to be able to understand it immediately, and want to intuitively know how to get around it. If they
can’t work out where to find something they want, they’ll probably leave your website altogether.
 People don’t know how your website is structured unless you tell them. They want to feel that they
understand where they are in the whole site, not to feel like they’re bouncing between pages
aimlessly.
 Visitors will want to take a different path through your website, depending on their interests. You can’t
assume or expect that everyone will want to view your web pages in the same order.

It is possible, and desirable, to put links anywhere in your content. If a blog post mentions your latest product,
then you should link to it so that people can find out more information easily. Providing links in context at the
time people might want them makes it much easier for people to explore your website
When people think of navigation, though, they usually think of those links that are separated from the content
that provide access to everything the site offers. A group of links at the top or the side of the page is often
called a “navigation bar”, or a “navbar” for short. Because it’s separated from the page content, it’s easy to
spot, and it often uses design elements that draw attention to it.