Benaiah Morgan

MIST 7510 Internet Technology

Fall 2009

Web Analytics and Design for

Personal Blogs
In this paper I will explore the current techniques and tools used for web analytics
and web design. I will then use what I learn on the personal blog I created for this
class.

Web Analytics

The Web Analytics Association defines this as “the measurement, collection,

analysis and reporting of Internet data for purposes of understanding and

optimizing web usage.” However, web analytics need not be limited solely to

improving the usage of the site. Information collected from the Internet can also be

used to improve marketing campaigns, both online and offline, customer service,

and public relations.

It is important to note that “Internet data” does not refer only to information

collected about visitors at the target web site. It also refers to any information

gained about the site or the site’s owner anywhere else on the Internet.

On Site Data

The type of information collected on the target web site can be separated into three

categories: traffic, demographics, and usage.

Traffic
The earliest and most common measurements of traffic on a web site are hits and

page views. The number of hits refers to all client requests to the server. A request

for a CSS file or an image would count as a hit. A page view is a measurement of

client requests for pages only.

Current technology allows for more sophisticated measurements. Today a web site

could track how long a user stayed on the site, how long the visitor viewed specific

pages, what web site referred the user to the target site, whether the user was a

repeat or first time visitor, and which ads were seen by the end user.

Demographics

Traffic information may tell you which pages on the site are most popular but it

doesn’t tell you how end users are viewing your site. For that you need

demographics information. It is possible to track what operating system and

browser the visitors to a target site are using. Other statistics tracked include

screen resolution, the location of the end user (country, region, state, city), and

which plugins and technologies are available and enabled within the browser.

Usage

Arguably the most important information thing you can learn from web analytics is

how the visitor is using the web site. Tracking the path an end user takes to

navigate can tell you how usable the site is: do visitors end up going in circles, do

they normally end up using a search engine instead of the navigation, do they quit

in the middle of registering for the site or making a purchase, etc. Seeing the click

path of individual end users allows you to get an idea of what your visitors are

trying to do, whether they’re able to accomplish it, and where the pain points are in

the web site.

Off Site Data

A more recent measurement in web analytics is information that’s not on the target

web site. Beyond simply noting who’s linking to your site, web analytics services

can track what search terms are being used to find the web site, what’s being said

about the site or site owners, and which sites have information or discussions about

the site or site owners. For example, the author of the Smiley Cat Web Design Blog

used web analytics to evaluate the usability of the CAPTCHA on a sign up form.

Normally an organization would have to rely on surveys and the few people who

offer unsolicited feedback to get such information.

Tools

Several companies, like Teradata, offer end-to-end enterprise solutions for large

entities. However, there are tools for small organizations and individuals on the

Internet.

Google Analytics

The site states that it is, “Enterprise-class web analytics made smarter, friendlier

and free”. It can be integrated with other services in the product family (some of

the items on the products page are free, some are not). Google Analytics can also

be used for tracking campaigns that include off site components, e-commerce

reporting, internal site search, tracking the use rich and social media applications,

and benchmarking. Reports can be customized within the tool or with the Google

API

Piwik

Piwik states that it is, “a downloadable, open source (GPL licensed) web analytics

software program.” This tool is also a free solution. The program is installed on your
web server and its features are built inside plugins. Features displayed in their

demo include visitor settings, outlinks, goal setting, and campaigns.

GoingUp!

GoingUp! states that it, “integrates popular analytics & SEO tools in one easy-to-use

interface”. Another free solution, GoingUp! has features similar to Google Analytics

and Piwik and seems to differ mainly in that it includes search engine optimization

tools. It also has heat maps for web pages so that you can see where visitors are

clicking most often.

More Tools

Clicky has a comparison chart on their home page which compares their features to

those of some other web analytics tools including Piwik and Google Analytics.

Web Design

Good web design should make the web site attractive and enhance its usability. The

design should be consistent; each page should appear to belong to the site. Colors

should be pleasing, not boring or jarring, images should add interest without being

distracting, and the text should be readable.

Layout

The layout of a web site should be proportional and balanced. The golden ratio or

the rule of thirds can be used to accomplish this. The most common site layouts do

this by having the content take up two thirds of the space and having a column take

up the remaining third on the left, or less often the right, side of the page. Another

common layout is having three equally sized columns.

A layout does not have to be square or have all page elements on the same line to

