Mook, the team behind the Nitro Group website, brings us a new interactive experience for Foot Locker.

Robert Sargent tells us all about it:

We recently completed development on an immersive Papervision3D experience for Foot Locker. The website is part of an integrated campaign for the launch of Nike’s Tuned 10 sneaker. The campaign was based around the concept of evolution and its visual aspects were informed by the “trixels” which form the sneaker.

Much of what you now see on the website came about after some R&D performed by Mook’s Flash Development team in July. Initially, we wrote a framework which allowed us to triangulate any 3D object and turn its constituents into objects in their own right. We found we were able to do this without too much trouble, even on complex Collada objects and objects with animated materials.

For the website itself, the custom object and material classes were refined to allow us to manipulate the triangles at a fairly low level, animating them to form different shapes, change colour etc. We began by using Tweener but settled on TweenMax after noticing a significant performance improvement. We also began working on a way to transition between different bitmap materials until we ran out of time.

The Papervision sits on our location-based architectural framework which we developed as an extension of PureMVC earlier in the year. The framework incorporates SWFAddress and will soon enable us to rapidly deploy accessible and searchable content underneath Flash content. Unfortunately, we had to disable SWFAddress shortly before the website went live. When we tested it on slower machines, we noticed that a change in the browser address bar causes a noticeable lag in the Flash rendering engine, making the website appear to blink.

The scope of the project was a moving target from start to finish, with the requirements changing repeatedly. We ended up doing quite a lot more development than is apparent on the site. For example, the camera controller has a number of applications which were not used. We even gave it the ability to react to explosions inside the world with a Battlestar-style camera shake.

The biggest hurdles we faced were related to performance. Our original idea was to morph between the sneaker in its entirety. Eventually, we had to compromise for a mixture of 2D and 3D effects. There’s a number of other things we’d like to improve upon, particularly the “static” feel between transitions. We feel the website still looks too much like the experiments did two months ago!

Overall, we’ve been highly impressed with the PV3D engine. The initial R&D incorporated the Great White alpha and we continued to use it during the site build. We were updating on a daily basis and fixing anything that broke which, I’m pleased to say, was very little indeed. We stopped at about revision 638, just before the camera classes were refactored and unified. This might sound like madness but if life in beta is good enough for Google it’s probably good enough for the rest us.

It’s been a while, but i’ve added some more images from my archives.

Most of them are experiments with lighting and different render settings in Maya and Lightwave…

View them in my portfolio

What is an accessibility statement?

An accessibility statement provides website visitors with information on how to utilize any accessibility features implemented, together with known barriers and how to overcome them. This information is usually presented on a dedicated page within the website.

It is not compulsory or a requirement of Section 508 or the W3C Web Content Accessibility Guidelines to provide an accessibility statement, but since around 2002 accessibility advocates such as Mark Pilgrim recommended that websites should include an accessibility statement. This has been further supported by both the UK Government’s Delivering Inclusive Websites Policy and the recent PAS 78 Guidance Document.

Over the years we have seen some excellent articles published on the topic of how to write an accessibility statement. Mark Pilgrim and Gez Lemon have, for me, written the most informative articles in this area, and both are worthy of a read.

More recently, however, there have been a number of articles written which question the usefulness of accessibility statements. The most notable of these, by Rosie Sherry and Peter Krantz, conclude that accessibility statements are not useful and should therefore be avoided. Reading these articles and associated comments has led me to investigate why the usefulness of accessibility statements is being questioned. As such, this article will look at the benefits of providing an accessibility statement together with common problems, before evaluating whether accessibility statements are useful.

Benefits of providing an accessibility statement

To demonstrate how to use accessibility features provided

By demonstrating how to use the accessibility features implemented on a website, it empowers the website visitor to improve their browsing experience. For instance, they may be interested in how to make the text size larger so that it is more comfortable to read, or find out information about making the website speak with a speech output program such as Browsealoud or Textic. When explaining how to use accessibility features it is often useful to reference websites that are dedicated to explaining this information. An excellent resource in this area is the BBC’s My Web My Way website.

To detail known barriers

Despite best efforts, there may be areas of the website which are still inaccessible. Therefore, a known barriers section within the accessibility statement will enable this information to be provided up-front, together with alternative ways of obtaining the information or service.

To provide a point of contact

Website visitors who experience difficulties whilst browsing will benefit from dedicated accessibility contact information. As such, the query will go directly to the team responsible for the accessibility of the website. This will likely result in the query being dealt with quickly, efficiently, and to the satisfaction of the website visitor.

Common issues with accessibility statements

They can be difficult to locate

The accessibility link is often placed outside the main viewing area of the web page such as within the footer area, thus making it very difficult to locate. This is exacerbated for website visitors using assistive technologies. For instance a screen reader user would have to listen to excessive content before encountering the link and may even give up, thinking one is not present, whilst a magnification software user may have to spend lots of time searching for the link as only a small proportion of the page is visible at any one time.

Additionally, for keyboard only users, the location of the accessibility link can result in excessive key presses in order to select and then activate the link. The Digital Media Access Group carried out a study, Evaluating the Usability of Online Accessibility Information, which reviewed websites from a broad range of sectors. The study concluded that participants found it very challenging to locate accessibility information on most of the websites reviewed. This was attributed to the accessibility link being small, of low contrast, and outside the main viewing area.

They can be too technical

Some accessibility statements contain too much detail on conformance and technologies utilized in making the website accessible. Whilst this information shows that the website has been designed with accessibility in mind, it does not provide any benefit to general website visitors. As this information is often placed at the beginning of the accessibility statement, it is likely to confuse website visitors before they even have a chance to read about the accessibility features provided.

Typical examples include:

1. Our website conforms to the W3C Web Content Accessibility Guidelines Priority 1 and 2.
2. Our website complies with the requirements of Section 508.
3. Our HTML is valid and conforms to XHTML 1.0 Strict.
4. All pages on this website validate to CSS2.

They contain “what” rather than “how”

