Is Your Website Design Driving Away Your Customers? Some Basic Usability Tips for Commercial Websites

Following my article on Appearance, Usability and Search Engine Friendliness in Web Design where I discussed the importance of looking at the usability and search engine visibility of a website, I have received countless messages from visitors to thesitewizard.com asking me to review their website. While I do not have time to answer such requests individually, I decided that an article outlining some glaring usability flaws that I have found in a number of websites in general would be helpful. This article thus deals with the myths and fallacies commonly believed when designing a website to sell a product or a service.
Make It Easy for Visitor to Check Your Price List

Some websites try to hide the price list for their products. Some of these sites only display the price of the item after you hit the "Buy" or "Order" button, or worse, only after you have created an account on their site. Others have a price list, but bury the link to the price list somewhere deep in their site in a place not easily accessible from the main page or the products page.

I'm not exactly sure what the reason behind this is. Possibly, they think that if the customer does not see the price until they click the "Buy" or "Order" button, they will be more likely to buy the item. This reasoning is fallacious.

There are many types of visitors arriving at your site. Let's take the case of the window shopper. If they see something noteworthy on your site, they may make a note of the price so that they can return later if they want the item at some point in the future. If the price of the item cannot be easily found on your site, do you seriously think that they will thoroughly search the site just to find that elusive price tag? Or do you suppose that such a visitor will click the "Buy" button, just so that they can find the price tag at the end of the process somewhere? Or will they go through the bother of creating an account, revealing their personal particulars, just to find the price of an item?

Like the serious shopper, if they cannot find the price, they will simply go to another site. Remember: this is not a brick and mortar store we're talking about, where you need to take time and put in effort to travel to another store. On the Internet, your competitor is only a click away. And the search engines are more than happy to yield thousands of other sites selling the same type of goods or services as you. I realise that there are some brick and mortar stores (usually small concerns) who think that if they don't put a price tag, the customer has to find out the price from a sales person, who will then have the opportunity to persuade him/her to buy that item. Whether or not that is a good idea for a brick and mortar store (and I can think offhand of some types of customers that you will lose even there), it is a bad idea for a web store.

No matter how you look at it, every customer and potential customer will need to know the price of a product. Even the corporate customer buying for his/her company works to a budget. Making it difficult for your visitor to find the price list is a quick way to drive a potential customer away. As has been observed by many usability experts - the average Internet user has the attention span of a flea. If they can't find what they want within the first few seconds of glancing at your page, they will leave. And your competitors will be more than happy to attend to them in your place.
Provide Descriptions and Pictures for Your Products

I realise that the new web designer is beset with contradictory advice about how best to design their site. One set of such conflicting advice is the requirement to be brief and to-the-point so that you can catch that Internet visitor who will only give your web page a few seconds glance before deciding whether to stay or go elsewhere. Contradicting that is the requirement that you describe your products in depth and place pictures of your product, or screenshots if yours is a software product.

The best way to resolve this, I think, is to take a leaf from Amazon.com's book. For ev

in reference to: The White House (view on Google Sidewiki)

Seven Easy Ways to Annoy Visitors to Your Website: A Satire

1.

Place some (or all of) your content in a small frame and force your visitors to read the content through that window. Don't worry about what constitutes "small" here, since most of the time, even if you create a big frame, it'll be considered too small by most visitors. This trick has a high annoyance value since your visitors have to view the information through that small little box and scroll continuously to see the text while the rest of the browser window is filled with information they don't really want to read at the moment. With this strategy, visitors cannot resize or maximize the window to make their reading more efficient or pleasurable. This method will allow you to frustrate those hapless souls and, as a bonus, make them leave your site.
2.

Disable the right click menu of the browser. Nevermind that people need the right click menu for many purposes, and that they can access the same functions through the main menu bar even after you've disabled it. After all, if your aim is to annoy, you might as well make their visit to your site as unpleasant as possible.
3.

Play background music when they arrive at your page. If that's not enough of an annoyance, make sure you loop the music so that the visitors are plagued by it continuously while they are on your page. If you're feeling particularly sadistic, place automatically-playing music on many (or even all) pages of your site. You don't have to worry about choosing a horrible tune - choose your favourite piece if you like. Since one man's meat is another man's poison, any sort of music tends to annoy most visitors.
4.

