Category: Web Site Management

Web Site Management

Posted on

April Statistics Update – Urchin vs. Analog

Well, it’s been one month since I started working seriously on developing this site, so it’s time for a little recap of the numbers.

Urchin

First, since I’m running my site at Media Temple, the account includes Urchin for web analytics. (Note, Google purchased Urchin some time ago, and at last report was planning on releasing an upgrade of the product. But, I find that the interface of Google Analytics and Urchin are extremely similar. You can draw your own conclusions.) However, I don’t look at it much as it is limited to being account-wide. I host three different domain names under the same account, and it does not give an easy way to separate out the data. So, these numbers are inclusive of the other domains–which are minimal traffic really, but they do influence the numbers.

Urchin Data from MT
Date Range: 04/01/2007 – 04/30/2007
 
Total Sessions 3,535.00
Total Pageviews 10,451.00
Total Hits 16,003.00
Total Bytes Transferred 125.96 MB
   
Average Sessions Per Day 117.83
Average Pageviews Per Day 348.37
Average Hits Per Day 533.43
Average Bytes Transferred Per Day 4.20 MB
   
Average Pageviews Per Session 2.96
Average Hits Per Session 4.53
Average Bytes Per Session 36.49 KB
Average Length of Session 00:06:39

Analog

Next up is the overall statistics from Analog, which is based on downloaded logs from Media Temple. Analog is the original Open Source product of Dr. Steven Turner, now a principle with ClickTracks, another log analysis product. The logs there are not kept forever, as I like to do so I can do long-term analysis, but only for 10days. I thought I had missed downloading some of the logs since I was missing April 6-10, however, in looking at the Urchin stats, I see the same days show zero hits also. So, something must have been going on with the logging on the site.

I’ve used analog for years on other sites, and it is very configurable to get the numbers you want, however you have to develop the right ‘question’ to ask first. I’ve developed custom configuration files to run for different time periods: daily, weekly, and monthly. I went back and ran the daily reports for every day in April, so I can review the details, but for this report I’m just going to quote from the overall summary of the monthly analysis. I’ve configured Analog to exclude the other domains in my logs, as well as hits from my own browser, so it is explicitly for external access to Chasing A Dream.

Analog    
  April 1 – 30 Last 7 days
Successful requests 7,653 2,469
Average successful requests per day 256 352
Successful requests for pages 4,822 1,641
Average successful requests for pages per day 161 234
Failed requests 347 96
Redirected requests 670 226
Distinct files requested 396 251
Distinct hosts served 584 265
Corrupt logfile lines 1  
Unwanted logfile entries 16,842  
Data transferred (megabytes) 81.07 26.45
Average data transferred per day (megabytes) 2.72 3.78

Making a big assumption here, which is not good to do–we are going to equate the terms from these two reports as follows:

  • Urchin’s “Total Pageviews” = Analog’s “Successful requests for pages”
  • Urchin’s “Total Hits” = Analog’s “Successful requests”
  • Urchin’s “Total Bytes Transferred” = Analog’s “Data transferred”

So the head-to-head comparison is as follows:

Urchin Analog
Hits 16,003 7,653
Pageviews 10,451 4,822
Bytes 125.96 MB 81.07 MB

As you can see, it’s hard to analyze these head-to-head when the basic numbers are so out-of-line with each other. In my general review of the details of both reports, I felt that the other sites were not contributing significantly to the difference, but was basing it on the variation in the way the programs did their counting. This may not be true. So, I’m going to pause a moment and run the same Analog report, without making any exclusions, so it should be based on the same data as Urchin. BRB…

Here is the comparison with the revised numbers for Analog:

Urchin Analog Difference %
Hits 16,003 15,458 3.5%
Pageviews 10,451 8,734 19.7%
Bytes 125.96 MB 124.09 MB 1.5%

That’s much better. But, note there are still differences! I’ve added the percentage difference based on the Analog numbers so you can see how much variability there is, particularly in the Pageview analysis. While the definition of ‘hits’ and ‘bytes’ are fairly clear cut–though not necessarily the same to everyone as we see–the definition of what exactly constitutes a ‘pageview’ is still up for debate. At least between Urchin and Analog. Analog at least gives us clear definitions of what it’s terms mean, and Dr. Turner explains exactly what you can & cannot get out of web analytics.

I’ve got more details coming on the other products I’ve been comparing, but if you are itching for more, now, I sugget you check out Avinash Kaushik’s Web Analytics Tools Comparison: A Recommendation.

Posted on

Themes and Plugins

I spent the evening installing and activating the plug-ins I plan to use on the new site. Mostly the same one’s I’m currently using, until better come along, however, since I won’t be using one of the advanced templates which automatically use several plug-ins, like Ultimate Tag Warrior (UTW), I had to develop the pages to take advantage of them myself. Not too difficult, as long as the documentation is sufficient, and that for UTW is fairly extensive, and nicely linked from the admin panel. It took me a bit to get the hang of editing pages based on templates though. The pages that use templates are a type of ‘place holder’ and don’t necessarily contain any content themselves. They only give a name and URL path to the template to be called. That was a tricky thing to get used to!

I did run across two plug-ins that seem incompatible with the newer version of WordPress (2.1.3), that I have on my development server. I will investigate the details on these tomorrow to confirm it is a problem, and see if there are updates, or if I can fix it. I was able to do that with a problem I found with the Technorati Rank plug-in I found the other day, and reported to the author. The two plug-ins I was having problem with, Brians’s Latest Comments (1.5.8) and Smart Update Pinger (2.0) both caused the plugin-page to not display properly when enabled. I will investigate, and report what I find.

I had hoped to launch the new design tonight, but I have a bit more work to do. It will be another day or two before it is complete. But, it is coming along nicely. I basically have to apply the design elements that I have done for the primary template page, to the other specialty pages. I also still have to convert the tab navigation to a cross-browser supported CSS technique.

Posted on

How to Create a WordPress Theme – Part 7, Margins & Font Settings

I discovered the problem with IE was that it was not handling the CSS float on the left column correctly. By supplying explicit top margin settings, it is now usable. Here’s what the design looks like in IE:

[image no longer available.]

As you can see, the corners are square since it doesn’t understand CSS3 border-radius. I may go back later and do the graphic based rounding, but it’s so much more trouble than CSS. At least the tabs are accessible now. You may note if you look closely, that the top of the first post is no ligned up with the top of the sidebar… I’m going to have to fix that. I just noticed it as I took this screen shot. Here’s how it should look in Firefox:

[image no longer available.]

Much nicer if I do say so myself! I decided to change the background to the entire page to the dark green rather than the light green with dark borders. The light green seemed to be giving the tan background a greenish cast visually. I know it’s just my eyes due to the colors being adjacent, but I didn’t like it. I’m still not quite happy with the shade of the tan I’m using, but I’m working on it. My target is something I would call ‘sand’. Mary Carter at eFuse has written a nice description of the adjacent color phenomenon.

I’ve also made a change in how the <code>blocks will appear:

[image no longer available.]

Using CSS the property overflow: auto, I’m able to let wide sections scroll, while the narrower ones don’t have scroll bars. If you use overflow: visible, it will show scroll bars even when they are not needed. Auto works much nicer. I’ve changed the background color as well as set the font to monospace for <code> as well.

Finally, I customized the footer, giving myself credit for the theme! I’m calling it ‘Earthy’. Tweaked the spacing at the bottom as well to not waste so much space.

[image no longer available.]

Behind the scenes, I also tweaked the Feeds to exclusively use my FeedBurner account so my statistics stay correct, as well as offering all three kinds of major feeds, RSS, RSS2 & Atom. Plus a Comments Feed.

Next step is replicating any specifics to the auxiliary pages, like the single post display & archives. Then the selection of plugins & configuration should be all that is left!

Posted on

Creating a WordPress Theme – Part 6, CSS3 Rounded Borders

CSS3 Rounded Borders was a success! Well, for Firefox users anyway! Luckily, I checked my stats and find that 65% of my visitors are Firefox users… mostly v2.0, but a few v1.5 users are still out there. Time to upgrade Firefox folks!

The rounded corners technique using CSS3 method is very easy compared to what I went though to create the graphics for each corner yesterday. Well, creating the graphics wasn’t so bad as getting all the pieces in place to position them properly–and then I still wasn’t satisfied. So, I’m glad I remember this technique existed. After reviewing the sample at CSS3.Info using border-radius for Mozilla & Webkit, I came up with the following:

[image no longer available.]

Note the rounded corners on the post background, the sidebar, and even the tabs. I thought I was going to have to reduce the radius for the tabs, but actually they look good with the same 25px radius the other corners are using. I’ve also got a shot of the middle of the page to show you how I’m separating the posts with the background and a little separation:

[image no longer available.]

OK, OK! You want to know how to do it!

