Unit 1 Part2

2160708
Web Technology
Unit-2
Web Design
Outline
1. Web Design Issues
2. Planning a website
3. Effective Navigation
Web Design Issues
a) Browser & Operating Systems
b) Bandwidth and Cache
c) Display Resolution
d) Look & Feel
e) Page Layout and Linking
f) Locating Information
g) Making Design user-Centric
h) Sitemap
a) Browser & Operating Systems
 Web pages are written using different HTML tags and viewed in
browser window.
 The different browsers and their versions greatly affect the way a
page is rendered, as different browsers sometimes interpret same
HTML tag in a different way.
 Different versions of HTML also support different sets of tags.
 The support for different tags also varies across the different
browsers and their versions.
 Same browser may work slightly different on different operating
system and hardware platform.
 To make a web page portable, test it on different browsers on
different operating systems.
b) Bandwidth and Cache
 Users have different connection speed, i.e. bandwidth, to access
the Web sites.
 Connection speed plays an important role in designing web pages,
if user has low bandwidth connection and a web page contains
too many images, it takes more time to download.
 Generally, users have no patience to wait for longer time than 10-
15 seconds and move to other site without looking at contents of
your web page.
 Browser provides temporary memory called cache to store the
graphics.
 When user gives the URL of the web page for the first time, HTML
file together with all the graphics files referred in a page is
downloaded and displayed.
c) Display Resolution
 Display resolution is another important factor affecting the Web
page design, as we do not have any control on display resolution
of the monitors on which user views our pages.
 Display or screen resolution is measured in terms of pixels and
common resolutions are 800 X 600 and 1024 X 786.
 We have three choices for Web page design.
• Design a web page with fixed resolution.
• Make a flexible design using HTML table to fit into different resolution.
• If the page is displayed on a monitor with a higher resolution, the page is
displayed on left hand side and some part on the right-hand side remains
blank. We can use centered design to display page properly.
• Ideally we should use some frameworks for designing like
Bootstrap/Material design.
d) Look & Feel
 Look and feel of the website decides the overall appearance of the
website.
 It includes all the design aspects such as
• Web site theme
• Web typography
• Graphics
• Visual structure
• Navigation etc…
e) Page Layout and Linking
 Website contains of individual web pages that are linked together
using various navigational links.
 Page layout defines the visual structure of the page and divides
the page area into different parts to present the information of
varying importance.
 Page layout allows the designer to distribute the contents on a
page such that visitor can view it easily and find necessary details.
f) Locating Information
 Webpage is viewed on a computer screen and the screen can be
divided into five major areas such as center, top, right, bottom
and left in this particular order.
 The first major area of importance in terms of users viewing
pattern is the center, then top, right, bottom and left in this
particular order
g) Making Design user-Centric
 It is very difficult for any Web designer to predict the exact
behavior of the Web site users.
 However, idea of general behavior of common user helps in
making design of the Web site user centric.
 Users either scan the information on the web page to find the
section of their interest or read the information to get details.
h) Sitemap
 A Sitemap is a model of a website's content designed to help both
users and search engines navigate the site.
 Many a times Web sites are too complex as there are a large
number of sections and each section contains many pages.
 It becomes difficult for visitors to quickly move from one part to
other.
 Once the user selects a particular section and pages in that
section, user gets confused about where he/she is and where to
go from there.
 To make it simple, keep your hierarchy of information to few levels
or provide the navigation bar on each page to jump directly to a
particular section.
Planning a Website
 The most important activity in a website development is planning.
 To achieve higher success of the website in terms of user
satisfaction, better planning is needed.
 Before we start developing a website, we should ask question such
as
• Why are we developing this website?
• What do we achieve by developing this website?
• Who are the people who will use this website?
• What are the information contents?
• How are these contents organized? What are the possible ways?
Effective Navigation
 The most important design element in the web design after page
layout is navigation design.
 Navigation means the ways to move from one page to another
page in a Web site using hyperlinks provided on the page.
 If navigation design is not proper then user feels the problem in
moving around the pages in your site in a desired manner or gets
confused and leaves the site.
Tips for Effective Navigation
 Navigation links are either text based, i.e. a word or a phrase is used as a
link, or graphical, i.e. a image, a icon or a logo is used as a link.
 Navigation links should be clear and meaningful.
 It should be consistent.
 Link should be understandable.
 Organize the links such that contents are grouped logically.
 Provide search link, if necessary, usually on top of the page.
 Use common links such as ‘about us’ or ‘Contact us’.
 Provide the way to return to first page.
 Provide the user with information regarding location
 Horizontal navigation bar can be provided on each page to directly jump
to any section

Unit 1 Part2

Uploaded by

Copyright:

Available Formats

Unit 1 Part2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1 Part2

Uploaded by

Copyright:

Available Formats

2160708

You might also like