Web design

Web design is the skill of creating presentations of content (usually hypertext or

hypermedia) that is delivered to an end-user through the World Wide Web, by way of
a Web browser or other Web-enabled software like Internet television clients,
microblogging clients and RSS readers.

The intent of Web design is to create a website—a collection of electronic

documents and applications 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.[citation needed] Such elements as text, bit-mapped images (GIFs, JPEGs)
and 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 Adobe 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 content
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. A simple HTML
page is an example of static content.
 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 information technology field there is a strong

tendency to draw a clear line between web design and Web development.

Web design is a kind of graphic design intended for development and styling of
objects of the Internet's information environment to provide them with high-end
consumer features and aesthetic qualities. The offered definition separates Web
design from web programming, emphasizing the functional features of a web site, as
well as positioning web design as a kind of graphic design. [1]

The process of designing web pages, web sites, web applications or multimedia for
the Web may utilize multiple disciplines, such as animation, authoring,
communication design, corporate identity, graphic design, human-computer
interaction, information architecture, interaction design, marketing, photography,
search engine optimization and typography.

 Markup languages (such as HTML, XHTML and XML)

 Style sheet languages (such as CSS and XSL)
 Client-side scripting (such as JavaScript)
 Server-side scripting (such as PHP and ASP)
 Database technologies (such as MySQL and PostgreSQL)
 Multimedia technologies (such as Flash and Silverlight)

Web pages and websites can be static pages, or can be programmed to be dynamic
pages that automatically adapt content or visual appearance depending on a variety
of factors, such as input from the end-user, input from the Webmaster or changes in
the computing environment (such as the site's associated database having been
modified).

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.

Contents
[hide]

 1 Accessible Web design

 2 History
 3 Website planning
o 3.1 Context
o 3.2 Purpose
o 3.3 Audience
o 3.4 Content
o 3.5 Compatibility and restrictions
o 3.6 Planning documentation
 4 Website design
o 4.1 Multidisciplinary requirements
o 4.2 Issues
o 4.3 Environment
o 4.4 Collaboration
o 4.5 Form versus function
o 4.6 Layout
 4.6.1 Layout types
 4.6.2 Layout concerns
o 4.7 Device
o 4.8 Tableless Web design
 5 See also
 6 References
  7 External links

[edit] Accessible Web design

Main article: Web accessibility

To be accessible, Web pages and sites must conform to certain accessibility

principles. These accessibility principles are known as the WCAG when talking about
content. These can be grouped into the following main areas. [2]

 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 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.

It is very important that several different components of Web development and

interaction can work together in order for the Web to be accessible to people with
disabilities. These components include:

 content - the information in a Web page or Web application, including:

o natural information such as text, images, and sounds
o code or markup that defines structure, presentation, etc.
 Web browsers, media players, and other "user agents"
 assistive technology, in some cases - screen readers, alternative keyboards,
switches, scanning software, etc.
 users' knowledge, experiences, and in some cases, adaptive strategies using
the Web
 developers - designers, coders, authors, etc., including developers with
disabilities and users who contribute content
 authoring tools - software that creates Web sites
  evaluation tools - Web accessibility evaluation tools, HTML validators, CSS
validators, etc.

[edit] History
Tim Berners-Lee published what is considered to be the first website in August 1991.
[3]
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 a website's
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.

[edit] Website planning

Purposing Web design is a complex, but essential ongoing activity. 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.

[edit] Context

Web design is similar (in a very simplistic way) to traditional print publishing. Every
website is an information display container, just as a book; and every Web page is
like the page in a book. However, web design uses a framework based on digital
code and display technology to construct and maintain an environment to distribute
information in multiple formats. Taken to its fullest potential, web design is
undoubtedly the most sophisticated and increasingly complex method to support
communication in today's world..
[edit] 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. Setting a goal practices and measurable objectives
should be identified to track the progress of the site and determine success.

[edit] 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.

[edit] 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.

[edit] 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.

[edit] 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.

The first step may involve information architecture in which 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 or content will be interconnected, and may help in
deciding what content will be placed on what pages.

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.

[edit] Website design

