Collection of Webmaster Tools and Resources

Being a successful webmaster requires the use of a lot of different tools and resources.   I’m always on the lookout for new tools and resources and are useful, so I was pretty excited when I ran across a post named the Webmaster’s Toolkit.

This post collects all sorts of useful resources and tips for improving your websites speed and performance.   If you haven’t already, I recommend you check it out.

WordPress Theme Footer: Useful Content or Fluff?

A couple of days ago I posted about some changes I’ve made to the blog design here at Kyle’s Cove. The most notable change is that I moved some of the sidebar content to the blog’s footer.

I was pleased to see that the reaction has been pretty positive overall, but some people have recommended that I adjust what is displayed in the footer. The main suggestion is that I move the recent comments module to the sidebar and add something like blog archives to the footer.

I feel that this is a great suggestion, but I wanted to see if I could get a discussion started about this and get some readers thoughts. If you were moving sidebar content to your footer, what would you put there?

Here are the two arguments as I see it:

  1. Useful Content – Some people I’ve talked to feel that if you place content in the sidebar, it should be useful content. The idea is that once search engine traffic is done reading the post and has scrolled to the bottom of the page, they are presented a choice. They can either hit the Back button on their browser or you can give them somewhere to go. Things like related/popular posts, recent posts/comments, categories, archives, or subscribe buttons would be good things to help keep that reader on your blog.
  2. Extra Fluff – The other argument is that people will see your useful stuff in the sidebar while browsing. Therefore, the footer seems to be a better place to put extra stuff that people will look for, but not your important stuff that you want readers to see. This would leave the footer for archives (which if people want to use, they will scour the page for), top commentators (which is more of a link out reward to regualar comentators than something people will use), and widgets such as MyBlogLog, BlogCatalog, and the Alexa widget.

I personally feel that #2 is probably the way to go, but I can see the point several have made with #1. I will be making some adjustments to the footer this weekend to shrink it a little and change what is displayed, so fans of #1, here is your chance to get me to change my mind!

Miscellaneous Other Website Maintenance

This is the fifth of a series of posts designed to discuss ways to monitor and improve your blog’s performance.

In addition to the website maintenance tips covered in the first four posts of this series, there are a few other things that can be done to help keep your site running smoothly. Here are a few other things I try to keep up on:

  • Update your WordPress Plugins – This obviously only applies to WordPress users, but that is who this series of posts is targeted for. Keeping your plugins up to date will help you to avoid security vulnerabilities, as well as help avoid problems when you upgrade to newer versions of WordPress. I try to do this monthly, but you should at a minimum do this everytime you upgrade to the next major version of WordPress (such as 2.2 or 2.3, etc.).
  • Get rid of things you don’t use – This is kind of broad, but in addition to removing code that isn’t being used, it can be beneficial to also remove old files that you aren’t using. This can include images that came with your theme that you have since removed, things you’ve uploaded to try out and didn’t stick with, or extra pages of code that aren’t being used. This probably won’t effect your site’s load time or anything like that, but it will help keep things more organized and running smoothly.
  • Check for bad links – Part of keeping your blog optimized for search engines is controlling your internal and outbound links. If you’ve changed your permalink structure, linked out to bad sites (pornography, gambling, etc.), or done outbound links to pages that have since been removed, this can have a negative effect on your search engine rankings. An easy way to find out what links are no longer valid is to go to Dead Links and have it spider your site. You can then go through and remove these links, or update them accordingly.
  • Use your Google Webmaster Tools – You should regularly check your Google Webmaster Tools to ensure that everything is set up the way you want. You can control how Google displays your site, validate your Robots.txt file, or submit your blog’s sitemap. Google will actually provide you all sorts of information about what their spider found when visiting your site, including HTTP errors, 404 errors, unreachable URL’s, and URL’s blocked by Robots.txt. This way you can remove old posts that are now unreachable for whatever reason, as well as verify your Robots.txt is blocking what you want it to and not additional stuff. You can also run a spider simulator if you want an idea of what your site looks like to the search engines.
  • Remove old scripts – Scripts often slow down your computer’s load time, so if you don’t use all those analytics services that you have scripts running for, you should probably remove them.