Make every link on your site opens in a new window when your visitor clicks on it. That is, put a target="_blank" to every link. This will annoy visitors since every time they click on a link in your site, a new window or tab will open. Another benefit of this technique is that it makes your site look amateurish.
5.

Force your visitors to navigate your website using Flash. That is, place all your content in a Flash file - text, pictures, links, etc - even if Flash is not ideal for such content (a straight HTML page is best for those types of content). Make sure that visitors who don't have the Flash plugin enabled or installed cannot see anything or do much on your website. This effectively drives away all mobile users, a group of users that is growing in size, as well as cripple your visitors who have come to expect certain facilities to always be available in their browsers (such as the BACK key and the ability to bookmark specific pages) when they visit websites. Now they will be forced to work through the more limited Flash plugin of their browser with whatever subset of features you deign to provide. In fact, exclusively using Flash for your site content might even help you to drop to the bottom of search engine listings too, thereby reducing the number of visitors to your site. After all, if you don't have visitors, you don't have to think of new ways to annoy them.
6.

Load your site with pop-up windows that open when your visitor reaches your page as well as when they leave the page. In fact, if you want to annoy them even further, open a pop-up window when they click on links on your site.
7.

Reduce the navigational usability of your website. Don't put site maps or navigation bars with shortcut links to pages that your visitors will usually want to go such as the "Download" page if you're a software author. If you can annoy your visitors by forcing them to read whole pages of your text before they can find a link to move on to do what they really want to do, so much the better.

in reference to: The White House (view on Google Sidewiki)

How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers)

In an ideal world, you only need one set of CSS style sheets for your website, and those styles will work with every browser currently being used. This, as every webmaster soon finds out when he/she uses CSS, is a pipe dream. The modern browsers all have uneven levels of implementation of the CSS standards. As though this isn't bad enough, their implementations are often buggy - and they don't share the same bugs! And when you have solved that tricky bit, you find that your site has certain visitors (often your best customers) who, for various reasons, are using older browsers that have only rudimentary support for CSS.

What most (if not all) CSS-using webmasters want is a way to specify that a certain style sheet is to be used by such and such a browser and not others, as well as to hide other style sheets from older browsers.

The Good and Bad News
The bad news is that there is no standard documented method to include or exclude style sheets from being used by every browser still being used on the Internet.

All is not lost however. The good news is that there are a number of tricks, workarounds and even non-standard but documented methods available that you can use to have your style sheet included by some browsers and not others. The workarounds often rely on known bugs in certain versions of specific browsers.

On the other hand, even with these workarounds and tricks, you will probably find that there are certain browsers that you want to code for but do not have any reliable means to detect and work around. However, at least with the help of the tips listed here, you should be able to design a CSS-based website that works with the most commonly used browsers

Preliminary Tips for Coding
Before you start coding your site using CSS for specific browsers, here are some tips that hopefully will make your life easier.

Design From Scratch
Most webmasters who have had to convert their existing website to CSS say that they find it easier to design their site from scratch in CSS than to try to find a way to reproduce their old layout in CSS.

Another reason for designing from scratch is that CSS allows you to do many things not possible using the old tables paradigm. Rethinking your entire design allows you to take advantage of the new possibilities.

Code to Follow the CSS Standards First
Many of the web designers hanging out in webmaster forums have found that it is far easier to develop their CSS code for a highly standards-compliant browser like Firefox first, and then only later add the workarounds to make their code work on IE, than to code for IE and then try to make it work for Opera, Konqueror, Safari and Firefox.

It is also logical to write for a more standards-compliant browser first: sooner or later, Microsoft is bound to issue a newer version of IE that will have the existing CSS bugs fixed. When they do so, all you have to do is to remove the workarounds which you created and you're done. If you write your main style sheet with styles that are coded in a non-standard way to deal with IE bugs first, you will wind up having to rewrite everything when Microsoft fixes the bugs.

This is not to say that Firefox does not have its own share of CSS bugs. As such, my personal recommendation is to code with the two (supposedly) most standards-compliant browsers first, ie, Firefox and Opera, while at the same time periodically making sure that your CSS code validates with the W3 Consortium's free style sheet validator. You can add the workarounds for IE later.

