Midterm Paper For Mist: 7500 - Web Analytics And Design For Personal Blogs
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Midterm Paper For Mist: 7500 - Web Analytics And Design For Personal Blogs as PDF for free.
More details
- Words: 2,637
- Pages: 13
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-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
Footnotes 1
http://www.sujith.name/2009/02/blogger-and-piwik.html
2
http://www.colourlovers.com/palette/448359/one_of_them
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-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
Footnotes 1
http://www.sujith.name/2009/02/blogger-and-piwik.html
2
http://www.colourlovers.com/palette/448359/one_of_them
Related Documents
Mist 7500 Midterm
June 2020 2
Midterm Paper For English
October 2019 15
Mist Design
November 2019 5