Anything else you do regularly to keep your website maintained?

How To: Testing Your Blog in Multiple Web Browsers

This is the fourth of a series of posts designed to discuss ways to monitor and improve your blog’s performance.

Once you’ve gone through and adjusted your code, it’s a good idea to follow up your changes with a quick browser check. Instead of manually downloading and installing a bunch of different web browsers, this can be easily accomplished by going to BrowserShots and enter your blog’s URL.

It will take a little bit, but Browser Shots will actually display how your blog looks in all selected web browsers. You’ll want to focus primarily on IE6, IE7, Firefox, and Opera. Most other web browsers are based on either Internet Explorer 7 or Gecko, which is the Firefox engine, so they should look fine if they work for IE7, Firefox, and Opera. This is a good habit to be in to ensure that your changes didn’t cause any display problems for certain web browsers.

If everything looks good, then you’ve had a successful spring cleaning and hopefully improved your blog’s performance!

How To: Clean and Optimize Your Blog’s Stylesheet (CSS)

This is the third of a series of posts designed to discuss ways to monitor and improve your blog’s performance.

Now that you’ve got your website code validated, another good practice to be in is to keep your stylesheet (CSS) as clean and optimal as possible. I try to do this at least once a month, as I am regularly making changes to my site and my stylesheet tends to be filled with a bunch of styles that aren’t being used for anything. This can help improve the navigation of your stylesheet and keep your file size down, which will help lower the site’s load time on occasions when the web browser grabs your stylesheet.

The tool I use to keep my stylesheet clean is called Clean CSS. You can add your stylesheet’s URL, browse your computer’s harddrive for a copy of your stylesheet, or copy and paste your stylesheet on to their website and click Optimize CSS. Clean CSS will then dig through your code and clean it up for you. In order to clean it up, Clean CSS will remove code that isn’t doing anything, as well as make adjustments to how the code is written to shrink the file size of your stylesheet. An example would be them changing:

padding: 5px 8px 5px 8px to padding: 5px 8px

It will also shrink some of your hexadecimal color codes whenever possible.

Once it outputs your new stylesheet, Clean CSS will provide you your optimized code to paste it over your existing stylesheet. If you don’t like Clean CSS, you can also check out some other alternatives such as the CSS Optimizer.

Another thing I do to improve the navigation of my stylesheet is to break it down into categories. You can add titles that won’t count as code by using certain characters that look like this:

/*- Post Meta Section */

Any other tricks you do to keep a neat stylesheet? Sound off in the comments below!

How To: Clean and Optimize Your Blog’s Stylesheet (CSS)

This is the third of a series of posts designed to discuss ways to monitor and improve your blog’s performance.

Now that you’ve got your website code validated, another good practice to be in is to keep your stylesheet (CSS) as clean and optimal as possible. I try to do this at least once a month, as I am regularly making changes to my site and my stylesheet tends to be filled with a bunch of styles that aren’t being used for anything. This can help improve the navigation of your stylesheet and keep your file size down, which will help lower the site’s load time on occasions when the web browser grabs your stylesheet.

The tool I use to keep my stylesheet clean is called Clean CSS. You can add your stylesheet’s URL, browse your computer’s harddrive for a copy of your stylesheet, or copy and paste your stylesheet on to their website and click Optimize CSS. Clean CSS will then dig through your code and clean it up for you. In order to clean it up, Clean CSS will remove code that isn’t doing anything, as well as make adjustments to how the code is written to shrink the file size of your stylesheet. An example would be them changing:

padding: 5px 8px 5px 8px to padding: 5px 8px

It will also shrink some of your hexadecimal color codes whenever possible.

Once it outputs your new stylesheet, Clean CSS will provide you your optimized code to paste it over your existing stylesheet. If you don’t like Clean CSS, you can also check out some other alternatives such as the CSS Optimizer.