Along with technical information, accessibility statements often list the accessibility features they provide, rather than how to use them. The following is an example of what can typically be found in an accessibility statement:

1. All text sizes are relative.
2. All images have an alt attribute.
3. Style sheets have been used to separate presentation from content.
4. Headings are semantically marked up.
5. Tables have been correctly marked up with headings.
6. Link text is unique which makes it make sense when taken out of context.

Information such as this will not benefit the website visitor. Taking point 1 as an example—would a website visitor be able to make the connection that “all text sizes are relative” means they can increase the size of the text in their browser?

They can be overlooked

Accessibility is a funny old word and not everyone knows its meaning. When people ask my occupation and I say I’m a Web Accessibility Consultant—most look back at me blankly, yet these are people who use websites on a daily basis! Now these people may not need to increase the size of the text or change colors just yet, but when they do, are they going to know where to look? It appears that we are failing website visitors from the beginning by using such an obscure term. Perhaps one of the biggest issues with these statements is the name itself. The Digital Media Access Group study concluded that many of the participants felt the term ‘accessibility’was vague or confusing and should be replaced by an alternative term.

Are accessibility statements useful?

In principle accessibility statements are useful. They have the potential to greatly improve the browsing experience of website visitors who may require the use of accessibility features implemented within the website.

However, at present accessibility statements in general seem to add little value in assisting website visitors. They are often difficult to find and contain complex language and technical jargon that can be bewildering.

The following principles should be considered when writing or reviewing an existing accessibility statement to help improve its value to website visitors:

1. Make the accessibility link prominent and provide it in a consistent location so that website visitors can find it easily. Ensure the link is within the main viewing area and can be accessed easily with various assistive technologies and input devices.
2. Provide rich content that explains how to use the accessibility features provided, rather than just listing the features themselves.
3. Separate the content into sections and provide headings for each section. This will aid the readability and navigation of the information being provided.
4. Provide contact information in various formats so that website visitors can directly contact the team responsible for accessibility queries.
5. Actively promote feedback from website visitors. Use comments from website visitors to continually improve the website and the content within the accessibility statement.
6. Provide a known barriers section which details inaccessible areas of the website along with alternative ways of obtaining the information or services.
7. List technical and conformance information at the end of the accessibility statement. This will allow the information to be readily available, whilst not being placed in a prominent position.

For an example of these principles in practice, please visit Agoo IT’s ‘Help using this website’ page.

Is there a need for standardization?

Whilst we can promote the inclusion of accessibility statements through guidance documentation and articles such as this one, I believe that with so many websites on the internet today we have reached the point where standardization is necessary. Possible routes could be to make accessibility information a requirement of Section 508 and the W3C Web Content Accessibility Guidelines. Alternatively, a formalized standards document similar to PAS 78 could be written, focusing solely on the provision of accessibility information.

However, before standardization can even be considered, the following points would need to be discussed further:

1. The term “Accessibility Statement” needs to be reviewed as it does not accurately define the content which it should contain. The term ‘statement’ promotes the listing of conformance information and accessibility features implemented. Perhaps ‘Help using this website’, ‘Using this website’ or ‘About this website’ would be more appropriate?
2. Is there a requirement for a universal accessibility statement template to ensure that information is provided in a consistent format? The template would provide a consistent design and format to website visitors, allowing key information to be located quickly.
3. Where should the accessibility link be located so that it is consistent throughout all websites, and is clearly visible and audible to website visitors?

Conclusion

I hope this article has provided some guidance on the benefits of accessibility statements, along with some principles for improving them for your site visitors. Additionally, it is hoped that the article will provoke discussion into the future direction of accessibility statements and whether standardization is indeed necessary.

I look forward to your comments and discussions on this topic.

In recent years, advertising has become a major revenue source for many websites. Not too long ago, online ads were often met with disapproval from visitors, and advertisers were unsure about their value or effectiveness. Today, most visitors have come to expect ads on commercial websites, and advertisers have recognized the potential of various online ad opportunities. Ads have long been a part of print publications, such as magazines and newspapers, and now they essentially have the same role in online periodicals and publications.

Although advertising is a concern for website owners and those pushing products or services, it is also has an impact on Web designers, because they have to be able to design and develop websites that can produce ad revenue and still meet the needs of visitors. Clients with websites that depend on ad revenue need a design that provides the necessary screen space and a proper layout for selling ads, and advertisers need placement that will get them the exposure they seek.

While advertisements are hardly the primary concern of Web designers in general, not accounting for them will result in a very awkward layout that can either detract from the flow of the website or put the ads in a spot where they will not receive enough attention from visitors. In order to maximize ad revenue for the client, with minimal interference in the appearance and usability of the website, the designer must take advertising needs into consideration throughout the design process.

This article from www.smashingmagazine.com explains it all…

Ads on The Raw Story seem to be squeezed in wherever possible, to the detriment of the content.

Starting with the Basics

Of course, not all websites sell advertising space, but a growing number of them do. As the popularity of blogs continues to rise and designers get more requests for custom blog themes, this issue will only become more common. An adequate discussion of the subject requires starting with some basic issues.

Why do advertisers pay for ads?

Obviously, advertisers buy ads to gain exposure and improve their bottom line. The goals vary from one campaign to the next. Some may be primarily concerned with brand recognition and general exposure, while others are only concerned with sales of products. Online advertisers may be looking for click-through visitors from their ads, but ultimately all advertisers look for a strengthened business as a result of their campaigns.

Web designers can have some impact on this issue by their placement of ads. Of course, designers cannot completely sell products or services for advertisers, but ad placement is key to click-through rates and so has a sizeable impact on the success of an ad campaign.

What are advertisers paying for?

Are advertisers paying for clicks by visitors? Are they paying for sales conversions? Are they paying simply for the screen space? Each of these is a possibility and depends on the situation. AdSense ads, for example, pay publishers per click. Affiliate ads pay per sale or per action. Direct ads, such as most banner sales, are generally sold at a set price for the screen space and location.

