A Typegeek's Look at Type and Design » blogging

How to use Site Overlay to Improve Your Site

Typegeek — Tue, 18 Aug 2009 00:35:34 +0000

As time goes on I’m learning more and more about Google Analytics, and how I can use it to fine-tune my web site.

I’ve recently found a feature called a Site Overlay, which is a tool that lets you see what parts of your site visitors click on when they visit it. After the redesign of my navigation tabs a few days ago, here is what the click patterns look like now:

Click to view larger.

Before the change I had noticed that 25% of my visitors clicked the heading of the blog to get to the main page. 25% also clicked the Home navigation tab, but that was the only tab I had at the time.

Now that I have identified different “content groups” that I have written about in the past, I can now measure which areas of my site are the most widely read. Now this data is still from less than 100 visitors, but over time I will be able to see what articles are gaining the most interest. Not surprising, the Typography category of posts is receiving the most attention, most likely due to the way I am marketing my blog currently.

To see your site overlay:

Log in to Google Analytics.
click on View Report for the site profile you want to see the overlay for

- Click content in the left menu

- Click Site Overlay

Click View Report for the site you are interested in. Click on Content in the left hand menu and you’ll see the Content options:
Click Site Overlay (you can also find it in the middle of the screen).

At this point a new browser window will open up and you can see your very own site overlay with click percentages!

Other sites of interest:

Alternatives to Site Overlay when Site Overlay has shortcomings
A short overview of the Overlay
It sounds like something Jakob Neilsen would recommend, but here is a link on how to improve site usability which is really the goal

Enjoy this new found power, and use it to improve your site for your readers / visitors. If you have any tips related to site overlay or usability, drop me a comment or send a Tweet.

Marko’s Twitter Marketing E-Book

Typegeek — Thu, 13 Aug 2009 02:57:31 +0000

Alright I’ve waited long enough. Friday is my birthday and I plan on celebrating in style. I’m going to buy Marko Saric’s Twitter Marketing e-book.

I’ve taken a few days off work and I’ve completed almost all of the house chores, so its time to start some blogging! Actually, I’ve got about 4 blog drafts waiting to be finished, and a score more things to write about.

But what I’m finally going to do is buy Marko Saric’s Twitter Marketing e-book. It’s like a birthday gift for myself!

I’ve done my best with Twitter so far to help drive traffic to my blogs. It definitely works. When I tweet about a new post, I get a bunch of hits from Twitter and then it dies off. I’m doing OK with some SEO just by having well formed post titles, URLS and meta keywords, so you could say Twitter is the only other way my site gets marketed. I’m small and I’m still growing my readership.

I’ve split my time between a number of Twitter accounts and I’ve been tracking how well some posts get attention. My @typegeek account has a small number of followers, but all tweets are targeted to this site and deal with graphic design or typography. The clicks per followe is quite high, compared to my other account @rickhenderson which is more general, more internet marketing, more health and wellness stuff. I have over 100+ followers but when I tweet about stuff for this site the clicks per follower is quite lower since its just not targeted. I use HootSuite because it allows me to track the clicks on shortened URLs and I have not found a Twitter client that does the same yet. I am trying Twirl again at work, and may install Tweetdeck and give it one more try to see if I can add my favourite people to a “Friend” list and not have to weed through all the garbage that comes from some people’s accounts. I’m sure you know what I mean.

Until now, my main method of gaining followers was finding topics in Twitter search, then adding people who were talking about it. I have very rarely deleted people who didn’t follow me back, but I have once or twice unfollowed people who posted too often about irrelevant material. That’s just the way I am.

So that’s my experience up until now. I’m buying Marko’s e-book and perhaps if time allows I’ll write posts about how well his techniques work.

You should follow me on Twitter here.

Online Web Design Resources

Typegeek — Fri, 01 May 2009 01:18:09 +0000

Not much here today, but I had found these links in the fall and didn’t want to lose them, so I’m posting them here for you and for me:

Good CSS (Cascading Style Sheet) Tutorial:
http://snook.ca/archives/html_and_css/six_keys_to_understanding_css_layouts/

Colour Tools for Graphic and Web Designers at AllGraphicDesign.com

Technical Colour Schemer – because we can’t get enough of colour scheme builders can we?

20 Web Design Generators

Adam Kalsey’s Button / Badge Generator ( it made this: )

Being Canadian, I will almost always insist on typing it as “colour”.

Oh and PS! I just bought a new domain so I’ll finally be hosting a WordPress / Thesis blog instead of this old Blogspot thingy! Dang you domain squatters!

Why I Like Thesis and WordPress

Typegeek — Thu, 30 Apr 2009 01:24:04 +0000

I have wanted to make some more posts recently about why I like using Thesis and I am still really in the middle of just getting my head wrapped around the entire WordPress platform, let alone the Thesis theme.

One of the reasons that I am impressed with Chris Parsons and the rest of the gang over at DIYThemes is their incredible support. The email updates I get from Chris are well written and actually contain stuff I want to hear about, not just blanket emails about how great their product is. These people are really dedicated to their work and they care about their product, and it shows.

Using some tips in the most recent Thesis update email I made some changes to my basic blog platform I’m using at work as a content/course management system:
The drop-caps in the posting came from a new addition from the DIYThemes people… an answer section created from suggestions that were found in the forums and are available only to paid members.

