Web Design – SEO – Technology Reviews

Howdy, everybody. I have finally returned to convey some more information regarding the technical side of web design. Today’s topic is HTML5 and microdata.

I have recently begun using HTML 5 instead of XHMTL 1.0. The spec for HTML 5 is still a long way off from being a W3 “recommendation,” but I decided to switch to it because of “microdata”. Microdata, or Rich Snippets as Google calls them, are a way to mark up the information on your web site to be more machine readable, such as products or addresses. For example, you can use it to tell search engines that a portion of your page pertains to a specific product, pointing out exactly what makes up the name of the product, the price, its image, and so on. The following code example is pretty typical for an individual product’s info (obviously simplified for this example):

<div>
	<div>The Web Site Maker</div>
	<div>$99.99</div>
	<div>This is the incredible Web Site Maker. No longer
		do you have to get your hands dirty. This software contains a single
		button. Push to receive web site.</div>
	<img src="/img/spacer.gif"> 

However, a search engine doesn’t necessarily know what all that means. Google’s pretty scary and can probably decipher all that, but, with microdata, we can help by marking exactly what each bit of info means. As follows:

<div itemscope="itemscope" itemtype="schema.org/Product">
	<div itemprop="name">The Web Site Maker</div>
	<div itemprop="offers" itemscope="itemscope"
		itemtype="schema.org/Offer"><span itemprop="price">
		$99.99</span></div>
	<div itemprop="description">This is the incredible Web Site
		Maker. No longer do you have to get your hands dirty. This software
		contains a single button. Push to receive web site.</div>
	<img itemprop="image" src="/img/spacer.gif"> 

What is this itemscope and itemtype stuff, you may be wondering. These are attributes new to HTML 5, and thus the reason for switching to it. These attributes are legal on nearly any element and are used to mark up our data. The itemscope attribute is used to mark an element as the container for a particular item—in this case, a product. In the example, it means everything inside the element with the itemscope attribute is information about this particular product. It’s within the “scope” of this product. As an aside, you may notice that itemscope “equals” itemscope in the example. This is only because I am using the XHTML flavor of HTML 5. If you were using the HTML variant, you could just use itemscope on its own without the ="itemscope" portion.
After itemscope comes itemtype="schema.org/Product". As the name implies, it specifies the type of item for the machine reader to expect. “Product” is one of a plethora of types you can use, a list of which can be found at Schema.org.
Moving on, itemprop="name" obviously specifies the name of the product. “Name” is a property of the “Product” type. The Schema.org web site shows in detail the properties of each type, usually with examples, under their schemas section. Some properties, however, are more than a simple text value. Some are actually an itemtype of their own, such as the price of the product. It is not merely an itemprop="price" with a number inside, but an “Offer” type. So it is necessary to again add the itemscope and itemtype attributes. I also had to add an extra element—the span—inside the price div so I could apply the “price” property, a property of “Offer”.
The rest of the example is just made up of some additional itemprop attributes. After you’ve marked up your information, you can use Google’s Rich Snippets Testing Tool to make sure it’s marked up correctly.
If you’re already using some form of XHTML, it should be a pretty simple matter of changing the doctype and replacing your <meta http-equiv="content-type" content="mime-type; charset=utf-8" /> (or whatever you may be using) with a simple <meta charset="UTF-8" /> to convert to valid HTML 5. It’s not necessary to use the new elements such as header or section. Your old div elements will work fine. It’s probably not even desirable at this point to utilize the new elements thanks to the inability of Internet Explorer 8 and lower to display them without a hack.
Welcome to the future. I hope you can start using microdata (AKA Rich Snippets) to make the web a more semantic place. Don’t forget to check out Schema.org for all the supported types and their properties. Have fun, web wizards!
				

When it comes to your conversion rate, you may not have thought about how your site’s design factors in. All too often, designers and developers are trying to put together the slickest looking pages, with the most up to date web technology, and as a result, they forgo considering a visitor’s experience. When designing any site, it is critical to consider things from the visitor’s point of view. Doing so can be the difference between visitors converting to customers, and visitors leaving without making a purchase.

A common pitfall in site design is to make it too complicated. How many times have you visited a site, and had to click through a landing page animation? While the site designer probably spent a long time putting together a cool Flash animation, and while they certainly thought it would attract attention, typically, these things annoy visitors. When you visit a site, you are looking for specific information, not flashy animations. These types of design elements can turn visitors away before they even get to your product page.

As well, some site designers employ ads that automatically play audio and video, or they include music that plays in the background. Not only can these design elements become annoying and turn people away, but they can also slow down loading times exponentially. And some designers do not even include a function to turn off these audio and video elements, leading to visitor frustration, and no conversion.

Yet another design flaw that is often overlooked by designers and developers is the checkout process. If you have gotten a visitor to attempt to make a purchase, you are on the right track. However, if they get to the checkout and can’t figure out how to complete the transaction, they will be even more frustrated in the end, as they have just spent time on your site, they found what they wanted, but now they can’t purchase it. Having a poorly designed checkout system is essentially thumbing your nose at the customer, telling them that you have what they want, but they can’t get it.

In the above examples, the designer simply did not consider the user’s experience. Companies spend millions of dollars and thousands of hours per year on focus groups in order to figure out what customers like and what they don’t like. Why? Because the customer is the entire reason for going into business. When people visit your site, you want them to purchase something, not leave. And if your site is poorly designed and not engineered for a comfortable user experience, not only will customers not make purchases, but they will not come back in the future. Your site may even gain a reputation for its poor design, leading to a bad reputation.

