Category Archives: web

Evolution of a website – Part 1 of 4

Ever wonder how a website changes over time? Let’s take a peek at a website that has been around for years and I share with you four versions of the STC New Mexico Kachina Chapter website. I will also go into the technical details regarding how I implemented the current site.

Before I begin, I wish to thank the previous webmasters for spending countless hours maintaining the previous incarnations of the Kachina Chapter site. Without their effort, the site would not be where it is today without the valuable content that members have contributed.

My discussion will entail how I reached to the website that is today, http://stc-nm-kachina.org. This includes site implementation, page and layout design, website architecture, and content management.

This is a four-part series which I discuss the first two versions of the website pre-WordPress, the third and fourth versions of the site using WordPress, implementation of the fourth version using WordPress and its intricacies, and lastly how to keep the site alive.

Part 1

Versions 1 and 2: pre-WordPress

The history of the site was pretty straightforward until I became webmaster for the Kachina Chapter–previous webmasters either hard-coded from scratch or used a WYSIWYG (what you see is what you get) HTML editor to design and maintain the website. When I arrived as webmaster, the website was bifurcated into two sites: a static HTML website for Chapter content and a blog powered by WordPress–a simple and powerful content management system for blogging and websites. It didn’t help that neither site had the same page and layout design or that some of the static HTML pages linked to much older pages which had a completely different design. Also to note, the blog was not set up correctly for blog posts and it was in a random directory that made it difficult to operate properly.

Imagine having the WordPress blog at http://stc-nm-kachina.org/main/ and the HTML static website at http://stc-nm-kachina.org. It just looks messy and confusing for visitors. Which site or blog would visitors go to?

The first two incarnations of the website utilized static HTML and some CSS. These pages are great if the webmaster doesn’t drastically change the style or design too much. What I like about the old site is that much of the content and color schemes is now used on the current site.

STC NM Kachina Evolution - Version 1

STC NM Kachina Evolution – Version 1

The first version and second version use the same logo and header, yet the color and layout change dramatically. Since I enjoy the second version color scheme, you see this convention used in future versions.

STC NM Kachina Evolution - Version 2

STC NM Kachina Evolution – Version 2

 

In two weeks, on July 24, 2012 at 11:05 a.m. ET, I will discuss part two of my four-part series. Part two will encompass how I used WordPress to design and support the site.

RT, #ff, MT – WTH (what the heck) does it all mean?

On Twitter, you have up to 140 characters to shout-out your message. Space is limited per tweet and even more on a retweet. (What’s a retweet? See below.) This social network is special because you have to master the art of succinct messages that are comprehensible for the rest of the world. Below is a short guide for beginners to help decipher the Twitterverse.

Anatomy of a Tweet

Tweets are 140 characters and may contain Twitter handles (usernames preceded with @), hash tags, lingo, and short language. Hash tags are topics that contain the # character in front of a word, like #techcomm. #techcomm signifies the topic of technical communication. Topics are abundant, for example you can find tweets that include #cats, #dogs, or whatever you prefer.

 

The following examples include a tweet, a retweet, and a reply utilizing a a retweet.

The Tweet

The original tweet is what you read from someone who posted on Twitter.

Roger Renteria's Tweet

Roger Renteria's tweet

 

Retweeting someone’s tweet

A retweet is a reply to a person’s original post with RT appended at the front.

Roger Renteria's Retweet

Roger Renteria's retweet

 

Retweet with a reply to another user

In this case, the retweet is the same as the previous example, except I have added a short message in front of the RT.

Roger Renteria's Reply Retweet

Roger Renteria's retweet with a reply.

 

Twitter lingo

On Twitter, there is some lingo to learn so you can understand the language tweeters use on a regular basis:

  • RT – retweet (used to share someone’s tweet)
  • MT – modified tweet (used to shorten original tweets when retweeting)
  • #ff – Friday follow (used on Fridays to list Twitter users you want your followers to check out)
  • d @username – send direct message (used for private messaging)
  • DM @username – send direct message (used for private messaging)
  • CC – carbon copy mention (used to mention another user in relation to a public tweet)

Say it shorter

With a 140-character limit, including spaces, tweets are like text messages, and we can’t be too wordy. Here are some commonly used abbreviations:

  • w/ – with
  • w/out – without
  • & – and
  • RE – regarding
  • b/c – because
  • r – are
  • u – you
  • LOL – laughing out loud

