Monday, November 14, 2011

A Simple Page Layout with CSS

Read the article below by NRJ Design.  Answer the questions as comment posts!

How to build a basic CSS layout
Designing without tables by using CSS layouts is fast becoming the new standard on the Web because of the many benefits it offers. Web browsers used these days are now able to render web pages proficiently. In this article I will endeavor to create a basic 2 column CSS layout which you can use for future design projects.
Here is the link to the Basic CSS layout.
1. Divide your page into sections - the tags allows you to create distinct divisions on your web page.
They are identified with a unique id. You can then add a style (css selector) that specifically applies to the div of that id. Remember to include the DOCTYPE (to render your page accurately in the browsers) and meta tags (enables search engines to spider your pages).
wrapper: is the div that wraps around all the other divs like a container for the page elements.
header: defines the top banner of the page
main: defines the main content of the page
nav: defines the navigation of the page
footer: defines the footer and sub-navigation of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns="http://www.w3.org/1999/xhtml">
< html>
< head>
< title>How to Build a Basic CSS Layout</title>
< meta name="Description" content="How to Build a Basic CSS Layout" />
< meta name="Keywords" content="css layout" />
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
< /head>
< body>
< div id="wrapper">
< div id="header"></div>
< h1>Basic CSS Layout</h1>
< div id="nav"></div>
< h2>Navigation</h2>
< div id="main"></div>
< div id="footer"></div>
< /div>
< /body>
< /html>

2. Create the CSS code - below is the CSS code that styles the page as a centered 2 column CSS layout with a navigation bar and a footer. The div#wrapper style creates the centered box which acts as a container for the rest of the page content. The width: 80% rule sets the width of the div. The background-color:#FFFFFF rule creates a white background for the div. The margin-top: 50px and margin-bottom: 50px rules create a space of 50 pixels for the top and bottom margins for the div itself.
The proper way to center a block-level element with CSS is to set margin-left: auto and margin-right: auto. This instructs the browser to automatically calculate equal margins for both sides, thus centering the div. The border: thin solid #000000 rule adds a border around the outer div. The rest of the CSS code styles the divs for the header, footer, nav, and main content.
The div#header and div#footer styles set margins and padding for those divs. In addition, div#header includes the text-align: center rule to center the header text, and div#footer includes the border-top: thin solid #000000 rule to create a border along the top edge of the div to replace the horizontal rule above the footer in the table-based layout.
The div#nav and div#main styles create the two columns in the middle of the centered box. In the div#nav style, the float: left rule pushes the div to the left side of its parent element (the wrapper div), and the width: 25% rule sets the div's width to 25 percent of the parent element. With the nav div floated to the left and limited to a set width, it leaves room for the main div to move up to the right of the nav div, thus creating the two-column effect. The div#main style includes the margin-left: 30% rule to keep the main text aligned in a neat column instead of spreading out below the nav column. The main div's left margin is set to a value slightly larger than the width of the nav div.
<style type="text/css">
< !--
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#wrapper {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
-->
< /style>
3. Create the side navigation menu - to build the left side navigation I use the normal CSS code for the different links ie
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
}
If links are placed elsewhere on the page they will inherit the same properties as above..a blue link that hovers to red.
What if you wish to create another set of different colored links that change color and are underlined when your mouse passes over them?
4. Create the bottom navigation - to include the navigation in the <div id="footer"> section of the page, I use div#footer and code each link accordingly. To make the list go horizontally I use: display: inline;
div#footer ul li{
color : #000000;
background-color : transparent;
display: inline;
}
div#footer ul li a{
color : #115EAC;
background-color : transparent;
text-decoration : none;
}
div#footer ul li a:hover{
text-decoration : underline;
}
-->
Now that I have finished creating my style sheet I want to shorten the code on page by linking it to my external style sheet. Here's how:
5. Create an external style sheet - copy and paste all the css code (without these tags: <style type="text/css"><!-- --></style>) into notepad and name it something like "style sheet". Place this style sheet between the head tags of your web page like this:
<head>
< link rel="stylesheet" href="stylesheet.css" type="text/css" />
< /head>
This will reduce the code on your page so it will load fast plus the search engines can more easily spider your web page.
6. Add content to your page - after you have got your page looking correctly, you can add more content to it. Adjustments can easily be made to any style on the page (or your whole site) by simply editing one style sheet.
7. Upload your files - be sure to upload your web pages and style sheet to the root directory of your server.

8. Validate your code - be sure to validate your xhtml code: http://validator.w3.org/ and css code: http://jigsaw.w3.org/css-validator/ and make corrections where necessary.
9. Check browser compatibility and screen resolution - check that your page renders well in the popular browsers (IE6, NN7, Firefox)
If you are beginning with CSS layouts, implement then slowly by making small changes to your pages i.e. creating a style sheet for your main headers and fonts only. As you become more familiar with CSS you may eventually build all your future sites with CSS layouts.

Question 1.  What is the purpose of the wrapper div in the above example.?


Question 2. How would you center the wrapper div container?


Question 3. What does the CSS display:inline attribute do the list items in step 4?


Question  4. Why does using an external style sheet give you more flexibility for format your web site?

Tuesday, November 1, 2011

What is the Secure Socket Layer(SSL)?

Read the article below from the Verisign web site and answer the questions below as comment posts.




How SSL  Works.

Encryption Protects Data During Transmission
Web servers and Web browsers rely on the Secure Sockets Layer (SSL) protocol to create a uniquely encrypted channel for private communications over the public Internet. Each SSL Certificate consists of a public key and a private key. The public key is used to encrypt information and the private key is used to decipher it. When a Web browser points to a secured domain, a level of encryption is established based on the type of SSL Certificate as well as the client Web browser, operating system and host server’s capabilities. That is why SSL Certificates feature a range of encryption levels such as "up to 256-bit".
Strong encryption, at 128 bits, can calculate 288 times as many combinations as 40-bit encryption. That's over a trillion times a trillion times stronger. At current computing speeds, a hacker with the time, tools, and motivation to attack using brute force would require a trillion years to break into a session protected by an SGC-enabled certificate. To enable strong encryption for the most site visitors, choose an SSL Certificate that enables at least 128-bit encryption for 99.9% of Web site visitors. True 128-bit SSL Certificates

Credentials Establish Identity Online
Credentials for establishing identity are common: a driver’s license, a passport, a company badge. SSL Certificates are credentials for the online world, uniquely issued to a specific domain and Web server and authenticated by the SSL Certificate provider. When a browser connects to a server, the server sends the identification information to the browser. To view a Web sites’ credentials and no that you are safe:
  • Click the closed padlock in a browser window
  • Click the trust mark (such as the VeriSign Trust™ Seal)
  • Look in the green address bar*
  • Insure that the Domain returned by the certificate contains "https"
*Only SSL Certificates with EV trigger high-security Web browsers to display your organization’s name in a green address bar. Learn more: SSL Security and Extended Validation

Authentication Generates Trust in Credentials
Trust of a credential depends on confidence in the credential issuer, because the issuer vouches for the credential’s authenticity. Certificate Authorities use a variety of authentication methods to verify information provided by organizations. VeriSign, the leading Certificate Authority, is well known and trusted by browser vendors because of our rigorous authentication methods and highly reliable infrastructure. Browsers extend that trust to SSL Certificates issued by VeriSign.
1. What  do you think encryption is?   Try to reason it out!!

2. Why is utilizing the SSL so critical for an ecommerce site??

3. As a shopper what are the two ways you can tell if a sight uses SSL?

Friday, October 28, 2011

Ecommerce Affiliate Marketing Programs.

What Are Affiliate Programs?

In Objective 3.03 you will learn about affiliate marketing programs.  Read the short article below from How Stuff Works and respond to the questions as comment posts.

Simply put, affiliate programs, also called associate programs, are arrangements in which an online merchant Web site pays affiliate Web sites a commission to send them traffic. These affiliate Web sites post links to the merchant site and are paid according to a particular agreement. This agreement is usually based on the number of people the affiliate sends to the merchant's site, or the number of people they send who buy something or perform some other action. Some arrangements pay according to the number of people who visit the page containing their merchant site's banner advertisement. Basically, if a link on an affiliate site brings the merchant site traffic or money, the merchant site pays the affiliate site according to their agreement. Recruiting affiliates is an excellent way to sell products online, but it can also be a cheap and effective marketing strategy; it's a good way to get the word out about your site.
There are at least three parties in an affiliate program transaction:
  • The customer
  • The affiliate site
  • The merchant site
In 1996, Jeff Bezos, CEO and founder of Amazon.com, popularized this idea as an Internet marketing strategy. Amazon.com attracts affiliates to post links to individual books for sale on Amazon.com, or for Amazon.com in general, by promising them a percentage of the profits if someone clicks on the link and then purchases books or other items. The affiliate helps make the sale, but Amazon.com does everything else: They take the order, collect the money and ship the book to the customer. With over 500,000 affiliate Web sites now participating, Amazon.com's program is a resounding success.
Over the past few years, affiliate programs have grown enormously in popularity, taking many interesting forms. For many Web sites that don't deal much in e-commerce (selling products or services online) themselves, functioning as an affiliate is a good way to participate in e-commerce.

1. Explain why affiliate marketing my be attractive to a web site that is not an ecommerce site.


2. If you were the owner of an ecommerce site that sells sporting goods what would be some examples of other sites that would make for good affiliate partners?


3. What do you think would be a reasonable commission to pay an affiliate site that redirects a customer to your site who purchases something?

Tuesday, October 11, 2011

Tables and CSS for Better Website Design

There is a debate raging in web development circles on whether tables or CSS block elements should be used for page layout. CSS is Cascading Style Sheets and we will learn about them later. Read the article below and answer these questions as comments posts.  This posting will be more challenging than those in the past.

1. If  you look at Figure 1 and think in terms of a grid how are the elements laid out?



2. What does the author me by minimal tables.  Why does the author say they are necessary? 



3. What <td> attribute does the author say you must declare in the tag?



4. What is tabular data?   Give and example?




Page Layout
Most web site templates perform page layout by using a few blocks of content, for instance a header, a left column with the navigation, a right column with the main content, and a footer, as shown below: 
  Figure 1
Any attempt to code this page must start by roughly positioning these four blocks of content. Style details can wait; first you should make sure that the content blocks are aligned correctly in all browsers on all resolutions. There are two ways to do this: pure CSS and minimal tables. Although pure CSS is the best choice overall, it has its problems.
Pure CSS
Generally speaking it's difficult to obtain proper horizontal alignment in CSS. Horizontal alignment wholly depends on the float declaration, which, though supported by all modern browsers, is supported according to two different models, with minor variations even between browsers that support the same model.
These problems aren't unsolvable; coding a simple four-block layout with the float declaration is quite possible. Nonetheless the danger of insolvable browser incompatibilities increases exponentially with every floating block you add.
Another common problem with CSS is ensuring a proper page footer. On long pages that use more space than the window height, the footer should appear directly below the navigation and content blocks. That's very easy to code. On short pages, though—those that span only part of the window height—the footer should nonetheless appear at the bottom of the viewport, and that's a far trickier code challenge:

 Figure 2
Ensuring that the footer works properly on both long and short pages is a common cause of CSS headache.
Tables
Tables neatly solve these two problems. Correct horizontal alignment has been the most important advantage of tables ever since Mosaic. Giving the table a height: 100% and the cell containing the footer a vertical-align: bottom makes the footer reliable in all circumstances.
If the visual design of your web site requires complex horizontal alignment or a reliable page footer, minimal tables could help you evade complex browser incompatibilities.
Don't start using those tables right away, though. First try to create a cross-browser pure CSS page, and don't be shy to ask for help from css-discuss.org. Even if your CSS experiment turns out not to work, you will have acquired valuable experience.
Using pure CSS in all circumstances will have to wait until all browsers support CSS fully. If you've honestly tried to use CSS but encountered serious browser incompatibilities in the rough positioning of the content blocks, you should switch to minimal tables.
CSS with Minimal Tables
In the bad old days web developers placed all page elements in tables, and if the page didn't look as expected it needed yet more tables inside the already existing tables. This process was repeated until the page worked. The underlying theory seemed to be “If we squeeze enough HTML into the page it'll work eventually.” It made for eternal download times and nonsensical markup that was impossible to update.
Fortunately this coding style is on the way out. Nonetheless, as we've seen, tables still offer a few advantages over pure CSS. Minimal tables are the perfect compromise. They allow you to use the advantages of both without bloating your code (much).
Minimal table use means: use as little tables as possible. To obtain our simple four-block layout, the following code is all you need:
<table>
        <tr>
               <td colspan="2">
                       <div class="header">
                       Header
                       </div>
               </td>
        </tr>
        <tr>
               <td>
                       <div class="navigation">
                       Navigation
                       </div>
               </td>
               <td>
                       <div class="content">
                       Content
                       </div>
               </td>
        </tr>
        <tr>
               <td colspan="2" style="vertical-align: bottom">
                       <div class="footer">
                       Footer
                       </div>
               </td>
        </tr>
</table>
This minimal table does a fine job of roughly positioning the four content blocks. You have created a framework that solves some tricky problems for you and gives you free rein to fill in all the other details of your design by CSS.
The table needs many more refinements (a width for the navigation, a vertical-align for the footer) but that's the job of the CSS, not the XHTML. You don't need any more tables than this one.
In general you should style the DIVs inside the TDs instead of the TDs themselves. For instance, browsers see a width declaration on a TD as a sort of advice, and they don't hesitate to overrule it when they think it's necessary. They will always obey width declarations on DIVs, though.
The only exception is the vertical-align, which must be declared on a TD.

Tables Revisited

As we saw above, using one minimal table to roughly lay out your page is quite acceptable. Nonetheless, it is important to stress that this minimal table should be the only one. Do not insert more tables into your code. They're not necessary; CSS can do the job for you.

There's one single exception to this rule: you may use tables to display tabular data, for instance stock quotes or long lists of employees with their room numbers and phone numbers. For these bits of data (and only for these bits of data) you can add an extra table to your code.
If you're not sure if a certain data set requires a table, ask yourself how you'd display it in print. If you'd use a table even in print, the data is tabular.

Monday, September 26, 2011

Creating Workplace Quality Presentations


Below are guidelines for designing, creating, and delivering workplace quality presentations.  Read the article and answer the questions below as comments posts.  Remember these guidelines as you get ready to give your web evaluation presentation.


Guidelines For Designing Your Presentation
1. List and prioritize the top three goals that you want to accomplish with your audience. It's not enough just to talk at them. You may think you know what you want to accomplish in your presentation, but if you're not clear with yourself and others, it is very easy - too easy - for your audience to completely miss the point of your presentation. For example, your goals may be for them to appreciate the accomplishments of your organization, learn how to use your services, etc. Again, the goals should be in terms of what you want to accomplish with your audience.


2. Be really clear about who your audience is and about why is it important for them to be in the meeting. Members of your audience will want to know right away why they were the ones chosen to be in your presentation. Be sure that your presentation makes this clear to them right away. This will help you clarify your invitation list and design your invitation to them.


3. List the major points of information that you want to convey to your audience. When you're done making that list, then ask yourself, "If everyone in the audience understands all of those points, then will I have achieved the goal that I set for this meeting?"


4. Be clear about the tone that you want to set for your presentation, for example, hopefulness, celebration, warning, teamwork, etc. Consciously identifying the tone to yourself can help you cultivate that mood to your audience.


5. Design a brief opening (about 5-10% of your total time presentation time) that:
a. Presents your goals for the presentation.
b. Clarifies the benefits of the presentation to the audience.
c. Explains the overall layout of your presentation.


6. Prepare the body of your presentation (about 70-80% of your presentation time).


7. Design a brief closing (about 5-10% of your presentation time) that summarizes the key points from your presentation.


8. Design time for questions and answers (about 10% of the time of your presentation).


Basic Guidelines About Presentation MaterialsYou might be handing out supplemental materials, for example, articles, reports, etc. along with making your presentation. You might also be handing out copies of your presentation, for example, handing out copies of your slides that you will be referencing during your presentation. You might be using transparency slides or showing slides from a personal computer onto a project screen.


1. If you plan to project your slides from a computer onto a projection screen, then be sure to check out the computer system before people come into the meeting room, if at all possible.
2. Use a consistent layout, or organization of colors and images, on your materials.
3. If you use transparencies on an overhead projector, then allocate one slide for every 3-5 minutes of your presentation. Include 5-8 lines of bulleted phrases on each slide.
4. If you provide the supplemental information during your presentation, then your audience will very likely read that information during your presentation, rather than listening to you. Therefore, hand out this information after you have completed your presentation. Or, hand it out at the beginning of your presentation and ask them not to read it until you have completed your presentation.
5. If you hand out copies of your slides, be sure that the text on the slides is large enough that your audience can read the text on the table in front of them without having to hold the handouts up to their faces. Be sure to leave space on the handouts for the audience to make notes on them.


Basic Guidelines About Your Delivery
1. If you're speaking to a small group (for example, 2-15 people), then try to accomplish eye contact with each person for a few seconds throughout your delivery.
2. Look up from your materials, or notes, every 5-10 seconds, to look into the audience.
3. Speak a little bit louder and a little bit slower than you normally would do with a friend. A good way to practice these guidelines is to speak along with a news anchor when you're watching television.
4. Vary the volume and rate of your speech. A monotone voice is absolutely toxic to keeping the attention of an audience.
5. Stand with your feet at shoulder-length apart.
6. Keep your hands relatively still.

Post your answers as comments to the following questions:1. Who is your audience for the web evaluation presentation and what are you trying to accomplish with them?



2. What does the article say will happen during your presentaion if you show supplemental information. How should you handle supplemental information?






3.What tone do you think would be good to set for your presentationl?





4. How often should you look up from your notes to make eye contact with the audience?

Thursday, September 22, 2011

Effective Web Navigation

Read the article by:By  on web navigation.  Answer the questions below as comments posts to the blog.
 
 
 If people cannot navigate through your site, they will quickly leave. Thus, designing effective navigation on your Web site is crucial. But there are some basic things you need to do before you can start worrying about rollovers or links, images or flash.

Information Architecture

Before you can even start to plan your navigation, you need to define your site's information architecture. Information architecture is the taxonomy or structure of your Web site.
Some common taxonomy elements on a corporate or business Web page are:
  • Products - the products or services the company sells
  • About - information about the company
  • Investor Relations - information specific to investors
  • Support - help for customers
Some common taxonomy elements on a personal Web page are:
  • About Me - information about the page author
  • Favorite Links - links that the author likes
  • Friends and Family - information about the author's friends and family

Organization

Once you've determined your site architecture, you need to decide how to organize it. You might have it all live in one directory, and just link to the major pages from your front page. Or you might have all the sub-pages separated into directories.
When thinking about your organization, you should think about how your customers might wander through it. Flow charts and storyboards can help you map out exactly how you would like to encourage your readers to use the site. You might want to map out several paths for your readers to use.

Navigation Design

Once you have an idea of the architecture and organization, you're ready to think about the design of the navigation. There are several things you should consider in deciding on your navigation design:
  1. Accessible
    The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method.
  2. Meaningful
    Keep your navigation meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them.
  3. Understandable
    If you want to use images for your navigation, make sure that there is some text associated with them. " Mystery Meat Navigation" is the use of non-descriptive images as navigation, and it's much more common than you might think.
  4. Prevalent
    Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.
Once you've designed your navigation, then you can begin to use it. Keep in mind that it is really tempting to change your navigation structure while you're in the middle of implementing it. But if you decide to do this, be sure that you're making the change globally and that it fits with the original goals of your taxonomy and information architecture. My recommendation is to implement the original design and wait a week or two. If at that point you still want to change it, and the change will work, then go for it. You might just find that your planning and preparation were ultimately correct and not change it at all.


1. Give three examples of elements of Information Architecture that would need to be addressed in an Ecommerce web site. 


2. Why is it important to keep your navigation meaning full?


3.What kind of impact do you think a sites navigation has on it readers/users?  Think about this from an Ecommerce standpoint.

Wednesday, September 21, 2011

Target Marketing and Target Marketing Analysis

Watch the video below and answer the questions as comments posts.






Target Marketing



1. Do you think it is OK in the first case for them to say men of any age but not children?  Is this specific enough?  Explain your answer.


2. Why would the marketing person for the Electric Shaver website need to know whether it was a gift or not? 


3. How do you feel about using profile data from a forum as part marketing analysis?  Explain!!


4. Does this process of segmenting your market into a group of target individuals make sense to you?  Explain your answer whether it is yes or no.

Friday, September 16, 2011

Top Ten Web Design Mistakes

 Read the article below by Dr. Jakob Nielsen, Ph.D. and answer the questions as a blog post.
For this year's list of worst design mistakes, I decided to try something new: I asked readers of my newsletter to nominate the usability problems they found the most irritating.
I assumed that asking for reader input would highlight many issues that I hadn't noticed in my own user testing. This was not the case. Instead, all of the top thirty problems were covered in existing usability guidelines. Thus, when you read this year's top ten list, you'll probably say, "Yes, I've heard about this before." That's okay.
There's value in reminding ourselves of past findings and raising their priority on the agenda of things to be fixed. Because these mistakes continue to be so common, it makes sense that people continue to complain about them the most.
1. Legibility Problems
Bad fonts won the vote by a landslide, getting almost twice as many votes as the #2 mistake. About two-thirds of the voters complained about small font sizes or frozen font sizes; about one-third complained about low contrast between text and background.
For more info on resizable text and readability, see my 2002 column, "Let Users Control Font Size."
2. Non-Standard Links
Following are the five main guidelines for links:
Make obvious what's clickable: for text links, use colored, underlined text (and don't underline non-link text).
Explain what users will find at the other end of the link, and include some of the key information-carrying terms in the anchor text itself to enhance scannability and search engine optimization (SEO). Don't use "click here" or other non-descriptive link text.
Avoid JavaScript or other fancy techniques that break standard interaction techniques for dealing with links.
In particular, don't open pages in new windows (except for PDF files and such).
Links are the Web's number one interaction element. Violating common expectations for how links work is a sure way to confuse and delay users, and might prevent them from being able to use your site.
3. Flash
I view it as a personal failure that Flash collected the bronze medal for annoyance. It's been three years since I launched a major effort to remedy Flash problems and published the guidelines for using Flash appropriately. When I spoke at the main Flash developer conference, almost everybody agreed that past excesses should be abandoned and that Flash's future was in providing useful user interfaces.
Despite such good intentions, most of the Flash that Web users encounter each day is bad Flash with no purpose beyond annoying people. The one bright point is that splash screens and Flash intros are almost extinct. They are so bad that even the most clueless Web designers won't recommend them, even though a few (even more clueless) clients continue to request them.
Flash is a programming environment and should be used to offer users additional power and features that are unavailable from a static page. Flash should not be used to jazz up a page. If your content is boring, rewrite text to make it more compelling and hire a professional photographer to shoot better photos. Don't make your pages move. It doesn't increase users' attention, it drives them away; most people equate animated content with useless content.
Using Flash for navigation is almost as bad. People prefer predictable navigation and static menus.
4. Content That's Not Written for the Web
Writing for the Web means making content
short,
scannable, and
to the point (rather than full of fluffy marketese).
Web content should also
answer users' questions and
use common language rather than made-up terms (this also improves search engine visibility, since users search using their own words, not yours).
5. Bad Search
Everything else on this list is pretty easy to get right, but unfortunately fixing search requires considerable work and an investment in better software. It's worth doing, though, because search is a fundamental component of the Web user experience and is getting more important every year.
6. Browser Incompatibility
I admit it: during my spring 2004 seminars, I downgraded cross-platform compatibility to a one-star guideline (that is, "worth thinking about if you have extra project time, but not a priority"). At that time, almost everybody used Internet Explorer and the business case for supporting other browsers was getting pretty tough to defend on an ROI basis.
Today, however, enough people use Firefox (and various other minority browsers, like Opera and Safari) that the business case is back: don't turn away customers just because they prefer a different platform.
7. Cumbersome Forms
People complained about numerous form-related problems. The basic issue? Forms are used too often on the Web and tend to be too big, featuring too many unnecessary questions and options. In the long run, we need more of an applications metaphor for Internet interaction design. For now, users are confronted by numerous forms and we must make each encounter as smooth as possible. There are five basic guidelines to this end:
Cut any questions that are not needed. For example, do you really need a salutation (Mr/Ms/Mrs/Miss/etc.)?
Don't make fields mandatory unless they truly are.
Support autofill to the max by avoiding unusual field labels (just use Name, Address, etc.).
Set the keyboard focus to the first field when the form is displayed. This saves a click.
Allow flexible input of phone numbers, credit card numbers, and the like. It's easy to have the computer eliminate characters like parentheses and extra spaces. This is particularly important for elderly users, who tend to suffer when sites require data entry in unfamiliar formats. Why lose orders because a user prefers to enter a credit card number in nicely chunked, four-digit groups rather than an undifferentiated, error-prone blob of sixteen digits?
Forms that violate guidelines for internationalization got dinged by many overseas users. If entering a Canadian postal code generates an error message, you shouldn't be surprised if you get very little business from Canada.
8. No Contact Information or Other Company Info
Even though phone numbers and email addresses are the most requested forms of contact info, having a physical mailing address on the site might be more important because it's one of the key credibility markers. A company with no address is not one you want to give money to.
For advice on how to best present contact info, see our usability studies of "About Us" pages and store finders and locators.
9. Frozen Layouts with Fixed Page Widths
Complaints here fell into two categories:
On big monitors, websites are difficult to use if they don't resize with the window. Conversely, if users have a small window and a page doesn't use a liquid layout, it triggers insufferable horizontal scrolling.
The rightmost part of a page is cut off when printing a frozen page. This is especially true for Europeans, who use narrower paper (A4) than Americans.
Font sizes are a related issue. Assuming a site doesn't commit mistake #1 and freeze the fonts, users with high-resolution monitors often bump up the font size. However, if they also want to bump up the window size to make the bigger text more readable, a frozen layout thwarts their efforts.
The very worst offenders are sites that freeze both the width and height of the viewport when displaying information in a pop-up window. Pop-ups are a mistake in their own right. If you must use them, don't force users to read in a tiny peephole. At an absolute minimum, let users resize any new windows.
10. Inadequate Photo Enlargement
According to the vote count, #10 should really be about pop-ups, but I've written a lot about them already (most recently when they were rated the #1 most hated advertising technique). Instead, I want to feature here a problem that got a bit fewer votes, but illustrates a deeper point.
One of the long-standing guidelines for e-commerce usability is to offer users the ability to enlarge product photos for a close-up view. Seeing a tiny detail or assessing a texture can give shoppers the confidence they need to place an order online.
It's gratifying that most sites obey this guideline and offer zoom features, often denoted by a magnifying glass icon. But many sites implement the feature wrong.
The worst mistake is when a user clicks the "enlarge photo" button and the site simply displays the same photo. It's always a mistake to offer no-ops that do nothing when clicked. Such do-nothing links and buttons add clutter, waste time, and increase user confusion: What happened? Did I do something wrong? (An even more common no-op mistake is to have a link on the homepage that links to the homepage itself. This was #10 on the list of most violated homepage guidelines.)
Another mistake here that's almost as bad is when sites let users enlarge photos, but only by a fraction. When users ask for a big photo, show them a big photo. It's often best to offer an enlargement that fills up the most common screen size used by your customers (1024x768 for B2C sites, at the time of this writing). Other times, this is insufficient, and it's better to offer a range of close-ups to give users the details they need without requiring them to scroll a too-large photo.
Yes, initial pages should use small photos to avoid looking fluffy. Yes, you want to be aware of download times and watch your pageweight budget. Even in this broadband age, slow response times were #15 on the full list of design mistakes. But, when users explicitly ask for larger pictures, they're willing to wait for them to download — unless that wait produces a mid-sized photo that lacks the details they need to make a purchasing decision.
Back to Basics in Web Design
This year's list of top problems clearly proves the need to get back to Web design basics. There's much talk about new fancy "Web 2.0" features on the Internet industry's mailing lists and websites, as well as at conferences. But users don't care about technology and don't especially want new features. They just want quality improvements in the basics:
·         text they can read;
·         content that answers their questions;
·         navigation and search that help them find what they want;
·         short and simple forms (streamlined registration, checkout, and other workflow); and
·         no bugs, typos, or corrupted data; no linkrot; no outdated content.
Anytime you feel tempted to add a new feature or advanced technology to your site, first consider whether you would get a higher ROI by spending the resources on polishing the quality of what you already have. Most companies, e-commerce sites, government agencies, and nonprofit organizations would contribute more to their website's business goals with better headlines than with any new technology (aside from a better search engine, of course).

1. What was the number one mistake.  Describe some of the issues in detail.

2. What is the web's number one interaction element?  Why do you think this is?

3. What does the author say is one of the long standing guidelines for E-commerse usability?  Do you agree this is important for a commerce site?  Explain.

4. Give me your opinion on the authors list of five things users want quality improvments in basic web design.  Do you think these things are important?  Why?