be proportional and balanced. An asymmetrical layout can still utilize the rule of

thirds and balance can be achieved by placing large elements across from multiple

small elements or by using a darker color for the smaller element.

Color

The colors for a web site should complement the tone or mood of the site. Warm

colors like red, orange, and yellow are energetic. They speed up heart rates and

increase appetite. Warm colors stand out more. The effect is more pronounced as

you move towards a bright yellow and decreases as you move towards darker reds

and browns. Cool colors like green, blue, and purple have the opposite effect. These

colors are more soothing and calming. The color blue will decrease appetite. In

darker shades these colors will recede into the background.

Zero to four colors (technically black and white aren’t colors) can be used for major

elements in a site’s palette. The most important elements in the page should have

colors that bring them to the foreground and draw the visitor’s eyes to them first.

Avoid color combinations that clash or have too much contrast as this is can be

unpleasant for end users. Color theory should be used to determine which colors

complement each other.

Texture

Adding texture to a site can keep it from appearing flat. Lines don’t have to be

straight or only 1 pixel thick nor do container elements have to appear as squares

or rectangles. Rounded corners are very popular. Light and shadow can be used to

make an item appear to have depth or height, be smooth and shiny, or be pitted

and rough. Like color, texture should fit the tone of the site.
CSS can be used to make some changes to page elements, text, and background

but for more interesting or complicated changes to add texture you will need

images.

Imagery

Whether they’re drawings or photos, the images for a site should be relevant and

attractive. Images should complement, not overwhelm, the content of a page.

Navigation images, buttons, borders, and other small images used within the

content should have colors in the same palette as the rest of the site and load

quickly.

There are three file formats that are safe for use on web sites: JPEG, GIF, and PNG.

Use JPEG for photos, images where a color fades into another, and images that have

more than 256 colors. Use GIF for images with 256 colors or less. Use PNG if you

have an image with over 256 colors like JPEG but also want transparency like a GIF.

Unlike GIFs, PNG allows more than one color to be transparent and allows a value to

be set for transparency so that an image can be somewhat transparent instead of

invisible. However, Internet Explorer 6 does not support transparency in PNG files.

Good design does not get you into legal trouble. Be sure that you have the rights to

any images you use.

Typography

There are nine safe fonts for web sites: Arial, Arial Black, Comic Sans, MS, Courier

New, Georgia, Impact, Times New Roman, Trebuchet MS, and Verdana. These fonts

are safe because they are the default fonts for both Windows and Macintosh

operating systems. If you want to pick a font that everyone visiting your site will
have pick from this list. When defining fonts that are not safe the CSS property

‘font-family’ should be used to define a web safe font to use if the desired font is

unavailable and a generic font family.

You do not have to use these fonts as is. CSS allows you to make a few changes to

the font and text such as its letter spacing, word spacing, and line height. Text can

also be made bold and italicized in CSS but this should be reserved for headings or

emphasized words rather than the entire body of text on the page.

If you want end users to see a particular font no matter what you can use images,

sIFR, or the CSS property @font-face. To keep the site accessible, easy to use, and

avoid using unnecessary bandwidth use images only for headers and titles. Making

an entire page of text an image is irritating for the visually disabled who rely on text

readers, end users who simply want to select some text on the page, and the web

developer who’d need a new image created for just about any kind of change to the

page.

sIFR, Scalable Inman Flash Replacement, replaces HTML objects with Flash movies.

If the end user isn’t able to run Flash or JavaScript the normal HTML is displayed.

Since it is both small (10K) and accessible (assistive technologies like text readers

can work with it) this is an alternative that can work with a large body of text.

The CSS property @font-face downloads the font to the user’s browser. This would

allow you to use any licensed font simply by giving its name and the URL where the

font file is located in the CSS. The problem with this solution is browser support.

Even though it’s defined in CSS2, which was a W3C Recommendation back in 1998,

it’s only been implemented by Opera and Mozilla recently. Opera 10 had it available

when it was released in September 2009 and Mozilla added it to Firefox 3.5 which
was released in June 2009. Microsoft implemented this property with version 4 of

Internet Explorer but it only works if you use their proprietary font format and

Internet Explorer 8 does not follow the CSS3 specification.

Implementation

We were asked to create blogs for our Internet Technology class and this is the blog

I will be updating for this paper. I created one on Blogger.

Web Analytics on Blogger

