Above the Fold: The Blog

I am rather a sad geek, sometimes, and have a tendency to want to check out anything that Google is working on to see how well it does. Most of their products have worked very well, often better than their rivals’, so it’s always interesting to poke around in their Labs section or take a look at anything I see written up or discussed.

This week I’ve been playing with a couple of Google products. The first has been Google Calendar, which does exactly what it says on the box and I rather like it. Possibly if I didn’t already have a Google account then I wouldn’t have tried this out, but I thought it would be interesting. The real advantage to me is being able to transport my calendar between work and home easily, avoiding those potentially embarrassing moments when you double book yourself because you didn’t look at one or the other. For that, Google does a good job. The calendar is easy to set up, easy to log into and adding entries to it is fairly similar to adding entries to any other calendar package.

The only little niggles are the US-centric nature of their location information - they link into Google maps when you enter a location for an event but default to the USA. I somehow don’t think that I’m spending a week in Sidmouth Colorado this summer That said, it’s a beta application so they’re sure to continue improving it and it fills the function I wanted. It’s also quick to run, which is handy.

The much more exciting product that I’m investigating is Google Analytics. I applied for an invitation code a few weeks ago and it was issued yesterday. I’ve already been in and set up profiles for two web sites to see how it works. It’s all quite simple and they provide the little JavaScript snippet that needs to be added to each page that you want to track. Setting up this site, Above the Fold, wasn’t difficult because it’s a fairly small site and it’s all been modularised in PHP, so I just had to add the code to the footer file.

The other site hasn’t been completely set up because it has around 150 pages to add the code to. It’s my fannish site, which has grown rather large over the years and it’s the one that I’m most interested in having a peek at. One day I will set up the entire site in PHP to make these changes easier. For now, the reviews section (built on a PHP/MySQL backend) has been added to Analytics because that’s just a case of adding the snippet to a footer file and a few templates. I’ve also added the major indexes and all the pages for another entire section. I’ll get to the rest of the pages over the weekend.

I installed the code and did the various set ups in the analytics panel yesterday and took a look at my first bunch of data tonight. I have to admit that it’s much more detailed than what I have available from my ISP. Just looking at the first page gives me more data. One of the nice features in that first page is a map that shows where my visitors are coming from with dots appropriately sized to the number of visitors from that location. It’s even differentiating between parts of the USA. The host for that domain has never been able to track geographic location.

It’s handling the dynamic content with ease, another point that my host hasn’t got, so I can start to see exactly what people are most interested in on the reviews section. Analytics shows me the full URL with the apended variables, rather than just saying “quick_search.php” without that breakdown. That will be handy.

It gives me lots of information on entry and exit points in the site, something that I’ve never been able to track, and should give me trends over time for that stuff. Knowing which pages are immediate bounces will also be useful.
One of the really useful features is a navigation overlay. It loads up my site with little clicky things over any links so that I can request more information on who is using those links. Very handy for improving navigation.

Keyword search information is also much more detailed than my host provides and I can track that information over time. I’ve previously relied on wading through screens of referral data from search engines.

There’s lots of good information on browser, platform and screen resolution with a couple of surprises - apparently I have visitors using Safari on Linux and barely anyone using 800×600 resolution. 1024×768 is the favourite. 12% of yesterday’s visitors use Firefox on windows.

I’m going to be delving down further as more data is gathered, but at the moment I can safely report that Google is right when it says it’s one of the most powerful analytics packages out there. And it’s all free.

As documented yesterday, I managed to get the ‘acorns’ in the left-hand navigation bar fixed but had to take them out of the right-hand bar because I couldn’t replicate the trick. A little midnight musings brought the answer.

The code for the left-hand navigation elements is adapted from gavlinne’s original suggestion on the webdev journal:

div#nav-left ul#nav {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-left ul#nav li {
margin-left : 25px;
float : left;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-left ul#nav li {
margin-left: 12px;;
}

div#nav-left ul#nav li a:link,
div#nav-left ul#nav li a:visited,
div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-left ul#nav li a:hover,
div#nav-left ul#nav li a:active {
text-decoration : underline;
}

This all forced IE to see the ‘acorns’ my specifiying all the states of the a: tage and works perfectly well for a single-level navigation bar. In this blog, the right-hand navigation bar has multiple layers and for once IE displayed them as I intended when using this code, but Firefox didn’t. That’s actually a sign of IE playing up rather than Firefox, because Firefox quite rightly got confused by the float:left and sent things everywhere. The code above had an extra layer of ‘ul li’ added to anything that originally stated ‘ul li’, but there was nothing clearing those floats so the first layer of the list confused itself.

The trick was a slight adaptation below (in bold):

