tech.agilitynerd.com

Welcome to the new look of the AgilityNerd website. I haven't significantly changed the look of this website since I created it back in August of 2004 and it was certainly overdue! There have been a number of enhancements I've wanted to make that I just didn't have the time to implement.

It's All About Navigation

I like to consider AgilityNerd an "informational blog". It isn't really about how our dogs do in dog sports (competition or practice) or even much about our dogs, although I do indulge myself sometimes. So to me this site is only useful if readers can find what they are looking for. Before this update folks could use these mechanisms:

• The Categories listing in the sidebar
• The Search box in the sidebar
• The [[navigate Navigation page]] shows the full category tree view
• The Favorites page showing the most popular articles and some of the less well known articles that I like

I also wanted to let readers know which articles not on the front page were being read most recently and also what articles had recent comments. So I wrote two Blosxom plugins, [[lastcommented_lastread lastcommented and lastread]] to show the last ten articles of each type to readers.

So to make this all fit I went to a "three column" layout. Fixed sized left and right menu sidebars surrounding a resizable center section. This design is based on Alan Pierce's Multi-Column Layout with a modification to how the left side sidebar is positioned. This design allows readers with large monitors to control the size of the page as they see fit. According to my web host logs 98% of my readers view my pages at sizes larger than 800x600 pixels so this layout should work well but it also looks OK on smaller screens.

Ads and Affiliations

As I mentioned earlier this year I'm moving to a bigger, faster, and more expensive web hosting service and to offset the costs I've entered into three advertising/affiliate programs. All three are now active on my site.

You'll notice a [[CleanRun Clean Run]] icon in the left hand menu. I've become a Clean Run Affiliate so if you purchase anything from Clean Run through any links on my site or through clicking that icon I get a small percentage of the sale. So your Clean Run purchases will help pay my web hosting fees. I really like all the things Clean Run does for our sport, in addition to publishing their must-read magazine, so I am happy to be an affiliate.

I've also become an [[Amazon Amazon.com Affiliate]]. Amazon is the de facto site for book links on the web. Currently I'm using their recommendation system for dog books; but it sometimes comes up with some books that I don't like. So I'll be replacing it soon with only links to books I personally recommend. Again if you purchase a book through this link I'll get a small "kickback" from Amazon.

Lastly, I'd like to thank everyone who saw an interesting Google link on my website and clicked on it. So far this year I've raised $ 40 from Google ads, one click at at time. Please only click on ads that really interest you, unlike some dishonest websites, I'm not looking to make money on these ads through fraud.

I appreciate everyone's support. Especially the kind comments and emails!

Minor Changes

In addition to the new layout I've made some small enhancements.

The writeback (commenting) feature has been tweaked to try to correctly format (optional) websites or email addresses entered by commentors. The date and time of all new comments will now be stored and displayed. If the person leaving a comment doesn't include their name I now default it to "Anonymous" (I thought the Anonymous Coward moniker used on other websites was too hostile for my readers!).

I also spent far too much time tweaking the [[CSS]] to change fonts, and spacing. Overall fonts are one or two pixels smaller but line spacings are a little bigger. I tried to standardize the spacing of elements too. I cleaned up the printing style sheet so it is tiny now (and downloads faster) - as before if you print a page the side menus and extraneous elements aren't printed. I also fixed the fonts so Linux browsers would use a sans-serif font instead of failing back to a serif font.

I enhanced my [[hitcounter]] plugin to not count pages loaded by bots so the page visitor counts only reflect actual humans reading the pages.

I updated Site Plugin page with modifications to the various plugins

Still To Come

There are still some changes I'm planning on making and hope to roll out over the course of the summer...

• I ran the [[Python]] webchecker script that ships with Python 2.4 over my site and found about 50 internal and external bad links (most are due to the demise of www.blosxom.com) and need to fix those.
• I need to fix and correct links and email address formats in some old comments.
• I'll be replacing the Amazon generic recommendations with a rotating selection of my specific recommendations. I'll also probably include recommendations for books and DVDs from Clean Run into the mix. I'd rather folks bought from Clean Run since they are a smaller company that needs the income.
• I need to update my site page to include these changes.
• Convert all Clean Run links to include my affiliate id. Add images for all Clean Run magazines in my Clean Run search. Add link to both electronic and paper clean run magazines. Add links to the 2007 magazines from the index file that was just uploaded.
• Change my agility glossary to launch articles in a separate window.
• Update my shortcut icon shown in browser tabs to match my new logo.

I guess I should be doing agility training sometime too...

Loading mentions Retweet