I like the idea of using an open source solution so I looked at using Piwik first. I did a

search for ‘Blogger’ and ‘Piwik’ to see if anyone else had used it and found a blog

post by a man named Sujith1 who was not only using Piwik with Blogger but had

tried to use Google Analytics first. Unfortunately, the server I currently have hosting

on has an old version of PHP.

Next, I looked at creating a GoingUp! account. It only requires an e-mail address

and a password for account creation. Adding the code to the blog for tracking was

simple: copy and paste the code for the badge into a HTML/JavaScript Gadget in

Layout > Page Elements. There are several pages in multiple sizes and colors to

choose from or you can choose an invisible one. It can take six to twenty-four hours

before you see any data.

I already had a Google Account but there is a separate sign up process for the

analytics tool. You’re automatically opted-in to sharing your information with other

Google tools and for benchmarking purposes (the data is made anonymous for

benchmarking) but you can change that setting before you continue. You can also

change it later in account settings. I added the code for tracking the same way I
added the GoingUp! code. Google Analytics also says to allow up to 24 hours before

seeing data.

I plan to use both (or all three if I can get the sever owner to update PHP) for a

month before I pick one if they’ll all work at the same time. I do not have any data

to discuss now so further comparisons will have to wait for a blog post at a later

date.

Web Design

Blogger has a given set of templates but you can edit the code for the template

directly. My blog originally used the ‘Rounders 3’ template by Douglas Bowman.

I tried editing that template before I changed it to the ‘Minimal’ template for editing

the code.

The results are subpar at best. It’s not at all interesting looking and the line above

the left hand column looks like a mistake. I can’t figure out what’s adding the space

there.

I tried several color palettes with no success. I tried using the “one of them” palette

from COLOURlovers2, which I want to use for a separate site, but I didn’t like the

colors in the blog. The colors don’t look the same from monitor to monitor and the

more I looked at the red, the browner it looked. The blue-green color just looked

grey and the grey wasn’t dark enough. When I tried a black background the color

picker plug-in I have in Firefox (ColorZilla 2.0.2) still said it was a dark grey. I tried

to go with a monochromatic purple theme before I gave up and made everything

blue.

No texture, no imagery, no fun with @font-face, just a bunch of blue rectangles that

I hate with a hateful hatred. The blog will keep the edited template for a while but I

obviously need to fix it.

I think this just goes to show several things:

• Any skill requires practice

• Designing for yourself can be difficult
• Everything will always take longer than you think it will
Bibliography

“Web analytics” http://en.wikipedia.org/wiki/Web_analytics. Wikipedia. nd. Web.

October 2009

http://www.webanalyticsassociation.org/. Web Analytics Association. nd. Web.

October 2009

Watson, Christian. “Using Web Analytics to Assess CAPTCHA Usability”

http://www.smileycat.com/miaow/archives/001793.php. Smiley Cat. 26
September 2009. Web. October 2009

“Google Analytics” http://www.google.com/analytics/features.html. Google. nd.

Web. October 2009

http://piwik.org/. Piwik. nd. Web. October 2009

http://www.goingup.com/. GoingUp!. nd. Web. October 2009

http://getclicky.com/. Clicky Web Analytics. nd. Web. October 2009

Beaird, Jason. The Principles of Beautiful Web Design. VIC Australia: SitePoint Pty.
Ltd., 2008. Print.

Gaston, Peter. “Webkit has web fonts support” http://www.css3.info/webkit-has-

web-fonts-support/. CSS3.info 4 October 2007. Web. October 2009

Lawson, Bruce. “@font-face Web Fonts resources”

http://my.opera.com/ODIN/blog/font-face-web-fonts-resources. Opera. nd.
Web. October 2009

Davidson, Mike. “sIFR 2.0: Rich Accessible Typography for the Masses”
http://www.mikeindustries.com/blog/sifr/. Mike Industries. 25 April 2007. Web.
October 2009

Dagget, John. “beautiful fonts with @font-face”

http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/. Mozilla. 11
June 2009. Web. October 2009

“@font-face Rule” http://msdn.microsoft.com/en-

us/library/ms530757%28VS.85%29.aspx. Microsoft. nd. Web. October 2009

Footnotes
1
http://www.sujith.name/2009/02/blogger-and-piwik.html
2
http://www.colourlovers.com/palette/448359/one_of_them