Chapter 2:

Web Design and Development

Objective: at the end of this chapter students will be able to:

Describe static and dynamic website features
Identify process of website development
Identify considerations during website deign

1
 Introduction
Before starting to designing your web site, it is important to know types
of the web pages and the difference so that you can determine the
best solution for your web site. However, what is important is the
purpose each page serves for your web site.
Types of web page: web page can be
 Static web pages
 don’t change content or layout with every request to the web server unless
developer editing the source code hence, web sites display the exact same
information whenever anyone visits it.
 They can be created from HTML and CSS coding (client side scripting
language).
 They can featured detailed multimedia design and even videos.
 The technique is highly cost-effective for publishing web information that
doesn’t change substantially over months or even years.
 Example: organizational/ institutional site.
2
 Static vs dynamic page cont’d…
 Dynamic web pages
 can adapt their content or appearance depending on the user’s
interactions on client’s browser, changes in data supplied by an
application, or as an evolution over time, so can display different
content from the same source code.
 They use client-side scripting for preparing dynamic design and
use server-side code( using PHP, JSP, Java script, Action script,
etc. languages) to handle events, manage sessions and cookies, and
storing and retrieving data from the database.
 Example: online for application, E-commerce, social networking
site, etc
 Unless they are carefully optimized, dynamic web content delivery
systems are often much less visible to search engines than static
pages.
 requires a rapid, high-end web server
3
 Static vs dynamic page cont’d…
• Dynamic web pages are not necessarily better than statics
b/c they serve different purposes.
• Dynamic languages and frameworks technical capacity to
create static pages. However, doing so creates unnecessarily
complex for its purpose while being more difficult to
maintain.
• Changing the content in static webpage is a difficult task
because you have to develop and upload a new page while in
dynamic web pages server application do this automatically.
• Browsing and loading of static web page is more quicker than
dynamic b/c unlike dynamic they don’t require the requests
of server.
• Planning static web page is an easy and cheap method while
dynamic method is advisable if you have plan to update
content and materials frequently.
4
 Static vs dynamic page cont’d…
Which should you choose?
• Many people choose dynamic websites due to:
– They reduce ongoing maintenance cost, make data
management very efficient, enable any feature add-ons
such as data feeds and compressive site search
• However:
– They cost more to develop due to coding complexity as well
as the development of content management interface to
enable you to maintain your site; and
– They need to obtain web hosting which supports databases
and dynamic languages. Fortunately, more hosts do offer
these features by default.

5
 Web Site Design and Development
• Effective web design is judged by the users of the website.

• There are many factors that affect the usability of a

website, and it is not just about form (how good it looks),
but also function (how easy is it to use).

• “Design is not just what it looks like + feels like BUT

design is how it works”. Steve jobs

• The customer and target audience must be kept in mind

while you work on a design.

6
 Design cont’d…

• The overall impression of a website depends on the

quality of its design.

• Websites that are not well designed tend to

perform poorly and have sub-optimal Google
Analytics metrics (e.g. high bounce rates, low time
on site, low pages per visit and low conversions). So
what makes good web design?

 follow website design principles

7
 Universal design principles
 The following are the principles:
 Principle One: Equitable Use
 to people with diverse abilities
 Principle Two: Flexibility in Use
 Users can choose to view web pages without
images or in a variety of layouts and typefaces.
 Principle Three: Simple and Intuitive Use
 Easy to understand regardless of user knowledge,
experience, language skills etc
 Simple and direct access to most important
features and information
 Principle Four: detectable Information

Web technologies include provisions for supplying
equivalent text for non-text items, such as alt-
text for images, captions for spoken audio, and
audio descriptions for video files. 8
 Information gathering
• Good web design always caters to the needs of the user. Are your web
visitors looking for information, entertainment, some type of interaction,
or to transact with your business? Each page of your website needs to
have a clear purpose, and to fulfill a specific need for your website users
in the most effective possible way.

• The most important task at this point is,

 first you gather your development team,
 analyze your needs and goals, and
 Next you create a project charter document that details
 what you intend to do and why,
 what technology and content you’ll need,
 how long the process will take,
 what you will spend to do it, and
 how you will assess the results of your efforts. 9
 Information gathering cont’d…

• Add to that the importance of being able to create a web

page design simply and efficiently and with regard to the
cost and time for both you and your client by creating a well
define scope of the site.

• All the visual content, such as images, photos, and videos

should be collect, the team focuses on selecting the theme,
color, layout, features, and other aspects of the website.

10
 Website Development

• At this point it is necessary to put in writing the very essence

you’d like to communicate to the audience of your website, and
add calls-to-action.

• Content writing involves also creation of catching headlines, text

editing, writing new text, compiling the existing text, etc., this
takes time and effort.

• On the technical side, the website development process includes

elements such as designing interactive contact forms, and
choosing a CMS (content management system) such as
WordPress, Joomla, and Dreamweaver.
•  
11
 Website Testing and Deployment