(If you are not sure what validation means, or how you can get it done, check out my article on HTML and CSS Validation: Should You Validate Your Web Page? at http://www.thesitewizard.com/webdesign/htmlvalidation.shtml

Use External Style Sheets and Take Advantage of the "Cascading" Aspect of Cascading Style Sheets
One way to handle the bugs and omissions existing in different browsers is to put all your standards-compliant CSS code in a separate (external) style sheet file that is loaded by every browser.

Then, when you find th

in reference to: Google (view on Google Sidewiki)

10 Strategies To Make Your E-Commerce Website A Success

E commerce websites have come of age. As customers realize the ease and benefits of online shopping, the popularity of e-commerce websites have soared like anything else. However, with the increase in the number of Ecommerce websites vying for attention, it has become important for them to devise strategies to be better than the competition and attract more traffic. Here are some new trends and techniques that can help your Ecommerce processes.

Focus on User Experiences

Often we concentrate so much on improving the usability of the website that we completely forget about the user experience. The way users feel on the website goes a long way in influencing their purchase options as well as their general perception of the website. Therefore, try to connect with the visitors on intimate level and then build up your branding through strategic marketing techniques.

Provide Customized Messages to Specific Audience Segments

The chances of sales increases when the audience is more targeted. When you segment your audiences, you know about their general common preferences and likes. This will also give you an idea about what segments are useful and most profitable. In turn, you can customize your sales message and make sure they receive more relevant and personalized information and offers.

Create Compelling Content

Content is the only source of direct communication with your website audiences. Therefore, make it as compelling as you can . The main objective of your product page should be sales conversions. Include product images and videos along with content that convinces them to hit the 'Buy' button.

Eliminate Unnecessary Page Elements

A majority of Ecommerce websites carry a bulk of undue weight because of unnecessary page elements like blinking banners, rotating graphics and annoying flash-animations. Attention grabbing works best on subtle levels. Also make sure the information you provide on the website is short and crisp.

Include Videos on the Website

Videos are an emerging source of product promotion with more and more website embedding videos on their websites to promote their businesses. You can upload videos that provide demonstrations of your products and show how they work, exhibit their different features and show how users can benefit from their use. Moreover, video inclusion has certain search engine benefits as well.

Involve your Website Audiences

The three main elements of a successful website are - Content, Communication and Commerce. You need to involve your audiences and make them feel that they are a part of the website. Include a form on audience interaction on your website. Provide them with an option to review the products and participate in forum discussions etc.

Provide Free Shipping Options

A little known secret of the e commerce industry is that shoppers often shy away from buying a product because of the additional shipping costs that are involved. Thus if you decide to waive of the shipping costs, you'll have more sales. If its not a profitable option individually, provide free shipping options for bulk orders.

Optimize Products for Local Searches

While it is great to business on a global scale and cater to international customers, you can get huge visitor traffic with localized search engine marketing. Promote the products on your website on domestic search engines. You can also customize your product descriptions, tutorials, public relations and ad campaigns to suit the tastes of the local markets.

in reference to: Google (view on Google Sidewiki)

How To Enhance The Usability Of Your Homepage Design

The homepage of your website is the face of your online presence. It is what makes the first impression on online audiences about your company and business. When people type in the URL of your website, they reach your homepage. The homepage, should therefore present a brief introduction about the website and lure visitors to browse further within. The homepage is perhaps the most important page of the website and thus you need to take adequate measures to enhance its usability. Here are some tips to ensure the same.

Include a Crisp and Catchy Tagline

Draft a tagline for your website homepage that informs about the company and business in a simple sentence. When visitors enter the homepage, they should know what the website and the company is all about just by reading the tagline. In fact, by drafting a catchy tagline you can catch the attention of your visitors and make sure they don't forget you.

Draft a Meaningful Title Tag

The title tag of your homepage should have your company name followed by a very brief description of the website. Avoid using words like 'Welcome' or 'The' that just populate the space and do no value addition. Instead, try to include your relevant keywords and phrases in the title tags.

Cluster All Corporate Information

Website visitors generally don't bother reading about the company. However, there are times when they decide to do business with you only after they are convinced about the company. In such scenarios it is important to have good corporate information on the website. Create an About Us page on your website that is dedicated towards informing visitors all about your company and business and provide a link to it from the homepage.

Focus on Key Tasks of the Website

The homepage of your website should act as a guide for visitors and help them find a browsing route. It should provide a clear starting point to do what they want to do i.e. there should be clear links to the main areas of the website where visitors might be interested in going.

Include a Search Box

The search box is indispensable for any website. Internet users are an impatient lot and they love anything that cuts short the action steps. Search boxes enable visitors to search for the exact information that they need by just entering a query instead of browsing through categories to fins what they need. Make sure your search box is at least 25 characters wide so that it accommodates multiple queries.

Offer Snapshots of Inlying Content

The homepage of the website is where you can showcase things and lure visitors to further explore the website. A good idea is to place snapshots or post the topics of important content within your website. Whether it is a recent article or a report that you have on a certain web page, offer a preview on the homepage.

Use Meaningful Design Elements

The homepage of a website is important and should welcome visitors. However, that doesn't mean you can load the page with useless design elements and flash animations that offer no value but only increase the file sizes.

Kabir Bedi is the senior web consultant at LeXolution IT Services, a reputed offshore web development company that provides an extensive range of web design services and web Development services. He has completed several international web design projects for international clients.

in reference to: Google (view on Google Sidewiki)

Here's a different way to generate forms using PHP, and to take care of all the required field validation too. It might help someone:

array(
"type"=>"select",
// attributes are an associative array
"attributes"=>array(
"mr"=>"Mr.",
"ms"=>"Ms.",
"miss"=>"Miss.",
"mrs"=>"Mrs.",
),
),
"first_name"=>array(
"type"=>"text",
"size"=>40,
"required"=>true,
"onclick"=>"alert('test');",
"style"=>"border:2px solid #CCCCCC; padding:4px; font-size:15px;",
),
"last_name"=>array(
"type"=>"text",
"size"=>70,
"required"=>true,
),
);

