Web Design Group Discussion
Web Design Group Discussion
Web Design Group Discussion
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.
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.
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).
Contents
[hide]
However, W3C permits an exception where tables for layout either make sense
when linearized or an alternate version (perhaps linearized) is made available.
[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] 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.
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.
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.
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].
[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
[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.
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:
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.
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.
[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.
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.