Web design: Difference between revisions

Content deleted Content added

Inline

Revision as of 18:05, 9 August 2006

Web design is the design of web pages, websites and web applications using HTML, CSS and images.

Web design is part of starting a website (web development) which can include web server configuration, writing web applications and server security.

History

Tim Berners-Lee, the inventor of the World Wide Web published a website in August 1991, making him also the first web designer.[1] His first was to use hypertext with an existing email link.

Early on, websites were written in basic HTML, a markup language giving websites basic structure (headings and paragraphs), and the ability to link using hypertext. This was new and different to existing forms of communication - users could easily open other pages.

As the Web and web design progressed, the markup language used to make it, known as Hypertext Mark-up Language or HTML, became more complex and flexible. Things like tables, which could be used to display tabular information, were soon subverted for use as invisible layout devices. With the advent of Cascading Style Sheets (CSS), table based layout is increasingly regarded as outdated. Database integration technologies such as server-side scripting (see CGI, PHP, ASP.NET, ASP, JSP, and ColdFusion) and design standards like CSS further changed and enhanced the way the Web is made.

The introduction of Macromedia Flash into an already interactivity-ready scene has further changed the face of the Web, giving new power to designers and media creators, and offering new interactivity features to users. Flash is much more restrictive than the open HTML format, though, requiring a proprietary plugin to be seen, and it does not integrate with most web browser UI features like the "Back" button.

Website design

A website is a collection of information about a particular topic or subject. Designing a website is defined as the arrangement and creation of web pages that in turn make up a website. A web page consists of information for which the website is developed. On a different perspective, a webpage can be compared to a page in a book and a website is to a book. So, these are the main aspects involved in web design.

Moving to the each in detail, the web page consists of text and images. It can also be said as that a web page is similar to a file which has all the data. To support the data or information the images are added to the web page. To be more technical the first page of a website is known as Home Page. Each and every page in a website is a HTML file which has its own web address. Web design involves some aspects or points to be remembered which will take the website to the people.

First step is to optimize the site. To brief this, increase the visibility of the site to the browsers. The site should, if possible, be listed within the first page of the search engine’s search results, which will increase the number of visitors to the site. Content should be organized, informative and easy to understand for the people to visit the site again and again.

Last but not least, the website should display clearly and neatly the purpose for which it has been created. For a professional or business website the visitor or a client should not be distracted or disturbed by any aspect in the web design and should be able to navigate easily within the site. For educational websites the appearance and organization must provide a pleasant environment for learning new things.

A relatively new technique called Remote Scripting has allowed more dynamic use of the web without the use of Flash or other specialized plug-ins. Leading the various techniques is Ajax, although other methods are still common, as Ajax is not a fully developed standard.

Issues

As in all professions, there are arguments on different ways of doing things. These are a few of the ongoing ones.

Liquid versus fixed layouts

Programmers were the original web page designers in the early 1990s. Currently most web designers come from a graphic artist background in print, where the artist has absolute control over the size and dimensions of all aspects of the design. On the web however, the Web designer has no control over several factors, including the size of the browser window and the size and characteristics of available fonts.

Many designers compensate for this by wrapping their entire webpage in a fixed width box, essentially limiting it to an exact pixel-perfect value, which is a fixed layout. Some create the illusion of liquidity by building the graphics for their webpage at a size larger than any current standard monitor size. Other designers say that this is bad because it ignores the preferences of the user, who might have their browser sized a specific way that they like best. These people propose a liquid layout, where the size of the Web page adjusts itself based on the size of the browser window.

There is a usability reason (rather than wanting control) for why a designer may choose a more fixed layout. Studies have shown that there is usually an optimal line width in terms of readability. One rule to appear from such studies is that lines should be between 40-60 characters long, or approximately 11 words per line. But users may choose their windows size and font selection to optimize other factors more important to them.

This decision of which style of layout to use is often made on a case by case basis, depending on the needs and audience of the website.

In some cases, it is difficult to create fixed layouts which work well given the amount of content needed, and the fact that one has to try to cater for the needs of all prospective users.

Flash

Adobe Flash (formely Macromedia Flash) is a proprietary, robust graphics animation/application development program used to create and deliver dynamic content, media (such as sound and video), and interactive applications over the web via the browser. It is not a standard produced by a vendor-neutral standards organization like most of the core protocols and formats on the Internet.

Many graphic artists use Flash because it gives them exact control over every part of the design, and anything can be animated and generally "jazzed up". Some application designers enjoy flash because it lets them create applications that don't have to be refreshed or go to a new web page every time an action occurs. There are many sites which forego HTML entirely for Flash.

