Web page design is a process of conceptualization, planning, modeling, and execution
of electronic media content delivery via Internet in the form of technologies
(such as markup languages) suitable for interpretation and display by a web browser
or other web-based graphical user interfaces (GUIs).
The intent of web design is to create a web site (a collection of electronic
files residing on one or more web servers) that presents content (including
interactive features or interfaces) to the end user in the form of web pages
once requested. Such elements as text, forms, and bit-mapped images (GIFs, JPEGs,
PNGs) can be placed on the page using HTML, XHTML, or XML tags. Displaying more
complex media (vector graphics, animations, videos, sounds) usually requires
plug-ins such as Flash, QuickTime, Java run-time environment, etc. Plug-ins
are also embedded into web pages by using HTML or XHTML tags.
Improvements in the various browsers' compliance with W3C standards prompted
a widespread acceptance of XHTML and XML in conjunction with Cascading Style
Sheets (CSS) to position and manipulate web page elements. The latest standards
and proposals aim at leading to the various 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 or programmer) manually updates the page.
Dynamic pages adapt their content and/or appearance depending on the end-user’s
input or 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,
media players and PDF reader plug-ins, etc.) to alter DOM elements (DHTML).
Dynamic content is often compiled on the server utilizing server-side scripting
languages (PHP, ASP, Perl, Coldfusion, JSP, 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 published what is considered to be the first 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 from 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 commonly regarded as outdated. Database integration technologies such
as server-side scripting and design standards like W3C further changed and enhanced
the way the Web is made. As times change, websites are changing the code on
the inside and visual design on the outside with ever-evolving programs and
utilities.
With the progression of the Web, tens of thousands of web design companies
have been established around the world to serve the growing demand for such
work. As with much of the information technology industry, many web design companies
have been established in technology parks in the developing world as well as
many Western design companies setting up offices in countries such as India,
Romania, and Russia to take advantage of the relatively lower labor rates found
in such countries.
Web Site Design
A web site is a collection of information about a particular topic or subject.
Designing a web site is defined as the arrangement and creation of web pages
that in turn make up a web site. A web page consists of information for which
the web site is developed. A web site 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 non-commercial web
sites, the goals may vary depending on the desired exposure and response. 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 web site
is known as the Home page or Index. Some web sites use what is commonly called
a Splash Page. Splash pages might include a welcome message, language or 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 web sites
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 web site 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 web site 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 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 a more semantic div-based design 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 precise control over the layout of a site and the
precision placement of objects on the page. Other designers choose a liquid
design. A liquid design is one 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 greater compatibility and using the
screen space available. Liquid design can be achieved by setting the width of
text blocks and page modules to a percentage of the page, or by avoiding specifying
the width for these elements all together, allowing them to expand or contract
naturally in accordance with the width of the browser.
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
or 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.
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 do not 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 or CSS (see Scalable
Inman Flash Replacement).
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
self-contained than the open HTML format as it does not integrate with web browser
UI features. For example: the browsers "Back" button couldn't be used
to go to a previous screen in the same Flash file, but instead a previous HTML
page with a different Flash file. The browsers "Reload" button wouldn't
reset just a portion of a Flash file, but instead would restart the entire Flash
file as loaded when the HTML page was entered, similar to any online video.
Such features would instead be included in the interface of the Flash file if
needed.
Flash requires a proprietary media-playing plugin to be seen. According to
a study,[2] 98% of US Web users have the Flash Player installed.[3] The percentage
has remained fairly constant over the years; for example, a study conducted
by NPD Research in 2002 showed that 97.8% of US Web users had the Flash player
installed. Numbers vary depending on the detection scheme and research demographics.[4]
Flash detractors claim that Flash websites tend to be poorly designed, and
often use confusing and non-standard user-interfaces, such as the inability
to scale according to the size of the web browser, or its incompatibility with
common browser features such as the back button. 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 will
help 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 layout
For more details on this topic, see Tableless web design.
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.
Form versus Function
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[citation needed]. 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[citation
needed]. 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 a lot 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
Main article: Web accessibility
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 accessibility is also changing as it is impacted by Content Management
Systems that allow changes to be made to webpages without the need of obtaining
programming language knowledge.
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.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 or feel when they come to your site will help to
identify the target audience. Upon considering who is most likely to need or
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 or 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, Safari
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, though
it can be used for selling ideas to other web design companies.
Close
this text