Our Blog


Terminology for Internet Marketing

As with any technical field, online advertising has its own terminology and set of TLA (three letter acronyms). Today let’s review some of the more important ones.

CPA: Cost Per Action. In this case, you get paid (or pay someone) when the user takes a predefined action, such as signing up for a credit card.

CPC: Cost Per Click. Self explanatory. This is the model under which Google Adsense generally operates.

CPM: Cost Per Thousand (page views). M is the roman numeral for 1000.

CTR: Click-Through Rate: how often do people click on your ads?

PFP: Pay For Performance; you get paid if your advertising is successful. See also CPA/PPL/PPS.

PPC: Pay Per Click

PPL/PPS: Pay Per Lead/Sale

PV: Page View

SEO: Search Engine Optimization; this is the process of getting your website to rank highly in search engines, particularly Google. A similar term is SEM, Search Engine Marketing, which also includes paid advertising.

Website Usability, Part V: Don’t Annoy the User

It seems obvious, but many sites seem to have a problem with it: if you want your users to keep coming back, don’t annoy them! Here are a few common-sense things to avoid.

  • No unsolicited windows. If you use pop-ups on your site, half your users will be using a modern browser that blocks them, and you’ll annoy the rest. Find a better way to get attention.
  • Arrange the website logically. Don’t make the user think about how to find something; it should be obvious.
  • Provide a search; we mentioned this before, but it bears repeating. Today’s users don’t want to click around looking for things; they want to jump straight to their target.
  • Be consistent. Again, this is something we mentioned before. If your navigation bar is on the left on your homepage, it should be on the left on every other page as well. A user attempting to search should know exactly where the search box is without having to, well, search for it!
  • Don’t make the user do work that the computer can do; one particularly annoying example is when the same information must be input in several places.
  • Avoid making the user remember things. If two or more items must be compared, place them side by side.
  • Design efficient pages. Even if you expect most users to be on broadband, remember that large images still take time to load, and a bored user is a lost user!
  • Don’t make users lose their work! If a page must time out, warn the user and give him a chance to extend the timer or save his work.
  • Design webpages so that they can be printed; long, complex documents in particular are often printed for later reading. If needed, the page can use different style sheets for viewing and printing.
  • When users must wait for something to complete, give them a way to track progress; for particularly long tasks, such as large downloads, provide an estimate of how long the task will take.

Website Usability, Part IV: Arranging Page Elements

One aspect of designing an effective webpage is to make it easy for users to find what they’re looking for. Overly cluttered pages, for example, tend to confuse users.

Users anticipate where things will be; don’t surprise them! Users expect that important items (such as the navigation bar, as we discussed in part 2) will be in the same place on every page, near the top. Never put important items “below the fold”! Users should never need to scroll to find navigational items, such as search boxes.

 

Eye-tracking studies have shown that users first look at the top of a page, then at the left side, then the right side; this is why those have been popular locations for banner ads. Important information should be placed in these areas so that users are sure to see it, while less important information should be placed lower down on the page; this helps users to process it more easily.

One thing that makes scanning a webpage for information difficult is when it is too densely packed; not only do users have an easier time searching spare areas of the page, they tend to visit those areas quickly. Lesson: don’t cram important information into too small a space! On the other hand, too much whitespace wastes time by causing users to scroll unnecessarily; effectively using whitespace allows you to place plenty of information on the page without it feeling cramped.

When possible, it’s best to use a fluid page layout so as to utilize the user’s entire screen; designing for a particular screen size inevitably means the page will display improperly for most users. However, be sure that items are aligned consistently, as this makes them easier to scan.

The proper length of both the webpage and the lines displayed on that page depends on what type of content is being displayed. Longer pages are appropriate for uninterrupted reading, while homepages, navigation pages, and those that need to be browsed quickly should be shorter. Users prefer shorter line lengths, but read faster when longer line lengths are used, so the choice is a trade-off between user preference and usability.

Website Usability, Part III: Text

One website that I tend to avoid if at all possible is MySpace; too much of it seems to be pages composed with horribly clashing colors, backgrounds that don’t contrast well with the text, and other things that make them difficult (and annoying) to read. I would go so far as to call the typical MySpace page an excellent lesson in what not to do. What can we learn from them?

 

Formating your text