Another thing I do to improve the navigation of my stylesheet is to break it down into categories. You can add titles that won’t count as code by using certain characters that look like this:

/*- Post Meta Section */

Any other tricks you do to keep a neat stylesheet? Sound off in the comments below!

How To: Verifying Your Blog Code is Valid

This is the second of a series of posts designed to discuss ways to monitor and improve your blog’s performance.

Once you’ve got your blog’s load time under control, it’s next time to go through and validate your blog’s code. Even if you are using a relatively unmodified WordPress theme that you got from someone else, there is still a good chance that your code won’t meet the web’s current standards. If itdoesn’t meet today’s web standards, it is true that it probably won’t cause your readers any hardship, but it can effect search engine indexing, as well as slow down your blog’s load time.

When it comes to code validation, you will want to first validate your site’s HTML. For this, I use the HTML validator from W3C. You are given the choice to validate by providing the URL of the code, validate by uploading the file from your harddrive, or validate by inputting the code directly into their page. I usually validate by URL and simply type my blog’s URL and let it display any errors that might be found.

You will also want to validate your Stylesheet while you are at it. I use the CSS validator, which is also from W3C. It has the same options as the HTML validator, and when run, will let you know if there are any potential problems with your stylesheet. With the use of this tool, I was easily able to clean out a bunch of code that I wasn’t using out of my site’s stylesheet.

Overall, keeping your code valid is not a huge priority, but it is a good practice to be in every couple months or so.

How To: Determing Your Blog’s Load Time

This is the first of a series of posts designed to discuss ways to monitor and improve your blog’s performance. 

If you run a lower traffic blog and are looking to increase your readership, there are several things you can do to help people find your blog.   The problem is, once they’ve found your website, it can sometimes be difficult to retain them as a reader.  This is especially true if most of your traffic comes from search engines or sites like Digg and StumbleUpon.

Whether you believe it or not, website performance actually plays a big part in keeping that unique visitor’s attention long enough to read your content.   If your website takes to long to load, it is unlikely that your potential reader will even stay long enough to see the full page load.

Luckily, there are several free tools to help you monitor your blog’s load time and figure out what is slowing it down.  The site I use primarily is called OctaGate SiteTimer.  Simply enter your blog’s URL, click Start, and it will do a quick check and display the results.  This whole process can be completed in 15-20 seconds!

Other sites that accomplish the same or similar goals are:

This should give you a good idea of what hangups are taking place when your website is loading.  Your goal should be to have your website load in under 7 seconds.   If it is taking longer, give some consideration to removing the culprits, which will usually be extra widgets appearing somewhere on your blog (MyBlogLog widget, Alexa widget, BlogCatalog widget, Good Blogs, Blogrush, etc.).   Also, some advertising services may add to your page load time if they are a smaller service with servers that have trouble handling the load.

How To: Determing Your Blog’s Load Time

This is the first of a series of posts designed to discuss ways to monitor and improve your blog’s performance. 

If you run a lower traffic blog and are looking to increase your readership, there are several things you can do to help people find your blog.   The problem is, once they’ve found your website, it can sometimes be difficult to retain them as a reader.  This is especially true if most of your traffic comes from search engines or sites like Digg and StumbleUpon.

Whether you believe it or not, website performance actually plays a big part in keeping that unique visitor’s attention long enough to read your content.   If your website takes to long to load, it is unlikely that your potential reader will even stay long enough to see the full page load.

Luckily, there are several free tools to help you monitor your blog’s load time and figure out what is slowing it down.  The site I use primarily is called OctaGate SiteTimer.  Simply enter your blog’s URL, click Start, and it will do a quick check and display the results.  This whole process can be completed in 15-20 seconds!

Other sites that accomplish the same or similar goals are:

This should give you a good idea of what hangups are taking place when your website is loading.  Your goal should be to have your website load in under 7 seconds.   If it is taking longer, give some consideration to removing the culprits, which will usually be extra widgets appearing somewhere on your blog (MyBlogLog widget, Alexa widget, BlogCatalog widget, Good Blogs, Blogrush, etc.).   Also, some advertising services may add to your page load time if they are a smaller service with servers that have trouble handling the load.

Everything You Need to Know About Favicons

Have you ever noticed those little images that appear in your web browser next to the blog’s name and wondered what they are, or maybe wondered how to go about how to add one to your blog? This post is being written in the hope of answering your questions regarding favicons.

What is a favicon? The name favicon has been around since Internet Explorer 5, when Microsoft decided that their web browser would start checking the website’s server for an image associated with a website. If present, this icon will then be displayed next to the bookmark text to help those with a lot of bookmarks locate the ones they are looking for quickly and easily.

Since then, the favicon naturally began to be used as a visual element that helps create brand identity. Once you give your website a favicon, people will then associate that image with your website, and in many ways, you as an individual.

Favicons usually appear next to your website logo in the address bar, but can also be found in a variety of other places, including next to your bookmarks, next to your website feed in many feed readers, or even at the top of your individual tabs in your web browser.

How do I create a favicon for my website or blog? A favicon is simply a 16×16 .png file that is converted to an icon resource and saved with the file name favicon.ico. Typically the image is either your blog’s logo, or an abbreviated version of that logo (such as Google’s “g” favicon). In order to avoid additional load time, it is recommended that you not use more than 16 colors in your image. You’ll also want to exercise extreme caution if you decide to make a dynamic favicon, as this can sometimes effect your website’s load time, as well as possibly costing you money by hogging your hosting bandwidth.

Once you’ve created an image that you want people to associate with your blog, you will then need to convert your image over to the favicon.ico format. It is best to have a logo with a transparent background, to avoid having your logo appear like it is in a box. Once you have a website logo saved on your computer’s desktop that you are comfortable with, I recommend you visit FavIcon from Pics. This website will walk you through the steps of getting your file converted to a favicon.ico file and then give you the option to download it in a zip file. You’ll want to save it somewhere on your hard drive and move on to applying the favicon to your website.

How do I apply the favicon? Once you have the favicon, placing it on your website will depend on which blogging services you use. For WordPress users, you can simply upload it to your uploads folder, or if you aren’t using any sub directories that you want to have a different image, you can actually just load it to you root directory. If it sounds like I’m speaking gibberish, you can use the Favicon Manager plugin and load the favicon.ico file wherever you want (and just point towards it in the plugin options panel).

For Typepad users, you can find instructions here. You simply load the file into the File Manager and it should be recognized automatically. If you have multiple websites on your Typepad account, you will instead need to place the favicon.ico file in your individual folder for that particular website (otherwise it will be used on all your Typepad websites).

What if my favicon isn’t showing up? You will want to make sure you have the following two lines of code placed in your website’s header between the head tags:

<link rel="icon" href="/favicon.ico" type="image/ico">
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

This will help ensure all types of web browsers find your favicon. Unfortunately, when sources such as RSS feeds check for updates, they don’t require the website to load, so this information is not sent to them. As a result, you will want to place it in the root of your directory to ensure that your favicon will be found. For most WordPress users, your root directly is the public_html folder.

This means you will have it in your public_html/favicon.ico folder, as well as in your public_html/wp-content/uploads/favicon.ico (where the browser looks for it) . If you prefer to have it in only one spot, you’ll need to update the header code to point towards the root directory.

If your problems are specific to Internet Explorer 7, I recommend you check this out FAQ by Jeff.

In my personal opinion, I feel that it is extremely important to have a favicon on your website. I’ve also found that using your favicon in your profile pictures (MyBlogLog picture, etc.) will help improve your brand identity with others, so you may want to consider that as well when setting up your profile with different companies.

Oh, and an added bonus for favicon lovers! If you really love favicons and maintain a WordPress blog, you can check out the Favatars WordPress plugin as well, which will place the favicon of the website the commentator uses next to their comment.