Keeping the desires of advertisers in mind throughout the design process is critical if the website is going to be selling ads directly to other businesses. AdSense and affiliate ads can be placed just about anywhere on a website, although the results will vary, but direct ad revenue will depend on what advertisers feel they are getting for their money. If they are paying for prime on-screen real estate, that’s what they’ll expect.

Why do websites or businesses publish ads?

Advertising can be very lucrative for websites with a large volume of traffic. Although there are other ways to monetize a website, ads are one of the few ways in which a website owner can quickly capitalize on existing traffic without any additional work, such as developing products or providing services.

Bloggers publish ads because the revenue allows them to earn income and essentially pay themselves for the time it takes to write content and maintain the blog. News websites sell ads because they typically have large audiences and because their offline business models, such as for printed newspapers, aren’t able to produce as much ad revenue as they have in past years. As a growing number of consumers turn to online publications rather than the daily paper for their news, ad revenue will shift from print publications to online options.

In most cases, ad revenue is critical to the success of the business. For this reason, it must be a priority during the design process. For a service-based business that uses a website to sell its services to visitors, the designer’s job includes creating a website that effectively promotes those services to visitors. The same thing can be said of websites and businesses that rely on ad income.

Why are Advertisements an Important Part of Web Design?

For website owners and businesses that rely on advertising income from their websites, this is obviously an important part of the website that needs major consideration during the design process. Not having enough space or the right locations for ads will have a dramatically negative impact on the business. Once that happens, attempts will probably be made to move ads or open up new slots for sale, which could cause the website to look awkward and unorganized, because these areas were not originally accounted for in the design.

Websites with advertising revenue as their main source of income can be compared to e-commerce websites that depend on selling products in order to continue doing business. No designer is going to create an e-commerce website without making the placement of products, descriptions, and images in the layout a priority. Likewise, website businesses that require ad revenue cannot compromise on advertising space.

Advertisements are also a significant part of the design process because of the impact on visitors. Although a website may rely on advertising income, visitors are a critical part of the equation. Without them, ad revenue disappears. The website owner and designer need to incorporate ads in a way that still allows for a positive visitor experience.

The Conundrum of Online Ads

While website businesses that sell advertisements want and need those ads to be noticed and appreciated by visitors, a delicate balance is required. Aside from made-for-AdSense websites and websites set up solely for affiliate income, a typical website set up for ads needs to send a portion of its visitors away to the websites of advertisers in order to continue generating that revenue, but it also needs to retain a majority of visitors in order to grow itself. Keeping all visitors will result in no ad revenue, and losing all visitors to advertisers will result in no growth for itself.

Website owners and designers need to consider this issue during the design process so that the locations and sizes of ads are appropriate and so that the ads produce revenue with minimal negative impact on the website. Offline ad publishers don’t necessarily face the same dilemma. A magazine may run full-page ads throughout the publication, but when readers see an ad that interests them, they don’t necessarily stop reading and put down the magazine.

In the online world, a click on an ad could result in a visitor not coming back. Ads can be set to open in a new window to prevent this, but that still doesn’t guarantee that the visitor will come back after clicking the ad.

How Do Advertisements Impact the Design of a Website?

Regardless of how much attention designers give to advertisements in the layout of a website, ads will in some way impact the design. Ideally, the designer has accounted for specific ad slots in the design and laid out the website accordingly. In this case, ads can be implemented on the website in a way that does not disrupt the flow of content or information and that gives the ads a specific and strategic location.

On the other hand, if ads are not adequately considered during the design process, they can look very much out of place, which will disrupt the rest of the website. Layout and design decisions that were made without consideration for ads will rarely work well when ads are incorporated in the website.

Layout and Spacing

Advertisements can easily take up big chunks of space in the layout of a website. Whether it has one large banner ad or several smaller ones bunched together, the layout will be affected. Some websites will spread out various advertisements throughout the website, others will confine them to a specific area and leave the rest of the website ad-free.

The strategy here depends of several factors, but websites in particular industries and niches tend to take similar approaches. For example, major news websites typically have advertisements spread throughout the website’s layout. They may not include several ads in any one specific area, but they do have many spots that contain few ads.

CNN.com contains a few advertisements spread throughout the website.

In contrast to news websites, many blogs keep banner ads contained within a designated area of the layout, typically the sidebar, and the rest of the blog may contain no ads. With this approach, the designer needs to account for advertisements in one large area of the layout, but the rest of the website will have little or no need to accommodate ads.

Blogging Tips includes six 125 x 125-pixel banners in the right sidebar, and the only other ad is a banner just above the comments on individual posts.

Because ads are often used in sidebars of both blogs and news websites, one major consideration in designing the layout is the width needed to hold ads in the sidebar. For example, many news websites have 300 x 250 banners in their sidebars, so the sidebars must be big enough to contain the banners. If this consideration is not a part of the design process, monetization opportunities and potential income will suffer, or the layout will have to be changed later.

Of course, the sidebar isn’t the only common location for ads. Many websites sell ad space in their headers because this location usually brings the highest ad price on the page. In that case, advertising needs to be a consideration when the website is designed or else there will likely be no space available in the header. Typical website headers include a logo/branding area and primary navigation. To include space for advertisements, all of these items could be made to fit in the header design, or primary navigation could be moved elsewhere.

CSS Tricks is one of many blogs to include a banner in the header. In this case, the 468 x 60 banner fits nicely in the design of the header.

Colors

Web designers can’t control the color or design of banner ads used on their websites, and definitely won’t be able to in future, but they can consider the possibilities when developing a color scheme for the design. Banner ads are often colorful and bright, for the purpose of grabbing the attention of the visitor. If a website is designed with lots of different colors and shades, it could look awkward and too busy with ads that are also full of color, especially when those colors don’t go together.

Some websites that display a lot of banners will need a muted color scheme that avoids potential color overload for visitors. In some cases, these websites need the ads to stand out in order to draw more attention to them, and color can be a very effective way of achieving that.

Flow

One of the challenges designers face with any type of website is to present the content so that the visitor’s eye is drawn to important information. The typical pattern of the eye’s movement on screen and the flow of content in the website’s layout can be influenced by ads. Website owners looking to maximize ad revenue will often include ads in locations where the eye is drawn to, because these locations tend to produce the best results and the most ad revenue.

Those who want some ad revenue but with minimal impact on the visitor will keep ads away from the primary flow of content. Examples of this are blogs that place ads within the content of the post or just in the sidebar. Ads directly above or below post titles are typically seen and clicked by more visitors than ads in the sidebar, so they will sell at a higher rate. Decisions here need to be made by the owner of the website, but the designer needs to be aware of the decision so that the ads can be implemented in the design.

The New York Times keeps its header and main content area free of ads on article pages, but there is a large area in the right sidebar for ads.

What is the Designer’s Responsibility with Advertisements?

1. To understand the level of priority of advertising revenue.
Many websites include no advertisements at all, and others rely on ad revenue to stay in business. Still others include some ads but not as the primary source of revenue. The designer needs to communicate with the client to understand how much of a priority ads should have in the design. If ad revenue is critical to the business, advertising slots will be one of the most significant factors in the layout. If selling products or services is more important, then the products or services should be given priority in the design over any ads that may be included.

The designer’s job is not to determine how much of a role ads should play in the website’s design and layout, but he or she should make the effort to completely understand the needs and desires of the client in this area. Starting the design process with the right perspective and being on the same page as the client is critical.

2. To design a website that meets the needs of the clients.
Most Web designers would probably prefer never to have to design for ads and to be able to use the allotted space in other ways. However, the client’s needs include a website designed to allow for ad revenue, so these areas must be a part of the design.

3. To design an attractive and usable website that includes ad space.
Regardless of whether ads are a high or low priority, the designer needs to create a website that is attractive and gets the job done. Ads can be a difficult element to work with in the design because of the lost space and the interrupted flow, however, the designer must still create an effective website. If there are a lot of ads on the website, care must be taken to still make the website usable for visitors with minimal interference.

Trends in Ads and Design

By looking at websites that sell ads, particularly those that depend on ads as a major source of income, we see a number of trends:

Header ads.
Many websites sell advertising space in their header; often this space is located to the side of a logo and above or below a navigation menu. This trend is common across many different types of websites and will likely continue as long as these ads produce solid results for advertisers.

The Washington Post actually uses two header ads on article pages. The first is a 300 x 45 banner that sits across from the logo, and below that is a 728 x 90 banner that lies between the logo and the navigation menu.

Lifehacker, like other websites in the Gawker network, has a large header that allows for a 300 x 250 banner. Notice that the website clearly is designed and laid out to suit this size of ad perfectly.

Ads above all content.
Instead of having an ad inside, or perhaps beside, the header, some websites place ads completely above everything else on the page, including the header. This puts the ad as high as possible on the page but takes it out of the flow of the content. This minimizes the potential interference of the ad, but it pushes everything else on the page down, and less content will be visible above the fold. This trend is noticeable on a number of news websites.

TechCrunch uses a 720 x 90 banner above its header. Only the green border of the body is above this banner.

The L.A. Times also includes a banner above all content, but not on the home page.

Monster places a 728 x 90 banner at the very top of its job search page.

More ads on secondary pages than on home page.
Some websites, such as the L.A. Times just mentioned, keep the home page more welcoming to visitors and more user-friendly by using the space for things other than advertisements. However, these websites include ads on other pages. This is another common trend on news websites.

The Reader’s Digest home page avoids any ads high on the page.

However, pages of individual articles include a 728 x 90 banner above the header, a 300 x 250 banner at the top of the right sidebar and a 135 x 600 skyscraper in the left sidebar, plus some additional ads lower on the page.

Like Reader’s Digest, Time also uses an almost ad-free home page.

Pages of individual articles include a 728 x 90 header banner and a 300 x 250 banner at the top of the sidebar.

Common banner sizes.
As you browse a number of websites, you notice that banners come in all different proportions, but most of them are standard sizes. The Interactive Advertising Bureau has established standard sizes to be used for online ads. While a website owner can sell ads of any dimension, it is usually advisable to stick to the standards because potential advertisers likely already have ads designed for those sizes and would be more likely to buy if spaces of the same sizes were available. Web designers should know the ad dimensions that clients want on their websites.

Blogs commonly use 125 x 125 banners, although many other sizes are used as well. Daily Blog Tips is an example of a website with typical blog banner ads. Six 125 x 125 ads are placed in the right sidebar, but the only other ad on the website is a skyscraper lower down in the left sidebar.

Another common dimension for banners is 300 x 250. Many news websites use ads of this dimension in sidebars. Yahoo’s right sidebar contains a 300 x 250 banner right around the fold.

Digg also uses a 300 x 250 banner at the top of its sidebar.

Best Practices for Designers

1. Design to meet the needs of the client
The ultimate responsibility of the designer is to the client. The designer should advise the client when needed, but ultimately the website needs to please the client. Although the designer may disagree with the client’s approach to using ads on the website, if the client wants it a certain way, that’s how they should get it.

There are many websites that appear to outsiders to have too many advertisements, but without knowing the details of how much income the ads produce and how they affect or don’t affect the audience, it’s impossible to know if it is a good or bad approach for the business.

2. Lay out the website so that ads are a part of the design
The websites that look the most natural and normal with advertisements were designed with them in mind. It’s no accident that a banner fits nicely in a specified area of the sidebar. Incorporate ad slots in the layout to achieve the best-looking website possible. Ads that are thrown in will look out of place and will overpower an otherwise well-designed layout.

The sidebar on ABC News is sized just right to contain the 300 x 250 banners used throughout the website.