I'm no graphic artist so when it comes time to create or change the look of my website I always have a difficult time. So I've discovered some tools and tips that might help other non artists create reasonable looking websites.

Here's the general approach:

• Select an existing template or layout to use as a framework
• Select a photo or logo that represents the theme/color scheme of the website
• Create a background or background image using a sample of the photo/logos color
• Sample colors from the background, photo or logo for highlighting other elements of the website

I'll present how I applied this approach to my latest website makeover and I'll discuss a some websites/tools I found helpful in these areas.

Selecting a Layout

Unfortunately I don't have any suggestions for templates for specific blog engines (apart from searching with Google). But I'll try to make up for that with my next discovery.

If you are familiar with using CSS for website customization Alessandro Fulciniti has created a set of 40 one, two, and three column layouts on his website. They are straight forward to follow if you've done any CSS coding. If you haven't please skip ahead to the next section for some other tips that might be useful.

I have to admit to having some problem retrofitting my old CSS design. My issue was with the rendering of the right hand column. When the negative offset for the column was larger than the right margin for the containing div the right column would be rendered at the bottom of the page. It would look OK in Firefox but not in IE.

Of course it is important to test any new layout in at least Internet Explorer and Firefox. Now that Safari is available for Windows it is easy to test on that browser as well.

Select a Photo or Logo

If you already have a color logo that you use for your business then you can help reinforce that logo by using those colors in your site design. Since my logo is currently black and white that didn't help me much.

I was looking to change my site to reflect the winter season so I went to StockXCHNG and found a nice royalty free snow scene by photographer ijsendoorn. There are thousands of interesting photos suitable for use in blogs hosted on Stock.XCHNG, it is a great resource and I heartily thank the photographers who post their work.

I then used the free Gimp image editing software to select a section of the appropriate size for the header of my site. The Gimp is easy to use and there is a fair amount of online help available if you are doing something tricky. Of course you can use Photoshop or a similar program if you have it.

Create a Background

This is an area where I was really at a loss. I've never been good at creating graphics, and a tileable image is even harder to create. There are some tutorials you can find via Google but I just wasn't up for the challenge. Of course you can use a complementary solid color background by sampling your photo or logo (see the next section).

Fortunately I came across a software program called Gliftex - An Infinity of Tileable Graphics Designs. This is an interesting program that can create a multitude of different images suitable for tiling across the background of a web page. Gliftex has a number of algorithms for choosing the form, color scheme, and interpretation and generating images. Here is a good overview of the product along with some examples.

Gliftex has a feature that makes it perfect for creating a tileable background image for a website, it can sample an image and use the colors in the image as its palette of colors. So I took my snow scene section and had Gliftex sample it. I pressed the Form and Interpretation buttons a number of times and after a while came up with these understated and simple tileable images:

As far as I'm concerned the $ 50 US for the Gliftex Home download was a great investment. They have a free demo version available for download if you want to play around before you buy.

Sample Colors for Highlights

So now I had an image for the header and a repeating image for the background. I just needed to add some matching highlights for some other areas of my blog to tie the whole theme together. I decided to color the headings of my right and left sidebars to match one of the darker colors of the header image. But how to pick out colors from the image?

Gimp to the rescue again. I loaded my image again and selected Tools > Color Picker. You are then presented with an eye dropper pointer. I just clicked on interesting colors in my image to obtain a color value that I could type into my theme's style sheet for the background colors. In the picture below you can see the color value is "bec7d0" which you would write as #bec7d0 in the style sheet.

Results

While there are an many additional changes to my theme I could make I am pretty happy with the cool, blue-ish, wintry theme I've created:

Take a look at AgilityNerd to see it in action or, depending on when you read this, to see my next seasonal theme. I hope some of these tips might be helpful for helping you create your next theme.

Loading mentions Retweet

I was looking at templates for ZenCart and came across some templates that use images from Stock.XCHNG. Over an hour ago I started browsing the images and am really impressed with the quality and breadth of photos that artists are making available for free use.

I'll definitely use some of these images to spice up my sites.

Loading mentions Retweet

I was reading the Blosxom email list tonight and came across an interesting photoblog by Rob Park. After enjoying some of his photos, I noticed his post about an online form for creating the XML, RSS, etc. buttons popular on so many websites. Adam Kalsey has created a simple (dare I say elegant?) form that gives you just enough inputs to completely control the look of the buttons. The image is generated in PNG format.

Had I known of this site before it would have saved me a couple hours messing around with Fireworks creating the buttons on my AgilityNerd Feeds page...

Loading mentions Retweet