Web design is similar (in a very simplistic way) to traditional print publishing. Every
website is an information display container, just as a book is a container; and every
web page is like the page in a book. However, web design uses a framework based
on digital code and display technology to construct and maintain an environment to
distribute information in multiple formats. Taken to its fullest potential, web design is
undoubtedly the most sophisticated and increasingly complex method to support
communication in today's world.[4]

For the typical 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[citation needed].

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, Yahoo or Bing, exchanging links with other web sites,
creating affiliations with similar web sites, etc.

[edit] Multidisciplinary requirements

Web site design crosses multiple disciplines of multiple 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.

[edit] Issues

By its very nature, web design is conflicted, involving rigid technical conformance
and personal creative balance. Rapid technological change complicates acquiring
and deploying suitable resources to maintain web presence.
[edit] Environment

Layout is a double edged sword: on the one hand, it is the expression of a

framework that actively shapes the web designer. On the other hand, as the
designer adapts that framework to projects, layout is the means of content delivery.
Publishing a web engages communication throughout the production process as
well as within the product created. Publication implies adaptation of culture and
content standards. Web design incorporates multiple intersections between many
layers of technical and social understanding, demanding creative direction, design
element structure, and some form of social organization. Differing goals and
methods resolve effectively in successful deployment of education, software and
team management during the design process. However, many competing and
evolving platforms and environments challenge acceptance, completion and
continuity of every design product.

[edit] Collaboration

Early Web design was less integrated with companies’ advertising campaigns,
customer transactions, extranets, intranets and social networking. Web sites were
seen largely as static online brochures or database connection points, disconnected
from the broader scopes of a business or project. Many Web sites are still
disconnected from the broader project scope. As a result, many Web sites are
needlessly difficult to use, indirect in their way of communicating, and suffer from a
'disconnected' or ineffective bureaucratic information architecture.

[edit] Form versus function

A web developer may pay more attention to how a page looks while neglecting other
copywriting and search engine optimization functions such as the readability of text,
the ease of navigating the site, or how easily the visitors are going to find the site. As
a result, the designers may end up in disputes where some want more decorative
graphics at the expense of keyword-rich text, bullet lists, and text links. Assuming a
false dichotomy that form and function are mutually exclusive overlooks the
possibility of integrating multiple disciplines for a collaborative and synergistic
solution. In many cases form follows function. Because some graphics serve
communication purposes in addition to aesthetics, how well a site works may depend
on the graphic design ideas as well as the professional writing considerations.

When using a lot of graphics, a web page can load slowly, 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. However there is still an ongoing engineering
challenge to increase bandwidth and an artistic challenge to minimize the amount of
graphics and their file sizes. This challenge is compounded since increased
bandwidth encourages more graphics with larger file sizes.

When faced with a large database and many requirements, a design group may
throw far too much information for a server to manage. Alternative technology or
additional structure (even another server or site) may be required to fit the demand.

[edit] Layout
[edit] Layout types

Layout refers to the dimensioning of content in a device display, and the delivery of
media in a content related stream. Web design layouts result in visual content
frameworks: these frameworks can be fixed, they can use units of measure that are
relative, or they can provide fluid layout with proportional dimensions. The
deployment flowchart (a useful tool on any design project) should address content
layout. Many units of measure exist, but here are some popular dimension formats:

 Pixel measure results in fixed or static content

 Em measure results in proportional content that is relative to font-size
 Percent measure results in fluid content that shrinks and grows to "fit" display
windows

Proportional, liquid and hybrid layout are also referred to as dynamic design. Hybrid
layout incorporates any combination of fixed, proportional or fluid elements within (or
pointing to) a single page. The hybrid web design framework is made possible by
digital internet conventions generally prescribed by the W3C. If any layout does not
appear as it should, it is very likely that it does not conform to standard design
principles, or that those standards conflict with standard layout elements. Current
knowledge of standards is essential to effective hybrid design.

The earliest web pages used fixed layouts without exception. In many business
pages fixed layouts are preferred today as they easily contain static tabled
information. Fixed layout enforces device display convention, as viewers must set
their display to at least a certain width to easily view content. This width can include
display of corporate logos, cautions, advertisements and any other target content.
Design frameworks for fixed layout may need to include coding for multiple display
devices.