If you want people to to read your site (rather than hitting the back button), make it easy for them. Use 12-point (or higher) resizable text, preferably dark text on a light background. Choose one font, preferably a standard one such as Times New Roman or Arial, and stick with it. Typing in all-caps has been considered annoying since the earliest days of the Internet; use appropriate capitalization!

Be consistent

As mentioned, you should choose one font to use for the entire site; common page elements should also be consistent. Navigation bars, for example, should be in the same location on every page.

Attracting Attention

A number of elements are designed for attracting attention; use them sparingly. For example, this page uses bold headers to let the reader know what each paragraph will be about; randomly bolding words throughout the document would only lead to confusion! Animation in particular should be used sparingly;  it should convey useful information that the reader needs to know immediately, or users will simply find it annoying. Additionally, use emphasis (bold, italics, etc) only on short phrases, and never use underlines for emphasis as users are programmed to regard underlined text as links.

Remember: making it easy to quickly scan webpages for important information makes them more useful to the user; avoid using attributes that can be distracting or make the page difficult to read. Strive for simplicity in design; don’t change how information is being presented simply for the sake of variety.

Website Usability, Part II: Accessibility

By law, all websites owned by the US federal government must comply with the Section 508 Federal Accessibility Standards. For private sites, such compliance may not be legally required, but it’s still a good idea; adhering to standards ensures that all of your potential customers can utilize your site.

 

The main component in designing an accessible website is ensuring that any non-text element, be it photos, music, video, etc, has a text equivalent; this can mean adding descriptive text to a photo or subtitles to a movie.  Some of the most common disabilities include:

Hearing Loss
Ensure that any audio that is required to fully use the site has accompanying text; for example, you can add captions to a video using software like Camtasia, and provide transcripts of podcasts. In many cases, audio-to-text programs like Dragon NaturallySpeaking can do much of the work for you.

Vision Loss
Designing for vision loss often means desiging for screen readers, which has the side benefit of making your website easier for spiders as well. Ensure that alt tags contain useful information, and consider that blind users may not be able to tell if part of the screen updates without a page reload. People using screen readers may also appreciate being able to skip repetitive navigation links, rather than having to wait for the entire menu to be read out every time. Finally, ensure that all elements are accessible using the keyboard only.

Colorblindness
A significant percentage of the population has difficulty discriminating colors;  avoid using color as the only way of transmitting important information, and choose high-contrast color combinations. There are tools available that allow you to view your website as it would be seen by people with various types of colorblindness; you can also read more about optimal color choices here.

Addendum
When adding movie captions, etc, be sure that related information is synchronized; captions become annoying rather than helpful if they show up too late! CSS is a great thing for designing accessible websites, as it encourages thinking about content separately from style; be sure that it’s possible to read the page and have it make sense without loading the associated stylesheets.

Ensuring that your website is accessible can be a pain at first, but your customers will appreciate it. It’s always worth a little extra effort to have your site read by the widest possible audience!

The Google Sandbox

You may have heard people speak of the Google Sandbox as a dreadful place to be avoided. But what is it, exactly, and how can you avoid going there?

Google’s goal is to return the best possible search results. They have a number of rules for webmasters that basically boil down to: don’t screw with the search. For example, Google will penalize your site if they catch you buying or selling paid links.

Suppose you have a brand new site, just registered within the last few months, and it has thousands of links to it. What’s the most likely explanation – that this site is so incredible all these people have found out about it already, or that someone is trying to manipulate the search engine results? Google will assume the second, and they’ll put the site in the sandbox, which generally means it’s not going to show up when someone does a search for the targeted keywords. Considering Google’s share of the search market, this is a Bad Thing.

While the sandbox can be triggered automatically, Google employs people who actually go out and look at sites. If you have a new site that’s been growing so quickly that it got put in the sandbox, but not so quickly that it couldn’t just be the greatest site ever built, eventually someone from Google will come out and see if the site really does have the content the links say it has. For example, if One Ear Productions was a new site and suddenly had thousands of links talking about our awesome web design, someone might come check that the site really is talking about web design and doesn’t just have some crappy computer-generated articles and a bunch of advertisements. Google isn’t going to decide whether this really is the greatest web design company ever or whether we really are offering extremely informative articles on web design;  they just want to know that this is a legitimate site and we’re not trying to jerk them around.

