The End of SEO Competition

After 5 weeks, the SEO competition is over. In this period (January 21, 2011 to February 25, 2011), there were a lot of learnings. Quantitive numbers were provided by Google Analytics. Officially the winner has not been declared. I like to think my team (documentaryfilms.ca) won. Then again, it depends on which metrics one uses to measure the winner. More importantly, it is all about what we learned from this competition.


Site Objectives

3 of the 4 competing sites have similar objectives (aside from being in the competition). The were tasked with promoting the work of the Documentary Film students at Capilano University and the program itself. The other site shows "hilarious videos of people doing crazy things" - unique obsession, bizarre bobby, etc. It has nothing to do with Capilano University, the Documentary Film program, or the Interactive Design program.


Approach

The strategy was for our documentarian partners post content daily. These posts are to range from the process of creating documentary films, documentary films from our partners and Capilano University Documentary Film Alumni, and events at the university and around town.

Each post is to contain a list of appropriate keywords (words / phrases best describe the content of the post). As well, each post is to be publicized via Facebook, Twitter, and other documentary channels.


Tools Used

All 4 teams built their website with WordPress with their own theme. We used the theme called "Sight."

As for plug-ins, our team used:

• Facebook Likes it! (Adds Facebook Like button)
• Google Analytics (Enables Google Analytics on all pages)
• Google XML Sitemaps (Generates a special XML sitemap which will help search engines like Google, Yahoo, Bing and Ask.com to better index your blog)
• Greg's High Performance SEO (Allows you to configure over 100 separate on-page SEO characteristics.)
• Tweet Blender (Provides several Twitter widgets: show your own tweets, show tweets for Twitter lists, etc.)
• Viper's Video Quicktags (Easily embed videos from various video websites such as YouTube, DailyMotion, and Vimeo into your posts.)

The Numbers

The final numbers between January 21, 2011 to February 25, 2011 are:

Observations

1. Google is the first / fastest search engine that recognizes newly submitted URLs (within days compared to weeks of other search engines).
2. Facebook drew more users than Twitter. They tend to stay a little longer and view more pages. The reason may be that Facebook users are our family and friends. They are more interested in what we are doing and content we have posted.
3. The skin of the website doesn't seem to make a different in traffic or user behaviour.
4. Fresh, constant, and enticing content, along with the appropriate publicity, does drive visitors to your site.
5. Twitter publicities (or tweets) are short lived compared to targeted or posts at related website publicizing our new content.
6. Proper use of hash tag (the "#" symbol) in tweets help Twitter users locate your content.
7. Irrelevant content or publicizing to unrelated audience increases Bounce Rate.
8. Due to the way Bounce Rate is calculated, single-page websites will have a higher Bounce Rate. This is also true for Pages per Visit and Pageviews.
9. New sitemap should be submitted to search engines whenever new content is added. This helps in making the new content searchable.
10. Content with keywords of hot topics (i.e., breaking news, major current events, etc.) drive traffic to you site but be prepare to have more than one post to keep your audience on your site. Otherwise, Bounce Rate will shoot off the chart or Average Time on Site will decrease dramatically.

Top Five Referral Sites

Every Spike Represents New Content / Activity

Bounce Rate and New Content / Activity

See Frequently Used Google Analytics Terms for definitions.


Conclusion

• Content does drive user behaviour on site.
• Develop a content strategy. Have a look at a recent article in UX Magazine, "Content Strategy and UX: A Modern Love Story."
• Training content writers (especially on the strategy) is important.
• Ensure keywords (especially hot topic keywords) are used within the content. But do not over use (keep it below 3%). Otherwise, search engine will tag the page as "keyword stuffing" / spam.
• Define marketing strategy on social media and other media. Not everyone has the save effect / success.
• Establish connections with other professionals, bloggers, magazines, etc. on cross promotions.
• If blogging is part of the website, ensure fresh content published regularly.
• Last but not least, Content is King. 

Frequently Used Google Analytics Terms

Frequently used Google Analytics Terms (as defined by Google).

