by Samantha Bridgehouse

Problem Description

The problem that needed to be solved with this project was simple: to increase the amount of user traffic visiting the Interactive Design Lab North website. Our group was given a blank website domain where we had to build and maintain a website about the Interactive Design Program. The goal was to generate as much traffic to the website as possible by using Search Engine Optimization (SEO) techniques. Google Analytics was used in order to measure the number of site visitors as well as other site statistics.

SEO/Analytics Strategies and Tactics

Keywords

One of the most involved strategies our group utilized in our SEO was the use of keywords. We aimed to get a keyword density of 2% with keywords related to interactive design, so that the Interactive Design Lab North website would have a higher search engine ranking when those keywords were searched. In order to use as many appropriate keywords as possible without keyword stuffing (spamming), we created over a dozen different pages on the site that offer information about the Interactive Design Program and Capilano University. By creating so many pages, we were able to include a large amount of written content, where we could pack in quite a few keywords without affecting the readability of the writing. Besides the written content, we also added keywords to the Meta and Title HTML tags of the site, as well as to all of the page headers. Our group tried to add images to the pages wherever possible, which allowed us to add additional keywords in the Title attribute of all of the image tags.

Content Freshness

Since websites that are updated frequently have a higher search engine ranking, our group decided to create a blog on the homepage of the Interactive Design Lab North website. By creating new blog posts every day, we ensured that our website maintained freshness. Each group member was assigned a specific day of the week in which they had to write a new blog post. We blogged about topics related to interactive design, offering tutorials and resources, as well as general technology issues and current events. We hoped to build up a number of loyal repeat visitors who would come each day to read the new blog posts.

Link Building and Social Media

Another method our group used in our SEO was link building. Websites that have lots of outgoing and incoming links are considered more popular by search engines and are given a higher ranking. All of our pages and blog posts link to other pages and blog posts on the site, which encourages visitors to explore the site further. This improved our Bounce Rate – the percentage of visitors who leave the site on the same page they entered. We also created many links to other websites wherever possible. One of our strategies for building incoming links to the site was to sign up for Social Media websites, where we were able to advertise and link to the Interactive Design Lab North site. Social Media websites also allowed us to try and create a dialogue about our site among different communities, to spread awareness of the website. We took advantage of the major Social Media websites such as Facebook and Twitter, but we also created accounts with Youtube, DeviantArt, Flickr, Screenshots, and Digg. On Facebook, we created a group for the Interactive Design Lab North website and invited our friends to join it. On Twitter, we frequently made web design and development related Tweets, linking to both our website and other useful websites. We Followed a large number of Twitter users who are a part of the web community in order to gain more Followers of our Twitter feed. On DeviantArt and ScreenShots, we uploaded screenshots of some of our web design work, and on Flickr and Youtube we uploaded photos and videos of the Interactive Design lab and numerous Rich Media projects we had completed. We added all of our blog posts to Digg and encouraged people to also Digg our posts to increase their popularity.

Contest

One of our most unique strategies to build traffic to the Interactive Design Lab North website was to host a Trivia Challenge contest. Over a period of seven days, we posted a new general trivia question each day, and asked users to email their answers to us. Of the people who answered all of the questions correctly, we did a random draw for one winner, who received a $25 giftcard to a store of their choice. This was one of our most effective strategies in increasing visitors to the site. We created a Facebook event for the contest and invited everyone we knew to join in, and we also made several Tweets about the contest on Twitter.

Outcomes

Our group was quite successful in our SEO tactics. In a two-month period, we had 421 unique visitors and 1,595 unique pageviews. On average, users were visiting 4-5 pages of our site each time they visited, and we had a respectably low Bounce Rate of 58%. Most of our website traffic came from referring sites at 58%, with only 5.5% of visitors being directed to our website from search engines. This is a number we may want to work to improve in the future, since a higher percentage of visitors from search engines would be preferred. Overall, the project had a positive outcome.

Lessons Learned

I started out this project with almost no knowledge about SEO, and after completing it, I feel like I have learned a huge amount. One of the tactics I learned, which I would want to implement in the future, is to put a greater importance on quality of visitors rather than quantity. This is important for the Interactive Design Lab North website specifically since the people who would be interested in visiting our website were mostly limited to those in the web or technology community. We tried to add content to our site that would interest the general public as well, but for the most part, people in the web industry are those we wanted to attract to the site. Although we were getting a decent amount of new visitors each day, we did not have a comparatively large number of loyal repeat visitors. We could have gained more repeat visitors by putting more focus on writing insightful and useful blog posts. Many of our blog posts simply paraphrased and linked to other author’s articles, which did not give users enough of a reason to continue visiting our blog on a regular basis. We should have written more of our own articles in order to make our site a dependable and valuable resource for the web community. Part of this limitation was due to time constraints, since everyone in our group also had other important and time-consuming projects going on and did not always have time to write a long blog post. Besides the constraints with our blog, most of the other strategies my group learned and implemented were very effective – using keywords and creating a blog to keep our content fresh for a higher search engine ranking; link building and utilizing Social Media to spread awareness of the site; and hosting a contest to entice more visitors to come to our website. This project has greatly improved my abilities with SEO, and I look forward to applying what I have learned to future projects.

Generation WE: The Movement Begins… from Generation We on Vimeo.

Easy Slider saved my life. It’s a jQuery image slider that is highly customizable. I recommend it for anyone who needs to create an image gallery or wants to add an interactive element to their website! It was super easy to put up, even for a JavaScript dummy like me. Check out the newer version for added features.
Easy Slider 1.5 – The Easiest jQuery Plugin For Sliding Images and Content
Easy Slider 1.7 – Numeric Navigation jQuery Slider