Use abbreviations when possible if followers can understand them. You can use short language when necessary, but keep it professional. “I dn’t wnt to see ur twts like this b/c it is not a gr8 example 4 for reading.” I can read your message, but most likely, I would ignore it.

Use some punctuation!

Twitter is even better if punctuation is involved! Your tweets can be professional as well as grammatically correct. Don’t be afraid of nearly maxing out the 140 characters.

Shortlinks: bit.ly, t.co, fb.me, goo.gl

Link shorteners are awesome, but are you clicking a trusted link?

Some companies offer short link services so your tweets and links fit within the 140 character limit. To ensure that you are clicking on a link that won’t take you to a malicious site, check out these shortlink expanders on the web or as a browser add-on.

Like you would with email, ensure the link comes from a trusted source and beware before you click! By checking with a shortlink expander, you can see the full web address before clicking, and it ensures you are going to legitimate website instead of a spam site that may compromise your computer.

 

Want to learn more?

Mashable has a comprehensive guide on Twitter:
http://mashable.com/guidebook/twitter/

Paul McFedries wrote “Twitter: Tips, Tricks, and Tweets,” a great primer to using Twitter:
http://www.amazon.com/Twitter-Tips-Tricks-Tweets-McFedries/dp/0470529695

Twitter has pages of how to use Twitter:
https://support.twitter.com/groups/31-twitter-basics

 

If you have any questions, tweet me! @RogerRenteria.

One Year Anniversary

I cannot believe it was a year and a few days ago that I came up with the idea to write a blog about my views and interests in the field of technical communication. My first post, Post-STC 2011 Summit, started the journey in which I subsequently discussed QR Codes, Google+, Facebook, MySpace, Professional UsernamesTechWhirl, and many more topics.

To give you an idea of what has been going on behind the scenes, I will share with you some of the numbers from WordPress and Google Analytics since I began this blog and website. Enjoy the data!

The Raw Statistics

(Includes everything, including my own visits)

  • 1621 Visits
  • 956 Unique Visitors
  •  4671 Page Views
  • 58.42% Bounce Rate (single-page visits or visits that resulted in leaving the landing page)
  • 58.67% New Visits

Top Five States With Most Visitors

(excluding New Mexico)

  1. Texas
  2. California
  3. Illinois
  4. New York
  5. Massachusetts

Top Nine U.S. Cities With Most Visitors

(excluding Albuquerque, NM)

  1. Chicago, IL
  2. Austin, TX
  3. Minneapolis, MN
  4. Espanola, NM
  5. Santa Fe, NM
  6. New York, NY
  7. Los Angeles, CA
  8. Springfield, MO
  9. Dallas, TX

Top Five Countries With Longest Average Visit Duration

(excluding the United States)

  1. New Zealand (9:08 min)
  2. Antigua and Barbuda (2:00 min)
  3. Latvia (1:32 min)
  4. Singapore (1:25 min)
  5. India (1:08 min)

This is a small sampling of the data I collected. There is much more insight, such as types of internet browser, versions of operating system, type of internet service provider used to visit the site, etc.

Basically, when I looked at the data, I saw that I had the most readers from the United States and several from around the world. Visitors came in all forms, using Windows XP, Vista, or 7 or Mac OS X; Firefox, Chrome, or Internet Explorer; and iPhones, iPads, or Android tablets. Of visitors viewing the site, about 31% used a 1280 x 800 screen resolution, 11% used a 1680 x 1050 resolution, 9% used 1366 x 768 resolution, and the remaining used a mix of other screen resolutions.

These sorts of data can be very useful when deciding how to design websites for specific audiences and what kind of browsers and devices I should consider when building sites. I am a data geek, so it is really neat to look into the numbers and capture a glimpse of who my audience is.

I analyzed more of the data, and I have some goals that I want to accomplish in the next year:

  1. Increase Average Visit Duration
  2. Reduce Bounce Rate
  3. Increase Returning Visitors
  4. Increase Website Referrals
  5. Reduce Site Drop Offs
  6. Increase Post Comments

Think it can be done? Anything is possible. I will share more blog entries on my social networks in hopes colleagues will read them. Also, I will research more Search Engine Optimization (SEO) techniques so visitors can find my site easily using Google, Bing, or Yahoo.

I really look forward to comparing this year’s data to next year’s and see the differences.