3. Consider future needs
You may find yourself in a situation in which you’re designing a website that isn’t particularly ad-heavy at the moment but that could be more dependent on ad revenue in the near future. Many websites start out with few advertisements and then, once the audience is built up, incorporate more ads. Ideally, this would be considered during the design process, and plans would be made for where new ad slots could be placed. Sidebars are generally a good spot to increase the amount of ads without disrupting the layout or the content, but header ads are much more difficult.

It’s generally good practice to discuss long-term plans with clients during the initial process so that situations like this can be avoided. If more ads are to be used in the near future, before a redesign is done, it’s possible to hold some spots with temporary content until they are needed for ads. For example, an area could be used to promote something on the website itself, with that content being removed once ad revenue becomes more important.

4. Consider the impact on visitors
Designers should make an effort to include ad slots that will appeal to advertisers, but visitors also need to be considered. When it comes to ads, a lot of decisions need to be made and judgment taken about what is appropriate and what would be too much. All of these issues need to be looked at in the context of the website in question, and there are rarely black-and-white answers.

Last year we’ve seen a lot of simple, even minimalistic designs, which impress not with the amount of presented information but with the way the information is actually presented. Complex layouts are giving way to simple 2-col- or 3-col layouts, which usually have large amount of white space without any content whatsoever…

This article from www.smashingmagazine.com explains it all…

Indeed, the importance of both white space and simplicity shouldn’t be underrated. Used correctly, they can enhance the performance of a web-site, improve readability and make a great first impression. Recently Mark Boulton has written an insightful article about Whitespace and its importance in web design. Very well written, it describes in a very simple, but clear way, how to deal with white space in practice and how to use it in your web-projects. We’ve collected some more articles on this topic. So what do we have?

Links checked: June/16 2008.

Simplicity:

• Keep it simple
  Why does a page look complex? A brief article about the “exciting design vs. simple design”-question.
• Keep it simple, stupid!
  Describes the importance of simplicity regarding the way human brain works.
• Simplicity: The Cobbles of the Designer’s Path
  Stepheen Van Doren about wrong and correct use of simple solutions.
• Simplicity Is Highly Overrated
  Don Norman criticizes that the simplicity and minimalism lead to less functions and decrease the total performance of products.
• The Beauty of Simplicity
  Google is simple. But how did its developers achieve it?
• The Complexity of Simplicity
  Luke Wroblewski describes a complex path to simplicity, its features and reasons, why the simple solutions are more complex than complex solutions.
• The Laws of Simplicity
  John Maeda presents 10 excerpts from his book, in which he talks about rules and principles of ‘Simplicity’.
• Wikipedia: Simplicity
  Explains what simplicity is and related information about the topic.

White Space (Negative Space):

• Design Matters: White space
  About the potential power behind Negative Space.
• ALA: Whitespace
  An excellent introduction to the theory and use of whitespace, by Mark Boulton
• Design Psychology
  An insight in the psychology of web design. Among other information White Space is analyzed.
• Developing the Invisible
  Luke Wroblewski gives examples of situations, in which white space is essential and explains, why it is indeed so significant.
• Give me my web space
  Molly E. Horzschlag gives guidelines, which can help you to reduce the complexity of your web-sites and improve its readability.
• Negative Space Tutorial
  This tutorial explains, how you can use White Space efficiently.
• On White Space in Graphic Design
  Keith Robertson about fields and areas, in which Negative Space dominates – primarily graphic design.
• Page Layout and Design for Digital Scrapbooking
  Carla Rose about the importance of White Space.
• Psychology Studies on Human Interaction
  Studies in psychology confirm: White Space improves the perception of information by 20%.
• The Importance of White space for Legibility
  This study compares 4 White Space Layouts and presents results about the influence of White Space in design.
• The value of white space
  Offers a detailed introduction in the theory of white space, with examples.
• Typography and White space
  White Space in practice: how can you guarantee an optimal legibility with CSS?
• Under The Loupe #1: White Space
  Jason Santa Maria: “Empty space serves a purpose and supports the visual integrity of a layout.”

Simplicity and White Space in Practice:

• Global White Space Reset
  Global Padding/Margin Reset in CSS-files can be used as a template for your web-projects.
• The Best Minimalist WordPress Themes
  A collection of hand-picked Wordpress-Themes, which impress with their simplicity, clarity and readability.

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist…

This article from www.smashingmagazine.com shows you how…

Principles Of Effective Web Design

In order to use the principles properly we first need to understand how users interact with web-sites, how they think and what are the basic patterns of users’ behavior.

How do users think?

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

Most users search for something interesting (or useful) and clickable; as soon as some promising candidates are found, users click. If the new page doesn’t meet users’ expectations, the Back button is clicked and the search process is continued.

• Users appreciate quality and credibility. If a page provides users with high-quality content, they are willing to compromise the content with advertisements and the design of the site. This is the reason why not-that-well-designed web-sites with high-quality content gain a lot of traffic over years. Content is more important than the design which supports it.
• Users don’t read, they scan. Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.
  Users don’t read, they scan. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process.
• Web users are impatient and insist on instant gratification. Very simple principle: If a web-site isn’t able to meet users’ expectations, then designer failed to get his job done properly and the company loses money. The higher is the cognitive load and the less intuitive is the navigation, the more willing are users to leave the web-site and search for alternatives. [JN / DWU]
• Users don’t make optimal choices. Users don’t search for the quickest way to find the information they’re looking for. Neither do they scan web-page in a linear fashion, going sequentially from one site section to another one. Instead users satisfice; they choose the first reasonable option. As soon as they find a link that seems like it might lead to the goal, there is a very good chance that it will be immediately clicked. Optimizing is hard, and it takes a long time. Satisficing is more efficient. [video]
  Both pictures show: sequential reading flow doesn’t work in the Web. Right screenshot on the image at the bottom describes the scan path of a given page.
• Users follow their intuition. In most cases users muddle through instead of reading the information a designer has provided. According to Steve Krug, the basic reason for that is that users don’t care. “If we find something that works, we stick to it. It doesn’t matter to us if we understand how things work, as long as we can use them. If your audience is going to act like you’re designing billboard, then design great billboards.”
• Users want to have control. Users want to be able to control their browser and rely on the consistent data presentation throughout the site. E.g. they don’t want new windows popping up unexpectedly and they want to be able to get back with a “Back”-button to the site they’ve been before: therefore it’s a good practice to never open links in new browser windows.