Hybrid design maintains most static content control, but is adapted to textual
publishing, and for readers, to conventional (printed) display. Hybrid layouts are
generally easy on the eye and are found on most sites that distribute traditional
images and text to readers. For some sites, hybrid design makes an otherwise cold
text column appear warm and balanced. A good example of hybrid layout is
Wordpress, where liquid design is now optional, and movie and auditory media is
stretching the envelope.

Fluid design is useful where content is delivered to an 'unknown device' population.

Appropriate liquid code displays images, text and spaces proportional to display size.
Someone with a handheld can see view and interact with the same content as
someone using a large desktop monitor. However, scaling of content for a variety of
devices has more recently evolved with modern web browsers, allowing users to see
the same layout across all devices.

[edit] Layout concerns

This section is written like a personal reflection or essay and may require
cleanup. Please help improve it by rewriting it in an encyclopedic style.
(December 2009)
As W3C conventions evolve, the use of design "space" is becoming less static and
more fluid in its potential. The result is that old layouts look ... old. In dealing with font
layout, even expressed as ems, a static core cannot be escaped and often anchors
most page content. However, as new standards are adopted by device
manufacturers, viewers notice a wider spectrum of content and a greater interaction
between and through content. For the World Wide Web Consortium drawing up
tomorrows layout conventions, new media types and methods are increasingly in the
mix. It is a true double axiom that 'content is all about layout', and 'layout is all about
content'. We could say that layout is what designers squeeze into available
technology — content is the culture manifested in the layout. "Space' is the envelope
holding layout and content together. Space communicates style (layout appearance)
to the target population. Understanding how to adapt space to this layout-content
relationship is essential to web design. Every design's survivability depends on its
sensitivity to emerging technology (within the cultures that its framework is
servicing), and immediate acceptance depends on the layout or presentation of that
content. On every page, no content is more susceptible to changes and variations in
standards, than space. While the professional designer casually admits that 90% of
design code is used to adapt space, most of his current work deploys spatial
manipulations being used to actively reshape Internet communication.

Conceptual barriers to adequate layout abound! Presently layout is challenged by

conflicting convention that makes it impossible to fit liquid and hybrid layout to the
bottom corners of a display. Simply put, display device manufactures use the top
right and/or left corners to display content. For non-standard equipment, setting
custom fixed layout to their device is still seen by some businesses as a means of
increasing revenue, as they can sell a 'unique' display. This business approach,
domainating the digital market at the end of the last century, is not so useful today.
However, some would claim a decade behind schedule, CSS3 and HTML5 are
finally taking the four penultimate display reference point seriously. Just in time for 3
dimensional vector layout to tangle designers' templates in conundrums!

A common misconception among designers is to assume their layout is liquid

because initial space and text container widths are in percents. However, their 'liquid'
framework, while adhering to focused conventions, failed to manage graphic content.
A subsequent edit placing a large image on the page, destroys the page
appearance. When managing a design framework, it is critical that layout address
content, convention and user interaction.

[edit] Device

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 (operating system,
mouse, touch screen, voice command, text, teletype, cell phone, or other hand-held),
and the size, design, and other characteristics of the fonts that users have available
(installed) and enabled (preference) on their device. Unique manufacture and
conflicting device contentions are further complicated by varying browser
interpretations of the same content, and some content automatically can trigger
browser changes. Web designers do well to study and become proficient at
removing competitive device and software markup so that web pages display as they
are coded to display. Eric Meyers, a well known educator and developer, is one of
many resources who have spear-headed HTML reset coding. While they cannot yet
leave one local environment to control another, web designers can adjust target
environments to remove much common markup that alters or corrupts their web
content. Because device manufacturers are highly protective of their patent markup,
Meyers and others caution that reset remains experimental.

[edit] Tableless Web design

Main article: 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. There are the means to apply different
styles depending on which browser and version are used but incorporating these
exceptions makes maintaining the style sheets more difficult as there are styles in
more than one place to update.

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 is Internet Explorer 6, which is viewed in the web design community as
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.