First the rounded corners. Pretty much straight from the page at CSS3.Info:

-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background-color: #003712;
border: 1px solid #CCCCCC;

Works very nicely. The border is just barely visible gray to help blend the edge a little.

The tabs are similar, however I used the specific CSS3 properties for just the bottom-left & bottom-right corners.

-moz-border-radius-bottomleft: 25px;
-moz-border-radius-bottomright: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomright: 25px;
background-color: #003712;
border: 0 1px 1px solid #CCCCCC;

Note, the border being applied only to the left, right & bottom.

I’m still tweaking the size & font on the tabs, as it doesn’t feel quite right. I also took a quick look at it in IE7 to see what it would do with the rounded corners… not pretty! Besides not handling the border-radius property, it also didn’t seem to be handling some of the top margins or something. The first post was shifted up & overlapping the tabs. I’ll have to look into that… though I would rather ignore it! It might be a simple validation issue–I have not been able to validate the page yet since it’s on an internal server. The CSS has been validated by TopStyle, and it doesn’t like the Mozilla- & Webkit-specific properties, but that should not be too much of an issue. They should be just ignored. I hope!

Posted on

Creating a WordPress Theme – Part 5

Just a quick update on the template progress… I’m working on using CSS to create rounded corner effects on backgrounds that will be used for the sidebar & posts. I got the basic concept from many places, but Adam Kalsey has a good post on the Rounded Corners in CSS technique. Here’s an in-progress snapshot of what I’ve got so far:

[image no longer available.]

Notice the rounded corners on the sidebar background. It looks pretty good here in a low-res snapshot, but I’m tweaking a single pixel border that doesn’t want to cooperate in the right combination with the graphics. It has to be positioned to appear along the top border, between the graphics (there are individual graphics for each of the rounded corners), but not extend out the full width of the enclosing div. I’m trying to avoid using a full-width image to accomplish this.

There is a similar setup at the bottom of the column, however, while I was working on the top, the bottom disappeared! I think it is being covered up by the background of the sidebar, though it shouldn’t be doing that. I’m focusing on one end at a time, and learning more about editing graphics at the pixel level as I go! I plan on using something similar for the separation of the tabs too.

Posted on

How to Create a WordPress Theme – Part 4

I made good progress on the To Do list last night:

  • Install copy of WordPress on development box
  • Import backup of live site content to provide some content for the development site
  • Create a bare-bones set of template files
  • Review the default CSS before beginning development of custom CSS for new template
  • Setup CSS for basic layout
    • 2-Column wide left, narrow right, approximately 75% – 25% split
    • Site width: 1024px (current width ~800px)
    • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
    • Header will be short, ~ 5% +/- of screen height
    • Footer will be one or two text lines
  • Select color scheme
  • Select photo / graphic / logo for header and develop site-wide navigation in header

Pretty good work!

I want to show you a screen capture of the default starting point for the template, which is the supplied Kubrick template:

[image no longer available.]

Look familiar? That’s what you get after an initial install of WordPress if you don’t make any changes.

To show you just how much work is being done by that default template, here is what it looks like if you remove all the CSS that is being applied:

[image no longer available.]

Not very pretty, would you say? Well, after considering the two, I decided to start with the default template, and then tweak the settings from there.

Here’s a sneak-peak at what I’ve come up with so far:

[image no longer available.]

What do you think? You can see the result of a lot of the design decisions I’m making:

  • Width 1024px
  • Header graphic gives mountain scene
  • Leads to a blue, green, brown earthy palette for colors
  • Drop down tabs from header for page-level navigation (still more work to be done here)

I’m still working on getting the column widths where I would like, so you see the sidebar out of place still. Fonts have not been adjusted at all yet, for color, family or size.

Pretty good start for a few hours work. I think I will make my target launch of May 1 with no problem!

Posted on

Creating a WordPress Theme – Part 3

I’ve made the decision this morning to target a launch date for the new theme for May 1, 2007. With that in mind, I’ve got 10 days to get it done. To that end, I’ve created a To Do list of items to be completed:

To Do

  • Install copy of WordPress on development box
  • Import backup of live site content to provide some content for the development site
  • Create a bare-bones set of template files
  • Review the default CSS before beginning development of custom CSS for new template
  • Setup CSS for basic layout
    • 2-Column wide left, narrow right, approximately 75% – 25% split
    • Site width: 1024px (current width ~800px)
    • This gives almost the same relative widths as the current template, but with an increased overall width, resulting in a wider left column (and right) to give more room for graphics & code as desired.
    • Header will be short, ~ 5% +/- of screen height
    • Footer will be one or two text lines
  • Select color scheme
  • Select photo / graphic / logo for header and develop site-wide navigation in header
  • Select items to be included in sidebar:
    • About – Should I include picture of me?
    • Search
    • Feeds
    • Email subscription option?
    • Archives – Perhaps better in header site-wide navigation?
    • Categories and/or tag cloud?
    • Blogroll – Move to separate page?
    • Space for affiliate ads
    • Space for site support links (Blogflux currently)
  • Setup footer with statistic tracking codes, etc.
  • Plan post layout and post-related plug-in use.

I’m sure I’ll come up with other details, but that will be the basic flow.

Posted on

How to Create a WordPress Theme – Part 2

OK, if you look back at Part 1, you will find I listed choosing a Column Layout first on the To Do list. However, do you always do your To Do’s in order? Not me. Well, actually, it’s not my idea. In researching the whole column/page layout concept for today, it was pointed out there were some other important items to consider first. In a recent guest post at ProBlogger, Matt Coddington from NetBusinessBlog shares the Important Elements of Blog Design & Layout.

Matt emphasizes the importance of focusing on Content, User Experience and Compatibility.

Content refers to your actual planned content for your blog. Do you write long posts or short? Do you include a lot of graphics? What size do you use? Then of course you can through in what other gadgets do you want to include in your posts or sidebars? All of this stuff takes up space. Ask yourself for each item included, is it important or can I do without it?

User Experience focuses on user issues. I don’t know about you, but while I like hi-resolution screens to be able to pack more content into a smaller space, I’m getting older… I’ve worn glasses most of my life, and find now that even with a current prescription, I prefer my fonts a little larger. So, do you have young readers, or old? We have to think about accessibility for users using screen reader devices, or screen magnifying devices for limited vision. As well as navigation accessibility considering both the limited vision user and the mobility impaired who may have difficulty using a mouse to navigate.

Compatibility is related to what devices do you want you content available on. In the past, it was difficult to have content appear in a similar arrangement, if viewable at all, by the major browsers without significant tweaking and tricks. Today it is easier thanks to Web Standards, but the problem has not been eliminated. There are also new platforms, such as cell phones and other mobile devices that are being used.

My Analysis

Applying the thoughts above to my plans for this blog, I come up with these considerations.

Content: I feel I need a wider column for my core posts. Many have included code examples, and I’ve had to make notations about wrapping lines and the like that would be clearer when displayed as one. I wold like to use more screen shot examples in a larger format, as long as file size is reasonable–which is based on actual content of the graphic. I tend to write fairly long posts, and having full posts on the home page is something I may need to reconsider. I had long ago come across “Mullet”-style blog layout by Jonathan Boutelle, and was re-introduced to it while researching this entry. (That’s where you have teasers to a few recent entries, with links to full posts, then a long list of the previous posts, say 50+ on the home page.) Then there’s the liquid vs. static layout argument that tends to lean toward liquid for longer posters and static for short. Michael Gray has a nice analysis in a three-part series on Maximizing Profits With Website Design and Layout.

User Experience: I tend to blend this all encompassing term mostly into usability. The personal issues I mentioned above, combined with accessibility & usability techniques must be a consideration in layout and choice of design details, like fonts and their default size. Allowing for the wider column I’ve already mentioned, gives me the flexibility to increase the default font size for ease in reading. I’m liking these choses already! This was a great exercise!

Compatibility: As mentioned, web standards is the only way to fly today. By designing a site that is functional when all the fancy stuff is turned off (CSS,JavaSciript, etc.) you end up with a site that is accessible from a multiple number of platforms. Taking it another level and providing custom CSS for those mobile devices that can use them, just improves the user’s experience.

With those thoughts on our brains, we will move on tomorrow. Perhaps really to thinking about the layout…

Posted on

How to Create a WordPress Theme

I had heard that the template that I am currently using, MistyLook by Sadish Bala, is very popular. however, I had never run into it elsewhere… well, there’s always a first time! I ran into it while researching de.lic.ious WordPress plug-ins on The Partition. Thanks for the inspiration to create my own! I knew I had to do it eventually, but I guess now is the time!

While I like the look of MistyLook very much, I am a firm believer in personal, business & web site branding. In order to create a name for my self, I also have to create an image. When you come here, I don’t want you to be confused where you are! I was the first moment I saw MistyLook on the Partition. It felt kind of eerie…