Cliff notes? Publish high-quality content. Don’t buy or sell links, don’t give Google a reason to think you’re doing that, and don’t put a link to your brand new site in the footer of your 10,000 page site. Otherwise, you may find yourself sitting in the sandbox all alone..

Website Usability, Part 1: Search

One issue that plagues both software and web development is adding in features that sound cool, but confuse the user. What makes perfect sense to the designer often doesn’t make quite as much sense to someone using the software or website for the first time! Let’s talk about a few things that contribute to usable websites. We’ll start with one of the simplest: search.

 

Placing the Search Box

These days, users expect to see a search box; this is particularly true for ecommerce sites. Don’t make them hunt for it! It should be located near the top of the page, easy to find, and obvious (users should know without thinking about it that this is your search box). This doesn’t just apply to the homepage, either; every page of the site should have the search box, in the same place. Additionally, the default should be to search the entire site, not just the section the user is in; you may opt to provide a checkbox to restrict the search to the current section. As with any rule, there are exceptions; you might, for example, choose to restrict a blog search to the contents of that blog, as we’ve done here.

Handling Search Queries

Users generally expect to see the same results regardless of how they capitalize the query; your search engine should be programmed to ignore case unless there is a good reason to do otherwise, in which case (no pun intended) you can make case-sensitivity a selectable option.

Users often don’t know exactly what term to search for; it is helpful if your search engine understands related terms. For example, a user who searches for “food” might be interested in results for “cooking”, even if the word food never actually appears on the cooking page. One option is to show users a list of related terms that they can search on, and to attempt to correct misspellings. Consider Google: when typing, it offers suggestions for what term you might want, and if you search for what it believes is a misspelled word, it offers the correct spelling.

Design for the Average User

Remember that most users won’t search for long-tail keywords or use boolean queries; they’ll type 2-3 words into the search box and expect to get reasonably relevant results. A good search engine will make it easy for the users to define exactly what they’re searching for, even when the users can’t find (or spell) the correct search terms.

Feel free to provide advanced search options for power users, but don’t let them clutter up the basic search and confuse your new users. As in many things, strive for simplicity; your users will appreciate it.

HTML V, Part VI: What Time is it?

In part 1, we mentioned the <time> tag available in HTML5. The tag is pretty versatile, and allows  you to specify the date, as well as the time and timezone if desired. While every attribute in the tag is optional, if the datetime attribute is used it must be an exact, positive date on the proleptic Gregorian calendar – no partial dates (June) or negative dates (3 BC). At its simplest, we could write something like “it is now<time>3:56 PM</time>“. If you view the HTML source for this article, you’ll see that “3:56 PM” in the previous sentence actually is surrounded by <time> tags. Why doesn’t it look any different than the surrounding text? Like many of the new tags in HTML5,  isn’t intended to change how the webpage displays; rather, it provides additional semantic context that can be used when the page is interpreted. A calendar plug-in, for example, could detect the use of the time tag and use it to add an event to the user’s calendar. The Firefox Operator add-on uses this tag, among others; you can read more about Operator on the Mozilla blog. If I wanted to be more exact, I could say that I’m writing this blog post at<time datetime=”2010-7-12T16:08-07:00>Monday afternoon</time>. This gives the exact date, time, and timezone – in this case, UTC-7, Mountain Time.

HTML5, Part V: Forms

When it comes to forms, one thing I hear a lot about is setting them up using PHP; HTML has basic form capability, but don’t you want them to do more?

With HTML5, forms can indeed do more, without the need for any fancy scripting. The best part is, all of the new  features degrade gracefully, which means you can use them now without spending a lot of time worrying about what they’ll do in legacy browsers.

Let’s start with the basic elements of an HTML form, which are the same in HTML 4 and 5:

<form>

<input name=”name”  type=”type” value=”value”>

</form>

That’s all there is to it! Let’s take a look at each of these elements. The name tag identifies the input, which lets you refer to it later; this is particularly important when you’re using it to pass information to the next page. The type tag tells the browser what type of input to use, such as a button or dropdown. Finally, the value field is the default value; for a button, this would be the displayed text. Each of these tags is optional.

The nice thing is that when a browser doesn’t understand the given type, or the type is not given, it simply displays it as a text field rather than giving unpredictable behavior. This means we can use new HTML5 input types, knowing that people with older browsers will still have a way to provide input.