1. Don’t make users think

According to Krug’s first law of usability, the web-page should be obvious and self-explanatory. When you’re creating a site, your job is to get rid of the question marks — the decisions users need to make consciously, considering pros, cons and alternatives.

If the navigation and site architecture aren’t intuitive, the number of question marks grows and makes it harder for users to comprehend how the system works and how to get from point A to point B. A clear structure, moderate visual clues and easily recognizable links can help users to find their path to their aim.

Let’s take a look at an example. Beyondis.co.uk claims to be “beyond channels, beyond products, beyond distribution”. What does it mean? Since users tend to explore web-sites according to the “F”-pattern, these three statements would be the first elements users will see on the page once it is loaded.

Although the design itself is simple and intuitive, to understand what the page is about the user needs to search for the answer. This is what an unnecessary question mark is. It’s designer’s task to make sure that the number of question marks is close to 0. The visual explanation is placed on the right hand side. Just exchanging both blocks would increase usability.

ExpressionEngine uses the very same structure like Beyondis, but avoids unnecessary question marks. Furthermore, the slogan becomes functional as users are provided with options to try the service and download the free version.

By reducing cognitive load you make it easier for visitors to grasp the idea behind the system. Once you’ve achieved this, you can communicate why the system is useful and how users can benefit from it. People won’t use your web site if they can’t find their way around it.

2. Don’t squander users’ patience

In every project when you are going to offer your visitors some service or tool, try to keep your user requirements minimal. The less action is required from users to test a service, the more likely a random visitor is to actually try it out. First-time visitors are willing to play with the service, not filling long web forms for an account they might never use in the future. Let users explore the site and discover your services without forcing them into sharing private data. It’s not reasonable to force users to enter an email address to test the feature.

As Ryan Singer — the developer of the 37Signals team — states, users would probably be eager to provide an email address if they were asked for it after they’d seen the feature work, so they had some idea of what they were going to get in return.

Stikkit is a perfect example for a user-friendly service which requires almost nothing from the visitor which is unobtrusive and comforting. And that’s what you want your users to feel on your web site.

Apparently, Mite requires more. However the registration can be done in less than 30 seconds — as the form has horizontal orientation, the user doesn’t even need to scroll the page.

Ideally remove all barriers, don’t require subscriptions or registrations first. A user registration alone is enough of an impediment to user navigation to cut down on incoming traffic.

3. Manage to focus users’ attention

As web-sites provide both static and dynamic content, some aspects of the user interface attract attention more than others do. Obviously, images are more eye-catching than the text — just as the sentences marked as bold are more attractive than plain text.

The human eye is a highly non-linear device, and web-users can instantly recognize edges, patterns and motions. This is why video-based advertisements are extremely annoying and distracting, but from the marketing perspective they perfectly do the job of capturing users’ attention.

Humanized.com perfectly uses the principle of focus. The only element which is directly visible to the users is the word “free” which works attractive and appealing, but still calm and purely informative. Subtle hints provide users with enough information of how to find more about the “free” product.

Focusing users’ attention to specific areas of the site with a moderate use of visual elements can help your visitors to get from point A to point B without thinking of how it actually is supposed to be done. The less question marks visitors have, the better sense of orientation they have and the more trust they can develop towards the company the site represents. In other words: the less thinking needs to happen behind the scenes, the better is the user experience which is the aim of usability in the first place.

4. Strive for feature exposure

Modern web designs are usually criticized due to their approach of guiding users with visually appealing 1-2-3-done-steps, large buttons with visual effects etc. But from the design perspective these elements actually aren’t a bad thing. On the contrary, such guidelines are extremely effective as they lead the visitors through the site content in a very simple and user-friendly way.

Dibusoft.com combines visual appeal with clear site structure. The site has 9 main navigation options which are visible at the first glance. The choice of colors might be too light, though.

Letting the user see clearly what functions are available is a fundamental principle of successful user interface design. It doesn’t really matter how this is achieved. What matters is that the content is well-understood and visitors feel comfortable with the way they interact with the system.

5. Make use of effective writing

As the Web is different from print, it’s necessary to adjust the writing style to users’ preferences and browsing habits. Promotional writing won’t be read. Long text blocks without images and keywords marked in bold or italics will be skipped. Exaggerated language will be ignored.

Talk business. Avoid cute or clever names, marketing-induced names, company-specific names, and unfamiliar technical names. For instance, if you describe a service and want users to create an account, “sign up” is better than “start now!” which is again better than “explore our services”.

Eleven2.com gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.

An optimal solution for effective writing is to

• use short and concise phrases (come to the point as quickly as possible),
• use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),
• use plain and objective language (a promotion doesn’t need to sound like advertisement; give your users some reasonable and objective reason why they should use your service or stay on your web-site)

6. Strive for simplicity

The “keep it simple”-principle (KIS) should be the primary goal of site design. Users are rarely on a site to enjoy the design; furthermore, in most cases they are looking for the information despite the design. Strive for simplicity instead of complexity.

Crcbus provides visitors with a clean and simple design. You may have no idea what the site is about as it is in Italian, however you can directly recognize the navigation, header, content area and the footer. Notice how even icons manage to communicate the information clearly. Once the icons are hovered, additional information is provided.

From the visitors’ point of view, the best site design is a pure text, without any advertisements or further content blocks matching exactly the query visitors used or the content they’ve been looking for. This is one of the reasons why a user-friendly print-version of web pages is essential for good user experience.

Finch clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.

7. Don’t be afraid of the white space

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

White space is good. Cameron.io uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.

8. Communicate effectively with a “visible language”

In his papers on effective visual communication, Aaron Marcus states three fundamental principles involved in the use of the so-called “visible language” — the content users see on a screen.