• In this stage, the website designer adds final touches to the

site and tests the website before use. The designer will test
complete functionality of the site to ensure that it runs
smoothly without any fault.

• The website designer will test the scripts and forums,

ensure that the site displays well on different devices and
platforms, verify internal links, and other similar tasks.

12
 2.2 Information organization and Architecture
Information architecture: aimed to:
 Organize the site content into taxonomies and hierarchies
of information;
 Hierarchies: moving from the broadest overview of the site (the
home page), down through increasingly specific submenus and content
pages.
 Taxonomies/classification: is the science and practice of
classification of content categories, using a specific, carefully
designed set of descriptive terms.
 Communicate conceptual overviews and the overall site organization to
the design team and clients;
 Research and design the core site navigation concepts;
 Design and implement search optimization standards and strategies.
 Bridge from planning site goals and audiences and the specific design,
user interface, and technical solutions you’ll use in the finished site
designs.
13
 Organizing web site information
There are five basic steps in organizing your information:
1. Inventory your content:
What do you have already?
What do you need?
2.Establish a hierarchical outline of your content and create a
controlled vocabulary so the major content, site structure, and
navigation elements are always identified consistently;
3.Chunking:
Divide your content into logical units with a consistent modular
structure; better suited to the computer screen. lend themselves
to web links.
4.Draw diagrams that show the site structure and rough outlines of
pages with a list of core navigation links; and
5.Analyze your system by testing the organization interactively with
real users; revise as needed. 14
 Information organization cont’d…
Ways organizing web information
 Five fundamental ways to organize information:
 Category
 by the similarity of characteristics or relatedness of
the items
 Time
 by timeline or history
 Location
 by spatial or geographic location, most often used for
orientation and direction.
 Alphabetic
 based on the initial letter of the names of items
 Continuum
 by the quantity of a measured variable over a range,
such as price, score, size, or weight.

15
 Cont’d… Web organization

 Site structure: The success of the organization of your web

site will be determined largely by how well your site’s information
architecture matches your users’ expectations.

Don’t make a confusing web of links.

16
 Cont’d… Web organization

 Site structural themes : three essential structures can be used

to build a web site: sequences, hierarchies, and webs.
 Sequences
 The simplest and most familiar way to organize
information is to place it in a sequence.
 Straight sequences are the most appropriate
organization for training or education sites.

17
 Cont’d… Web organization

 Hierarchical are the best way to organize most complex bodies of

information
 Hierarchical diagrams are very familiar in corporate and
institutional life, so most users find this structure easy to
understand.

/Tree architecture

18
 Site File Structure
 attention to the file and directory structure and how you name things within
your site has a lot of advantages in:
 Understanding: Your current team, future site maintainers, and
most site users will benefit from careful, consistent, plain-language
site classification
 Flexibility: If every object in your site has a name, everything can
be found, styled, and programmatically manipulated
 Accessibility: Named objects are more accessible to programmatic
and style sheet control across all media types and give you
flexibility in implementing universal accessibility features in your
site
 Search optimization: Careful site classification makes it much
easier to optimize a site for search engine visibility
 Future growth and change: you can’t scale up or automate changes in
a randomly named, randomly constructed collection of files and
directories; a non-system can’t be systematically managed or
structurally expanded 19
 Cont’d… Site File Structure

Naming principle
 Use language that anyone can understand
 Use plain-language names for all of your files and directories,
separating the words with “breaking” hyphen (-)characters.
 Never use technical or numeric nonsense to name a component
when a plain-language name will do.
 www.UOG.edu.et/depts1/progs2/org004/bio_424.html
OR
 www.UOG.edu.et/departments/healthinformatics/internet-
programming/ip_424.html

20
 Cont’d… Site File Structure

Structure for efficiency and maintainability

 Well-designed sites contain modular elements that are used
repeatedly across many dozens or hundreds of pages.
 Include files

 Web servers allow site authors to create standardized

pieces of HTML code, called “include files,” that can be
used across all pages in a web site.

 Include files can also be useful for repeating

standardized or other contents that is repeated in
identical form in many places throughout a large site.

21
 Cont’d… Site File Structure
Search Engine Optimization (SEO)
 Search engine is a tool that used to find out information (find
web pages from one page to another) on the internet by following
web links through crawler and web spiders; and analyze and index
web page content for topical relevance by these automated
softwares.
 SEO will make your site better structured and more accessible.
 can increase the traffic volume to your site
 search engines do not rank web sites – they rank a webpage
(therefore Each page of your site needs to be optimized for
search and well linked to other pages,)