How about an example? Suppose I want you to choose an even number between 8 and 22, with a default of 12. I can do that using the following code:

<form> <input type=”number” min=”8″ max=”22″ step=”2″ value=”12″> </form>

If you’re using an HTML5-compliant browser such as Opera, the following should show up as a spinbox that allows only the even numbers between 8 and 18. In older browsers, it will show as a simple text field, but will still be validated – the form will refuse to submit if the user enters an illegal value. The second field is the same code with the type changed to range.

 

So why use these special tags instead of just having the user type a number? For one thing, it can be optimized in various ways. If you’re viewing this page on an iPhone, you won’t get a spinbox, but your keyboard will default to numbers. A search field (another new type) may be functionally the same as a text box, but if you’re using Safari on a mac, it’ll have rounded corners to look like the standard mac search boxes; on both Safari and Chrome, once you start typing a little x will appear to erase the field. While browsers don’t handle these tags in the same way, telling them what type of data is expected allows the more appropriate data entry.

Aside from new types of input, you can also do new things with the old types. For example, one thing that drives me crazy is scripts that autofocus on an input box; when I check my email on the web I tend to have finished typing my username and be halfway through my password when the page finishes loading and moves the focus back to the username field. Now, instead of using javascript, we can stick with HTML and accomplish the same thing in a less annoying (and more consistant) way. Consider the following code:

<form> <input name=”tellme” autofocus  placeholder=”Placeholder Text”> </form>

Depending on which browser you’re using, both, one, or none of the new attributes we’re using will take effect; whichever ones don’t will simply be ignored. Autofocus (predictably) sets the focus to this field, while placeholder text appears in light grey to tell you what you’re supposed to type:

Again, the nice thing is that this degrades gracefully, so it provides a better user experience for people with compatible browsers without annoying those people who don’t see it. (Of course, you may want to detect compatibility and use javascript to provide the same functionality so that more people can see your site as designed). Note that in the above example, we used autofocus and placeholder text together, which is kind of silly because putting focus on that window removes the placeholder text, but it will come back if you click on something else and remind you what needs to be typed there! Also, the autofocus brings this box into view as soon as you load the page, which means you have to scroll back up to get to the top of the article; not particularly good design, but it does demonstrate the power of this attribute.

Are You a Twit?

If you spend much time on the Internet, you’re familiar with twitter, even if you don’t entirely understand the appeal. Although it was started only four years ago, it’s now one of the most visited sites on the net. In fact, social media sites (Facebook, Twitter, etc) are now passing search engines as the most highly-trafficed sites on the Internet.  So what’s the big deal?

Twitter has a simple premise: what can you say in 140 characters or less? You could use it to waste time telling all your friends what you’re doing every minute of every day, but if you’re reading this, you’re probably more interested in how you can use it as a practical tool. So can you?

 

Twitter is the best-known example of what’s called microblogging; very space-restricted blogs. Like every other service ever made available on the Internet, people have used it for spamming links, and like most blogging software, it now uses nofollow links. In other words: linking to your websites on twitter won’t do anything for your search rankings. What it can do is help you bring in new customers and new business from your old customers.

For example, we often use our twitter page to let people know about new services we offer and articles that they might be interested in. At the time of this writing, the feed isn’t optimized yet; all it does is repeat the links from our Facebook page; thanks to Facebook’s linking feature, all you need to do is post a link and it’ll pull in the first paragraph of the linked page. Since we use descriptive permalinks, it’s easy to tell what the link is about even without other information..but isn’t there a better way?

By using a link-shortening service, we can add a description and still keep the total number of characters low enough to allow easy retweeting; retweeting is the process of forwarding on the message. For example, if we tweet “Awesome SEO article at xyz.com”, one of our followers might then tweet “RT: Awesome SEO article at xyz.com”, and maybe we get more visitors to this website.

There are several URL shortening services available, the most popular of which are probably bit.ly and tinyurl; twitter is also moving to wrap all links using their own t.co service. The downside of using these is that you can’t tell where the link is going without clicking on it; the upside is that it saves an awful lot of space!

So after optimization, we might announce the post on why pagerank doesn’t matter with something like this: “Why Pagerank Doesn’t Matter: http://bit.ly/cDbf56″. Short and to the point. And isn’t that what twitter is all about?