Flash detractors claim that Flash websites tend to be poorly designed, and often use confusing and non-standard user-interfaces. Up until recently, search engines have been unable to index Flash objects, which has prevented sites from having their contents easily found. 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.

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.

The final consensus is that Flash is simply a tool, and like all tools it takes a skillful craftsperson to know when, and how, to use it properly. Macromedia's other two products, Fireworks and Dreamweaver, make Flash integration with graphics and HTML a lot easier. Macromedia was recently purchased by Adobe, which continues to offer this software under the same names.

CSS versus tables

Back when Netscape Navigator 4 dominated the browser market, the popular (but now deprecated) solution available for designers to lay out a Web page was by using tables. Often even simple designs for a page would require dozens of tables nested in each other. Many web templates in Dreamweaver and other WYSIWYG editors still use this technique today. Navigator 4 didn't support CSS to a useful degree, so it simply wasn't used.

After the browser wars were over, and Internet Explorer dominated the market, designers started turning towards CSS as an alternate, better means of laying out their pages. CSS proponents say that tables should only be used 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. Today, all modern Web browsers now 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 replicating what can be done with tables, leading some to find CSS design rather cumbersome. For example, it is rather difficult to produce certain design elements, such as vertical positioning, and full-length footers in a design using absolute positions.

These days most modern browsers have solved most of these quirks in CSS rendering and this has made many different CSS layouts possible. However, people continue to use old browsers, and designers need to keep this in mind. 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 internet back from converting to CSS design.

How it Looks vs. How it Works

Since so many web developers have a graphic arts background, they often pay more attention to how a page looks, without considering how visitors are going to find the page. On the other side of the issue, search engine optimization consultants (SEOs) obsess about how well a web site works: how much traffic it generates, and how many sales it makes. 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. Another problem when using lots of graphics on a page is that download times can be greatly lengthened, often irritating the user.

Accessible Web design

Accessible Web design is the art of creating webpages that are accessible to everyone, using any device. It is especially important so that people with disabilities - whether due to accident, disease or old age - can access the information in Web pages and be able to navigate through the website.

To be accessible web pages and site 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)
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 makes 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.)

Dynamic web design

The traditional method of laying out web pages, HTML is static. There are two ways of delivering content dynamically:

Server-side

A web server, running special software, constructs an HTML page 'on the fly', according to the user's request and possibly other variables, such as time or stock levels.

Suitable scripting languages include:

XSLT can be used translate data in XML format into HTML.

MySQL and PostgreSQL are popular free SQL databases, suitable for use with the above. They can be used to allow users, subject to password access if required, to update content.

Client-side

Client-side scripting works at the user's browser, and therefore should not be used for "mission critical' work, where the user's capabilities are not known – it is more suited to adding decoration and other ephemeral content. It is most often achieved through JavaScript.

Client side DHTML can pose major problems for Web accessibility and search engine optimization. Most software designed for assisting people with disabilities, and most search engine robots do not support client side DHTML.

If a web site's menus are built with JavaScript, it is usually impossible for search engines to find the pages listed in the menus, unless an alternative navigation scheme is provided elsewhere on the page. (NOTE: By using nested lists for navigation menus, and slightly more complex, DOM-based scripts, this problem may be overcome.)

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 the 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 clear the purpose and plan for the future when expansion, modification, and improvement will take place. Also, goal-setting practices and measurable objectives should be identified to track the progress of the site and determine success.

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/feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need/use the content, a list of characteristics common to the users such as:

Audience Characteristics
Information Preferences
Computer Specifications
Web Experience

Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.

Content

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 in the process is categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants/needs of the target audience and the purpose of the site will be satisfied.

Storyboarding

Storyboarding is the process of taking into account the purpose, audience and content to design the site structure that is most suitable for the website. In this process the organized and categorized content is used to develop a diagram or map. This creates a visual of how the web pages will be laid out and interconnected which helps decide how the content is portrayed. There are three main ways of diagramming the website organization:

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.

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 the website will include, methods include using pieces of paper and drawing lines to connect them or alternatively, creating the storyboard using computer software. Storyboarding can be considered like a creating 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. Some people refer to this as a "tree" because it branches from the main page.

External links

@@ Line 166: / Line 166: @@
 *[http://www.designerstalk.com/ Web Design Forums]
 *[http://www.devlounge.net Devlounge + Articles & Interviews for Designers]
+*[http://webdesign.freelancedesigners.com International Directory of Web Designers]
 *[http://www.useit.com Jakob Nielsen on Usability and Web Design]
 *[http://www.alvit.de/handbook/ The Web Developer's Handbook]