22
 (Cont'd . . . )Search Engine Optimization
 So, what exactly are the rules?
 No one except the search engine knows exactly what the
formula is.
 But they say :
 create persuasive page content with proper structural markup and
 characteristics of the text and links within the page—the page title,
content headings, the body text, the alternate text in image html tags,
web links both internal to the site and external to other sites, and the
frequency and distribution of topical keywords.
 Even your domain name and the names of files and directories
within the url of your web page may count toward relevancy
rankings.
 good linkages to other pages and sites. how often people who
get your page in their search results click on the link to your
page,
23
 (Cont'd . . . )Search Engine Optimization
search crawlers bypass a web page
 Pages with very complex structure: deeply nested tables, many
frames, or unusually complex html
 Lengthy JavaScript or css code at the top of the page html code
listing
 Pages with many broken links.
 Content with keyword spamming (repeating keywords many times
in hidden text, alternate image text, or meta tags)

Long, complex urls with special characters (&, ?, %, $) that are
often generated by dynamic programming or databases

24
 (Cont'd . . . )Search Engine Optimization


Slow-loading pages with inefficient dynamic links to content
management systems or databases: if the page doesn’t load
in a few seconds, many crawlers give up and move on


Pages that use frames or iframes: crawlers often ignore
pages with complex frame schemes because they can’t make
sense of the individual html files that make up each framed
“page” (avoid frames where possible, and never use frames
for navigation purposes)

25
 Page structure

Site design is the point at which you assemble your planning work
on information architecture, navigation elements, and user
interface wireframes and begin to structure an actual site in
HTML and CSS.


Research on web user expectations now supports the common
practice of locating section navigation links in the left column.

26
 The content area
 Common practices that make content areas easier to use:
 Page titles: a visible name near the top
 use an <h1> heading at the top of the page
 Jump-to-top links: Jump links are a nice links to the top
for long pages.
 Paging navigation. in multipage sequences it is convenient
to have simple text links at the top and bottom of the
page to move the reader to the previous or next pages
in the sequence.
 Dates:
 In news and magazine sites the publication date
should appear at the top of the page.
 Other sites should display a last-updated date at
the bottom

27
 Page footers
 Page footers are mostly about housekeeping and legal matters.
 Page author or, in large enterprise sites, responsible
party
 Copyright statement
 Contact details, especially email
 Links to related sites or to the larger enterprise
 Redundant navigation links, for long pages

28
 Page Templates
 Always start your template work with an internal page, because
the internal page template will dominate the site.

29
 Internal page templates
Internal page templates must accomplish these important functions:
 site navigation: make them logically consistent with the
information architecture and structural organization of your site
 Design framework: organize content consistently throughout the
site
 Graphic tone: establish the look and feel of the site, ideally with a
system dominated by consistent visual elements, but with enough
flexibility to create distinct regions within a large site

30
 Types of internal pages
 In larger sites the “template” is rarely a single layout and usually
incorporates multiple variations to accommodate the full range of
content and applications required.

31
 The home page
 Home pages have four primary elements:
 Identity
 Navigation
 Timeliness, or content focus
 Tools (search, directories)
 An effective home page can’t be all things to all people.
 Amazon’s home page is all about navigation to products.
 Google’s famously lean home page is all about tools.

32
 Page Frameworks
 fixed-width page
 Fixed-width page designs are widely used, particularly
for complex page layouts with many functional sub-
regions of the page, such as in newspaper sites.
 Fixed-width layouts have several downsides.
 On large display screens a major portion of screen real
estate goes unused, and
 in a narrow browser window users may need to scroll
horizontally to see the full width of the page.
 fixed layouts will always be more brittle and prone to
universal usability problems than flexible layouts.
 thus it is strongly recommend that you consider flexible
page layouts as a design solution.

33
 Page Frameworks cont’d…

 The most common approach is to use percentages to

define the width of the different elements on the page.
 Flexible page designs have enormous advantages in
adaptability across various display devices (desktop,
laptop, cell phone, iPod, and so on).
 Flexible designs are also more universally usable
because they can be easily adapted to increase text
size, display color and contrast, and other viewing or
reading parameters.

34
 Alignment
 The best alignment option for web pages is
left-justified headings and left-justified
text.

35
 Line length
 Text on the computer screen is hard to read becouse of
 the low resolution of computer screens
 the lines of text on most web pages are far too long for
ideal reading.

Fixed-width layouts (left) offer some control over line length, 36

whereas flexible layouts (right) expand to fill the browser window.
 Cont’d… Line length

 When designing a fixed-width layout,

 set text columns to no wider than 365 pixels.
 With standard text, this yields a line of about fifty
characters, averaging about nine to ten words per line.
 If you choose a flexible layout approach,
 use css leading controls to increase line spacing
 Additional line spacing permits a slightly longer line
length without sacrificing legibility.

37
 Typefaces
 Some typefaces are more legible than others on the screen.
 Typefaces such as Georgia and Verdana were designed specifically
for legibility on the computer screen;
 The most conventional scheme for using typefaces is to use
 a serif face such as Times New Roman or Georgia for
body text and
 a sans serif face such as Verdana or Arial as a contrast
for headlines

38
? 39
 Chapter assignment
Describe briefly about basic website design

principles.

What is script and client-side scripting and

server side scripting?

What web hosting is mean?

 Changes in contents of web page? How many

times pages can change in dynamic web page? 40