<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Just another day...</title>
	<atom:link href="http://www.adambaker.co.uk/blog/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://www.adambaker.co.uk/blog</link>
	<description>My blog</description>
	<lastBuildDate>Wed, 11 Feb 2009 13:34:18 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>+10 Harsh Truths About Corporate Websites</title>
		<link>http://www.adambaker.co.uk/blog/?p=60</link>
		<comments>http://www.adambaker.co.uk/blog/?p=60#comments</comments>
		<pubDate>Wed, 11 Feb 2009 13:19:18 +0000</pubDate>
		<dc:creator>me</dc:creator>
				<category><![CDATA[interface design]]></category>
		<category><![CDATA[portfolio]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=60</guid>
		<description><![CDATA[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....]]></description>
			<content:encoded><![CDATA[<p>Another great article from smashing magazine</p>
<p><em>By Paul Boag</em></p>
<p>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.</p>
<p>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.</p>
<p>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 <strong>10 harsh truths about websites of large organizations</strong>.</p>
<h3>1. You Need A Separate Web Division</h3>
<p>In many organizations, the website is <strong>managed by either the marketing or IT department</strong>. However, this inevitably leads to a turf war, with the website becoming the victim of internal politics.</p>
<p>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.</p>
<p><img title="Zeldman urges organisations to create a separate web division" src="http://www.boagworld.com/blogImages/Zeldman-20090123-095155.jpg" alt="Screenshot of Zeldman's website" /><br />
<em><a href="http://www.zeldman.com/">Zeldman</a> urges organisations to create a separate web division.</em></p>
<p>Marketing, on the other hand, is little better. As Jeffrey Zeldman puts it in his article <a href="http://www.zeldman.com/2007/07/02/let-there-be-web-divisions/">Let there be Web divisions</a>:</p>
<blockquote><p>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.</p></blockquote>
<p>Instead, the website should be managed by a single unified team. Again, Zeldman sums it up when he writes:</p>
<blockquote><p>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.</p></blockquote>
<h3>2. Managing Your Website Is A Full-Time Job</h3>
<p>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 <em>is</em> 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.</p>
<p>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 <strong>hiring full-time senior Web managers</strong> to move their Web strategies forward.</p>
<h3>3. Periodic Redesign Is Not Enough</h3>
<p>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.</p>
<p>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 <a href="http://boagworld.com/websiteownersmanual">Website Owners Manual</a>, 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.</p>
<p><img title="Cameron Moll encourages web designers to realign their website rather than redesign" src="http://www.boagworld.com/blogImages/realign-20090123-103327.jpg" alt="Screenshot of Cameron Molls Article" /><br />
<em> Cameron Moll <a href="http://www.alistapart.com/articles/redesignrealign">encourages</a> web designers to realign their website rather than redesign</em>.</p>
<p>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 <a href="http://www.alistapart.com/articles/redesignrealign">Good Designers Redesign, Great Designers Realign</a>.</p>
<h3>4. Your Website Cannot Appeal To Everyone</h3>
<p>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.</p>
<p>The harsh truth is that <strong>if you build a website for everyone, it will appeal to no one</strong>. 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.</p>
<h3>5. You Are Wasting Money On Social Networking</h3>
<p>I find it encouraging that website managers increasingly recognize that a <strong>Web strategy is more than running a website</strong>. 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.</p>
<p><img title="Microsoft dramatically improved its image amoung the development community by allowing Microsoft staff to speak out via the Channel 9 website." src="http://www.boagworld.com/blogImages/Channel9-20090125-173053.jpg" alt="Screenshot of Microsoft's Channel 9 website" /><br />
<em>Microsoft dramatically improved its image amoung the development community by allowing Microsoft staff to speak out via the Channel 9 website.</em></p>
<p>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.</p>
<p>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.</p>
<h3>6. Your Website Is Not All About You</h3>
<p>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 <strong>ignore their users entirely</strong> 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.</p>
<p>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.</p>
<h3>7. You’re Not Getting Value From Your Web Team</h3>
<p>Whether they have an in-house Web team or use an external agency, many organizations <strong>fail to get the most from their Web designers</strong>. 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.</p>
<p><img title="Treating designers as pixel pushers wastes their design experience" src="http://www.boagworld.com/blogImages/pixelPusher-20090125-150415.jpg" alt="Post from Twitter complaining about being a pixel pusher" /><br />
<em> Treating designers as pixel pushers wastes their design experience: post from Twitter complaining about being a pixel pusher</em></p>
<p>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.</p>
<p>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.</p>
<h3>8. Design By Committee Brings Death</h3>
<p>The ultimate symbol of a large organization’s approach to website management is the <strong>committee</strong>. 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.</p>
<p><img class="imgLeft" title="Design by committee leads to design on the fly." src="http://www.boagworld.com/blogImages/committee-20090124-163543.jpg" alt="Illustration showing why design by committee fails" /><br />
<em>Design by committee leads to design on the fly.</em></p>
<p>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.</p>
<p>Instead, <strong>designing by committee becomes about compromise</strong>. 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.</p>
<h3>9. A CMS Is Not A Silver Bullet</h3>
<p>Many of the clients I work with have amazingly <strong>unrealistic expectations of CMS</strong> (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!</p>
<p>It is certainly true that a CMS can bring a lot of benefits. These include:</p>
<ul>
<li>reducing the technical barriers of adding content,</li>
<li>allowing more people to add and edit content,</li>
<li>facilitating faster updates,</li>
<li>and allowing greater control.</li>
</ul>
<p>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.</p>
<p>Finally, a CMS may allow content to be easily updated, but it does not ensure that content <em>will</em> 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.</p>
<p>If you look to a CMS to solve your website maintenance issues, you will be disappointed.</p>
<h3>10. You Have Too Much Content</h3>
<p>Part of the problem with content maintenance on large corporate websites is that there is <strong>too much content</strong> 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.</p>
<p>Many website managers fill their website with copy that nobody will read. This happens because of:</p>
<ul>
<li><strong>A fear of missing something</strong>: 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.</li>
<li><strong>A fear users will not understand</strong>: 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.</li>
<li><strong>A desperate desire to convince</strong>: 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.</li>
</ul>
<p>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.</p>
<h3>Conclusions</h3>
<p>Large organizations do a lot right in running their websites. However, they also face some <strong>unique challenges</strong> 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.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=60</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>+Foot Locker Nike’s Tuned 10</title>
		<link>http://www.adambaker.co.uk/blog/?p=55</link>
		<comments>http://www.adambaker.co.uk/blog/?p=55#comments</comments>
		<pubDate>Tue, 30 Dec 2008 17:28:20 +0000</pubDate>
		<dc:creator>me</dc:creator>
				<category><![CDATA[interface design]]></category>
		<category><![CDATA[papervision]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=55</guid>
		<description><![CDATA[Mook, the team behind the Nitro Group website, brings us a new interactive experience for Foot Locker.]]></description>
			<content:encoded><![CDATA[<p>Mook, the team behind the Nitro Group website, brings us a new <a title="Link opens new window" href="http://www.footlocker.eu/evolve/#/en/" target="_blank">interactive experience </a>for Foot Locker.</p>
<p><strong>Robert Sargent</strong> tells us all about it:</p>
<blockquote><p>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.</p>
<p>Much of what you now see on the website came about after some R&amp;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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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!</p>
<p>Overall, we’ve been highly impressed with the PV3D engine. The initial R&amp;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.</p></blockquote>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=55</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>+New images in my portfolio</title>
		<link>http://www.adambaker.co.uk/blog/?p=36</link>
		<comments>http://www.adambaker.co.uk/blog/?p=36#comments</comments>
		<pubDate>Mon, 29 Dec 2008 00:31:04 +0000</pubDate>
		<dc:creator>me</dc:creator>
				<category><![CDATA[portfolio]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=36</guid>
		<description><![CDATA[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...
]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s been a while, but i&#8217;ve added some more images from my archives.</p>
<p>Most of them are experiments with lighting and different render settings in Maya and Lightwave&#8230;</p>
<p>View them in my <a title="get the goods here..." href="http://www.adambaker.co.uk/personal/-3d-various/" target="_parent">portfolio</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=36</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>+Are Accessibility Statements Useful?</title>
		<link>http://www.adambaker.co.uk/blog/?p=29</link>
		<comments>http://www.adambaker.co.uk/blog/?p=29#comments</comments>
		<pubDate>Tue, 23 Dec 2008 23:32:51 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[Accessibility]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[statements]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=29</guid>
		<description><![CDATA[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. 

But are they really that useful?...]]></description>
			<content:encoded><![CDATA[<h2>What is an accessibility statement?</h2>
<p>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.</p>
<p>It is not compulsory or a requirement of <a href="http://www.section508.gov/index.cfm?FuseAction=Content&amp;ID=12#Web">Section 508</a> or the <a href="http://www.w3.org/TR/WCAG10/full-checklist.html">W3C Web Content Accessibility Guidelines</a> 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 <a href="http://www.cabinetoffice.gov.uk/government_it/web_guidelines/past_consultations.aspx">Delivering Inclusive Websites Policy</a> and the recent <a href="http://www.equalityhumanrights.com/en/publicationsandresources/Disability/Pages/Websiteaccessibilityguidance.aspx">PAS 78 Guidance Document</a>.</p>
<p>Over the years we have seen some excellent articles published on the topic of how to write an accessibility statement. <a href="http://diveintomark.org/archives/2002/07/19/day_30_creating_an_accessibility_statement">Mark Pilgrim</a> and <a href="http://juicystudio.com/article/writing-a-good-accessibility-statement.php">Gez Lemon</a> have, for me, written the most informative articles in this area, and both are worthy of a read.</p>
<p>More recently, however, there have been a number of articles written which question the usefulness of accessibility statements. The most notable of these, by <a href="http://www.accessify.com/features/articles/accessibility-statements-effectiveness/">Rosie Sherry</a> and <a href="http://www.standards-schmandards.com/2006/just-say-no/">Peter Krantz</a>, conclude that accessibility statements are not useful and should therefore be avoided. <span class="pullquote">Reading these articles and associated comments has led me to investigate why the usefulness of accessibility statements is being questioned.</span> 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.</p>
<h2>Benefits of providing an accessibility statement</h2>
<h3>To demonstrate how to use accessibility features provided</h3>
<p>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 <a href="http://www.browsealoud.com/page.asp?pg_id=80002&amp;tile=UK">Browsealoud</a> or <a href="http://www.textic.com/">Textic</a>. 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 <a href="http://www.bbc.co.uk/accessibility/">My Web My Way website</a>.</p>
<h3>To detail known barriers</h3>
<p>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.</p>
<h3>To provide a point of contact</h3>
<p>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.</p>
<h2>Common issues with accessibility statements</h2>
<h3>They can be difficult to locate</h3>
<p>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.</p>
<p>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, <a href="http://www.dmag.org.uk/resources/design_articles/usableaccessibilityadvice.asp">Evaluating the Usability of Online Accessibility Information</a>, 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.</p>
<h3>They can be too technical</h3>
<p>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.</p>
<p>Typical examples include:</p>
<ol>
<li>Our website conforms to the W3C Web Content Accessibility Guidelines Priority 1 and 2.</li>
<li>Our website complies with the requirements of Section 508.</li>
<li>Our HTML is valid and conforms to XHTML 1.0 Strict.</li>
<li>All pages on this website validate to CSS2.</li>
</ol>
<h3>They contain “what” rather than “how”</h3>
<p>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:</p>
<ol>
<li>All text sizes are relative.</li>
<li>All images have an alt attribute.</li>
<li>Style sheets have been used to separate presentation from content.</li>
<li>Headings are semantically marked up.</li>
<li>Tables have been correctly marked up with headings.</li>
<li>Link text is unique which makes it make sense when taken out of context.</li>
</ol>
<p>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?</p>
<h3>They can be overlooked</h3>
<p>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 <a href="http://www.dmag.org.uk/resources/design_articles/usableaccessibilityadvice.asp">Digital Media Access Group study</a> concluded that many of the participants felt the term ‘accessibility’was vague or confusing and should be replaced by an alternative term.</p>
<h2>Are accessibility statements useful?</h2>
<p>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.</p>
<p>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.</p>
<p>The following principles should be considered when writing or reviewing an existing accessibility statement to help improve its value to website visitors:</p>
<ol>
<li>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.</li>
<li>Provide rich content that explains how to use the accessibility features provided, rather than just listing the features themselves.</li>
<li>Separate the content into sections and provide headings for each section. This will aid the readability and navigation of the information being provided.</li>
<li>Provide contact information in various formats so that website visitors can directly contact the team responsible for accessibility queries.</li>
<li>Actively promote feedback from website visitors. Use comments from website visitors to continually improve the website and the content within the accessibility statement.</li>
<li>Provide a known barriers section which details inaccessible areas of the website along with alternative ways of obtaining the information or services.</li>
<li>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.</li>
</ol>
<p>For an example of these principles in practice, please visit Agoo IT’s <a href="http://www.agooit.co.uk/help.html">‘Help using this website’</a> page.</p>
<h2>Is there a need for standardization?</h2>
<p>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.</p>
<p>However, before standardization can even be considered, the following points would need to be discussed further:</p>
<ol>
<li>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?</li>
<li>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.</li>
<li>Where should the accessibility link be located so that it is consistent throughout all websites, and is clearly visible and audible to website visitors?</li>
</ol>
<h2>Conclusion</h2>
<p>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.</p>
<p>I look forward to your comments and discussions on this topic.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=29</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>+Online Advertising And Its Impact On Web Design</title>
		<link>http://www.adambaker.co.uk/blog/?p=21</link>
		<comments>http://www.adambaker.co.uk/blog/?p=21#comments</comments>
		<pubDate>Mon, 22 Dec 2008 22:41:00 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[web design]]></category>
		<category><![CDATA[advertising]]></category>
		<category><![CDATA[money]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=21</guid>
		<description><![CDATA[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.]]></description>
			<content:encoded><![CDATA[<p>In recent years, advertising has become a <strong>major revenue source</strong> 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.</p>
<p>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.</p>
<p>While advertisements are hardly the primary concern of Web designers in general, not accounting for them will result in a very <strong>awkward layout</strong> 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.</p>
<p>This article from <a title="Link opens new window" href="http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/" target="_blank">www.smashingmagazine.com</a> explains it all&#8230;</p>
<p>Ads on <a href="http://www.rawstory.com/">The Raw Story</a> seem to be squeezed in wherever possible, to the detriment of the content.</p>
<p><a href="http://www.rawstory.com/"><img src="http://88.198.60.17/images/online-advertising/raw.jpg" alt="Screenshot" width="475" height="671" /></a></p>
<h3>Starting with the Basics</h3>
<p>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.</p>
<h4>Why do advertisers pay for ads?</h4>
<p>Obviously, advertisers buy ads to gain <strong>exposure</strong> and improve their bottom line. The goals vary from one campaign to the next. Some may be primarily concerned with <strong>brand recognition</strong> and general exposure, while others are only concerned with <strong>sales</strong> 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.</p>
<p>Web designers can have some impact on this issue by their <strong>placement</strong> 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.</p>
<p><a href="http://last.fm/"><img src="http://78.46.108.98/images/online-advertising/lastfm.jpg" alt="Screenshot" width="475" height="273" /></a></p>
<h3>What are advertisers paying for?</h3>
<p>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.</p>
<p>Keeping the desires of <strong>advertisers</strong> 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.</p>
<h3>Why do websites or businesses publish ads?</h3>
<p>Advertising can be very lucrative for websites with a large volume of <strong>traffic</strong>. 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.</p>
<p>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.</p>
<p>In most cases, ad revenue is critical to the success of the business. For this reason, it must be a <strong>priority during the design process</strong>. 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.</p>
<p><a href="http://problogger.net/"><img src="http://88.198.60.17/images/online-advertising/problogger.jpg" alt="Screenshot" width="475" height="432" /></a></p>
<h3>Why are Advertisements an Important Part of Web Design?</h3>
<p>For website owners and businesses that <strong>rely on advertising income</strong> 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.</p>
<p>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 <strong>priority</strong>. Likewise, website businesses that require ad revenue cannot compromise on advertising space.</p>
<p>Advertisements are also a significant part of the design process because of the <strong>impact on visitors</strong>. 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.</p>
<h3>The Conundrum of Online Ads</h3>
<p>While website businesses that sell advertisements want and need those ads to be noticed and appreciated by visitors, a <strong>delicate balance</strong> 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.</p>
<p>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 <strong>minimal negative impact</strong> 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.</p>
<p>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.</p>
<h3>How Do Advertisements Impact the Design of a Website?</h3>
<p>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 <strong>does not disrupt</strong> the flow of content or information and that gives the ads a specific and strategic location.</p>
<p>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.</p>
<h3>Layout and Spacing</h3>
<p>Advertisements can easily take up <strong>big chunks</strong> 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.</p>
<p>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.</p>
<p><a href="http://cnn.com/">CNN.com</a> contains a few advertisements spread throughout the website.</p>
<p><a href="http://cnn.com/"><img src="http://78.46.108.98/images/online-advertising/cnn.jpg" alt="Screenshot" width="475" height="931" /></a></p>
<p>In contrast to news websites, many blogs keep banner ads contained within a <strong>designated area</strong> 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.</p>
<p><a href="http://www.bloggingtips.com/">Blogging Tips</a> 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.</p>
<p><a href="http://www.bloggingtips.com/"><img src="http://88.198.60.17/images/online-advertising/bt.jpg" alt="Screenshot" width="475" height="582" /></a></p>
<p>Because ads are often used in sidebars of both blogs and news websites, one major consideration in designing the layout is the <strong>width</strong> 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.</p>
<p>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 <strong>highest ad price</strong> 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.</p>
<p><a href="http://css-tricks.com/">CSS Tricks</a> 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.</p>
<p><a href="http://css-tricks.com/"><img src="http://78.46.108.98/images/online-advertising/csstricks.jpg" alt="Screenshot" width="475" height="310" /></a></p>
<h4>Colors</h4>
<p>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 <strong>consider the possibilities</strong> 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.</p>
<p>Some websites that display a lot of banners will need a <strong>muted color scheme</strong> 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.</p>
<h3>Flow</h3>
<p>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.</p>
<p>Those who want some ad revenue but with <strong>minimal impact</strong> 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.</p>
<p>The <a href="http://www.nytimes.com/2008/12/02/business/02markets.html?_r=2&amp;hp">New York Times</a> 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.</p>
<p><a href="http://www.nytimes.com/2008/12/02/business/02markets.html?_r=2&amp;hp"><img src="http://88.198.60.17/images/online-advertising/nytimes.jpg" alt="Screenshot" width="475" height="613" /></a></p>
<h3>What is the Designer’s Responsibility with Advertisements?</h3>
<p><strong>1. To understand the level of priority of advertising revenue</strong>.<br />
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 <strong>critical</strong> 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.</p>
<p>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 <strong>client</strong> in this area. Starting the design process with the right perspective and being on the same page as the client is critical.</p>
<p><strong>2. To design a website that meets the needs of the clients</strong>.<br />
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.</p>
<p><strong>3. To design an attractive and usable website that includes ad space</strong>.<br />
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.</p>
<h3>Trends in Ads and Design</h3>
<p>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:</p>
<p><strong>Header ads</strong>.<br />
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.</p>
<p>The <a href="http://www.washingtonpost.com/wp-dyn/content/article/2008/11/30/AR2008113002217.html">Washington Post</a> 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.</p>
<p><a href="http://www.washingtonpost.com/wp-dyn/content/article/2008/11/30/AR2008113002217.html"><img src="http://78.46.108.98/images/online-advertising/washpost.jpg" alt="Screenshot" width="475" height="332" /></a></p>
<p><a href="http://lifehacker.com/">Lifehacker</a>, like other websites in the <a href="http://gawker.com/">Gawker</a> 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.</p>
<p><a href="http://lifehacker.com/"><img src="http://88.198.60.17/images/online-advertising/lifehacker.jpg" alt="Screenshot" width="475" height="300" /></a></p>
<p><strong>Ads above all content</strong>.<br />
Instead of having an ad inside, or perhaps beside, the header, some websites place ads <strong>completely above everything else</strong> 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.</p>
<p><a href="http://techcrunch.com/">TechCrunch</a> uses a 720 x 90 banner above its header. Only the green border of the body is above this banner.</p>
<p><a href="http://techcrunch.com/"><img src="http://78.46.108.98/images/online-advertising/techcrunch-head.jpg" alt="Screenshot" width="475" height="292" /></a></p>
<p><a href="http://www.latimes.com/">The L.A. Times</a> also includes a banner above all content, but not on the home page.</p>
<p><a href="http://www.latimes.com/"><img src="http://88.198.60.17/images/online-advertising/la.jpg" alt="Screenshot" width="475" height="302" /></a></p>
<p><a href="http://monster.com/">Monster</a> places a 728 x 90 banner at the very top of its job search page.</p>
<p><a href="http://monster.com/"><img src="http://78.46.108.98/images/online-advertising/monster.jpg" alt="Screenshot" width="475" height="254" /></a></p>
<p><strong>More ads on secondary pages than on home page</strong>.<br />
Some websites, such as the L.A. Times just mentioned, keep the home page more welcoming to visitors and more <strong>user-friendly</strong> 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.</p>
<p>The <a href="http://www.rd.com/">Reader’s Digest home page</a> avoids any ads high on the page.</p>
<p><a href="http://www.rd.com/"><img src="http://88.198.60.17/images/online-advertising/rd-home.jpg" alt="Screenshot" width="475" height="579" /></a></p>
<p>However, pages of <a href="http://www.rd.com/your-america-inspiring-people-and-stories/a-classroom-of-visiting-scholars/article108212.html">individual articles</a> 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.</p>
<p><a href="http://www.rd.com/your-america-inspiring-people-and-stories/a-classroom-of-visiting-scholars/article108212.html"><img src="http://78.46.108.98/images/online-advertising/rd-post.jpg" alt="Screenshot" width="475" height="507" /></a></p>
<p>Like Reader’s Digest, <a href="http://www.time.com/time/">Time</a> also uses an almost ad-free home page.</p>
<p><a href="http://www.time.com/time/"><img src="http://88.198.60.17/images/online-advertising/time-home.jpg" alt="Screenshot" width="475" height="336" /></a></p>
<p>Pages of <a href="http://www.time.com/time/world/article/0,8599,1862864,00.html">individual articles</a> include a 728 x 90 header banner and a 300 x 250 banner at the top of the sidebar.</p>
<p><a href="http://www.time.com/time/world/article/0,8599,1862864,00.html"><img src="http://78.46.108.98/images/online-advertising/time-post.jpg" alt="Screenshot" width="475" height="330" /></a></p>
<p><strong>Common banner sizes</strong>.<br />
As you browse a number of websites, you notice that banners come in all different proportions, but most of them are <strong>standard sizes</strong>. The Interactive Advertising Bureau has established <a href="http://www.iab.net/iab_products_and_industry_services/1421/1443/1452">standard sizes</a> 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.</p>
<p>Blogs commonly use 125 x 125 banners, although many other sizes are used as well. <a href="http://dailyblogtips.com/">Daily Blog Tips</a> 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.</p>
<p><a href="http://dailyblogtips.com/"><img src="http://88.198.60.17/images/online-advertising/dbt.jpg" alt="Screenshot" width="475" height="308" /></a></p>
<p>Another common dimension for banners is 300 x 250. Many news websites use ads of this dimension in sidebars. <a href="http://yahoo.com/">Yahoo</a>’s right sidebar contains a 300 x 250 banner right around the fold.</p>
<p><a href="http://yahoo.com/"><img src="http://78.46.108.98/images/online-advertising/yahoo.jpg" alt="Screenshot" width="475" height="403" /></a></p>
<p><a href="http://digg.com/">Digg</a> also uses a 300 x 250 banner at the top of its sidebar.</p>
<p><a href="http://digg.com/"><img src="http://88.198.60.17/images/online-advertising/digg.jpg" alt="Screenshot" width="475" height="256" /></a></p>
<h3>Best Practices for Designers</h3>
<p><strong>1. Design to meet the needs of the client</strong><br />
The ultimate responsibility of the designer is to the <strong>client</strong>. 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.</p>
<p>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.</p>
<p><strong>2. Lay out the website so that ads are a part of the design</strong><br />
The websites that look the most <em>natural</em> and <em>normal</em> 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.</p>
<p>The sidebar on <a href="http://abcnews.go.com/">ABC News</a> is sized just right to contain the 300 x 250 banners used throughout the website.</p>
<p><a href="http://abcnews.go.com/"><img src="http://78.46.108.98/images/online-advertising/abc.jpg" alt="Screenshot" width="475" height="299" /></a></p>
<p><strong>3. Consider future needs</strong><br />
You may find yourself in a situation in which you’re designing a website that isn’t particularly ad-heavy <strong>at the moment</strong> 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.</p>
<p>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.</p>
<p><strong>4. Consider the impact on visitors</strong><br />
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.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=21</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>+White Space and Simplicity: An Overview</title>
		<link>http://www.adambaker.co.uk/blog/?p=14</link>
		<comments>http://www.adambaker.co.uk/blog/?p=14#comments</comments>
		<pubDate>Mon, 22 Dec 2008 22:29:22 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[interface design]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=14</guid>
		<description><![CDATA[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....]]></description>
			<content:encoded><![CDATA[<p>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&#8230;</p>
<p>This article from <a title="Link opens new window" href="http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/" target="_blank">www.smashingmagazine.com</a> explains it all&#8230;</p>
<p>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 <a href="http://alistapart.com/articles/whitespace">an insightful article about Whitespace</a> 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?</p>
<p><em>Links checked: June/16 2008.</em></p>
<p><img src="http://www.drweb.de/img/whitespace.gif" border="0" alt="Screenshot" width="400" height="363" /></p>
<h3 class="title">Simplicity:</h3>
<ul>
<li><a href="http://www.digital-web.com/articles/keep_it_simple/">Keep it simple</a><br />
Why does a page look complex? A brief article about the “exciting design vs. simple design”-question.</li>
<li><a href="http://www.digital-web.com/articles/keep_it_simple_stupid/">Keep it simple, stupid!</a><br />
Describes the importance of simplicity regarding the way human brain works.</li>
<li><a href="http://www.digital-web.com/articles/simplicity_the_cobbles_of_the_designers_path/">Simplicity: The Cobbles of the Designer’s Path</a><br />
Stepheen Van Doren about wrong and correct use of simple solutions.</li>
<li><a href="http://www.jnd.org/dn.mss/simplicity_is_highly.html">Simplicity Is Highly Overrated</a><br />
Don Norman criticizes that the simplicity and minimalism lead to less functions and decrease the total performance of products.</li>
<li><a href="http://www.fastcompany.com/magazine/100/beauty-of-simplicity.html">The Beauty of Simplicity</a><br />
Google is simple. But how did its developers achieve it?</li>
<li><a href="http://uxmatters.com/MT/archives/000151.php">The Complexity of Simplicity</a><br />
Luke Wroblewski describes a complex path to simplicity, its features and reasons, why the simple solutions are more complex than complex solutions.</li>
<li><a href="http://lawsofsimplicity.com/category/laws?order=ASC">The Laws of Simplicity</a><br />
John Maeda presents 10 excerpts from his book, in which he talks about rules and principles of ‘Simplicity’.</li>
<li><a href="http://en.wikipedia.org/wiki/Simplicity">Wikipedia: Simplicity</a><br />
Explains what simplicity is and related information about the topic.</li>
</ul>
<h3 class="title">White Space (Negative Space):</h3>
<ul>
<li>Design Matters: White space<br />
About the potential power behind Negative Space.</li>
<li><a href="http://www.alistapart.com/articles/whitespace">ALA: Whitespace</a><br />
An excellent introduction to the theory and use of whitespace, by Mark Boulton</li>
<li><a href="http://www.stylegala.com/articles/design_psychology.htm">Design Psychology</a><br />
An insight in the psychology of web design. Among other information White Space is analyzed.</li>
<li><a href="http://uxmatters.com/MT/archives/000097.php">Developing the Invisible</a><br />
Luke Wroblewski gives examples of situations, in which white space is essential and explains, why it is indeed so significant.</li>
<li><a href="http://molly.com/articles/webdesign/2000-08-webspace.php">Give me my web space</a><br />
Molly E. Horzschlag gives guidelines, which can help you to reduce the complexity of your web-sites and improve its readability.</li>
<li><a href="http://www.webdesignoffice.us/portfolio-and-design/q-t-title-Negative-Space.html">Negative Space Tutorial</a><br />
This tutorial explains, how you can use White Space efficiently.</li>
<li><a href="http://www.logoorange.com/white-space.php">On White Space in Graphic Design</a><br />
Keith Robertson about fields and areas, in which Negative Space dominates &#8211; primarily graphic design.</li>
<li><a href="http://www.samspublishing.com/articles/article.asp?p=174346&amp;seqNum=3&amp;rl=1">Page Layout and Design for Digital Scrapbooking</a><br />
Carla Rose about the importance of White Space.</li>
<li><a href="http://www.humanfactors.com/downloads/dec05.asp">Psychology Studies on Human Interaction</a><br />
Studies in psychology confirm: White Space improves the perception of information by 20%.</li>
<li><a href="http://psychology.wichita.edu/surl/usabilitynews/62/whitespace.htm">The Importance of White space for Legibility</a><br />
This study compares 4 White Space Layouts and presents results about the influence of White Space in design.</li>
<li><a href="http://www.netmechanic.com/news/vol8/design_no2.htm">The value of white space</a><br />
Offers a detailed introduction in the theory of white space, with examples.</li>
<li><a href="http://www.digital-web.com/articles/css_101/">Typography and White space</a><br />
White Space in practice: how can you guarantee an optimal legibility with CSS?</li>
<li><a href="http://www.jasonsantamaria.com/archive/2006/01/05/under_the_loupe_1_white_space.php">Under The Loupe #1: White Space</a><br />
Jason Santa Maria: “Empty space serves a purpose and supports the visual integrity of a layout.”</li>
</ul>
<h3 class="title">Simplicity and White Space in Practice:</h3>
<ul>
<li><a href="http://leftjustified.net/journal/2004/10/19/global-ws-reset/">Global White Space Reset</a><br />
Global Padding/Margin Reset in CSS-files can be used as a template for your web-projects.</li>
<li><a href="http://www.plaintxt.org/2006/06/13/the-best-minimalist-wordpress-themes/">The Best Minimalist WordPress Themes</a><br />
A collection of hand-picked Wordpress-Themes, which impress with their simplicity, clarity and readability.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=14</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>+10 Principles Of Effective Web Design</title>
		<link>http://www.adambaker.co.uk/blog/?p=8</link>
		<comments>http://www.adambaker.co.uk/blog/?p=8#comments</comments>
		<pubDate>Mon, 22 Dec 2008 22:15:23 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[interface design]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=8</guid>
		<description><![CDATA[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...]]></description>
			<content:encoded><![CDATA[<p>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&#8230;</p>
<p>This article from <a title="Link opens new window" href="http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/" target="_blank">www.smashingmagazine.com</a> shows you how&#8230;</p>
<h3>Principles Of Effective Web Design</h3>
<p>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.</p>
<h3>How do users think?</h3>
<p>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.</p>
<p>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.</p>
<ul>
<li><strong>Users appreciate quality and credibility.</strong> 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.</li>
<li><strong>Users don’t read, they scan.</strong> Analyzing a web-page, users search for some fixed points or anchors which would guide them through the content of the page.<a href="http://www.useit.com/alertbox/reading_pattern.html"><img src="http://www.smashingmagazine.com/images/10-usability-principles/scan.jpg" alt="Screenshot" width="400" height="290" /></a><br />
<em>Users don’t read, they scan. Notice how “hot” areas abrupt in the middle of sentences. This is typical for the scanning process.</em></li>
<li><strong>Web users are impatient and insist on instant gratification.</strong> 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]</li>
<li><strong>Users don’t make optimal choices.</strong> 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. [<a href="http://www.etre.com/usability/eyetracking/showme/">video</a>]<a href="http://searchengineland.com/070413-121955.php"><img src="http://www.smashingmagazine.com/images/10-usability-principles/froogle.png" alt="Screenshot" width="400" height="235" /></a><a href="http://blog.eyetools.net/eyetools_research/4_community_of_learning/index.html"><img src="http://www.smashingmagazine.com/images/10-usability-principles/scanpath.jpg" alt="Screenshot" width="400" height="311" /></a><br />
<em>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.</em></li>
<li><strong>Users follow their intuition.</strong> 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.”</li>
<li><strong>Users want to have control.</strong> 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 <em>never open links in new browser windows</em>.</li>
</ul>
<h3>1. Don’t make users think</h3>
<p>According to Krug’s first law of usability, the web-page should be <strong>obvious and self-explanatory</strong>. When you’re creating a site, your job is to get rid of the <em>question marks</em> — the decisions users need to make consciously, considering pros, cons and alternatives.</p>
<p>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.</p>
<p><a href="http://www.beyondis.co.uk/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/beyondis.png" alt="Screenshot" width="450" height="249" /></a></p>
<p>Let’s take a look at an example. <a href="http://www.beyondis.co.uk/">Beyondis.co.uk</a> claims to be “beyond channels, beyond products, beyond distribution”. What does it <em>mean</em>? Since users tend to explore web-sites according to the <a href="http://www.useit.com/alertbox/reading_pattern.html">“F”-pattern</a>, these three statements would be the first elements users will see on the page once it is loaded.</p>
<p>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 <em>unnecessary question mark</em> 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.</p>
<p><a href="http://expressionengine.com/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/ee.png" alt="Screenshot" width="450" height="232" /></a></p>
<p><a href="http://expressionengine.com/">ExpressionEngine</a> 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.</p>
<p>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.</p>
<h3>2. Don’t squander users’ patience</h3>
<p>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 <strong>play with the service</strong>, 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.</p>
<p>As Ryan Singer — the developer of the 37Signals team — <a href="http://www.thinkvitamin.com/training/webapps/web-app-form-design/">states</a>, users would probably be eager to provide an email address if they were asked for it <strong>after</strong> they’d seen the feature work, so they had some idea of what they were going to get in return.</p>
<p><a href="http://www.stikkit.com/signup"><img src="http://www.smashingmagazine.com/images/10-usability-principles/stikkit.jpg" alt="Screenshot" width="400" height="442" /></a></p>
<p><a href="http://www.stikkit.com/signup">Stikkit</a> 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.</p>
<p><img src="http://www.smashingmagazine.com/images/10-usability-principles/bemite.png" alt="Screenshot" width="450" height="373" /></p>
<p>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.</p>
<p>Ideally <strong>remove all barriers</strong>, 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.</p>
<h3>3. Manage to focus users’ attention</h3>
<p>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.</p>
<p>The human eye is a highly non-linear device, and web-users <strong>can instantly recognize edges, patterns and motions</strong>. 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.</p>
<p><a href="http://www.humanized.com/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/enso.png" alt="Enso" width="400" height="363" /></a></p>
<p><a href="http://www.humanized.com/">Humanized.com</a> 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.</p>
<p>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 <strong>better sense of orientation</strong> 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.</p>
<h3>4. Strive for feature exposure</h3>
<p>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 <strong>guidelines are extremely effective</strong> as they lead the visitors through the site content in a very simple and user-friendly way.</p>
<p><a href="http://dibusoft.com/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/dibusoft.jpg" alt="Screenshot" width="400" height="265" /></a></p>
<p><a href="http://dibusoft.com/">Dibusoft.com</a> 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.</p>
<p><strong>Letting the user see clearly what functions are available</strong> 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.</p>
<h3>5. Make use of effective writing</h3>
<p>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 <strong>bold</strong> or <em>italics</em> will be skipped. Exaggerated language will be ignored.</p>
<p><strong>Talk business.</strong> 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”.</p>
<p><a href="http://www.eleven2.com/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/eleven2.png" alt="Screenshot" width="450" height="286" /></a></p>
<p><a href="http://www.eleven2.com/">Eleven2.com</a> gets directly to the point. No cute words, no exaggerated statements. Instead a price: just what visitors are looking for.</p>
<p>An optimal solution for effective writing is to</p>
<ul>
<li>use short and concise phrases (come to the point as quickly as possible),</li>
<li>use scannable layout (categorize the content, use multiple heading levels, use visual elements and bulleted lists which break the flow of uniform text blocks),</li>
<li>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)</li>
</ul>
<h3>6. Strive for simplicity</h3>
<p>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 <em>despite</em> the design. Strive for simplicity instead of complexity.</p>
<p><a href="http://crcbus.mattiaviviani.net/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/crc.png" alt="Screenshot" width="400" height="327" /></a></p>
<p><a href="http://crcbus.mattiaviviani.net/">Crcbus</a> 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.</p>
<p>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.</p>
<p><a href="http://getfinch.com/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/simple.png" alt="Screenshot" width="400" height="241" /></a></p>
<p><a href="http://getfinch.com/">Finch</a> clearly presents the information about the site and gives visitors a choice of options without overcrowding them with unnecessary content.</p>
<h3>7. Don’t be afraid of the white space</h3>
<p>Actually it’s really hard to overestimate the importance of white space. Not only does it help to <strong>reduce the cognitive load</strong> 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.</p>
<p>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. <strong>Hierarchical structures reduce complexity</strong> (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.</p>
<p><a href="http://cameron.io/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/cameron.jpg" alt="Screenshot" width="400" height="320" /></a></p>
<p>White space is good. <a href="http://cameron.io/">Cameron.io</a> uses white space as a primary design element. The result is a well-scannable layout which gives the content a dominating position it deserves.</p>
<h3>8. Communicate effectively with a “visible language”</h3>
<p>In his papers on effective visual communication, Aaron Marcus states <a href="http://web.cs.wpi.edu/%7Ematt/courses/cs563/talks/smartin/int_design.html">three fundamental principles</a> involved in the use of the so-called <em>“visible language”</em> — the content users see on a screen.</p>
<ul>
<li><strong>Organize</strong>: 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.</li>
<li><strong>Economize</strong>: do the most with the least amount of cues and visual elements. Four major points to be considered: simplicity, clarity, distinctiveness, and emphasis. <em>Simplicity</em> includes only the elements that are most important for communication. <em>Clarity</em>: all components should be designed so their meaning is not ambiguous. <em>Distinctiveness</em>: the important properties of the necessary elements should be distinguishable. <em>Emphasis</em>: the most important elements should be easily perceived.</li>
<li><strong>Communicate</strong>: 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 <strong>max. 3 typefaces in a maximum of 3 point sizes</strong> — a maximum of 18 words or 50-80 characters per line of text.</li>
</ul>
<h3>9. Conventions are our friends</h3>
<p>Conventional design of site elements doesn’t result in a boring web site. In fact, <strong>conventions are very useful</strong> 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).</p>
<p>With conventions you can gain users’ confidence, trust, reliability and prove your credibility. <strong>Follow users’ expectations</strong> — understand what they’re expecting from a site navigation, text structure, search placement etc. (see Nielsen’s <a href="http://www.useit.com/alertbox/">Usability Alertbox</a> for more information)</p>
<p><a href="http://babelfish.yahoo.com/"><img src="http://www.smashingmagazine.com/images/10-usability-principles/babelfish.png" alt="Screenshot" width="450" height="238" /></a><br />
<em>BabelFish in use: Amazon.com in Russian.</em></p>
<p>A typical example from usability sessions is to translate the page in Japanese (assuming your web users don’t know Japanese, e.g. with <a href="http://babelfish.yahoo.com/">Babelfish</a>) 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.</p>
<p>Steve Krug suggests that it’s better to <strong>innovate only when you know you really have a better idea</strong>, but take advantages of conventions when you don’t.</p>
<h3>10. Test early, test often</h3>
<p>This so-called TETO-principle should be applied to every web design project as usability tests often provide <strong>crucial insights</strong> into significant problems and issues related to a given layout.</p>
<p>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.).</p>
<p>Some important points to keep in mind:</p>
<ul>
<li>according to Steve Krug, <strong>testing one user is 100% better than testing none</strong> 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.</li>
<li>testing is an <strong>iterative process</strong>. 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.</li>
<li>usability tests <strong>always produce useful results</strong>. 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.</li>
<li>according to Weinberg’s law, <strong>a developer is unsuited to test his or her code</strong>. 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.</li>
</ul>
<p>Bottom line: if you want a great site, you’ve got to test.</p>
<h3>References</h3>
<ul>
<li><a href="http://web.cs.wpi.edu/%7Ematt/courses/cs563/talks/smartin/int_design.html">Designing Effective User Interfaces</a> by <em>Suzanne Martin</em></li>
<li><a href="http://nibis.ni.schule.de/%7Elepke/homepage/webdesign/webdesign.html">Summary on Web Design</a></li>
<li><a href="http://www.macgregor.net/speaking/digitaleve/UID.swf">UID presentation</a> (Flash)</li>
<li><a href="http://www.usability.gov/pdfs/guidelines.html">Research-Based Web Design &amp; Usability Guidelines</a></li>
<li>“The psychology of computer programming” by <em>Gerald Weinberg</em></li>
<li>“Designing Web Usability” by <em>Jakob Nielsen</em> [JN / DWU]</li>
<li>“Prioritizing Web Usability” by <em>Jakob Nielsen</em></li>
<li>“Don’t Make Me Think” by <em>Steve Krug</em></li>
<li>“Usability for the Web: Designing Web Sites that Work” by <em>Tom Brinck, Darren Gergle, Scott Wood</em></li>
<li><a href="http://www.sylvantech.com/%7Etalin/projects/ui_design.html">A Summary of Principles for User-Interface Design</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=8</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>+My List of Best SEO-Tools</title>
		<link>http://www.adambaker.co.uk/blog/?p=1</link>
		<comments>http://www.adambaker.co.uk/blog/?p=1#comments</comments>
		<pubDate>Mon, 22 Dec 2008 20:51:46 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[SEO tools]]></category>
		<category><![CDATA[interface design]]></category>

		<guid isPermaLink="false">http://www.adambaker.co.uk/blog/?p=1</guid>
		<description><![CDATA[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? Links checked: Dec/2008]]></description>
			<content:encoded><![CDATA[<p>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. <em>Links checked: Dec/2008</em></p>
<p><strong>Alexa</strong></p>
<ul>
<li><a href="http://www.alexaranking.com/">Alexa-Ranking</a><br />
Alexa page-rank-and-rating-results</li>
</ul>
<p><strong>Backlink</strong></p>
<ul>
<li><a href="http://www.webuildpages.com/neat-o/">Anchor Text Backlink Checker</a><br />
This tool is to check your backlinks and the anchor text used in those backlinks.</li>
<li><a href="http://www.sitening.com/tools/backlink-analyzer/">Backlink Analyzer</a><br />
Research and analyze websites for link quality. Checks for Indexed Pages, Links to Website, EDU &amp; .GOV Links, Domain Age &amp; Expiration, Google PageRank, Alexa Traffic Rank, DMOZ Listing</li>
<li><a href="http://www.webconfs.com/anchor-text-analysis.php">Backlink Anchor Text Analyzer</a><br />
This tools help you determine the backlinks of your website and link text used by your backlinks to Link to your website</li>
<li><a href="http://www.webconfs.com/backlink-builder.php">Backlink Builder</a><br />
Building Quality backlinks is one of the most important factors in Search Engine Optimization…</li>
</ul>
<p><strong>Domain Popularity, Domain Stats Tools… </strong></p>
<ul>
<li><a href="http://www.webconfs.com/domain-age.php">Domain Age Tool</a><br />
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</li>
<li><a href="http://centralops.net/co/DomainDossier.aspx">Domain Dossier</a><br />
Investigate domains and IP addresses</li>
<li><a href="http://www.linkvendor.com/seo-tools/domain-popularity.html">Domain Popularity</a><br />
This tool shows you all backlinks for the given domain, including up to 10 subpages per backlinking domain, host IP and Google PageRank</li>
<li><a href="http://www.webconfs.com/domain-stats.php">Domain Stats Tool</a><br />
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.</li>
<li><a href="http://www.webconfs.com/http-header-check.php">HTTP / HTTPS Header Check</a><br />
This tools allow you to inspect the HTTP headers that the web server returns when requesting a URL. Works with HTTP and HTTPS URLs</li>
<li><a href="http://www.seoegghead.com/tools/view-http-headers.php">View HTTP Headers</a><br />
This little tool lets you view the HTTP headers for a HTTP request</li>
<li><a href="http://www.seoegghead.com/tools/view-http-path.php">View HTTP Path</a><br />
This little tool lets you view the path/redirects a request takes to get fulfilled</li>
</ul>
<p><strong>Google Page Rank Checker, Adwords Keyword Tools,Google Banned Tools…</strong></p>
<ul>
<li><a href="http://www.algotech.dk/googlesearches.asp">Advanced Google searches</a><br />
Use this tool to search google in many special ways. A useful resource for search engine optimization (especially keyword research) among other things</li>
<li><a href="http://www.selfseo.com/check_google_pagerank.php">Check Google Pagerank</a><br />
Now you can check the Google PageRank of any web page without installing the Google toolbar</li>
<li><a href="http://www.linkvendor.com/seo-tools/multi-pagerank.html">Check PageRank by Google data center</a><br />
With this tool you can check the PageRank from different data centers</li>
<li><a href="http://www.iotaweb.org/">Free Google Adsense Keywords &amp; YPN Keywords Search Tool</a><br />
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.</li>
<li><a href="https://adwords.google.com/select/KeywordToolExternal">Google Adwords Keyword Tool</a><br />
Keyword tool from Google that provides Specific and Similar keywords.</li>
<li><a href="http://123promotion.co.uk/tools/googlebanned.php">Google Banned Tool</a><br />
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….</li>
<li><a href="http://www.nichebot.com/ranking/">Google Keyword Ranking Tool</a><br />
Search with list of keywords from differnet Google search sites</li>
<li><a href="http://www.sitening.com/tools/page-rank/"> Google Page Rank Checker</a><br />
Instantly check the PageRank of any website or web page</li>
<li><a href="http://pr.blogflux.com/">Google Page Rank Checker</a><br />
A simple tool that checks and your PageRank so you can display it on your website</li>
<li><a href="http://labs.google.com/sets">Google Sets</a><br />
Automatically create sets of items from a few examples.</li>
<li><a href="http://www.linkvendor.com/seo-tools/pagerank-check.html">PageRank Authenticity Check</a><br />
This tool shows you the PageRank of a given domain. Also the PageRank will be checked of authenticity</li>
<li><a href="http://www.pageranktool.net/">Page Rank Tool</a><br />
Our PageRank Tool will query and return the Google PageRank values for submitted URL from various Google datacenters…</li>
<li><a href="http://www.linkvendor.com/seo-tools/visualpagerank.html">Visual PageRank</a><br />
The Visual PageRank &#8211; Tool shows all links and there corresponding PageRanks</li>
</ul>
<p><strong> Keyword Analysis Tool, Keyword Density, Keyword Suggestion Tools…</strong></p>
<ul>
<li>McDar Keyword Analysis Tool<br />
Enter URL and keyword, it will display Pagerank and Back links pages for the Top 10 websites.</li>
<li><a href="http://www.linkvendor.com/seo-tools/keyword-density.html">Keyword Density</a><br />
This tool shows you how often appears which word in content of given domain</li>
<li><a href="http://www.seochat.com/seo-tools/keyword-density/">Keyword Density</a><br />
The keyword density tool is useful for helping webmasters and SEOs achieve their optimum keyword density for a set of key terms.</li>
<li><a href="http://www.webconfs.com/keyword-density-checker.php">Keyword Density Checker</a><br />
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.</li>
<li><a href="http://www.seomoz.org/tools/kwtool.php">Keyword Difficulty Tool</a><br />
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…</li>
<li>KwMap.net<br />
A Keyword Map For the Whole Internet</li>
</ul>
<p><strong>Link Popularity Check, Site Link Analyzer, Link Value…</strong></p>
<ul>
<li><a href="http://www.webuildpages.com/seo-tools/index.php">Deep Link Ratio Tool</a><br />
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.</li>
<li><a href="http://www.marketleap.com/publinkpop/default.htm">Link Popularity Check</a><br />
Link popularity check is one of the best ways to quantifiably and independently measure your website’s online awareness and overall visibility…</li>
<li><a href="http://www.webmaster-toolkit.com/link-popularity-checker.shtml">Link Popularity Checker</a><br />
The Link Popularity Checker tells you how many websites are linking to yours…</li>
<li><a href="http://www.dead-links.com/">LINK VALIDATION SPIDER</a><br />
Free Online Broken Link Checker</li>
<li><a href="http://www.webconfs.com/link-value.php">Link Price Calculator</a><br />
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</li>
<li><a href="http://www.linkvendor.com/seo-tools/linkvalue.html">Link Value</a><br />
This tool calculates the link value per month of a given website.</li>
<li><a href="http://www.webconfs.com/reciprocal-link-checker.php">Reciprocal Link Check</a><br />
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.</li>
<li><a href="http://www.seochat.com/seo-tools/site-link-analyzer/">Site Link Analyzer</a><br />
This tool will analyze a given web page and return a table of data containing columns of outbound links and their associated anchor text…</li>
<li><a href="http://198.68.180.60/cgi-bin/link-reputation-tool.cgi">The Link Reputation Measurement Tool</a><br />
Reveals backlinks pointing to your target url along with the following: Link Survey &#8211; Link Reputation Score &#8211; Text used in links pointing to you &#8211; Alexa traffic analysis for the site corresponding to each backlink</li>
<li><a href="http://www.linkvendor.com/seo-tools/outbound-links.html">Outbound Links</a><br />
This tool shows every outgoing link from the given domain. Separated in external and internal links</li>
</ul>
<p><strong>Meta Tag Generators</strong></p>
<ul>
<li><a href="http://www.webmaster-toolkit.com/meta-tag-generator.shtml">Meta Tag Generator</a><br />
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…</li>
<li><a href="http://www.123promotion.co.uk/tools/meta_tag_creator.php">Meta Tag Generator</a><br />
Use this tool to generate a search engine friendly Head Tag for your web site</li>
<li><a href="http://www.searchbliss.com/free_scripts_metatag.htm">Title &amp; Meta Tags Generator</a><br />
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</li>
</ul>
<p><strong>Miscellaneous Tools</strong></p>
<ul>
<li><a href="http://www.123promotion.co.uk/directorymanager/">Directory Submission Manager</a><br />
Use this free tool to track your submissions to various web directories….</li>
<li><a href="http://www.copyscape.com/"> Copyscape</a><br />
Search for copies of your page on the Web</li>
<li><a href="http://www.linkvendor.com/seo-tools/site-analysis.html">Site Analysis including Link Popularity</a><br />
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</li>
<li><a href="http://www.xml-sitemaps.com/">Sitemap Generator</a><br />
Create your Google Sitemap Online</li>
<li><a href="http://www.webconfs.com/similar-page-checker.php">Similar Page Checker</a><br />
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</li>
<li><a href="http://www.linkvendor.com/seo-tools/speedtester.html">Speedtester</a><br />
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.</li>
<li><a href="http://www.webmaster-toolkit.com/mod_rewrite-rewriterule-generator.shtml">mod_rewrite RewriteRule Generator</a><br />
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</li>
<li><a href="http://www.linkvendor.com/seo-tools/url-rewrite.html">URL Rewrite (mod_rewrite)</a><br />
With this tool you can generate dynamic urls to search engine friendly urls..</li>
<li><a href="http://www.webconfs.com/url-rewriting-tool.php">URL Rewriting Tool</a><br />
Create Search Engine Friendly URLs</li>
<li><a href="http://www.linkvendor.com/seo-tools/cloaking-detector.html">User Agent Cloaking Detector</a><br />
This tool simulates the Googlebot (based on User-Agent) to detect cloaked content</li>
<li><a href="http://www.seoegghead.com/tools/what-is-hosted-on-that-ip.php">What is Hosted on that IP</a><br />
This little tool lets you view the virtual hosts on a particular IP</li>
</ul>
<p><strong>Search Engine Position Checker, Spider Simulator, Ranking Report, SERP Tracker</strong></p>
<ul>
<li><a href="http://seobench.com/google-yahoo-graph/">Google vs Yahoo Graph</a><br />
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</li>
<li><a href="http://www.webmaster-toolkit.com/search-engine-position-checker.shtml">Search Engine Position Checker</a><br />
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….</li>
<li><a href="http://www.linkvendor.com/seo-tools/se-spider.html">Search Engine Spider Simulator</a><br />
With this tool you see all informations a search engine spider receive from a website.</li>
<li><a href="http://www.marketleap.com/verify/default.htm">Marketleap Search Engine Verification Tool</a><br />
Our verification tool checks to see if your site is in the top three pages of a search engine result for a specific keyword</li>
<li><a href="http://www.selfseo.com/search_engines_index_report.php">Number of pages indexed</a><br />
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.</li>
<li><a href="http://www.top25web.com/cgi-bin/report.cgi">Search Engine Ranking Report</a><br />
Input key phrase list get Google rankings</li>
</ul>
<p><strong>SEO Analyzer, Scanner</strong></p>
<ul>
<li><a href="http://www.seotoolset.com/tools/free_tools.html">Free SEO Tools</a><br />
SEOToolSet</li>
<li><a href="http://www.webuildpages.com/cool-seo-tool/">Cool SEO Tool!</a><br />
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….</li>
<li><a href="http://www.sitening.com/tools/seo-analyzer/">SEO Analyzer</a><br />
The SEO Analyzer is a FREE tool that uses a sophisticated algorithm that detects how optimized your web design is for search engines</li>
</ul>
<p><strong>Robots.txt Tools</strong></p>
<ul>
<li><a href="http://www.123promotion.co.uk/tools/robotstxtgenerator.php">Robots Txt Generator</a><br />
Use this tool to generate a simple robots file for your website…</li>
<li><a href="http://www.sxw.org.uk/computing/robots/check.html">Robots.txt syntax checker</a><br />
This robots.txt syntax checker checks the contents of a site’s robots.txt…</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.adambaker.co.uk/blog/?feed=rss2&amp;p=1</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
