Website statistics that don’t matter

By Tim Priebe on December 30, 2008 at 6:30 am in Development

Guy on computer confused about website statisticsTracking website statistics is a good thing. After all, how can you determine if your website is successful unless you set a goal for it, then track some statistics to see if you are reaching that goal?

With that as a given, so much of the traditional view of the important statistics to track just isn’t true. I was one of several discussion leaders a few months back at an event put on by the Edmond Area Chamber of Commerce. The topic was “Technology — Marketing Your Company on the Web.” During the course of the discussion, the topic of tracking statistics came up. I made the point that the tracking of hits was overrated and not nearly important as most people made it out to be. After all, when you’re paying rent for your office or storefront, do they accept hits as payment? Of course not. Your website needs to make you money.

Well, two other web design companies were present and argued the point with me. Now, it’s possible we were arguing semantics. I was saying that hits are not the goal, but tracking them can be the means to an end. They may have very well been meaning the same thing but emphasizing the means. But the point is, the popular process is to track a lot of statistics that ultimately don’t mean anything.

Web Design for ROIThe book Web Design for ROI talks about several “metrics that don’t matter (as much).” I’m going to hijack their list here, and give my own commentary on each of the items.

Metrics that don’t matter (as much)

  • Traffic
    Here’s my simple, blunt comment on traffic: Who cares how many people are visiting your site if they aren’t buying anything?
  • Time on site and average page views
    Web Design for ROI gives an excellent example here. The general view is that the longer someone spends on your website, the better. However, if after a redesign, someone is able to make a purchase quicker, that’s not really a bad thing.
  • Hits
    Hits measure the total number of objects (files, images, pages, etc) downloaded from your website. This number can easily be inflated simply by adding a lot of pictures to your front page. Again, who cares how many hits you have if you don’t have money coming in from them?
  • Surveys
    We’re talking here about surveying customers, clients and/or website visitors about the website. Watching what someone does when they visit your site will give infinitely more accurate and useful information about your website than asking them about it will.
  • Focus groups
    Surveys and focus groups share some of the same problems. In addition, the feedback from individuals in the groups will be impacted by other individuals in their group.
  • Industry average conversion rates
    While you do understandably want better conversion rates (simply put, $$ per website visitor) than your competitors, there’s no real way to directly compare your conversion rates with theirs. You would have to have the same exact site with only slight differences to reasonably compare conversion rates.

Keep in mind as you look at any statistic that the ultimate goal of your website is (probably) to increase your revenue and provide a return on your investment. They are not the goal itself, but use them as a tool to move your company towards that goal.

Color scheming

By Tim Priebe on December 25, 2008 at 6:30 am in Design

Merry Christmas, all!

For those of us who are not officially designers, but still like to create, it can be hard to come up with a color scheme. I had a few websites I liked to use for inspiration back when I wore all the hats here at T&S (scary, I know), and some other neat ones have come to my attention since then. So whether you’re designing a website, a brochure or just a business card, here’s some websites that can help you come up with a color scheme.

Color Palette Generator

ColorSchemer

Color Scheme Generator 2

ColourPost.com

ColorSchemer Gallery

ColourLovers.com

FREE! and 50 to choose from…

By Emily Spirek on December 23, 2008 at 6:30 am in Design

indigenaFree. Something everyone wants and something designers thrive on. Smashing Magazine is constantly giving away inspiration to designers, which we’ll always accept with open arms. Here is a link to some desktop calendars that will spark some design creativity, and you can alternate monthly! These were created by designers around the world, and Smashing Magazine is always looking for fresh designs. I am constantly amazed with the quality of their website; their information is insightful, they always have freebies, and they’re innovative. Check out the website with the calendars and download one for your desktop; don’t hesitate to browse the rest of the site!

http://www.smashingmagazine.com/2008/10/31/desktop-wallpaper-calendar-november-2008/

Align Shadows on Repeating Backgrounds

By Nick Little on December 16, 2008 at 6:30 am in css

One thing web designers do a lot is add fancy shadows and rounded corners to content boxes. This would all be great, except for the fact that they like to use repeating backgrounds as well. As a web programmer, one might end up trying to write HTML and CSS code for a design that looks very similar to the image on the right. You may ask, “How is the image used for the background of the footer going to be aligned properly with the background used for the content section?” Here is a nifty javascript routine that can be used in this situation:

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);

This routine will adjust the height of an element (In the example above, ‘divPreFooter’) so that a different element (’divWrapper’) will have a height that is a multiple of a number (divisibleBy). This will align the repeating background on the content section with the background image behind the footer. The corresponding HTML and some sample inline CSS that work with the above routine is listed below.

<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <!-- Footer Content goes here -->
</div>

It works not only with shadows on repeating backgrounds, but also rounded corners or any type of alpha transparency on repeating backgrounds. It is much easier than trying to use images with alpha transparency in IE6, and it doesn’t use very many DIVs. This has been tested in the following browsers:

  • IE6
  • IE7
  • Firefox
  • Opera
  • Safari

EDIT (12/22/2008): I have added a complete example that is listed below. I have also tweaked some of the above code, so that it matches the specific example below.

<html>
<head>
<title>Test</title>
<script type="text/javascript" language="javascript">
function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

