Above the Fold: The Blog

Life would be much easier if all instant messaging systems could talk to each other. I can’t see that happening any time soon, but it would definitely be an improvement on the current system.

This thought was inspired by spending 45 minutes getting my Yahoo account reactivated so that I could discuss a website with a client. I hadn’t used Yahoo for so long that I’d forgotten my password, but the process for recovering my password makes breaking into a nuclear missile silo look simple.

The good side to it is that I’ve now got proof of how useful applications like instant messaging are for doing things like client briefings. My client lives in Los Angeles and she’s trying to get a resume site working for her sister, who is a film editor. For me this is an exciting project - the actual layout element of the site is nothing new, although it will be fun to design, but it needs to have demo reels incorporated so I’ve spend the last few days researching how to embed Quicktime movies in a website. With an odd touch of co-incidence, A List Apart’s latest edition has a tutorial on an accessible, standards-based method for doing exactly that. It gives me a good place to start when the client gets the files to me, which is all I really need.

The purpose behind this post is the chance to waffle a little about how cool it is that I can now have transatlantic clients thanks to the various web apps out there. In fact, with all of these facilities at my fingertips there’s absolutely no reason  to restrict my potential clients to people within a 30 mile radius of my house. I could potentially talk to clients in LA, Bangkok or Melbourne just as easily as I can to the ones just down the road. Possibly it’s even easier - that IM conversation with my client has been saved off-line so that I can go back to refer to it when needed and I didn’t need to take copious notes as I usually would.

With facilities like this at our beck and call, is there any reason anymore why small companies need to remain local companies?

CSS Zen Garden is one of my favourite sites for inspiration and I thought that it was time to point out a few of my favourites from the site. It’s one of the sites, along with Eric Meyer’s, that first demonstrated to me how powerful CSS is and the sheer beauty of the designs that can be accomplished with it. I suspect that these are most people’s starting points in CSS, whether you’re a pure designer or more of a coder/developer with a love of beautiful design like me. I am indeed geek enough to own “The Zen of CSS Design” and it is rather thumbed through because it manages to look gorgeous while providing dozens of hints, tips and concepts for things that can be done.

The part of me that appreciates clever ideas adores the CSS Zen Garden concept of one HTML file and hundreds of potential CSS designs. It’s often a good reminder that what I’m attempting probably isn’t impossible (although it might seem like it) but will need a bit of cleverness. And designers shouldn’t let coders say it’s impossible - our job is to make those gorgeous designs work as functional websites, hopefully adding to the site rather than dulling it down.

But I digress and now return to the point.

Top of the list of favourites is Museum. I love the surface simplicity of the black and white design, with all the detail that’s there when you look more closely. The page flows, it’s interesting to look at and the text has become a part of the design and shape of the page.

Dead or Alive is another black and white design that’s fun as well as good looking.

CSS Zen Ocean isn’t one of the official designs, but it’s great fun and demonstrates some interesting uses for transparency in PNGs. The designer has also made it as cross-browser compatible as possible, despite IE’s current lack of support for alpha-transparency in PNGs, by targetting IE with GIF replacements. Looks best in a modern browser such as Firefox, but I like the creativity in this one.

Bonsai Sky is another design that shows off some special effects in CSS - check out the window border and the little guy on the right hand edge of the screen.

Gemination needs to be viewed in a CSS-standards compatible browser such as Firefox or Opera and then in Internet Explorer to understand why it’s cool. It’s a great demonstration of how different the CSS support is in the two types of browsers and for once that has been used as an advantage, targetting different designs for each. Lots of the techniques used in this one can be ported out to hack around IEs bugs and get sites looking right in both browsers, but I like the way that the designer has gone in the opposite direction to produce completely different designs.

I’m sure that I’ve missed lots of the ones that I wanted to point out, but I think that I covered the basic reasons why I visit the CSS Zen Garden regularly.

In other slightly exciting news, I am going to be designing a website for a Canadian film editor. Very exciting prospect there.

Today I learned that I have visitors to my big site from further afield than I’d imagined. I’ve always known that I have visitors from the USA, Canada, Europe and Australia, but the Geo overlay from Google Analytics is showing hits from Singapore and Thailand. I can’t quite decide whether GA is accurate there or whether that’s the results of web proxies and unfortunately I’ve never had access to geographical splits before to be able to judge. It’s still rather interesting, though, and I’ll be keeping an eye on that.

I also learned that the majority of visitors to this site are based in the UK. Oddly, none of them so far use Macs but I’m sure that when I’ve got more than two days of data this will rectify itself.

A nice feature is the ability to download any of the data in several different formats, so that I could do further analysis on data if I so desired or insert graphs and charts into presentations. Again, none of the hosts or free packages that I’ve tried have offered that facility and I could see that being one of the selling points for big companies.

Being able to see how long people are spending on pages will also be useful. The site hosts a variety of content so I’m going to be interested to find out what people spend time on and what people gateway through quickly. And knowing the proportion of new and returning visitors is an important measure that I’ve never had before - the big site has lots of content, far more than can be absorbed in one visit, so I’ll be intrigued to see whether I’m getting mostly one-off visitors or whether there really is a decent sized core audience.

In other Google stuff, I introduced mother to Google Talk this evening. It was much less traumatic than I thought it would be. Now hopefully she’ll be able to talk her sister through it and they’ll be able to do more transatlantic gossiping.

I also took a tour around my father’s company’s new website. I’ve only had a few minutes, but it’s a definite improvement on the old one. It looks much better, more professional, and actually has a consistent design across the pages. An accountancy firm needs that kind of trustworthy design, I feel.

From an accessibility point of view, there are still some big improvements that could be made but it’s at least much better than it was. The horizontal drop-down navigation built in JavaScript is supplemented with a good sitemap and browsing it with images and styles turned off wasn’t too painful. There are elements that could be improved - web designers really should be trying to move away from tables used as layout - but at least it’s worth the money they paid this time. It will be going live next week and I’m going to be making gentle inquiries (*snort*) about it’s success not long after.

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.

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