Web design

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.
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 also helps search engines to understand the page, and can result in

much better visibility for the page. However, the vast majority of Flash websites are

not disability accessible (for screen readers, for example) or Section 508 compliant. An

additional issue is that sites which commonly use alternate content for search engines

to their human visitors are usually judged to be spamming search engines and are

automatically banned.

The most recent incarnation of Flash's scripting language (called "ActionScript", which is

an ECMA language similar to JavaScript) incorporates long-awaited usability features,

such as respecting the browser's font size and allowing blind users to use screen

readers. Actionscript 2.0 is an Object-Oriented language, allowing the use of CSS, XML,

and the design of class-based web applications.

CSS versus tables for layout



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.
Web Management India
Web Solution Tools.
Mrf Web Design
Mrf Web Development
Mrf Web Development