| |
 |
|
Web design is a process of conceptualization, planning,
modeling, and execution of electronic media 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 (Perl, PHP, ASP, JSP, ColdFusion, etc.).
Both approaches are usually used in complex applications. |
| |
|
With growing specialization in the e
information technology field there is a strong tendency to
draw a clear line between
web design
and
web development.
|
| |
|
|
| |
|
|
|
|
| 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 used to make it became 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. |
| |
| The introduction of of
Macromedia Flash (now Adobe Flash) into an already
interactivity-ready scene has further changed the face of
the Web, giving new power to designers and media creators, and
offering new interactivity features to users, often at the
expense of usability for persons with disabilities, search
engine visibility and browser functions available to HTML. |
| |
| |
|
|
|
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
|
top |
|
| 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. |
| |
|
|
|
|
| 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
|
top |
|
| 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, understanding or concern for the larger project
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. |
| |
| 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. |
| |
| |
|
|
|
|
|
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
[3], with 45%-56%[4]
(depending on region) having the latest version. Numbers vary
depending on the detection scheme and research demographics[5].
|
| |
|
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. |
| |
|
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.
|
| |
|
|
|
|
| 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 were over, and
Internet Explorer dominated the market, 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
|
top |
|
| 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) obsess about 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
|
top |
|
| Main article:
Web accessibility |
| |
| Accessible Web design is the art of creating webpages that
are accessible to everyone, using any device. It is especially
important so that people with
disabilities - whether due to accident, disease or old age -
can access the information in Web pages and be able to navigate
through the website. |
| |
|
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. |
| |
| |
|
|
| 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. |
| |
| |
|
|
|
|
| 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. |
| |
| |
|
|
|
|
|
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 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
|
top |
|
| 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
|
top |
|
| 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.
|
| |
| |
|
|
Website design styles
|
top |
|
|
see also:
Website design styles
|
| |
| Over the short history of the web, various
architectural and artistic styles have developed among
different online language, national, social and cultural
communities. |
| |
| Such differences in website design styles would set
European websites apart from North American ones,
Taiwanese websites from the ones originated in Mainland
China (marked by the tendency to proliferate pop-up
windows activated by left-click), Japanese (marked by
employment of gay colors and flashing cute anime
characters) from Korean (marked by gray text-white
background, clean, "MacIntosh"-style
interface). Especially innovative is a style originated in the
Netherlands and other Dutch-speaking online communties, of web
interface heavily drawing on flash and postmodern visual arts at
the expense of text and ordinary functionality. |
| |
| |
|
|
|
|
|
|