$errors=array();

if($_REQUEST['save']){
// do sql here...
$sql = "INSERT INTO foo SET insert_date=NOW()";
foreach($elements as $element_name => $el){
if($el['required']&&!$_REQUEST[$element_name]){
$errors[]="Required field missing: $element_name";
}else{
$sql .= ", `$element_name` = '".addslashes($_REQUEST[$element_name])."'";
}
}
if(!$errors){
// call sql:
// $res = query($sql,$db);
// $member_id= mysql_insert_id($db);
// redirect after post back
header("Location: example.php?member_id=$member_id");
exit;
}
}

global $elements;
function fb($elem){
global $elements;
$el = $elements[$elem];
if(!$el['name'])$el['name']=$elem;
if(!$el['value']&&$_REQUEST[$el['name']])$el['value']=$_REQUEST[$el['name']];
switch($el['type']){
case "textarea":
?>
$val){ if($key=="value")continue; ?> ="" >

$val){ ?> ="" >

$val){ if($key=="attributes")continue; ?> ="" >
- select -
$val) {
?>
selected >














Salutation:

First Name:

Last Name:





First name and last name are required fields. Try clicking save without filling them in.









View cod

in reference to: required field validator in php - Google Search (view on Google Sidewiki)

Web Design | the skill

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 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 and VBScript)
Server-side scripting (such as PHP and ASP)
Database technologies (such as MySQL)
Multimedia technologies (such as Flash and Silverlight)
Web pages and Web sites 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.
Accessible Web design
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.
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
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.
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.
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.
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.
Website design
Web design is similar (in a very simplisitc 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. "Design Issues for the World Wide Web". public domain. World Wide Web Consortium. 2009-06-09. Retrieved on 2009-06-10.
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.
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, Bing or Yahoo, exchanging links with other web sites, creating affiliations with similar web sites, etc.
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.
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.
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.
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.
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.
Layout
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 incoroprates 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 proscribed 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 coporate 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. Fluid display is the future for most layout projects, but let's consider obstacles to this current direction.
A note here on space and layout is important. 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.
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.
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, according to some web designers,[who?] is 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.