HTML5 Pacman
This is a great example of what HTML5 can do. The programmer built a Pacman game using HTML5. He admits that it's a work in progress, but it's a great proof of concept. He says that he uses localStorage, HTML5 Audio, Canvas and @font-face to get the job done.
As far as I'm concerned, that's another win for HTML5. Go check it out and come back here to share your comments.
The Importance of Meta Tags
Meta tags are an important part of the web programming process. In this first part of the series, we are going to take a look at some of the different tags you should be using in your code.
First, it's important to understand what meta tags are. They are elements that are used to provide metadata about a web page. These tags are placed in the [head] part of the code. These elements are used to specify keywords, page description, authorship, robot/crawler instructions, etc. These tags are important to help search engines crawl your site and therefore help in search engine ranking.
Meta Description Tag
This is a very important tag and shouldn't be left out of your code. It is used to provide the search engines with a short and concise description of that particular page. Yes, that means that each page of the site should have a different description. That will help immensely with your page ranking. This description should generally be kept to about 160 characters. With the advent of Twitter, it shouldn't be hard to come up with a page description in the same amount of space it takes you to tweet about your breakfast. Look at the image below. This is a screen print of the description that is displayed when you search for my site, Flying Tomato Design. You'll note that the description for the home page is too long - it gets cut off. So, I need to change that. However, you'll notice that the description tag for the contact page is a great length.
Meta Keywords Tag
The keywords tag used to be vital to a website. Originally, it was intended as a way to tell search engines the main concept of your site with specific words. However, it didn't take long for web developers to figure out that they could manipulate the search results. Eventually, you would search for "giraffes" and somehow you'd come up with a porn site. It was because people were putting high ranking keywords in their code whether or not the content actually supported it. Today, search engine companies don't really use keywords. However, Yahoo! does put some sort of emphasis on it still.
Meta Robots Tag
This tag tells the search engines whether or not it should follow the links appearing on that page. If you already have a [robots.txt] file, there's no need for this tag. Here are the common commands used with the Meta Robots Tag:
- noindex: this tells the spider not to index that page
- follow: tells the spider to follow the links on that page and index them
- nofollow: tells the spider to not follow the links on the page, but index the page
Other Tags
Here's a list of other tags to use in your code. These are pretty self-explanatory so I don't want to spend a whole lot of time on these.
- <meta name="Copyright" content="Copyright Flying Tomato Design: 2007-2009" />
- <meta name="Author" content="Flying Tomato Design" />
- <meta name="Email" content="office@flyingtomatodesign.com" />
- <meta name="Charset" content="UTF-8" />
- <meta name="Distribution" content="Global" />
- <meta name="Rating" content="General" />
- <meta name="Revisit After" content="1 Day" />
Conclusion
So, in conclusion, most Meta Tags are still important today. They help with your search engine ranking and placement. However, other tags, such as the Keywords tag isn't so useful any more. In our next post, we'll look closer at the Keywords Tag in more detail; why it was so great to begin with, and what search engines do with it now.
SEO part Deux
My last blog about SEO was kind of a high level overview. This time I want to touch on one very important aspect of it.
One major key to SEO is the text. It's not enough to rely on keywords and other [meta] tags. Granted, they still help to a degree. However, over the last few years, the search engine companies have been moving more towards organic* searches.
*An organic search result is one that offers up a list of sites based on the overall relevance to the search word or phrase.
So, since the search engine ranks sites based off of keyword relevance, it's vital to pepper your site with the keywords that you want to target. However, you have to be careful that it's done in such a way that you don't look like an idiot because you've used your keyword(s) too many times. You also don't want to do some of those "black hat" tactics that we mentioned in the previous post (i.e. hiding keywords out of the main field of the site and using the background color as the font color to mask them).
You also want those keywords show up on the other pages of your site and not just the home page. By way of a side tangent; you want to put a unique description (meta name="Description" content="lobster bisque...yada, yada, yada") on each of the pages of your site. That way, they come up as separate listings or at least as sublistings to your site. It's also beneficial since each page has the target keywords and with different descriptions, it will help your page ranking.
Another good thing to do is use the ALT image tag. Firstly, it's just plain kind. The blind rely on web browsers that read the text of the code back to them. So, if you have an image without a description, the screen reader skips over it. It's vital that you provide as positive an experience as you can to all your visitors. Secondly, those descriptions must be appropriate to the photo. For example, if you have a photo of a Hawaiian sunset, you're not going to put your copyright as the ALT text. You'd label it something like "A relaxing day on the beach". Now, let's take it a step further and say that your keyword is "Corona" - as in that beautifully golden summertime beverage (BRB... excuses self to grab a cold beer)............................. Okay. So we're going to take this a step further; maybe you want to make this your description: "A relaxing day on the beach enjoying the Hawaiian sunset with a Corona and a lime." See in that example, not only is there a great description of the picture, but you've also used your target keyword in a unique way. Yes. That will help with your rankings, too.
However you have to remember that it all takes time. I mentioned that in the last SEO post and I'll mention it in subsequent ones. There's no "magic bullet" to getting SEO "right". However, there are a number of factors that when done properly will yield results.
In our next SEO post, we'll look at backlinking and social networking and how it affects your page rankings in organic searches.
What the hell is SEO?
SEO or Search Engine Optimization "is the process of improving the volume or quality of traffic to a website or web page... from search engines via "natural" or unpaid ("organic" or "algorithmic") search results as opposed to other forms of search engine marketing which may deal with paid inclusion. [source... Wikipedia]
Wow. That's a mouthful. The essence of it is that your webmaster/designer/programmer, etc should be using certain tools to optimize your site for the best rankings possible. A few years ago when the interwebs was really getting popular (i.e. tech bubble), all it took to optimize a site was to have keywords in your meta tags. Now, you have to have alternate descriptions for all images (and they have to be unique), your keywords are still okay, but they should be unique to the topic of each page of your site, you should also have your keywords that you want to target peppered throughout the readable text on the site (w/out getting spammy about it), you need to have links on other sites (blogs for example) that link back to your home page, and more recently, you need to be a part of the social networking buzz (Twitter, Facebook, LinkedIn, MySpace, Technorati, etc). There's a lot that has to be done, and it all needs to be constantly updated. Because of everything that has to be done now to optimize it, no one should be promising or otherwise guaranteeing that your site will land on the first page within a certain period of time. At minimum, it takes 3-6 months. Yet by personal example, my company's site "Flying Tomato Design" doesn't show up even in the first 10 pages of the Google search and we've been around for three years. So, it's vital that the consumer understands that proper SEO is a process that won't yield immediate results. So with all that said, let's take a minute to understand what bad SEO is.
Bad SEO. Go lay down.
Bad SEO techniques, or Black Hat SEO are attempts to improve your site rankings by doing things that are considered unacceptable by search engines. Or, there could be some sort of deception involved. One bad technique is hiding text on the page. So for example, let's say that you have a black website that is sized 800x600px (roughly the size of a 5"x7" picture). Some developers would create extra room outside the visible area and put text there in a black font. That extra text is then read by the search engine, but it's not normally caught unless you're looking for it.
Another bad technique is called cloaking. This is where a different page is displayed depending on if it is a human reaching it or a computer.
Now what? Well, if you're caught using such techniques, you could be penalized. For example, your site can be reduced in the rankings or eliminate your site from their database entirely. Such actions can be taken automatically via computer or by manual review. One great example (mentioned in the same Wikipedia article) harkens all the way back to February 2006 when Google removed both BMW Germany and Ricoh German for black hat SEO tactics. They quickly issued an apology and fixed the bad code and were restored to Google's good graces.
Good Boy, Seo.
So, we have an idea of what is bad practice. What are some of the good SEO behaviors? Firstly, this is called White Hat SEO. These are techniques that are obviously recommended as good design. White Hat SEO tends to result in a long lasting ROI while sites that use Black Hat SEO generally are shut down and/or altogether banned. It's kind of hard to pin down, though what these techniques are as the search engine companies are constantly evolving. However Google has a great article to help educate the layperson to the basics of SEO, what to expect from web design companies, and even some good questions to ask in your search for a good company.
As I said, though, the search engine companies are constantly evolving their algorithms. A good example of this recently is with Google. I read an article a few weeks ago on Gizmodo.com about how Google is changing things up. Unfortunately, I can't find the article right now, but the essence of it is that Google will start to change to index sites live. So, when you go out and search for "iPhone", it will index all sites that mention "iPhone" in real time. The way it's done now is on a 24 hour cycle at best. So in that environment, it's nearly impossible to fraud the system. However, it does make it harder on web developers to make sure that their client's content is up to date.
In short, SEO is an ever evolving game. As I mentioned above, it's not a science, but it sure as hell is complicated and it takes time for your site to get ranked high. That's not a cop-out. That's reality.
The shameless plug.
Now for a shameless plug; my company, Flying Tomato Design provides the following SEO services at this time (the list changes as the industry does):
- backlinking
- help you get your social networking setup and integrated with your site/blog
- alternate description tags for images
- specific keywords for each page of your site
- we won't serve as your text editor, however, we will look it over and if we can cram more keywords into your text, we'll make that suggestion
I hope you've found this brief read about SEO helpful. I do plan on more in depth articles to come!
Wrestling with JQuery
I'll admit it. I'm good at programming as long as it's HTML and CSS. I'm pretty weak with JavaScript and PHP. Okay, I hate PHP and MySQL, but maybe someday I'll come around. However, I've really been turned on to JQuery and have been really impressed with it.
I've been working on a new design for our primary site: http://www.flyingtomatodesign.com. I wanted to do something that would be a little more interactive than my previous designs.
As a quick aside: I generally approach website construction with a designer's eye. The programming and considering thereof generally come after that. In other words, I end up spending a ton of time either figuring out how to make the programing work OR end up changing my design to accommodate what I can accomplish with the programming
So, on this new design, I decided to approach it from a different angle. I decided to base the site design around the programming. So, I found a couple great JQuery scripts and got them worked out. I was pretty stoked at how quickly these things worked. Take a look at the concept: http://www.flyingtomatodesign.com/FTDWeb2_0Concept/index.html. First I got the slider working. That one was rough. I had to really wrestle with the CSS and the JavaScript to make it work right. More appropriately, I had a certain spot that I wanted that to fit in and wrestled with shoe-horning that sucker in. As I mentioned above, JS isn't my strong suit, so it took me the better part of my Saturday to get it figured out.
Next came the navigation. After I got that sussed out (which this time went much smoother), that damn slider wouldn't work. I moved some of the code around and SHAZAAM! everything fell into place and worked together. Well at least in Opera 10, Safari 4, Firefox 3.6, and Chrome. Of course since Internet Explorer doesn't play well with web standards, it wouldn't work for that. However, I got a nice little fix for that, too. First, you have to create a separate style sheet. I named it "IE7.css" and it contains the following code:
div.container {
overflow:hidden;
word-wrap: break-word;
}
Then you have to add the following code. I built this demo with a wrapper, then a container inside that, etc. So, I placed the code at the top of the wrapper:
<!--[if IE 7]> <link href="_css/IE7.css" rel="stylesheet" type="text/css"> <![endif]-->
By putting that bit of script at the top of the main DIV tag, everything under it is affected by that code. Before affecting those changes, the navigation worked fine but the scrolling window did not. Now they both work just fine in IE8.
In addition to that, I had to put the JavaScript coding above the code required for the slider. So, I called the JS files for the navigation (jquery.min.js) and proprietary code for the script first. Then called the slider scripts (jquery.js and easySlider1.5.js) and it's proprietary code for the slider. So the end result is that the site loads the code required to make the navigation to work first, then the code for the slider, then as it turns out, all the CSS. Take a look at the source code and you'll see what I mean.
If you want to copy the navigation, go here: Sohtanaka.com. If you're interested in the slider, you can find it here: Easy Slider 1.5.