Check out how I implemented Easy Slider on my portfolio website!

If you liked this post, you might also like…
Top 10 Web Design Resources Every Designer Should Know About
Wana Learn jQuery?
Wordpress?

Congrats To Canada on Winning the Gold In Hockey and many other Olympic Sports!

WE ROOOOCCKKK!!!!!! 14 golds!

In the interview Jason Rubin makes some interesting suggestions about how to strategically gain profit from games without increasing the initial retail cost of the game. He suggests that people can have the option of paying REAL money for items in a game that may take countless hours of gameplay to acquire. I think this is a brilliant idea and I think it is a great way for the gaming industry to gain profit without effecting our wallets unless we choose to of course.

You see it has been proven that some people are willing to pay money to play a game at a certain level without committing a massive amount of hours. World of Warcraft is a great example. This game takes a ton of hours to get to a decent level and from what I hear gets funner when you reach those levels and people have actually payed some serious money for a character with a high level. They average around $100 for a character and Im pretty sure that someone has paid $1000 for one. Jason Rubin makes a point of this by using farmville as an example. Farmville is a Facebook game that is free to play but it makes millions monthly. The reason is because people can get further in the game quicker by forking out cash.

So the question I ask is, which direction is the gaming industry gonna go. Will we see more games with the option of paying real money for quicker access to items inside the game or will the initial retail price of the game just increase?

if (!$variable1) {
echo “variable1 is NOT set”;
} else {
echo “variable1 is SET”;
}

Your typical IF statement. But if all you’re going to do is use ECHO to write a short string as output, then there’s a shortcut that I don’t see enough these days in people’s source code.

echo (!$variable1) ? “variable1 is NOT set” : “variable1 is SET”;

You’ve just condensed an IF statement into a single line. Obviously there are times when you would use this and times when you shouldn’t. But if you’re simply outputting a one liner like me here in the example code, this code is your friend.

The first step is to find an appropriate font that will look like someone has written in the sand with their finger. For the tutorial, I chose to use Handwriting – Dakota since I like the rough quality to it.

After you’ve found a suitable font, create a new canvas in Photoshop. You can also use an existing one if you already have a design started.

Since there can be no writing in the sand without the sand, let’s create a sand background for behind our text. Fill your canvas with an appropriate sandy colour – I am using #f0ebdf. Now go to the top menubar and go to Filter – Noise – Add Noise… Check the Monochromatic box and set it to Uniform Distribution. You can fiddle with the Amount, but remember, you want it to look like sand, not a bunch of noise! I used 1.75% and was quite happy with the subtle texture. Click OK.

The great thing about this method is it will create a perfect tiling background – you don’t have to worry about seams showing up if you use it as a repeating page background for your web design! Now we need to add our text. You’ll want to make it a dark brown colour so that it can be read easily against your sand background – I am using #a0894e.

Next, we’re going to use some Blending Options on our text layer to create the illusion of a build-up of sand around our text, and to give our text some depth. In your menubar, go to Layer – Layer Style – Blending Options. To create the sand build-up, let’s add a stroke. The size of the stroke will depend on the size of your text – it should be in proportion to look realistic. Since I have rather large text, I am going to make my stroke 4 pixels. The position should be on the Outside, and change the blend mode to Overlay. Up the Opacity to 100% and change the colour to black (#000000).

If you click OK, your text should now look something like this:

Now, to create some depth, let’s add Bevel and Embossing. We’re going to give our text an Inner Bevel. I changed the depth to 50% and made the size 4 pixels; you can experiment with these values to get your desired effect. The important part is to change the lighting so that the text looks like it is ingrained into the canvas rather than sticking out of it. I changed the Shading Angle to -120 degrees and changed the Altitude to 30 degrees. Change both the Highlight and Shadow Mode to Overlay and lower both Opacity values to 50%. The Highlight colour should be white and the Shadow black. Click OK.

We’re almost done! Your text should now look like it is etched in the sand:

You can stop at this step if you prefer, but I’m going to add the final touch by giving our text a bit more texture. Make sure your text layer is still selected, and again go to your menubar and go to Filter – Noise – Add Noise… Use the same settings as before, but up the Amount a bit: I made mine 3%. Click OK and now you’re done!

The final product should look something like this:

Easy right? I hope you enjoyed my little tutorial. Comment on this post if you have any issues getting things to work, or if you would like to suggest improvements!

If you liked this post, you might also like…

Pillowed Text Photoshop Tutorial

How to Create a Stylish Pair of Headphones

Create Cool iPhone Icons

JSNES

The first one that is pretty impressive is a NES emulator. This was developed by Ben Firshman and is of pretty good quality. The emulator supports a list of games on the website, that can be found here. With a bit of flash there is also support for sound. JSNES is open source and is available on Github. Its best to test the emulator using Google Chrome, but it does run in Safari 4 and Firefox.

Pixastic

Pixastic is an online image editor. It allows you to apply a variety of effects on images and you can save the image to your computer or do whatever you want with it. Pixastic is also a image filter library for JavaScript so the online editor displays the variety of effects you can do with it. You can check out the main page here or play with the image editor here.

Bespin

This is Mozilla’s attempt at an online IDE tool. Bespin allows you to write code for the same platform that made it! (It can be used to write anything I’m pretty sure) You can test it out be registering up on their site using their experimental hosted service and you can even download it and use it own your own website. Bespin is 100% open source. Learn more about Mozilla’s Bespin here.

If you liked this post, you might also like…

HTML5 Local Storage, Session Storage, and Client-Side Database Tutorial

HTML5 Link Element Explained

Sublime HTML5 Video Player