This action might not be possible to undo. Are you sure you want to continue?
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.
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.
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.
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.
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.
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.
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 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! 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.
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.
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.
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.
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.
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.
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.
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
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.
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
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-hasweb-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/enus/library/ms530757%28VS.85%29.aspx. Microsoft. nd. Web. October 2009
This action might not be possible to undo. Are you sure you want to continue?
We've moved you to where you read on your other device.
Get the full title to continue reading from where you left off, or restart the preview.