Step One: The Plan

Before I actually create the theme, which I’m going to walk you through with me step-by-step, I have to plan what I need and want to include. After trying several themes myself, browsing many more, and experiencing those of others I should have a sense of what pieces I might like to include in my theme. I’m talking conceptually here, not literally using someone else’s theme. The best themes out there are done by professional designers. Don’t steal them! That’s how they make their living! Especially custom graphics & images.

If you have not experimented with different templates, or browsed the online theme gallery at WordPress.org, go do so now. While you are there at the Codex, let me point out the bible for creating new themes, the Blog Design & Layout page. Start working your way through the material there. It will help you with the understanding for making everything from minor tweaks in a standard template design, to reworking how the whole page is laid out.

While I could make modifications to the original files, what I plan to do is to develop a true separate theme that could easily be contributed to the community or just shared with a friend. But, it will begin life as my personal unique design.

Let’s start with a To Do List:

  • Select a page layout (1-, 2-, or 3-column?)
  • Color scheme (there should be an overall consistent use of color in the design)
  • Header & footer (content & design)
  • Multiple column contents (if more than one, what’s in them?)
  • Post structure & design (how is the post heading, content, metadata, tags etc. organized & displayed)
  • Archive page layout
  • Category page layout
  • Tag page layout

That should get us started thinking. As I go along, I may add specific areas that are needed, or expand on the one’s listed. We’ll take it one step at a time.

Posted on

What is an SPF Record and Why Does My Domain Need One?

A few weeks ago, I described how I used a separate DNS host, DynDNS, to separate that responsibility from my web host, MediaTemple, to give me additional flexibility and control of my domain. Near the end, I mentioned one of the benefits of doing so was to be able to publish an SPF record for my domain as a means to contribute to the war against SPAM.

What is an SPF Record?

An SPF record is TXT DNS entry that is used by mail & spam filters to help validate incoming mail. Similar to the function a DNS MX record which provides information on what host receives mail for a particular domain, an SPF record tells what host(s) are authorized to send mail for that domain.

While this description is simple, implementation is another matter, and sometimes complex. First, domain owners, such as myself, have to publish an accurate SPF record for our domains, and keep it up-to-date if it changes. Second, receiving mail systems need to be updated or modified to check the validity of SPF records for incoming mail. There are customizations available for most major mail systems. Common SPAM appliances, such as a Barracuda or M+ Guardian by Messaging Architcts (built on the open source Hula engine), integrate SPF checking as part of their systems. By giving the servers something to validate the sending mail against we can help these systems do a better job.

What does an SPF Record Look Like?

Here’s the one for my domain:

v=spf1 a a:moon.home.cdchase.com ?ptr:gridserver.com include:bledsoe.net
                  include:outbound.mailhop.org -all

(Note, it should all be on one line, but it won’t fit here!)

It basically says mail is authorized for my domain from:

  • The host cdchase.com (a)
  • a host named moon.home.cdchase.com (a:moon.home.cdchase.com)
  • any server in the gridserver.com domain, classify neutral (?ptr:gridserver.com)
  • apply the SPF rules defined by bledsoe.net & outbound.mailhop.org (include:bledsoe.net include:outbound.mailhop.org)
  • FAIL all others (-all)

This basically let’s me send mail from my web server, from a linux box at home, my MailHop service or my ISP’s servers.

Why Does My Domain Need an SPF Record?

By being proactive in providing this information I help prevent fraudulent use of my domain name. You should too! If you don’t manage your own DNS, contact whomever does and be sure they are aware of it (it is fairly new), and ask them to properly implement it for your domain. Many major ISPs have done so already, in which case you may be able to use a simple include as I did above to point at my ISP’s SPF record entry.

To check if you have an SPF record for your domain, and validate it, as well as learn more about the SPF standard, visit OpenSPF.org.

I highly recommend using their SPF Setup Wizard to check if you currently have an SPF Record, and get a description of how it is currently configured. Enter your domain at the top, and click ‘begin’. Wait for the form to refresh, then scroll to the bottom for a description of any existing entry. The form takes little time to get used to for configuring the actual record, but the lookup & description works nice.

Note, I am fairly confident that all mail from my domain comes from the hosts specified, so I flag any results as an SPF FAIL if it is not one of them. That is pretty aggressive… my employer does a SOFT FAIL to prevent any problems. Review the documentation at OpenSPF.org for more details.