• Organize: provide the user with a clear and consistent conceptual structure. Consistency, screen layout, relationships and navigability are important concepts of organization. The same conventions and rules should be applied to all elements.
• Economize: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. Simplicity includes only the elements that are most important for communication. Clarity: all components should be designed so their meaning is not ambiguous. Distinctiveness: the important properties of the necessary elements should be distinguishable. Emphasis: the most important elements should be easily perceived.
• Communicate: match the presentation to the capabilities of the user. The user interface must keep in balance legibility, readability, typography, symbolism, multiple views, and color or texture in order to communicate successfully. Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text.

9. Conventions are our friends

Conventional design of site elements doesn’t result in a boring web site. In fact, conventions are very useful as they reduce the learning curve, the need to figure out how things work. For instance, it would be a usability nightmare if all web-sites had different visual presentation of RSS-feeds. That’s not that different from our regular life where we tend to get used to basic principles of how we organize data (folders) or do shopping (placement of products).

With conventions you can gain users’ confidence, trust, reliability and prove your credibility. Follow users’ expectations — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s Usability Alertbox for more information)

BabelFish in use: Amazon.com in Russian.

A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with Babelfish) and provide your usability testers with a task to find something in the page of different language. If conventions are well-applied, users will be able to achieve a not-too-specific objective, even if they can’t understand a word of it.

Steve Krug suggests that it’s better to innovate only when you know you really have a better idea, but take advantages of conventions when you don’t.

10. Test early, test often

This so-called TETO-principle should be applied to every web design project as usability tests often provide crucial insights into significant problems and issues related to a given layout.

Test not too late, not too little and not for the wrong reasons. In the latter case it’s necessary to understand that most design decisions are local; that means that you can’t universally answer whether some layout is better than the other one as you need to analyze it from a very specific point of view (considering requirements, stakeholders, budget etc.).

Some important points to keep in mind:

• according to Steve Krug, testing one user is 100% better than testing none and testing one user early in the project is better than testing 50 near the end. Accoring to Boehm’s first law, errors are most frequent during requirements and design activities and are the more expensive the later they are removed.
• testing is an iterative process. That means that you design something, test it, fix it and then test it again. There might be problems which haven’t been found during the first round as users were practically blocked by other problems.
• usability tests always produce useful results. Either you’ll be pointed to the problems you have or you’ll be pointed to the absence of major design flaws which is in both cases a useful insight for your project.
• according to Weinberg’s law, a developer is unsuited to test his or her code. This holds for designers as well. After you’ve worked on a site for few weeks, you can’t observe it from a fresh perspective anymore. You know how it is built and therefore you know exactly how it works — you have the wisdom independent testers and visitors of your site wouldn’t have.

Bottom line: if you want a great site, you’ve got to test.

References

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” by Gerald Weinberg
• “Designing Web Usability” by Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” by Jakob Nielsen
• “Don’t Make Me Think” by Steve Krug
• “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Design

What are the best ways to boost your position in search engines? What keywords should you use on your web-pages? And which tools should you use to improve the quality of backlinks, link popularity and Google Pagerank? We deliver answers. Here is the list of the most useful SEO-tools you might be willing to use, developing and optimizing your next web-site. Links checked: Dec/2008

Alexa

• Alexa-Ranking
  Alexa page-rank-and-rating-results

Backlink

• Anchor Text Backlink Checker
  This tool is to check your backlinks and the anchor text used in those backlinks.
• Backlink Analyzer
  Research and analyze websites for link quality. Checks for Indexed Pages, Links to Website, EDU & .GOV Links, Domain Age & Expiration, Google PageRank, Alexa Traffic Rank, DMOZ Listing
• Backlink Anchor Text Analyzer
  This tools help you determine the backlinks of your website and link text used by your backlinks to Link to your website
• Backlink Builder
  Building Quality backlinks is one of the most important factors in Search Engine Optimization…

Domain Popularity, Domain Stats Tools…

• Domain Age Tool
  This tools displays the approximate age of a website on the Internet and allows you to view how the website looked when it first started
• Domain Dossier
  Investigate domains and IP addresses
• Domain Popularity
  This tool shows you all backlinks for the given domain, including up to 10 subpages per backlinking domain, host IP and Google PageRank
• Domain Stats Tool
  This tool helps you get all kind of statistics of your competitor’s domains. The statistics include Alexa Taffic Rank, Age of the domains, Yahoo WebRank, Dmoz listings, count of backlinks and number of pages indexed in Search Engines like Google, Yahoo, Msn etc.
• HTTP / HTTPS Header Check
  This tools allow you to inspect the HTTP headers that the web server returns when requesting a URL. Works with HTTP and HTTPS URLs
• View HTTP Headers
  This little tool lets you view the HTTP headers for a HTTP request
• View HTTP Path
  This little tool lets you view the path/redirects a request takes to get fulfilled

Google Page Rank Checker, Adwords Keyword Tools,Google Banned Tools…

• Advanced Google searches
  Use this tool to search google in many special ways. A useful resource for search engine optimization (especially keyword research) among other things
• Check Google Pagerank
  Now you can check the Google PageRank of any web page without installing the Google toolbar
• Check PageRank by Google data center
  With this tool you can check the PageRank from different data centers
• Free Google Adsense Keywords & YPN Keywords Search Tool
  With the ability to search a growing database of tens of thousands of high-dollar Adsense keywords, Iotaweb allows publishers to find the keywords and key phrases that will allow them to focus their content to monetize their site most effectively.
• Google Adwords Keyword Tool
  Keyword tool from Google that provides Specific and Similar keywords.
• Google Banned Tool
  This tool uses two methods to check to see if a URL you enter is in the Google database. Its a great way to check to see if you have been banned by Google for various reasons….
• Google Keyword Ranking Tool
  Search with list of keywords from differnet Google search sites
• Google Page Rank Checker
  Instantly check the PageRank of any website or web page
• Google Page Rank Checker
  A simple tool that checks and your PageRank so you can display it on your website