This is a great, added-value feature that makes me glad I paid Chris money for the theme (not to mention the fact that since I paid the developer fee, I can use the theme on multiple sites which is why you’ll screen captures of different sites in these posts.)

Other changes to this blog came from a couple of posts by Marko at HowToMakeMyBlog.com. The yellow box and the coloured sidebar came from Marko’s recent posts (6 Ways to Customize Thesis, oh and these 8 Thesis Design Changes).

Another reason I like using the Thesis theme for WordPress is that Chris Parson really likes guacamole dip. Really… check his Twitter Feeds!

My First Thoughts with Thesis

Typegeek — Thu, 12 Mar 2009 22:22:26 +0000

I have written about my curiosity with the Thesis theme for WordPress before and I’ve finally purchased a developer license for it. Here are some thoughts…

My thoughts regarding a fresh install of WordPress and Thesis 1.4.2.

Yesterday I purchased and installed Thesis theme for WordPress (WP) on one of the sites I’ve recently started. A few months ago I had installed WP 2.6 for one site and then abandoned work on it for a while. This month when I went back to it, and decided to upgrade to WP 2.7. Well, because I didn’t really know what I was doing before (possibly because I changed some default settings) the blog is no longer reachable.

Not a problem. I’ll fix it later.

In the meantime, I had another project I wanted to get started on so I installed WP 2.7 and Thesis 1.4.2 and got going. Here’s how it went…

When I first tried switching to the thesis them, I received a strange error message when previewing it:

Cannot load thesis-design-options.

Odd. I tried searching the forums, but I’m still not familiar with the layout so didn’t find anything right away, and I was quite impatient. I was trying to do all this while at work and I had important stuff I should have been doing… stuff I get paid for.

Anyway, I had looked over the installation instructions for WP a few times and had seen some references to setting permissions on certain files while I was troubleshooting the problem on the original site. One suggestion is to make sure to set the permissions on the cache file to 777. This means doing something technical on the Unix server, but luckily I use Dreamweaver to upload my files to the host. This folder is in the wp-content\themes\Thesis\custom folder in your WordPress installation.

Here’s how to change the permissions on a file in Dreamweaver:

Make sure you are vewing the remote files on the server.
Right-click the cache folder choose Set Permissions. It allows you to enter 777 directly into the box (or any other permissions required), or add the appropriate rights as required.
Click OK.

Unfortunately, that doesn’t seem to work with my web host (GoDaddy).

Fortunately, it turns out I could still activate the theme, so no harm, no foul. Just a tad annoying.

After loading it, I noticed in WP press administration I now had “Design Options” and “Thesis Options” in the WP Appearance menu.

I’m still new to WordPress, but I found the Thesis configuration really easy. There are lots of options and a very hand big ass save button!

On the Thesis options page, even the text on the button can be altered. Talk about customization!

I was particularly impressed with the contextual help of the options screen. Beside the heading titles appears a small [+] symbol. Clicking on it creates a fold-down with a short description of what that section can do. Clicking it hides the text again. Very smooth without the need for popups.

Here is the default Thesis theme:

I had read about a magazine layout coming in Thesis 1.5 that I might use for this site, but for now I wanted to switch to a 3 panel layout. Starting with the Design options, I was very easily able to switch to a 3-column format with the sidebars on either side. I may be oldschool, but its what I wanted for this particular site.

There were so many settings to play with, but basically I wanted to change the background colour and text colour. That I could do by going directly to the Editor screen in the WP Appearance menu. This does require knowledge of Cascading Style Sheets (CSS) but even if you don’t know much about those, it was easy to find the body tag and change my font and background colour.

Oops! The fine print says don’t make changes to that stylesheet in the editor. Good idea. The Thesis theme contains a panel for creating a custom stylesheet called custom.css which is stored in the thesis\custom folder.

After a bit of playing…

Now things look a lot better! Tracking down the style/colour for the header was a bit of work, but I got that back, so now all I need to do is find the colour for text posts and the comment number and we can start some major work. And then there is customizing the sidebars and changing the images in the rotator….

I can totally recommend this theme. Get Thesis. You need it, you’ll love it.

There are many more options I can’t wait to try, but I had to get to work!

In my next post I will show you where to find the other style elements to change to customize the colour in even more detail.

Until then, let me know in the comments what you think of this post.

Tips for Small Type

Typegeek — Fri, 06 Mar 2009 01:24:33 +0000

If you’ve tried creating graphics or content using small typefaces then you’ve probably run into the problem of readability. Microsoft created a font known as Verdana to solve the issue of small type on screen. Shown below is a comparison of Verdana at difference sizes to Minion Pro at the same sizes. The image was created in Adobe Photoshop CS3 with Strong anti-aliasing applied to the text.

I recently came across a highly detailed article that explains how to get the most readability from your small type. Check it out at The Art of Type.

You can read more about Verdana at the Microsoft site Channel Verdana and if you’re really a typegeek, you’d be interested in the Wikipedia entry on Verdana as well.

And of course to be fair, you might as well check out the entry for Minion as well. You can get the
Minion Complete Family Pack from Fonts.com.

It could be just me, but I think of something totally different when I hear the word “minion”

I’ve used Strong anti-aliasing in the image above. I’d like some feedback from you in the comments as to what anti-aliasing to use when creating graphical text to use on the web, when printing the content is not going to be an expectation.