Web
design is a process of conceptualization, planning,
modeling, and execution of electronic media content
delivery via Internet in the form of Markup language
suitable for interpretation by Web browser and display
as Graphical user interface (GUI).
The
intent of web design is to create a web site -- a
collection of electronic files that reside on a web
server/servers and present content and interactive
features/interfaces to the end user in form of Web
pages once requested. Such elements as text, bit-mapped
images (GIFs, JPEGs, PNGs), forms can be placed on
the page using HTML/XHTML/XML tags. Displaying more
complex media (vector graphics, animations, videos,
sounds) requires plug-ins such as Flash, QuickTime,
Java run-time environment, etc. Plug-ins are also
embedded into web page by using HTML/XHTML tags.
Improvements
in browsers' compliance with W3C standards prompted
a widespread acceptance and usage of XHTML/XML in
conjunction with Cascading Style Sheets (CSS) to position
and manipulate web page elements and objects. Latest
standards and proposals aim at leading to browsers'
ability to deliver a wide variety of media and accessibility
options to the client possibly without employing plug-ins.
Typically
web pages are classified as static or dynamic.
Static
pages don’t change content and layout with every
request unless a human (web master/programmer) manually
updates the page.
Dynamic
pages adapt their content and/or appearance depending
on end-user’s input/interaction or changes in
the computing environment (user, time, database modifications,
etc.) Content can be changed on the client side (end-user's
computer) by using client-side scripting languages
(JavaScript, JScript, Actionscript, etc.) to alter
DOM elements (DHTML). Dynamic content is often compiled
on the server utilizing server-side scripting languages
(ASP, JSP, Perl, PHP, Python, etc.). Both approaches
are usually used in complex applications.
With
growing specialization within communication design
and information technology fields, there is a strong
tendency to draw a clear line between web design specifically
for web pages and web development for the overall
logistics of all web-based services.
History
Tim
Berners-Lee, the inventor of the World Wide Web, published
a website in August 1991.[1] Berners-Lee was the first
to combine Internet communication (which had been
carrying email and the Usenet for decades) with hypertext
(which had also been around for decades, but limited
to browsing information stored on a single computer,
such as interactive CD-ROM design).
Websites
are written in a markup language called HTML, and
early versions of HTML were very basic, only giving
websites basic structure (headings and paragraphs),
and the ability to link using hypertext. This was
new and different to existing forms of communication
- users could easily navigate to other pages by following
hyperlinks from page to page.
As
the Web and web design progressed, the markup language
changed to become more complex and flexible, giving
the ability to add objects like images and tables
to a page. Features like tables, which were originally
intended to be used to display tabular information,
were soon subverted for use as invisible layout devices.
With the advent of Cascading Style Sheets (CSS), table-based
layout is increasingly regarded as outdated. Database
integration technologies such as server-side scripting
and design standards like CSS further changed and
enhanced the way the Web is made.
Web site design
A
Web site is a collection of information about a particular
topic or subject. Designing a website is defined as
the arrangement and creation of Web pages that in
turn make up a website. A Web page consists of information
for which the Web site is developed. A website might
be compared to a book, where each page of the book
is a web page.
There
are many aspects (design concerns) in this process,
and due to the rapid development of the Internet,
new aspects may emerge. For typical commercial Web
sites, the basic aspects of design are:
* The content: The substance, and information on the
site should be relevant to the site and should target
the area of the public that the website is concerned
with.
* The usability: The site should be user-friendly,
with the interface and navigation simple and reliable.
* The appearance: The graphics and text should include
a single style that flows throughout, to show consistency.
The style should be professional, appealing and relevant.
* The visibility: The site must also be easy to find
via most, if not all, major search engines and advertisement
media.
A
Web site typically consists of text and images. The
first page of a website is known as the Home page
or Index. Some websites use what is commonly called
a Splash Page. Splash pages might include a welcome
message, language/region selection, or disclaimer.
Each web page within a Web site is an HTML file which
has its own URL. After each Web page is created, they
are typically linked together using a navigation menu
composed of hyperlinks. Faster browsing speeds have
led to shorter attention spans and more demanding
online visitors and this has resulted in less use
of Splash Pages, particularly where commercial websites
are concerned.
Once
a Web site is completed, it must be published or uploaded
in order to be viewable to the public over the internet.
This may be done using an FTP client. Once published,
the Web master may use a variety of techniques to
increase the traffic, or hits, that the website receives.
This may include submitting the Web site to a search
engine such as Google or Yahoo, exchanging links with
other Web sites, creating affiliations with similar
Web sites, etc.
Multidisciplinary requirements
Web
site design crosses multiple disciplines of information
systems, information technology and communication
design. The website is an information system whose
components are sometimes classified as front-end and
back-end. The observable content (e.g page layout,
user interface, graphics, text, audio) is known as
the front-end. The back-end comprises the organization
and efficiency of the source code, invisible scripted
functions, and the server-side components that process
the output from the front-end. Depending on the size
of a Web development project, it may be carried out
by a multi-skilled individual (sometimes called a
web master), or a project manager may oversee collaborative
design between group members with specialized skills.
Issues
As
in most collaborative designs, there are conflicts
between differing goals and methods of web site designs.
These are a few of the ongoing ones.
Lack of collaboration in design
In
the early stages of the web, there wasn't as much
collaboration between web designs and larger advertising
campaigns, customer transactions, social networking,
intranets and extranets as there is now. Web pages
were mainly static online brochures disconnected from
the larger projects.
Many
web pages are still disconnected from larger projects.
Special design considerations are necessary for use
within these larger projects. These design considerations
are often overlooked, especially in cases where there
is a lack of leadership, lack of understanding of
why and technical knowledge of how to integrate, or
lack of concern for the larger project in order to
facilitate collaboration. This often results in unhealthy
competition or compromise between departments, and
less than optimal use of web pages.
Liquid
versus fixed layouts
On
the web the designer has no control over several factors,
including the size of the browser window, the web
browser used, the input devices used (mouse, touch
screen, voice command, text, cell phone number pad,
etc.) and the size and characteristics of available
fonts.
Some
designers choose to control the appearance of the
elements on the screen by using specific width designations.
This control may be achieved through the use of a
HTML table-based design, or through the use of CSS.
Whenever the text, images, and layout of a design
do not change as the browser changes, this is referred
to as a fixed width design. Proponents of fixed width
design prefer the control over the look and feel of
the site and the precision placement of objects on
the page. Other designers choose a liquid design.
A liquid design is one, like Wikipedia, where the
design moves to flow content into the whole screen,
or a portion of the screen, no matter what the size
of the browser window. Proponents of liquid design
prefer to use all the screen space available. Liquid
design can be achieved through the use of CSS, by
avoiding styling the page altogether, or by using
HTML tables set to a percentage of the page. Both
liquid and fixed design developers must make decisions
about how the design should degrade on higher and
lower screen resolutions. Sometimes the pragmatic
choice is made to flow the design between a minimum
and a maximum width. This allows the designer to avoid
coding for the browser choices making up the long
tail, while still using all available screen space.
Depending on the purpose of the content, a web designer
may decide to use either fixed or liquid layouts on
a case-by-case basis.
Similar
to liquid layout is the optional fit to window feature
with Adobe Flash content. This is a fixed layout that
optimally scales the content of the page without changing
the arrangement or text wrapping when the browser
is resized.
Flash
Adobe
Flash (formerly Macromedia Flash) is a proprietary,
robust graphics animation/application development
program used to create and deliver dynamic content,
media (such as sound and video), and interactive applications
over the web via the browser.
Flash
is not a standard produced by a vendor-neutral standards
organization like most of the core protocols and formats
on the Internet. Flash is much more restrictive than
the open HTML format, though, requiring a proprietary
plugin to be seen, and it does not integrate with
most web browser UI features like the "Back"
button unless a hyperlink is programmed to link a
new html page from the Flash file, in which case the
animation of the previous page would reset. However,
those restrictions may be irrelevant depending on
the goals of the web site design.
According
to a study [2], 98% of US Web users have the Flash
Player installed, with 45%-56%[4] (depending on region)
having the latest version. Numbers vary depending
on the detection scheme and research demographics.
Many
graphic artists use Flash because it gives them exact
control over every part of the design, and anything
can be animated and generally "jazzed up".
Some application designers enjoy Flash because it
lets them create applications that don't have to be
refreshed or go to a new web page every time an action
occurs. Flash can use embedded fonts instead of the
standard fonts installed on most computers. There
are many sites which forgo HTML entirely for Flash.
Other sites may use Flash content combined with HTML
as conservatively as gifs or jpegs would be used,
but with smaller vector file sizes and the option
of faster loading animations. Flash may also be used
to protect content from unauthorized duplication or
searching. Alternatively, small, dynamic Flash objects
may be used to replace standard HTML elements (such
as headers or menu links) with advanced typography
not possible via regular HTML/CSS (see Scalable Inman
Flash Replacement).
Flash
detractors claim that Flash websites tend to be poorly
designed, and often use confusing and non-standard
user-interfaces. Up until recently, search engines
have been unable to index Flash objects, which has
prevented sites from having their contents easily
found. This is because many search engine crawlers
rely on text to index websites. It is possible to
specify alternate content to be displayed for browsers
that do not support Flash. Using alternate content
also helps search engines to understand the page,
and can result in much better visibility for the page.
However, the vast majority of Flash websites are not
disability accessible (for screen readers, for example)
or Section 508 compliant. An additional issue is that
sites which commonly use alternate content for search
engines to their human visitors are usually judged
to be spamming search engines and are automatically
banned.
The
most recent incarnation of Flash's scripting language
(called "ActionScript", which is an ECMA
language similar to JavaScript) incorporates long-awaited
usability features, such as respecting the browser's
font size and allowing blind users to use screen readers.
Actionscript 2.0 is an Object-Oriented language, allowing
the use of CSS, XML, and the design of class-based
web applications.
CSS
versus tables
For more details on this topic, see Tableless web
design.
Back
when Netscape Navigator 4 dominated the browser market,
the popular solution available for designers to lay
out a Web page was by using tables. Often even simple
designs for a page would require dozens of tables
nested in each other. Many web templates in Dreamweaver
and other WYSIWYG editors still use this technique
today. Navigator 4 didn't support CSS to a useful
degree, so it simply wasn't used.
After
the browser wars subsided, and the dominant browsers
such as Internet Explorer became more W3C compliant,
designers started turning toward CSS as an alternate
means of laying out their pages. CSS proponents say
that tables should be used only for tabular data,
not for layout. Using CSS instead of tables also returns
HTML to a semantic markup, which helps bots and search
engines understand what's going on in a web page.
All modern Web browsers support CSS with different
degrees of limitations.
However,
one of the main points against CSS is that by relying
on it exclusively, control is essentially relinquished
as each browser has its own quirks which result in
a slightly different page display. This is especially
a problem as not every browser supports the same subset
of CSS rules. For designers who are used to table-based
layouts, developing Web sites in CSS often becomes
a matter of trying to replicate what can be done with
tables, leading some to find CSS design rather cumbersome
due to lack of familiarity. For example, at one time
it was rather difficult to produce certain design
elements, such as vertical positioning, and full-length
footers in a design using absolute positions. With
the abundance of CSS resources available online today,
though, designing with reasonable adherence to standards
involves little more than applying CSS 2.1 or CSS
3 to properly structured markup.
These
days most modern browsers have solved most of these
quirks in CSS rendering and this has made many different
CSS layouts possible. However, some people continue
to use old browsers, and designers need to keep this
in mind, and allow for graceful degrading of pages
in older browsers. Most notable among these old browsers
are Internet Explorer 5 and 5.5, which, according
to some web designers, are becoming the new Netscape
Navigator 4 — a block that holds the World Wide
Web back from converting to CSS design. However, the
W3 Consortium has made CSS in combination with XHTML
the standard for web design.
How it Looks vs. How it Works
Some
web developers have a graphic arts background and
may pay more attention to how a page looks than considering
other issues such as how visitors are going to find
the page via a search engine. Some might rely more
on advertising than search engines to attract visitors
to the site. On the other side of the issue, search
engine optimization consultants (SEOs) are concerned
with how well a web site works technically and textually:
how much traffic it generates via search engines,
and how many sales it makes, assuming looks don't
contribute to the sales. As a result, the designers
and SEOs often end up in disputes where the designer
wants more 'pretty' graphics, and the SEO wants lots
of 'ugly' keyword-rich text, bullet lists, and text
links. One could argue that this is a false dichotomy
due to the possibility that a web design may integrate
the two disciplines for a collaborative and synergistic
solution. Because some graphics serve communication
purposes in addition to aesthetics, how well a site
works may depend on the graphic designer's visual
communication ideas as well as the SEO considerations.
Another
problem when using lots of graphics on a page is that
download times can be greatly lengthened, often irritating
the user. This has become less of a problem as the
internet has evolved with high-speed internet and
the use of vector graphics. This is an engineering
challenge to increase bandwidth in addition to an
artistic challenge to minimize graphics and graphic
file sizes. This is an on-going challenge as increased
bandwidth invites increased amounts of content.
Accessible Web design
To be accessible, web pages and sites must conform
to certain accessibility principles. These can be
grouped into the following main areas:
* use semantic markup that provides a meaningful structure
to the document (i.e. web page)
* Semantic markup also refers to semantically organizing
the web page structure and publishing web services
description accordingly so that they can be recognized
by other web services on different web pages. Standards
for semantic web are set by IEEE
* use a valid markup language that conforms to a published
DTD or Schema
* provide text equivalents for any non-text components
(e.g. images, multimedia)
* use hyperlinks that make sense when read out of
context. (e.g. avoid "Click Here.")
* don't use frames
* use CSS rather than HTML Tables for layout.
* author the page so that when the source code is
read line-by-line by user agents (such as a screen
readers) it remains intelligible. (Using tables for
design will often result in information that is not.)
However,
W3C permits an exception where tables for layout either
make sense when linearized or an alternate version
(perhaps linearized) is made available.
Website Planning
Before
creating and uploading a website, it is important
to take the time to plan exactly what is needed in
the website. Thoroughly considering the audience or
target market, as well as defining the purpose and
deciding what content will be developed are extremely
important.
Purpose
It
is essential to define the purpose of the website
as one of the first steps in the planning process.
A purpose statement should show focus based on what
the website will accomplish and what the users will
get from it. A clearly defined purpose will help the
rest of the planning process as the audience is identified
and the content of the site is developed. Setting
short and long term goals for the website will help
make the purpose clear and plan for the future when
expansion, modification, and improvement will take
place. Also, goal-setting practices and measurable
objectives should be identified to track the progress
of the site and determine success.
Audience
Defining
the audience is a key step in the website planning
process. The audience is the group of people who are
expected to visit your website – the market
being targeted. These people will be viewing the website
for a specific reason and it is important to know
exactly what they are looking for when they visit
the site. A clearly defined purpose or goal of the
site as well as an understanding of what visitors
want to do/feel when they come to your site will help
to identify the target audience. Upon considering
who is most likely to need/use the content, a list
of characteristics common to the users such as:
* Audience Characteristics
* Information Preferences
* Computer Specifications
* Web Experience
Taking
into account the characteristics of the audience will
allow an effective website to be created that will
deliver the desired content to the target audience.
Content
Content
evaluation and organization requires that the purpose
of the website be clearly defined. Collecting a list
of the necessary content then organizing it according
to the audience's needs is a key step in website planning.
In the process of gathering the content being offered,
any items that do not support the defined purpose
or accomplish target audience objectives should be
removed. It is a good idea to test the content and
purpose on a focus group and compare the offerings
to the audience needs. The next step is to organize
the basic information structure by categorizing the
content and organizing it according to user needs.
Each category should be named with a concise and descriptive
title that will become a link on the website. Planning
for the site's content ensures that the wants/needs
of the target audience and the purpose of the site
will be fulfilled.
Compatibility and restrictions
Because
of the market share of modern browsers (depending
on your target market), the compatibility of your
website with the viewers is restricted. For instance,
a website that is designed for the majority of websurfers
will be limited to the use of valid XHTML 1.0 Strict
or older, Cascading Style Sheets Level 1, and 1024x768
display resolution. This is because Internet Explorer
is not fully W3C standards compliant with the modularity
of XHTML 1.1 and the majority of CSS beyond 1. A target
market of more alternative browser (e.g. Firefox and
Opera) users allow for more W3C compliance and thus
a greater range of options for a web designer.
Another
restriction on webpage design is the use of different
Image file formats. The majority of users can support
GIF, JPEG, and PNG (with restrictions). Again Internet
Explorer is the major restriction here, not fully
supporting PNG's advanced transparency features, resulting
in the GIF format still being the most widely used
graphic file format for transparent images.
Many
website incompatibilities go unnoticed by the designer
and unreported by the users. The only way to be certain
a website will work on a particular platform is to
test it on that platform.
Planning documentation
Documentation
is used to visually plan the site while taking into
account the purpose, audience and content, to design
the site structure, content and interactions that
are most suitable for the website. Documentation may
be considered a prototype for the website –
a model which allows the website layout to be reviewed,
resulting in suggested changes, improvements and/or
enhancements. This review process increases the likelihood
of success of the website.
First,
the content is categorized and the information structure
is formulated. The information structure is used to
develop a document or visual diagram called a site
map. This creates a visual of how the web pages will
be interconnected, which helps in deciding what content
will be placed on what pages. There are three main
ways of diagramming the website structure:
* Linear Website Diagrams will allow the users to
move in a predetermined sequence;
* Hierarchical structures (of Tree Design Website
Diagrams) provide more than one path for users to
take to their destination;
* Branch Design Website Diagrams allow for many interconnections
between web pages such as hyperlinks within sentences.
In
addition to planning the structure, the layout and
interface of individual pages may be planned using
a storyboard. In the process of storyboarding, a record
is made of the description, purpose and title of each
page in the site, and they are linked together according
to the most effective and logical diagram type. Depending
on the number of pages required for the website, documentation
methods may include using pieces of paper and drawing
lines to connect them, or creating the storyboard
using computer software.
Some
or all of the individual pages may be designed in
greater detail as a website wireframe, a mock up model
or comprehensive layout of what the page will actually
look like. This is often done in a graphic program,
or layout design program. The wireframe has no working
functionality, only planning. (Credit:
Wikipedia).