div#nav-right ul {
padding: 0;
margin: 0 0;
list-style-type:none;
}

div#nav-right ul li {
clear: both;
padding-top: 20px;
}

div#nav-right ul li ul {
padding-bottom: 20px;
}

div#nav-right ul li ul li {
margin-left : 25px;
float : left;
padding-top: 0;
}

/* Hide hack from IE5/Mac \*/
* html div#nav-right ul li ul li {
margin-left: 12px;
}

div#nav-right ul li ul li a:link,
div#nav-right ul li ul li a:visited,
div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
color : #813817;
text-decoration : none;
display : block;
padding : 7px 5px 7px 35px;
margin: 0;
background: url(images/acorn01.gif) no-repeat left center;
}

div#nav-right ul li ul li a:hover,
div#nav-right ul li ul li a:active {
text-decoration : underline;
}

That was the only adapatation needed and it worked like a dream. A little bit of fiddling with padding to ensure that the category headings don’t bump into each other, and the navigation is now working as intended in IE6, Firefox and Opera.

Although I suspect that it still explodes nicely in IE7.

With a little help from a friend, I managed to fix the acorns in the left-hand menu! It turns out that IE gets thoroughly confused occasionally and needs some elements specified in the CSS down to the nth degree before it will work properly. Sadly, I haven’t been able to replicate the same trick on the right-hand menu so I’ve done a little hacking around so that the right-hand menu has no acorns. Poor, deprived menu.

The acorns are still there in all other sensible browsers, though.

That trick also doesn’t work with the blog post titles, so they’re still being hacked around to work dully in IE and work in full, maple-leaf glory in Firefox, Opera etc.

One day, Microsoft will release a browser that actually does the same things that other browsers do and we’ll be able to junk all the hacks. Until that day, we just have to find new ways to work with the ‘undocumented features’.

I have spent a productive Bank Holiday weekend skinning this blog so that it now matches the rest of the site. Happily, it turned out to be much easier than I’d thought because WordPress is so well designed.

The re-work did require a few minor tweaks to the main site layout, turning it from a two-column layout to a three-column layout so that everything would fit well. A List Apart came to my rescue with this great article on three column layouts with liquid centre column and fixed sidebars. I was actually going there for something else, but when I spotted the article titled “In Search of the Holy Grail” after seeing several similar articles over the last few months, I had to give it a try. And the best bit is that it works in IE6 (with a hack or two), Firefox and Opera. I’m informed that it explodes nicely in IE7, though, so hopefully the community will be coming up with a few hacks to get around Microsoft’s latest insanity.

In fact, the only thing that the new layout doesn’t do properly is the little acorns in the left-hand navigation bar and ocassionaly in the right-hand bar. They display perfectly in Firefox and Opera, but randomly disappear in IE6. Damn.

If you’re viewing this in IE6, you will also miss the lovely little maple leaf motifs that decorate the post titles because, again, IE6 is randomly not displaying them. So I used a hack to pull those out and align the post titles properly. Firefox and Opera users can see the blog in its full glory.

Of course, I didn’t spend the entire weekend buried in code because that would be far too geeky. Nope, I braved the mud yesterday to venture into the local woods for a bit of a walk and a photo opportunity - it’s rhododendron season and I couldn’t resist. I will hopefully be updating the gallery with some results soon. But playing around with PHP, XHTML and CSS for a weekend after weeks of only seeing VBA and SQL at work was actually a lot of fun. I really am turning into a sad geek

Having a day off is always pleasant, although I always seem to end up doing useful things regarding websites rather than curlcing up in an armchair with a book. Ah, well.

In that useful things category, I have PHP-ed Above the Fold. It now has navigation, headers and footers neatly seperated out and modularised, making page creation that little bit simpler. A couple of ifs and switches allows me to feed titles and h2#id values into the header, personalising each page, and differenciate between different levels of navigation with ease. All that I now need to supply is a couple of variables and the includes and all of it is taken care of.

Maybe editing pure PHP files isn’t as “clever” as using a template class would have been, but for something this small it didn’t seem worth digging out the PEAR classes. Maybe when I start designing some new web apps for this site. Hmm

I also took the time to add a page for the Larren Art site. This lanched a couple of weeks ago and I’m very happy with the end result. You can read more about the design process in the Larren project page.

I am still humming and hawing about including a link to my fannish website on my CV. On the one hand, it’s host to my biggest and best web app - PHP/MySQL backbone, accessible, simple to use and surprisingly popular. It’s got login facilities for registered users and differing levels of access for the admin.

On the other hand, it’s fannish and doesn’t really feel “right” for a CV that’s supposed to be relatively serious.