Eric Wyatt writes on social media and internet marketing, focusing on conversion rate optimization and landing page design.

If you saw my previous post on valid Flash embed while maintaining preload functionality and used it, be warned: when the user does not have Flash, a lovely <![endif]--> will appear in IE where the Flash movie would normally be. The only way around it I’ve found is to actually duplicate everything from the opening object tag to the closing one so there is one each for IE and Firefox. For example:

<!--[if !IE]>-->
<object data="movie.swf" type="application/x-shockwave-flash"  >
	<param name="movie" value="movie.swf" />
</object>
<!--<![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  >
	<param name="movie" value="movie.swf" />
</object>
<![endif]-->

Definitely a pain, but I’ve found no other way around it.

Also in my search for a solution, I discovered that our old pal Internet Explorer does not let you append anything but param elements to object elements in Javascript. That was pretty frustrating. Don’t try that. It doesn’t work.

Link Exchanges

A lot has changed when it comes to gaining links to your website. More importantly a lot has changed on what is considered a good link or a bad link. With the economy in the tank, we are getting more and more calls for help with search position and increased traffic. Some of the calls are from potential clients that have never paid for any type of link building or site optimization, but a good percentage is from small business owners that have either been a part of Link Exchange programs or have purchased links in the past and now they are finding out  it is not working for their website any more. If you are not familiar with the Google or Bing guidelines for links then you should read Google’s position on link exchanges and Links: the good, the bad, and the ugly – Part 2 from Bing.

Paid Blog Networks

So what do you do if link exchange software doesn’t work any more? How about all the fuss about these blog networks? That’s a question we have received a few times. First let me tell you about blog link networks where you pay a monthly fee and publish as many posts as you want, with links to your website. Your posts are distributed throughout a “network” of blogs. The claim is link diversity and unlimited potential. Don’t waste your time! This type of network is popular because they pay out good commissions, that’s it! These networks are easily detected which means they are easily discounted by Bing and Google and could be considered a bad neighborhood. You will waste a lot of time writing or you will pay additional fees to have the writing done for you, and you get nothing or near nothing in return. That time and money would have been better spent putting an article on a popular article network or sending out a press release. While neither of those methods are high value they generally have some value, unlike the so called Nirvana of subscription blog networks. With generic category based blog networks with no specific theme and some of the worst content ever written, you will get zero benefit. Once your post is pushed off of the main page or the main category page, which usually happens in a day or two, any value is lost. At that point your time, effort and money live on a page buried in a site that nobody, including Bing and Google, gives a rat’s ass about.

Example of a Blog Network where you pay per month to post as many times as you want. Just look at the quality.

Example 1 – Example 2

If you think this type of site is not easily detectable, let me show you how I found them: Google This and then look for nonsensical domain names as the title. See the similarity? Most of these are from one of the most popular subscription blog networks out there. Notice every post has a single keyword link buried in the post? It gets worse, look at almost any post that is over 90 days old and copy a unique sentence, then search for the quoted sentence on Google, and 90% of the time the article can’t be found. The only people making money here is the owner of the blog system and their affiliates.

Let me say that there might be a paid blog network that actually works, but it would need to follow a few rules. I just pointed out one of the most popular networks that in my opinion is a waste of money and just ripping people off. If someone really wants to create a blog network that works, it would need to follow at least the following 4 rules:

1. At least 75% of the posts need to be commercial quality information without any paid links embedded in the article.
2. Every subscriber’s post needs to be reviewed by an editor for “real value”.
3. Each blog needs to have a theme and specialize in one particular subject.
4. Each blog in the network needs to be optimized and promoted as a “real website” with good content.

That said, you are most likely still violating Google’s guidelines if you pay to post your link on those sites. I’m not judging, just pointing out the risk involved.

How To Build Links

So how do you get quality links to your site? You need to create information and multimedia that people need and are willing to link to. Then you need to contact relevant websites and convince them that they should link to your content. If you are a product reseller, you should get your vendors to link to you as an authorized dealer. If you are a member or sponsor of any organizations, you need to get them to link to you as a such. You could do some guest blogging, but be sure the value of the link you get is greater than the value you would get from posting the article on your own website. You can also use article marketing, press releases, and directory submission but it’s just for diversity and extra exposure, alone they are not the answer.

Let me know if you agree, disagree or what I missed. I look forward to your comments. | Read the original Link Building 2010

Update: Example code updated. It used the shortened form of br before, as in <br />. That doesn’t sit well with IE. It now uses <br></br> which works. The same goes for object. It similarly does not play well with Firefox 4 (perhaps even lower versions) in shortened form.

If you’ve done much web work before, you’ve probably, at some time or another, had to use an br. It’s not pretty, but sometimes it’s the only choice, such as embedding a widget from another site or displaying things such as real estate listings. One of my biggest problems with it is that it doesn’t exist in the spec for XHTML Strict! It exists in Transitional, but I don’t like to use it. That may be good enough for some developers, but certainly not for me. How about you?

In Internet Explorer 8 (and possibly IE7, but I have not tested it) and Firefox, you can use the object element to embed a web page just like an br; however, IE gives it a thick, lovely border that seems impossible to remove. Here’s the trick: employing IE’s conditional comments, use an br for IE and an object for everything else. Here’s an example:

<!--[if !IE]><!--><object data="www.bliznet.com/" type="text/html"  ></object>
	<!--<![endif]-->
<!--[if IE]><br frameborder="0" src="/img/spacer.gif">