• Google Sets
  Automatically create sets of items from a few examples.
• PageRank Authenticity Check
  This tool shows you the PageRank of a given domain. Also the PageRank will be checked of authenticity
• Page Rank Tool
  Our PageRank Tool will query and return the Google PageRank values for submitted URL from various Google datacenters…
• Visual PageRank
  The Visual PageRank – Tool shows all links and there corresponding PageRanks

Keyword Analysis Tool, Keyword Density, Keyword Suggestion Tools…

• McDar Keyword Analysis Tool
  Enter URL and keyword, it will display Pagerank and Back links pages for the Top 10 websites.
• Keyword Density
  This tool shows you how often appears which word in content of given domain
• Keyword Density
  The keyword density tool is useful for helping webmasters and SEOs achieve their optimum keyword density for a set of key terms.
• Keyword Density Checker
  Keyword Density is the percentage of occurrence of your keywords to the text in the rest of your webpage. This tool will crawl the specified URL, extract text as a search engine would, remove common stop words and Analyze the density of the keywords.
• Keyword Difficulty Tool
  The keyword difficulty tool is used to analyze the competitive landscape of a particular search term or phrase, this tool issues a percentage score and provides a detailed analysis of the top ranking sites at Google and Yahoo…
• KwMap.net
  A Keyword Map For the Whole Internet

Link Popularity Check, Site Link Analyzer, Link Value…

• Deep Link Ratio Tool
  This tool was created to analyze how the deep link ratio of a site affects its rank in search engines. We can use this tool to compare the DLRs for the best ranking sites for a search phrase.
• Link Popularity Check
  Link popularity check is one of the best ways to quantifiably and independently measure your website’s online awareness and overall visibility…
• Link Popularity Checker
  The Link Popularity Checker tells you how many websites are linking to yours…
• LINK VALIDATION SPIDER
  Free Online Broken Link Checker
• Link Price Calculator
  This tools will help you determine the approximate amount you should be paying (or charging) per month for a text link (ad) from each and every page of the specified website
• Link Value
  This tool calculates the link value per month of a given website.
• Reciprocal Link Check
  This tool helps you ensure that your link partners are linking back to your website. It also determines the anchor text used by your link partners to link to your website.
• Site Link Analyzer
  This tool will analyze a given web page and return a table of data containing columns of outbound links and their associated anchor text…
• The Link Reputation Measurement Tool
  Reveals backlinks pointing to your target url along with the following: Link Survey – Link Reputation Score – Text used in links pointing to you – Alexa traffic analysis for the site corresponding to each backlink
• Outbound Links
  This tool shows every outgoing link from the given domain. Separated in external and internal links

Meta Tag Generators

• Meta Tag Generator
  Our Meta Tag Generator will read the page you specify, remove common words from it, and pick the most used words on the page. It will then generate a Meta Keywords tag using the words it has found…
• Meta Tag Generator
  Use this tool to generate a search engine friendly Head Tag for your web site
• Title & Meta Tags Generator
  This code generator will build the title and meta tags for your site to help improve your website’s search engine ranking using our Meta Tag Generator

Miscellaneous Tools

• Directory Submission Manager
  Use this free tool to track your submissions to various web directories….
• Copyscape
  Search for copies of your page on the Web
• Site Analysis including Link Popularity
  This tool generates a complete site analysis e.g. amount of backlinks, indexed sites, Google PageRank and also if your domain is listed in DMOZ and Yahoo directory
• Sitemap Generator
  Create your Google Sitemap Online
• Similar Page Checker
  Search Engines are known to penalize websites that contain Duplicate / Similar content. Your content could be similar to other websites on the Internet, or pages from within your own website could be similar to each other. This tool allows you to determine the percentage of similarity between two pages
• Speedtester
  This tool shows the duration of a given website. This value can be used for showing how long a website take to load and if it is better to optimize the website or change a (slow) ISP.
• mod_rewrite RewriteRule Generator
  Our mod_rewrite RewriteRule generator will take a dynamic url given to it, and generate the correct syntax to place in a .htaccess file to allow the url to be rewritten in a spiderable format
• URL Rewrite (mod_rewrite)
  With this tool you can generate dynamic urls to search engine friendly urls..
• URL Rewriting Tool
  Create Search Engine Friendly URLs
• User Agent Cloaking Detector
  This tool simulates the Googlebot (based on User-Agent) to detect cloaked content
• What is Hosted on that IP
  This little tool lets you view the virtual hosts on a particular IP

Search Engine Position Checker, Spider Simulator, Ranking Report, SERP Tracker

• Google vs Yahoo Graph
  This tool looks at the results from Yahoo and Google, finds the similarities and then gives you a graphical display of what results are in both search engines
• Search Engine Position Checker
  The Search Engine Position Checker tool will automatically query the search engines you specify and check if your URL appears in the first 50 results for your chosen keywords….
• Search Engine Spider Simulator
  With this tool you see all informations a search engine spider receive from a website.
• Marketleap Search Engine Verification Tool
  Our verification tool checks to see if your site is in the top three pages of a search engine result for a specific keyword
• Number of pages indexed
  This tool will generate a report showing how many pages of your website has been indexed by the search engines so far. It supports all major search engines: Google, Yahoo, MSN, Alltheweb, Hotbot and AltaVista.
• Search Engine Ranking Report
  Input key phrase list get Google rankings

SEO Analyzer, Scanner

• Free SEO Tools
  SEOToolSet
• Cool SEO Tool!
  This internet marketing tool checks the top 10 sites that rank in Google. After that, it checks to see how those 10 sites rank in Yahoo and in MSN….
• SEO Analyzer
  The SEO Analyzer is a FREE tool that uses a sophisticated algorithm that detects how optimized your web design is for search engines

Robots.txt Tools

• Robots Txt Generator
  Use this tool to generate a simple robots file for your website…
• Robots.txt syntax checker
  This robots.txt syntax checker checks the contents of a site’s robots.txt…