function fixHeight() {
  var resizeElement = document.getElementById('divPreFooter');
  var containerElement = document.getElementById('divWrapper');
  var divisibleBy = 10;
  var resizeOffset = 0;

  if (containerElement.clientHeight % divisibleBy != resizeOffset)
    resizeElement.style.height = ((divisibleBy - ((containerElement.clientHeight - resizeElement.clientHeight) % divisibleBy) + resizeOffset) % divisibleBy).toString() + 'px';
}

addEvent(window, 'resize', fixHeight, true);
addEvent(window, 'load', fixHeight, true);</script>
</head>
<body>
<div id="divWrapper" style="background: url(images/contentbg.gif) top left repeat-y; overflow: auto; position: relative; width: 100%;">
  <div id="divContent">
    <p style="color: #FFF; padding-left: 50px;">Here is the content.</p>
    <!-- Here is where the content goes. -->
  </div>
  <div id="divPreFooter" style="height: 1px; overflow: hidden; position: relative;"> </div>
</div>
<div id="divFooter" style="background: url(images/footer.gif) top left no-repeat; height: 80px; overflow: auto; position: relative; width: 100%;">
  <p style="color: #FFF; padding: 30px 50px 0px;">Here is the footer.</p>
  <!-- Footer Content goes here -->
</div>
</body>
</html>

A zip file of the above sample code with the background images can be downloaded here.

Linking to your Facebook profile

By Tim Priebe on December 12, 2008 at 6:30 am in How-To, Video

Although I’ve already written a non-video blog entry on the topic, I thought this topic would be a good one to try out a video blog entry.

View and subscribe to our YouTube channel here.

Free website designs!

By Tim Priebe on December 11, 2008 at 6:30 am in Design

No, I’m not trying to put my designers out of a job. I just know that many people starting a business have time to set up a website themselves, but not all the skills. Here are a few websites you can use to get free designs. Warning: You will still need to modify some code to fit these to your specific needs.

Open Source Web Design

Open Design Community

Open Web Design

Open Source Design

Standardizing Design

By Dave Roach on December 10, 2008 at 7:17 pm in Design

Usually, a designer strives to think outside of the box. While this is what we (should) do best, when it comes to the web, sticking to standards will make it easier on the user. Magazines have a table of contents near the front, and page numbers in the corners. Newspapers are divided into sections, headlines span across entire articles, and the largest headline is the most important.

Similarly, web sites have certain elements people look for, and designers can use this fact to their advantage. When a user navigates to a site for the first time, they expect certain standards. They expect the navigation to be confined to a section of the page, some sort of header on the top, and a logo or company name on the top right. When a site meets these expectations, the user can easily navigate, and know where they are at any given moment, without having to search around for the button that will take them to the contact page. Ebay is an example of following this set of standards:

Designers can find this standardization limiting on their part, but they still can create unique and beautiful sites within these guidelines (thinking outside the box?). These standards are not rules set in stone, they will change through time, but for now, if you want maximum usability on your site, you should consider following these guidelines.

Finally, thinking outside of the box is never a bad thing, as long as your ideas work. More specifically, depending on the purpose of the site and target audience, you may want to try something new. So long as the learning curve for the user is worth the visual interest or purpose of the site then go for it. Ideally, your design will require no learning curve at all. A site I came across recently, JLern Design, is an excellent example of a new form of navigation that is not difficult to grasp (although its downfall is slow loading time, which is another issue).

Benefits of the HOW Design Conference

By Emily Spirek on December 4, 2008 at 6:30 am in Design, General

The design conference is sponsored by HOW Magazine, which is an excellent source for either businesses or individuals. They provide “essential business information, up-to-date technological tips, the creative whys and hows behind noteworthy projects, and profiles of professionals who are influencing design.”

The HOW Design Conference launched in 1991 and also focuses on the three design elements of creativity, business, and technology. Every year, over 45 speakers are recruited to well-known design cities such as, Miami, Chicago, San Francisco, Atlanta, etc. It is an amazing environment, filled with 2,000+ designers that are all looking for the same creative inspirations. The conference is a life-changing experience and one that every designer should encounter.

Visit http://www.howconference.com for more details on the conference

or http://www.howdesign.com for the magazine website.

Should links open in a new window?

By Tim Priebe on December 2, 2008 at 6:30 am in Development, html

No.

Let me elaborate.

Years ago, website were all about controling the user’s experience. Some sites went so far as to set up their site with a series of “Next Page” buttons instead of actual, usable navigation. Thanksfully, the web design industry has come a long way.

In more modern times, we have come to realize that the best way to keep a website visitor on your website is to let them navigate it however they want to. In fact, with all the freedom that’s out there now, people tend to get irritated when websites try to control the experience. With links to other sites specifically, you just need to provide good content and information on your website, and they’ll come back.

Although I’m probably not an average website user, I tend to leave sites that open links in new windows. I have heard the argument that most website visitors are less sophisiticated than myself. That may very well be true.

However, I’ve stood next to a client and watched as they followed a link from one website to another, then discovered they didn’t know how to get back to the previous site. (The back button in the browser is not universally understood, which shouldn’t be a surprise to web professionals.) However, as this person had doubtlessly encoutered this situation before, she simply closed that browser window, opened a new one and went back to the website.

So a lack of skill or web-savvy will not hinder anyone when links do not open in a new window. If they do any amount of web surfing at all, they’ve already learned to work around it.

Older Posts »