Average Page Depth: The average number of pages on a site that visitors view during a single session.

Average Time on Site
The average duration of a visit to your site.

Bounce Rate: The percentage of single-page visits or visits in which the person left your site from the entrance (landing) page.

Keyword: A significant word or phrase, relevant to the web page or document in question.

Landing Page: The first page a user views during a session. It is also known as "Entrance Page."

Navigation: Describes the movement of a user through a website. It also indicates the system of available links and buttons that the user can use to navigate through the website.

New Visitor: Google Analytics records a visitor as new when any page on your site has been accessed for the first time by a web browser. This is accomplished by setting a first-party cookie on that browser. Thus, new visitors are not identified by the personal information they provide on your site, but are rather uniquely identified by the web browser they used.

Page: Any file or content delivered by a web server that would generally be considered a web document. This includes HTML pages (.html, .htm, .shtml), script-generated pages (.cgi, .asp, .cfm, etc.), and plain-text pages. It also includes sound files (.wav, .aiff, etc.), video files (.mov, etc.), and other non-document files.

Pageview: A pageview is an instance of a page being loaded by a browser. Google Analytics logs a pageview each time the tracking code is executed.

Referral: A site that refers traffic to the site you are tracking. When a user arrives at your site, referral information is captured, which includes the referrer URL if available, any search terms that were used, time and date information and more.

Referring Source: The URL of an HTML page that sends visitors to a site by means of a hyperlink.

