Another great article from smashing magazine

By Paul Boag

We all make mistakes running our websites. However, the nature of those mistakes varies depending on the size of your company. As your organization grows, the mistakes change. This post addresses common mistakes among large organizations.

Most of the clients I work with are large organizations: universities, large charities, public sector institutions and large companies. Over the last 7 years, I have noticed certain recurring misconceptions among these organizations. This post aims to dispel these illusions and encourage people to face the harsh reality.

The problem is that if you are reading this post, you are probably already aware of these things. But hopefully this article will be helpful to you as you convince others within your organization. In any case, here are our 10 harsh truths about websites of large organizations.

1. You Need A Separate Web Division

In many organizations, the website is managed by either the marketing or IT department. However, this inevitably leads to a turf war, with the website becoming the victim of internal politics.

In reality, pursuing a Web strategy is not particularly suited to either group. IT may be excellent at rolling out complex systems, but it is not suited to developing a friendly user experience or establishing an online brand.

Zeldman urges organisations to create a separate web division.

Marketing, on the other hand, is little better. As Jeffrey Zeldman puts it in his article Let there be Web divisions:

The Web is a conversation. Marketing, by contrast, is a monologue… And then there’s all that messy business with semantic markup, CSS, unobtrusive scripting, card-sorting exercises, HTML run-throughs, involving users in accessibility, and the rest of the skills and experience that don’t fall under Marketing’s purview.

Instead, the website should be managed by a single unified team. Again, Zeldman sums it up when he writes:

Put them in a division that recognizes that your website is not a bastard of your brochures, nor a natural outgrowth of your group calendar. Let there be Web divisions.

2. Managing Your Website Is A Full-Time Job

Not only is the website often split between marketing and IT, it is also usually under-resourced. Instead of there being a dedicated Web team, those responsible for the website are often expected to run it alongside their “day job.” When a Web team is in place, it is often over-stretched. The vast majority of its time is spent on day-to-day maintenance rather than longer-term strategic thinking.

This situation is further aggravated by the fact that the people hired to “maintain” the website are junior members of the staff. They do not have the experience or authority to push the website forward. It is time for organizations to seriously invest in their websites by hiring full-time senior Web managers to move their Web strategies forward.

3. Periodic Redesign Is Not Enough

Because corporate websites are under-resourced, they are often neglected for long periods of time. They slowly become out of date with their content, design and technology.

Eventually, the website becomes such an embarrassment that management steps in and demands that it be sorted. This inevitably leads to a complete redesign at considerable expense. As I point out in the Website Owners Manual, this a flawed approach. It is a waste of money because when the old website is replaced, the investment put into it is lost, too. It is also tough on finances, with a large expenditure having to be made every few years.

Cameron Moll encourages web designers to realign their website rather than redesign.

A better way is continual investment in your website, allowing it to evolve over time. Not only is this less wasteful, it is also better for users, as pointed out by Cameron Moll in his post Good Designers Redesign, Great Designers Realign.

4. Your Website Cannot Appeal To Everyone

One of the first questions I ask a client is, “Who is your target audience?” I am regularly shocked at the length of the reply. Too often, it includes a long and detailed list of diverse people. Inevitably, my next question is, “Which of those many demographic groups are most important?” Depressingly, the answer is usually that they are all equally important.

The harsh truth is that if you build a website for everyone, it will appeal to no one. It is important to be extremely focused about your audience and cater your design and content to it. Does this mean you should ignore your other users? Not at all. Your website should be accessible by all and not offend or exclude anybody. However, the website does need to be primarily aimed at a clearly defined audience.

5. You Are Wasting Money On Social Networking

I find it encouraging that website managers increasingly recognize that a Web strategy is more than running a website. They are beginning to use tools such as Twitter, Facebook and YouTube to increase their reach and engage with new audiences. However, although they are using these tools, too often they do so ineffectively. Tweeting on a corporate account or posting sales demonstrations on YouTube misses the essence of social networking.

Microsoft dramatically improved its image amoung the development community by allowing Microsoft staff to speak out via the Channel 9 website.

Social networking is about people engaging with people. Individuals do not want to build relationships with brands and corporations. They want to talk to other people. Too many organizations throw millions into Facebook apps and viral videos when they could spend that money on engaging with people in a transparent and open away.

Instead of creating a corporate Twitter account or indeed even a corporate blog, encourage your employees to start Tweeting and blogging themselves. Provide guidelines on acceptable behavior and what tools they need to start engaging directly with the community connected to your products and services. This demonstrates not only your commitment to the community but also the human side of your business.

6. Your Website Is Not All About You

