Module II: Principles of Web Design
Key issues to be considered in web site design. Structure of a Web Page: Introduction to
HTML, Elements of HTML syntax, Head and Body sections, Building HTML documents,
Inserting text, images, hyperlinks, Backgrounds and Color Control, HTML Editors &
Tools: Use of different HTML editors and tools like Netscape Communicator and Microsoft
Front Page.
Key issues in website design:
1. Poor Navigation
A common issue in website design is poor navigation. If menus are too complicated,
cluttered, or not logically arranged, users struggle to find the information they need. This
frustration often leads them to leave the site quickly, resulting in a high bounce rate. A
well-designed website should have clear menus, visible search options, and an organized
structure.
2. Slow Loading Speed
Websites that take too long to load create a negative impression. Slow speed is usually
caused by large, unoptimized images, excessive plugins, or poor hosting. Since users
expect a site to load in just a few seconds, delays not only discourage visitors but also
lower search engine rankings. Speed optimization is therefore essential for a good user
experience.
3. Non-Responsive Design
Another major issue is when a website is not responsive, meaning it does not adjust
properly to different screen sizes such as mobiles and tablets. As most users today
browse on mobile devices, a site that only works well on desktop loses a large portion of
its audience. Responsive design ensures accessibility and convenience across all devices.
4. Cluttered Layout
A cluttered website filled with too many banners, pop-ups, or animations can overwhelm
users. Without enough white space and a simple structure, it becomes difficult for visitors
to focus on the main content. Clean layouts with balanced elements help create a
professional and user-friendly appearance.
5. Poor Readability
Text that is too small, poorly colored, or presented in large unbroken paragraphs makes
reading difficult. Low contrast between background and text also affects readability.
Websites must use clear fonts, appropriate sizes, and headings or bullet points to make
information easy to scan.
6. Inconsistent Design
Consistency is key to brand identity. When fonts, colors, or button styles change from one
page to another, the website looks unprofessional. A consistent design builds trust,
reinforces branding, and gives users a smooth browsing experience.
7. Weak Call-to-Action (CTA)
Many websites fail because they lack strong calls-to-action. If visitors cannot clearly see
what step to take next—such as “Sign Up,” “Buy Now,” or “Contact Us”—they are less
likely to engage. CTAs should be prominent, action-oriented, and easy to spot.
8. Accessibility Issues
Accessibility is often overlooked but is very important. Websites without alt text for
images, captions for videos, or suitable color contrast exclude users with disabilities.
,Ensuring accessibility makes the website inclusive and in many cases helps avoid legal
complications.
9. Security Problems
Users will not trust a website that is not secure. A lack of HTTPS, outdated plugins, or
poor protection against threats makes the site unsafe. This not only risks user data but
also damages credibility. A secure website builds user confidence and loyalty.
10. Poor SEO Optimization
If a website is not optimized for search engines, it will be difficult for users to discover it.
Missing titles, meta descriptions, or proper heading structures reduce visibility on search
results. Optimizing SEO improves ranking, traffic, and overall reach.
11. Excessive Pop-ups and Ads
Too many pop-ups and advertisements can irritate users. While one or two may be
acceptable, frequent interruptions distract visitors and increase bounce rates. Websites
should use ads and pop-ups sparingly and only when they add value.
12. Unclear Content
Finally, unclear content is a serious design issue. If the language is too complex, filled
with jargon, or fails to explain services clearly, users leave without understanding what
the website offers. Content should be simple, direct, and user-focused.
Structure of a webpage:
Introduction to HTML:
The basic structure of a web page includes the Doctype, the HTML element, and
the head and body sections. The Doctype provides information about the markup
language, the HTML element is the root of the document tree, the head contains
metadata, and the body contains the visible content.
The head and body sections of a web page are divided into various elements like
headers, paragraphs, links, and images, which are represented by HTML tags.
These elements and their arrangement contribute to the structure and
functionality of the web page.
A well-structured web page is crucial for both user experience and search engine
optimization, making it essential for developers to understand and use HTML
effectively. Other languages like CSS and JavaScript can further enhance the
structure, design, and interactivity of a web page.
Elements of HTML syntax:
The Doctype:
The first item to appear in the source code of a web page is
the doctype declaration. This provides the web browser (or other user agent) with
information about the type of markup language in which the page is written,
which may or may not affect the way the browser renders the content. It may look
a little scary at first glance, but the good news is that most WYSIWYG web editors
will create the doctype for you automatically after you’ve selected from a dialog
the type of document you’re creating. If you aren’t using a WYSIWYG web editing
package, you can refer to the list of doctypes contained in this reference and copy
the one you want to use.
, The doctype looks like this (as seen in the context of a very simple HTML 4.01
page without any content):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN""https://www.w3.org/TR/html4/strict.dtd"><html><head><title>Page
title</title></head><body></body></html>
In the example above, the doctype relates to HTML 4.01 Strict. In this reference,
you’ll see examples of HTML 4.01 and also XHTfML 1.0 and 1.1, identified as such.
While many of the elements and attributes may have the same names, there are
some distinct syntactic differences between the various versions of HTML and
XHTML. You can find out more about this in the sections entitled HTML Versus
XHTML and HTML and XHTML Syntax.
The Document Tree
A web page could be considered as a document tree that can contain any number
of branches There are rules as to what items each branch can contain (and these
are detailed in each element’s reference in the “Contains” and “Contained by”
sections). To understand the concept of a document tree, it’s useful to consider a
simple web page with typical content features alongside its tree view, as shown
in Figure 1.
Figure 1. The document tree of a simple web page
If we look at this comparison, we can see that the html element in fact contains
two elements :head and body.
head has two subbranches—a meta element and a title.
The body element contains a number of headings, paragraphs, and a block quote.
Note: that there’s some symmetry in the way the tags are opened and closed. For
example, the paragraph that reads, “It has lots of lovely content …” contains
three text nodes, the second of which is wrapped in an em element (for
emphasis). The paragraph is closed after the content has ended, and before the
next element in the tree begins (in this case, it’s a blockquote); placing the
closing </p>after the blockquote would break the tree’s structure.
html:
Key issues to be considered in web site design. Structure of a Web Page: Introduction to
HTML, Elements of HTML syntax, Head and Body sections, Building HTML documents,
Inserting text, images, hyperlinks, Backgrounds and Color Control, HTML Editors &
Tools: Use of different HTML editors and tools like Netscape Communicator and Microsoft
Front Page.
Key issues in website design:
1. Poor Navigation
A common issue in website design is poor navigation. If menus are too complicated,
cluttered, or not logically arranged, users struggle to find the information they need. This
frustration often leads them to leave the site quickly, resulting in a high bounce rate. A
well-designed website should have clear menus, visible search options, and an organized
structure.
2. Slow Loading Speed
Websites that take too long to load create a negative impression. Slow speed is usually
caused by large, unoptimized images, excessive plugins, or poor hosting. Since users
expect a site to load in just a few seconds, delays not only discourage visitors but also
lower search engine rankings. Speed optimization is therefore essential for a good user
experience.
3. Non-Responsive Design
Another major issue is when a website is not responsive, meaning it does not adjust
properly to different screen sizes such as mobiles and tablets. As most users today
browse on mobile devices, a site that only works well on desktop loses a large portion of
its audience. Responsive design ensures accessibility and convenience across all devices.
4. Cluttered Layout
A cluttered website filled with too many banners, pop-ups, or animations can overwhelm
users. Without enough white space and a simple structure, it becomes difficult for visitors
to focus on the main content. Clean layouts with balanced elements help create a
professional and user-friendly appearance.
5. Poor Readability
Text that is too small, poorly colored, or presented in large unbroken paragraphs makes
reading difficult. Low contrast between background and text also affects readability.
Websites must use clear fonts, appropriate sizes, and headings or bullet points to make
information easy to scan.
6. Inconsistent Design
Consistency is key to brand identity. When fonts, colors, or button styles change from one
page to another, the website looks unprofessional. A consistent design builds trust,
reinforces branding, and gives users a smooth browsing experience.
7. Weak Call-to-Action (CTA)
Many websites fail because they lack strong calls-to-action. If visitors cannot clearly see
what step to take next—such as “Sign Up,” “Buy Now,” or “Contact Us”—they are less
likely to engage. CTAs should be prominent, action-oriented, and easy to spot.
8. Accessibility Issues
Accessibility is often overlooked but is very important. Websites without alt text for
images, captions for videos, or suitable color contrast exclude users with disabilities.
,Ensuring accessibility makes the website inclusive and in many cases helps avoid legal
complications.
9. Security Problems
Users will not trust a website that is not secure. A lack of HTTPS, outdated plugins, or
poor protection against threats makes the site unsafe. This not only risks user data but
also damages credibility. A secure website builds user confidence and loyalty.
10. Poor SEO Optimization
If a website is not optimized for search engines, it will be difficult for users to discover it.
Missing titles, meta descriptions, or proper heading structures reduce visibility on search
results. Optimizing SEO improves ranking, traffic, and overall reach.
11. Excessive Pop-ups and Ads
Too many pop-ups and advertisements can irritate users. While one or two may be
acceptable, frequent interruptions distract visitors and increase bounce rates. Websites
should use ads and pop-ups sparingly and only when they add value.
12. Unclear Content
Finally, unclear content is a serious design issue. If the language is too complex, filled
with jargon, or fails to explain services clearly, users leave without understanding what
the website offers. Content should be simple, direct, and user-focused.
Structure of a webpage:
Introduction to HTML:
The basic structure of a web page includes the Doctype, the HTML element, and
the head and body sections. The Doctype provides information about the markup
language, the HTML element is the root of the document tree, the head contains
metadata, and the body contains the visible content.
The head and body sections of a web page are divided into various elements like
headers, paragraphs, links, and images, which are represented by HTML tags.
These elements and their arrangement contribute to the structure and
functionality of the web page.
A well-structured web page is crucial for both user experience and search engine
optimization, making it essential for developers to understand and use HTML
effectively. Other languages like CSS and JavaScript can further enhance the
structure, design, and interactivity of a web page.
Elements of HTML syntax:
The Doctype:
The first item to appear in the source code of a web page is
the doctype declaration. This provides the web browser (or other user agent) with
information about the type of markup language in which the page is written,
which may or may not affect the way the browser renders the content. It may look
a little scary at first glance, but the good news is that most WYSIWYG web editors
will create the doctype for you automatically after you’ve selected from a dialog
the type of document you’re creating. If you aren’t using a WYSIWYG web editing
package, you can refer to the list of doctypes contained in this reference and copy
the one you want to use.
, The doctype looks like this (as seen in the context of a very simple HTML 4.01
page without any content):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01//EN""https://www.w3.org/TR/html4/strict.dtd"><html><head><title>Page
title</title></head><body></body></html>
In the example above, the doctype relates to HTML 4.01 Strict. In this reference,
you’ll see examples of HTML 4.01 and also XHTfML 1.0 and 1.1, identified as such.
While many of the elements and attributes may have the same names, there are
some distinct syntactic differences between the various versions of HTML and
XHTML. You can find out more about this in the sections entitled HTML Versus
XHTML and HTML and XHTML Syntax.
The Document Tree
A web page could be considered as a document tree that can contain any number
of branches There are rules as to what items each branch can contain (and these
are detailed in each element’s reference in the “Contains” and “Contained by”
sections). To understand the concept of a document tree, it’s useful to consider a
simple web page with typical content features alongside its tree view, as shown
in Figure 1.
Figure 1. The document tree of a simple web page
If we look at this comparison, we can see that the html element in fact contains
two elements :head and body.
head has two subbranches—a meta element and a title.
The body element contains a number of headings, paragraphs, and a block quote.
Note: that there’s some symmetry in the way the tags are opened and closed. For
example, the paragraph that reads, “It has lots of lovely content …” contains
three text nodes, the second of which is wrapped in an em element (for
emphasis). The paragraph is closed after the content has ended, and before the
next element in the tree begins (in this case, it’s a blockquote); placing the
closing </p>after the blockquote would break the tree’s structure.
html:
