Category: SEO

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 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!

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.

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?

HTML 5, Part IV: Canvas

One of the hot new elements in HTML5, canvas allows you to draw graphics, generally using javascript. Remember that the canvas tag is not supported by IE8, so you’ll need to provide fallback content, like we did in the HTML5 video section, for IE users.

<canvas id=”id” width=”x” height=”width”> </canvas>

The width and height attributes, shown above, are both optional; unless specified they default to 300 pixels wide by 150 pixels high. You can set these using DOM properties or resize the element using CSS.

The canvas tag has not been implemented consistently between browsers. Notice that this isn’t a self-closing tag; text between the two tags will be ignored, so you would put replacement content there for browsers that do not support the canvas tag; leaving that space blank means that older browsers simply won’t display anything. Safari does not actually require the canvas end tag, but Mozilla does; thus the above style works for both as Safari simply ignores the </canvas>.

The WHATWG page has full documentation for this tag; unlike most other HTML, it requires some scripting to be useful. Rather than fully explore the tag, I thought I’d link to a few interesting sites that use it.

The HTML5 Canvas and Audio Experiment puts on an interesting light show (with sound, if your browser supports the <audio> tag). Notice the fallback text inside the audio tag in the page source, displaying an error message for browsers that don’t support it.

ball game – click the set of two or more balls of the same color to remove them. Can you get them all?

You can even use canvas to play a simplified game of Super Mario Kart!

HTML5, Part II: What Features Does My Browser Support?

Last week we dived right in to our discussion of  HTML5 with a quick tutorial on how to embed video, but we also mentioned that modern browsers support a subset of the new markup – no browser is yet 100% HTML5 compatible. So how can you tell (aside from running around looking up references) which features are supported?

When your computer downloads a webpage, it starts by creating the Domain Object Model (DOM), which is a collection of objects representing all elements on the page. If a browser supports a particular element or feature in HTML5, its DOM will contain that information. While you can check for each element you need individually, MIT has provided a javascript library that detects support automatically. After downloading it, you’ll need to include the following element inside the page head:

<script src=”modernizr.min.js”></script>

 

The script runs automatically when the page loads and creates an object called Modernizr that you can test to see which features it detects by checking the truth value of the appropriate boolean.  For example, to check whether the browser supports HTML5 Audio, you could use a line in your javascript saying:

if (Modernizr.audio) {

The website contains sample usage for each of the items it checks. Additionally, it helps keep things from breaking in Internet Explorer. By using Modernizr, you can serve the appropriate HTML5 code to modern browsers, while providing other content that will make sense to older browers.

Remember last week when we talked about  putting three different <source> tags inside a <video> element? Another option would be to use Modernizr to check what type of video the browser is capable of playing:

if (Modernizr.video) { // Does the browser support HTML5 video?

if (Modernizr.video.ogg) {

//play Ogg Theora video / Vorbis audio in an Ogg container
} else if (Modernizr.video.h264){

// play H.264 video / AAC audio in an MP4 container

}

}

Now that we’ve seen how to figure out what features the user’s browser supports, let’s get back to things that most browsers do. Next up, something every modern browser (even IE 8) supports: local storage!

HTML5, Part I: Video

I had originally planned to finish off my Web 2.0 Overview before getting into the specifics of each technology, but yesterday’s introduction to HTML5 got a lot of attention, so we’ll move it up a bit.

HTML5 supersedes HTML 4.0, XHTML 1.0, and XHTML 1.1; it provides new tags for handling many common web design elements that are currently handled with third party applications such as Flash, and standardizes elements that have never been formally documented.

What do you need to get started?
The latest versions of Chrome, Firefox, Opera, and Safari all support some but not all HTML5 features; Internet Explorer 8 has a few features and IE 9 is expected to add more. As always, when designing for Internet Explorer, be particularly careful about elements that compete with Microsoft’s own offerings – for example, IE 8 does not support the canvas tag, which would replace Microsoft’s Silverlight technology. In this series, I’ll attempt to focus on those elements that are supported by all of the major browsers, or at least mention the exceptions.

Show me the video!
Let’s start with how to embed video in a webpage. Traditionally this has been done with a third-party plugin such as QuickTime, RealPlayer, or Flash; now we have a standards-based method that should be supported on all platforms. Currently the <video> tag works in Chrome, Firefox 3.5, IE 9, Opera, and Safari 3; however, each browser supports different codecs and containers. Unfortunately, there is no one container/codec combo that works for all of these browsers, so if you want your video to show up for everyone using an HTML5 browser, you’ll need to encode it multiple times. Fortunately, HTML5 allows you to specify several videos in one video tag, leaving it to the browser to choose which one to display. To have the video display on all browsers, you’ll need the following encodings: (Converting video into the correct formats is one service a professional website designer will provide)

  • Theora video and Vorbis audio in an Ogg container
  • H.265 video and AAC audio in an MP4 container
  • VP8 video and Vorbis audio in a WebM container

Finally, to accommodate browsers that do not support the <video> tag, you’ll want to fall back to a Flash video.

So give me the tag details, already!
When you only have one video file, the tag works pretty much as expected; however, it has a number of optional (but desirable) attributes:

<video src=”videoname” width=”XXX” height=”YYY” controls> </video>

So what’s all this? The src part, width, and height should be fairly self-explanatory;  width and height are optional but should be used anyway. By default, the video tag does not offer the user any type of control over the video; the controls option adds a built-in set. Alternatively, you can write your own; the video element has methods play() and pause() and read/write properties volume, muted, and currentTime.

If you expect every visitor to watch the video,  the preload option will start it downloading as soon as the page loads; setting preload=”none” will tell the browser not to load the video until it’s requested. Finally, the autoplay option does exactly what you would expect; it downloads the video and starts it playing as soon as possible.

Several videos, one tag
What if you went ahead and made three encodings of your video so everyone using an HTML5 browser can see it? In that case, your code will look something like this:

<video width=”xxx” height=”yyy” controls>

<source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>

<source src=”video.webm” type=’video/webm; codecs=”vp8, vorbis”‘>

<source src=”video.ogv” type=’video/ogg; codecs=”theora, vorbis”‘>

<object width=”XXX” height=”YYY” type=”application/x-shockwave-flash” data=”__FLASH__.SWF”>

<param name=”movie” value=”__FLASH__.SWF” />

<param name=”flashvars” value=”image=__POSTER__.JPG&amp;file=__VIDEO__.MP4″ />

</object>

</video>

Do you really need all that? Well, no…but if you don’t specify exactly how each video is encoded, the browser will find out whether it can play a video by downloading it and trying to play it, wasting your bandwidth and the user’s time. Better to put in a little extra effort beforehand! The object tags will be ignored by HTML5 browsers (as will any non-source tags inside the video tag) but will cause older browsers to display the flash movie.

Side note: the MP4 file format should be listed first, as the iPad only notices the first source listed and will fail to play your video otherwise.

Acknowledgements:
Video for Everybody offers a more in-depth discussion of setting up your videos to be readable by everyone,

HTML5: Up and Running (due out next month from O’Reilly) contains a fascinating discussion of the history of HTML and instructions on encoding video.

Web 2.0, Part I: Overview

You’ve probably heard the term web 2.0, which refers to more interactive websites (although no single definition exists).  Rather than just browsing static webpages, users interact with and even change them; this is good for the site owner, because not only are interactive websites more likely to keep users coming back, users can actually add value to the site.

A number of tools have been developed that are particularly useful for building web 2.0 sites; today we’ll take a brief look at a few of them.

AJAX, which stands for Asynchronous Javascript and XML, allows for faster user interaction.  Simple processing is done on the client side in javascript without having to wait for the data to be routed to the server and back; in the meantime, data that does need to be transferred is formatted with XML. AJAX allows you to do things like updating parts of a page as new information becomes available, without ever reloading the entire page.

Flash, of course, is still very popular in spite of not being supposed on the iPad.  Many flash applications are now written using Adobe Flex.  Flash is frequently used to add animation, video, and interactivity (particularly advertisements and games) to websites.

Much of the functionality of flash is now being provided in HTML5; while it is still technically in draft status, major browsers are already being updated to be compatible with the new standards.  HTML5 has the advantage over other technologies in that it should (soon) be supported on all systems, whereas Flash and Javascript pages will not be available to all users.

Blogs, of course, are a big part of the more interactive web; we covered WordPress last week, but there are a number of other options as well. Social networking (e.g., Facebook) is huge, and users also want new ways to consume your content (e.g., RSS). PHP has long been used for coding interactive sites, particularly in combination with MySQL databases. CSS, of course, allows you to customize the look of your content without having to do any extra work on the content itself; see the Zen Garden for a nice example of what CSS can do.

In the future, we’ll be providing a more in-depth look at each of these technologies, as well as talking a bit about when you might want to use them.