Returning Visitor: Google Analytics records a visitor as "returning" when the _utma cookie (Google Analytics' tracking cookie) for your domain exists on the browser accessing your site.

Session: A period of interaction between a visitor's browser and a particular website, ending when the browser is closed or shut down, or when the user has been inactive on that site for a specified period of time. For the purpose of Google Analytics, a session is considered to have ended if the user has been inactive on the site for 30 minutes.

Tracking Code: The Google Analytics tracking code is a small snippet of code that is inserted into the body of an HTML page. When the HTML page is loaded, the tracking code contacts the Google Analytics server and logs a pageview for that page and captures information about the visit.

Unique Pageviews / Unique Views: A unique pageview, as seen in the Top Content report, aggregates pageviews that are generated by the same user during the same session. A unique view represents the number of sessions during which that page was viewed one or more times.

Unique Visitors / Absolute Unique Visitors: Unique Visitors represents the number of unduplicated (counted only once) visitors to your website over the course of a specified time period. Unique Visitors are determined using cookies.

Visitor: A Visitor is a construct designed to come as close as possible to defining the number of actual, distinct people who visited a website. There is of course no way to know if two people are sharing a computer from the website's perspective, but a good visitor-tracking system can come close to the actual number. The most accurate visitor-tracking systems generally employ cookies to maintain tallies of distinct visitors.

Designed Mobile Apps for the Vancouver Canucks

Completed a mobile application proposal for the Vancouver Canucks, an NHL hockey team in Vancouver, BC. The proposal designed the applications based on Apple iOS for iPhone but the design can be easily ported to Google Android, Blackberry, Microsoft Windows Phone, etc.

The biggest lesson here is this: When designing a mobile application, don't forget to think about potential back-end (back-office) requirements. I uncovered some critical back-end system requirements for one of the apps that can also be a revenue opportunity for the Vancouver Canucks.

I sure hope my university can help arrange a meeting with the Vancouver Canucks soon so my classmates and I can pitch our proposals to them.

As an added bonus, two of the applications I design can also be easily modified to fit into other businesses.

I can't share everything with the public but if you are interested, leave your contact information as comment to this post. If you are an Apple iOS or Google  Android or Blackberry developer, there might opportunities.

Learning Drupal and Building a Website in 7 Weeks - Final Update

Here are the statistics for this project:

Server and Drupal setup / installation	10 hours
Learning / testing out Drupal	54 hours
Researching a starter theme for A&T Systems Inc' website	11 hours
Developing A&T Systems Inc' website	74 hours

Creating content based on content types was not difficult at all. It was the easiest part of this project.

Majority of the time spent in developing A&T System's was "theming." That is, customizing the CSS, adding graphics, and creating custom templates. For someone that is not yet ready to develop Drupal templates or theme from scratch, finding a theme with a structure / layout is closest to the target is highly recommended. Having a solid understanding of HTML, CSS, and PHP will make the task a lot easier.

Header and Banner based on Theme Danland 

Header and Banner based on A&T Systems's Custom Theme 

Issues

Could not getting Drupal to use the custom templates defined. According to all documentation and examples, custom template needs to include the alias name. For example: If the custom template is for a node with an alias name "clients", then the name of the custom node template name should be "node--clients.tpl.php". It turns out that clean URL was not working properly on my Apple Mac laptop (URL contains "?q="). I tried a lot of the suggestions found at drupal.org (and elsewhere) and nothing was worked. Given the time constraint, my custom templates use the technical name instead of the alias.

Home Page based on Theme Danland

Home Page based on A&T Systems' Custom Theme

Lessons Learned

• Make sure the base web server is working properly before installing Drupal.
• Choose an appropriate initial administrator user id during the installation because in order to change this special user id, it is necessary to make a direct update in the database (table "users").
• May not want to use the latest and greatest release of Drupal. Research the support for all the modules and theme(s) to be implemented first. Then select the release of Drupal that best support those modules and theme(s).
• Make sure the base Drupal installation is working properly before customizing (theming) it.
• As a beginner, it's more important to select starter theme that is closest to the target structure / layout.
• Once a starter theme has been selected, content can be added to the system.
• To customize the contact form, create a "page--contact.tpl.php" template.
• Strip off as much unused HTML, CSS, PHP code as possible from based style sheets and templates.
• Remove as many unused modules as possible. This is to improve performance (especially during system startup).
• Remove as many unused themes as possible but don't remove the active administrative theme. This is to mainly reduce the installation size.

Contact Form based on Theme Danland

Contact Form based on A&T Sytems's Custom Theme

New Portfolio Site

Created (hand coded from scratch, no library or template) a portfolio site for myself based on the concept of boxes and lines. Minimal graphic design. Minimal trickery (a.k.a., JavaScript, JavaScript library, Flash, etc.). In fact, the only JavaScript is from Shadowbox.js.


All about the content

The focus is to showcase work (Information Architectural and User Interaction / Experience) I have done for the web and on mobile devices.

Process

1. Wrote a creative brief
2. Developed a sitemap
3. Created moodboards
4. Developed wireframes
5. Wrote up all the content
6. Sourced content images
7. Developed basic HTML / CSS framework
8. Test, test, test, test, and more test
9. Code content to pages
10. Test, test, test, test, and more test
11. Added Shadowbox.js
12. Test, test, test, test, and more test

Browsers

It has been tested under Apple Mac OS X, Apple iOS, and Microsoft Windows against Chrome, Firefox, Internet Explorer (6, 7, and 8), Opera, and Safari.

Was a bit surprised to find differences in Firefox between Max OS X and Windows. Actually, it is really due to the difference in screen resolution between the two operating systems. Windows is 96dpi and Mac OS X is 72dpi. Hence, min-width of say 300px in Mac OS X is not the same as min-width in Windows. Will tweak this as part of the effort to make this layout a true fluid layout.


Issues

Found an issue with Shadowbox.js in iPad's and iPhone's Safari. Shadowbox.js renders the shadowbox / overlay at the top of the page (not where you are at) after 'back to top of page' (an anchor tag that references an anchor name at the top of the page) has been clicked and then scroll back down the page. This does not happen with desktop browsers. The only way for the user to remedy this issue is remove the '#topOfPage' from the URL (which was added to the URL by the anchor tag). Will have to investigate if I can rewrite the URL so '#topOfPage' is never added to the URL.

Designing Apple iOS App

Did not do too much Apple iOS development with NimbleKit since the last update. An experiment that stood out would be porting one of the demos from Raphael JavaScript Library (the Multi-Chart). Since the library works for Safari 3.0+, there really should have any problem to make it run on an iOS device. Sure enough. Other than base NimbleKit coding, nothing was modified from the original demo HTML file.

Okay, there is a little bit of fixing to do. It is not with Raphael JavaScript Library but it is with Apple's iOS IDE (Integrated Development Environment), Xcode, behaviour. When a JavaScript file is dragged into a project, Xcode adds it as a source code requiring compilation. This happens to all JavaScript files dragged or added into a project. Because JavaScript is not a compilable language, a warning is generated during the Build cycle. To fix the problem, drag the JavaScript library file (raphael.js) from Targets -> (name of the Project) -> Compile Sources to Targets -> (name of the Project) -> Copy Bundle Resources.




Instead playing around with NimbleKit, I decided to develop a proposal for the Vancouver Canucks (a NHL, National Hockey League, team in Vancouver, BC, Canada). They have approached my school (Capilano University), specially the program I am in (Interactive Design) for some mobile app ideas.

To start, I did some research on what is already existing. It turns out there are 2 mobile apps by the Vancouver Canucks. One is free and the other is not. Both of them are available for iOS and Blackberry. Both are designed for smartphone screen size.

After a lot of research I came up with a few ideas.

As part of the proposal, I will put a business case together and I will make some flowcharts and wireframes demonstrating the app.

Unfortunately I will not be able to blog about the details of the proposal. If you are really interested, leave your contact information as a comment to this post. May be I will be able to give out some details in the future.

Learning Drupal and Building a Website in 7 Weeks - Update 3

Learned a lot since last update. Not only from David Mercer's book but also from a few video podcasts (Drupal School, Drupal Videos, and Lullabot).

What exactly was accomplished?

• Gone thru chapters 8 to 10 of "Drupal 7" by David Mercer
• Views
• Drupal Theming
• Multimedia
• Panels
• Theming Nodes
• Theming Pages
• Theming Views
• Video podcasts videos from Drupal School, Drupal Video,  Lullabot, and Lynda.com
• Drupal Video: Drupal 7 Alpha Preview
• Drupal Video: A Second Look at Drupal 7 Alpha
• Lullabot: Drupal 7
• Drupal Videos: Drupal 6 Theme Basics
• Drupal School: Theming with Zen
• Drupal School: Getting Started with Zen
• Drupal Videos: Custom Drupal Homepages
• Lynda.com: Drupal Essential Training
• Install/activated the following modules:
• Field UI
• CCK
• Node Reference
• Advanced Help
• Footermap
• Views, Views Exporter, and Views UI
• Install / enabled the following themes:
• o Point
• Austin
• Basic
• Danland
• Fusion
• Sky
• Created a "Meet the Team" data block using custom fields and Views
  
  
• Created a custom content type (Article Review) with a field that is a Node Reference
  
  
• Created a sub-theme under the Zen theme
  

  

  Rounded corners tab style menu (active tab is white)

• Started working on a new theme based on the Danland theme
  

  

  Changed site name font and floated the site slogan to the right

Issues

No real issues. The only thing I found is that some of the contributed modules and themes (especially the themes) are not compatible with Drupal 7 yet it is showing up in the search result when asked to filter only Drupal 7 items.


Experience So Far

From what I have seen so far, Drupal is flexible and complex at the same time. It's flexible because you can do pretty much anything you need to either with the help of modules or custom coding or theming. It is complex because there are so many pieces to the system and many ways to do achieve the same objectives. For example, to remove the RSS feed icon of the header, I could set display to none in the CSS or I could comment the code out of the page template (page.tpl.php). Now, commenting out of the page template is more efficient because the server doesn't have to process that piece of code. Hence, the final HTML going to the browser is smaller.

For a newbie, a browser based HTML / CSS / JavaScript developer tool like Firebug (a Firefox add-on) is super  helpful when it comes to theming. Tools like this let you see exactly which CSS classes or ids or elements need to be manipulated.