Where some website managers want their website to appeal to everybody, others want it to appeal to themselves and their colleagues. A surprising number of organizations ignore their users entirely and base their websites entirely on an organizational perspective. This typically manifests itself in inappropriate design that caters to the managing director’s personal preferences and contains content full of jargon.

A website should not pander to the preferences of staff but should rather meet the needs of its users. Too many designs are rejected because the boss “doesn’t like green.” Likewise, too much website copy contains acronyms and terms used only within the organization.

7. You’re Not Getting Value From Your Web Team

Whether they have an in-house Web team or use an external agency, many organizations fail to get the most from their Web designers. Web designers are much more than pixel pushers. They have a wealth of knowledge about the Web and how users interact with it. They also understand design techniques, including grid systems, white space, color theory and much more.

Treating designers as pixel pushers wastes their design experience: post from Twitter complaining about being a pixel pusher

It is therefore wasteful to micro-manage by asking them to “make the logo bigger” or to “move that 3 pixels to the left.” By doing so, you are reducing their role to that of a software operator and wasting the wealth of experience they bring.

If you want to get the maximum return on your Web team, present it with problems, not solutions. For example, if you’re targeting your website at teenage girls, and the designer goes for corporate blue, suggest that your audience might not respond well to that color. Do not tell him or her to change it to pink. This way, the designer has the freedom to find a solution that may even be better than your choice. You allow your designer to solve the problem you have presented.

8. Design By Committee Brings Death

The ultimate symbol of a large organization’s approach to website management is the committee. A committee is often formed to tackle the website because internal politics demand that everybody has a say and all considerations be taken into account. To say that all committees are a bad idea is naive, and to suggest that a large corporate website could be developed without consultation is fanciful. However, when it comes to design, committees are often the kiss of death.

Design by committee leads to design on the fly.

Design is subjective. The way we respond to a design can be influenced by culture, gender, age, childhood experience and even physical conditions (such as color blindness). What one person considers great design could be hated by another. This is why it is so important that design decisions be informed by user testing rather than personal experience. Unfortunately, this approach is rarely taken when a committee is involved in design decisions.

Instead, designing by committee becomes about compromise. Because committee members have different opinions about the design, they look for ways to find common ground. One person hates the blue color scheme, while another loves it. This leads to designing on the fly, with the committee instructing the designer to “try a different blue” in the hopes of finding middle ground. Unfortunately, this leads only to bland design that neither appeals to nor excites anyone.

9. A CMS Is Not A Silver Bullet

Many of the clients I work with have amazingly unrealistic expectations of CMS (content management systems). Those without one think it will solve all of their content woes, while those who have one moan about it because it hasn’t!

It is certainly true that a CMS can bring a lot of benefits. These include:

• reducing the technical barriers of adding content,
• allowing more people to add and edit content,
• facilitating faster updates,
• and allowing greater control.

However, many CMS are less flexible than their owners would like. They fail to meet the changing demands of the websites they manage. Website managers also complain that their CMS is hard to use. However, in many cases, this is because those using it have not been adequately trained or are not using it regularly enough.

Finally, a CMS may allow content to be easily updated, but it does not ensure that content will be updated or even that the quality of content will be acceptable. Many CMS-based websites still have out-of-date content or poorly written copy. This is because internal processes have not been put in place to support the content contributors.

If you look to a CMS to solve your website maintenance issues, you will be disappointed.

10. You Have Too Much Content

Part of the problem with content maintenance on large corporate websites is that there is too much content in the first place. Most of these websites have “evolved” over years, with more and more content having been added. At no stage has anybody reviewed the content and asked what could be taken away.

Many website managers fill their website with copy that nobody will read. This happens because of:

• A fear of missing something: by putting everything online, they believe users will be able to find whatever they want. Unfortunately, with so much information available, it is hard to find anything.
• A fear users will not understand: whether from a lack of confidence in their website or in their audience, they feel the need to provide endless instruction to users. Unfortunately, users never read this copy.
• A desperate desire to convince: they are desperate to sell their product or communicate their message, and so they bloat the text with sales copy that actually conveys little valuable information.

Steve Krug, in his book Don’t Make Me Think, encourages website managers to “Get rid of half the words on each page, then get rid of half of what’s left.” This will reduce the noise level on each page and make the useful content more prominent.

Conclusions

Large organizations do a lot right in running their websites. However, they also face some unique challenges that can lead to painful mistakes. Resolving these problems means accepting that mistakes have been made, overcoming internal politics and changing the way you control your brand. Doing so will give you a significant competitive advantage and allow your Web strategy to become more effective over the long term.

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.

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.