Creating a couple of mockups for a site has some real benefits, and it doesn’t just effect the appearance. It can also enhance the code and navigation of a site. Creating two versions for a site may sound like an extra expense, a simple pain in the butt, seem pointless, but it helps a site out a lot. Continue reading »

 

A month ago today I moved my Google Analytic code up to the top of my site. Google suggests keeping it near the footer of a site. I did this to ensure I capture as many visitors as possible. Doing this, I expected more visitors to be tracked because I could catch those that normally bounced off the site before the whole page had loaded. I also expected an increase bounce rate because I was now doing a better job at capturing those visitors. Continue reading »

Aug 042009
 

Every morning I like to read blogs and forums. Here are the top three I found of value today. Continue reading »

 

This is a basic tutorial on how to use heading tags on your website. It’s basic, because its use is very basic. The reason I am posting this article  though, is because it has become apparent to me that many web developers, or site owners have no clue on how to use it correctly, see my reasoning why. To top it off, it can often be difficult to position. You should be able to come close to doing it right though, and after reading this, you should have a thorough understanding on its purpose.

What Are Header Tags?

Header tags do two things. They outline the sites content, and they define the value of the content below it. To use the tags you simply wrap the content like this:

<h1>Title of Site</h1>

Using my site as an example you can see it in action:

My logo is in the <h1> position. This is not ideal, text is preferred here. To compensate for this I have made sure the image has a title. Most data extractors will recognize this. So in this particular case my <h1> tag will reflect “Best Web Image – Web Usability and Design”, the image title.

The <h2> wraps around the page title, and the <h3> tags wrap around paragraph titles. It’s a simple outline of a sites content created by heading tags. They are used by most major browsers. They have been around since I’ve been building sites, 1996, and probably before that. It’s basic HTML code.

headings

Below is an example that I think will get you motivated in using header tags correctly though.

By using W3C’s Semantic Data Extractor on my Contact Information Post you can see the outline it makes of my page. It does this by grabbing the header tags. You may have to scroll down a little to find the outline on the extractor page.

H1 [Best Web Image - Web Usability and Design] – My sites title

  • H2 Contact Information – The Page title
    • H3 Contact Information is Your Reflection – Paragraph title
    • H3 Things to Include on Your Contact Page – Paragraph title
    • H3 Related Posts – Paragraph title after the post
    • H3 One Response to Contact Information – Paragraph title for comments of the post
    • H3 Leave a Reply  – Paragraph title for contact form on the post
  • H2 Improve the Usability and Design of Your Website – Post is over, this is in the footer starting new content

You can easily see how the content is nicely organized for search engines. It also is now nicely organized for the visitors. On every page of my site, headings are defined the same way. Visitors can then quickly recognized the level of importance by simply seeing the size difference. This improves scanning, consistency, and a visitors ability to use your site faster.

SEO Land

Now here is a crazy part about heading tags, and I think it’s why so many mess it up. A couple of years ago wild rumors were going around that if you put your important keywords between <h2> tags Google will give them more value. Web developers were suddenly using <h2> tags everywhere. They didn’t know how to use them, they just new Google liked them.

Well the rumors were partially true. The reason Google, and other data mining applications, like the <h2> tag is because of what it represents. If used correctly, it often represents the page title. Obviously a page title is a good indication of its content.

What does your site outline look like when you go straight to a <h2>, and skip using the <h1> tag all together? Well, if you didn’t use an <h1> tag, you don’t have an outline, and data extractors will reflect this. Even if Google gives you a little more credit for that <h2>tag it found, your missing out on the most important keywords, the ones hidden in your sites title, aka <h1>. A <h2>tag is great, but is still bows to the king, <h1>.

How valuable is your content if you just wrapped it all in <h1> or <h2> tags? Well all things being equal, nothing will have an increased value unless it was highlighted somehow. If everything is special, nothing is special.

Time to Test and Improve Your Site

So are you ready to test your site out? Visit W3C’s Semantic Data Extractor, and type in your url. If the extractor fails to show your sites outline, time to get to work. Don’t worry if you do fail though, I’m guessing 90% of you will. Just use the information, fix your site, and get a head start on your competition.

Did you get an outline for your site using the extractor? Sweet! You are are the only one out of ten that do!

Jan 202009
 

One of my Facebook buddies just posted some sweet code to create a great litter div slider. All of the code an instructions on how to install are on his blog. Takes a little html, css, and javascript.

Jan 082009
 

tweetbackI am sure most of you bloggers are familiar with the term pingback, and are most likely familiar with the service called Twitter. What do they have in common? Well if it was a few days ago I would say nothing, but then their was Dan Zarrella. Dan had the brilliant idea of creating Tweet Backs.

Tweet Backs lists tweets that were made about your post. You can see an example of it working right here on this post, assuming someone tweets it. The script works great, and I love the idea. It does have one problem though. It runs on his server. I guess he didn’t expect it to be so great, and the popularity is starting to heat that server up. It could be because it only takes one line of code, and is a snap to install.

Already, TweetBackRedux

So already there has been a fix to the slow server issue. Jeremy Hilton has created a version all nicely zipped up for you so you can install and run the script on your own server. It is what I have chose to do. Simply unzip or tar the file and follow the three step installation process.

Download page for TweetBackRedux – Run the script on your own server.

Update: On Feb. 16th, 2009, I terminated the script. See Why

Nov 222008
 

myspace

Any MySpace fans out there? I tried it a long time ago, have an account, but honestly never use it anymore. Time is the main reason, but another reason is that incredibly poor layouts that people come up with. Music, tons of animated graphics, and just complete craziness in most cases. Well here is a site for you MySpace lovers that could help you out: MySpace Layouts.

MySpace Layouts have three cool things for MySpacers. Lots of layouts, lots of add-ons, and a toolbar for your browser where you can get the latest layouts and codes. I would imagine you would need to be a hardcore MySpacer to use the toolbar, but it was feature rich. The toolbar also has a Google search feature in it. This could be good if you have the Google Toolbar already. You could simply remove that one, and add the MySpace one. In addition to their layouts and add-ons, they have lots of free MySpace graphics, code to tweek your layout, and forum.

For you anime lovers they had over 100 layouts. NFL fan? They had your category, but no layouts to be found. Taking a look at all of them, they have at least 400 different layouts to select, so I think these guys can help you out if you are in need of a makeover. Pretty good helper site MySpace users, and if you have no clue what MySpace is just visit their site: MySpace.com.