Are your pages search friendly?

A few days ago a colleague and I were having a discussion about web systems and teacher pages along with a certain nameless Content Management System (CMS) when she mentioned that it was just as easy to create a page in Publisher or Word. I chose to remain quiet about the whole thing and just let it slide deciding to put that debate for another time or another conversation. Now, I've known for some time that Publisher or Word, both being desktop print publishing software was not the best choice for web design. But having spent the better part of the summer redoing websites that have been done with one of these two programs, I can truly say that I now know exactly why they are not the best choice to use for web design.

Here in the Tona-Roberts household, we use Dreamweaver for our web pages, and while some may argue that may not be the best for web design, either, we have learned to keep it on a short leash. Most of our time in Dreamweaver is spent in code view, anyway. One of the things I like about Dreamweaver is its ability to help remind you of tags or finish filling them in for you, if you forget them. Another feature I like about Dreamweaver is its time saving ability to clean up code, rather than rewriting it from scratch, which some may argue might be the best thing to do, and best done in notepad. Dreamweaver has some different options for cleaning up bad html or code, such as one command that can clean up Word html. I've spent a lot of time using this command this week while stripping code for my resident webdev guru.

One of the things about Word or Publisher that makes it such a poor choice is the fact that its code is horrible redundant when it is not necessary. Word has this incredible knack for taking 20-30 lines of code and stretching it to 200+ lines of code which ends up stuff the file size more than it needs to be. For one thing, Word, or Publisher likes to put everything in tables when it doesn't need to be. Tables are for eating off of, or at the most, organizing your data on a spread sheet, not for layout and design. They only add to your file size. For example, I've taken pages that were 106kb and stripped the code down while maintaining the same look of the page so that the end result is about 25kb, or about a quarter of the file size.

But we are talking kilobytes, here. Where's the harm in that? Well, I'll tell you. Every time you go to a website, you are actually bringing the website to you. Your computer or your browser is downloading everything that is on that page into your computer's temp files. Heavier file sizes means slower load times. And for someone on an older computer with an older browser, more kilobytes could mean several minutes worth of page load times. Think dial up internet slow... This could make the difference in whether they decide to keep browsing through your site or not, or if they would revisit your site again.

Another unfriendly MS habit found in these programs, and the main reason for the title of this blog, is their file naming system. When you create and save a file, you want to name it something that means something so it is easily remembered. However, a file name like index_Page_2721.html tells neither you the creator of the page or your visitor anything about what that page is about. When you go back to edit or update your site, how are you to know which page you need to edit while looking down a long list of files all beginning with "index_Page" and a series of numbers. And if you can't tell your pages apart, how is a visitor or a search engine spider supposed to be able to tell what is on your page from the name? (I apologize to some who may be reading this blog. This blog is in no way meant to single any one particular person out, but meant as a help to all. We are all learning, and as you can tell from the rest of my blog posts, I've made my share of mistakes and have learned from them. I write so that all who read them may benefit from what I have learned.)

Pictures are another item on pages that often take away from the user-friendliness of your pages or site. I've seen sites where the whole thing, each page, was a big image, or made up of a lot of little images pieced together to make a large image. Placing text in an image without having it repeated in the text on your page may not be the best for repeated business, especially when it is contact information like your name, address, and phone number. Some text included in an image such as a logo or in a banner is alright; however your entire page content should not be in an image. While they do have some search engine spiders that are capable of searching images for text now, there use and availability is still few and far between. Also, think accessibility - what if someone was using a screen reader, or a computer that did not have the ability to view images. They would then be unable to get any information from your image such as your contact information unless you had it in text somewhere else on your page. Using the alt tag is a way of adding important information about your image on your webpage in a way that can be viewed by everyone. A what tag, you ask? An alt tag, or really the alt attribute of the image tag. Now, I'm not expecting everyone who reads this to be able to understand or fluently read code enough to add this attribute into your page code, most software or applications designed for web development such as Dreamweaver or InDesign provide a place for you to enter alternate text in for an image that would appear if for some reason the image did not appear. Even my email client requests that I enter alternative text for an image when I go to insert an image in my email. This is why it asks for alternative text. Desktop publishing software such as Word and Publisher do not have a place for you to enter alternative image text. And, if you use MS clip art that is available with the software, the image file names will not give any information about what the image is if the image is missing. Their image names are a series of numbers and letters that doesn't make sense to the image, only their file system in their database. This brings me to my next thought.

Just as in naming your page file names something that make sense to you and your visitors, it is equally important to name your images something that make sense. To, again, borrow MS file naming system, for example, index_image5439.jpg does not give you or your visitors a clue what the picture is. Fortunately, we are able, most of the time, to preview the images in our explorer windows before we open an image so we know which image we are looking for and do not always have to rely on the file name. However, a person using a screen reader can not make heads or tails of what index_image5439.jpg could be. Neither can they tell what a picture is about if left with the standard digital camera names like DSC231.jpg. So, again, I say, give your images a proper sensible file name or rename your images from your digital camera before putting them in your web pages, and remember proper file naming conventions. Some people are still on older computers that have problems with spaces and funny characters other than dashes and underscores in the file names, or incredibly long file names. If you keep it limited to 30 characters or less, you will be keeping your file names within acceptable limits for everyone, even those on older systems. And, really, 30 characters is more than plenty to give your image a sensible name. If you need to add more information, use the alt attribute. I mean, would you name your kid something with longer than 30 characters? If you did, I bet you would shorten it to a nickname when you had to call their name or write it all the time.

Hyperlinks are yet another place on webpages where more information is sometimes needed. Have your link text make sense. Don't always just go with the URL of the link. Those may not alway be user friendly. Instead of placing the long address in your link text for all to see, why not give information about what they can expect to see on the page, such as Children's Books on Dinosaurs. Some of the URL include long database query strings that may take up several lines of text. This information is only useful to your browser window to locate that page, but not friendly enough for us humans that run on more than ones and zeroes to remember. If you need to add more information, use what is called a "title tag" or more correctly a title attribute. Again, for those that are not fluent in code, most user interfaces provide space for title text of a link in the application.

A word about some CMS applications such as the one used by my school district, there is a place you can enter alt and title attributes in there but they are not always called "alt" and "title". It may have another text box for you to fill in such as "screen tip". This is where you would add extra information about an image or a link. Desktop publishing software such as Word and Publisher do not provide a space for alt and title attributes, and yet another complaint against them for web design. Where on the page does the alt or title attribute show up? When you hover over an image with alternative text information or a link or button with title text, it shows up in a little block under your cursor. This is how that information gets on the page. This also gives the search engine spiders more keyword friendly information about your page and helps you in the rankings - but that is for a different blog...

One last word about making your pages search friendly for any educators to think about is this - Did you know we are required by law to make our webpages accessible to those with disabilities? Section 508 of the Americans with Disabilities Act requires any electronic information produced by government agencies or those receiving funding from government agencies to be accessible to those with disabilities. This means, if the person needed to use a screen reader to see our pages, they would not see any images and would need to have the information as alternative text. Not that I'm trying to be "big brother" or anything. Just something to chew on while you are updating and changing your sites for the coming school year...

If you would like more information on the searchability of images, try Spider Market SEO's image search tips. For more information about 508 compliance for web sites, The US Government has a whole site dedicated to Section 508 Compliance.

Video tutorial site

Always on the look out for a good reference site to add to my favorites I found a new video site this week while searching Fireworks help. While Fireworks is no stranger to me, using Fireworks to help with the development of some features for the use on the web such as graphical animation is something I am somewhat of a novice at. While looking for help in this matter, I followed the advice I usually dish out in chat, I "Googled" the information I was looking for, and was not disappointed! In the process, I found a new favorite site: Best Tech Videos.

The site is a free site with thousands of technical tutorial videos on any subject within the realm of computer science. You don't even have to register to search and view videos, and from what I could tell, there isn't a limit to the number of videos you could view at any one time. Those that know me know I have been preaching about the benefits of Atomic Learning since our school board had licenses for all of us. When our licenses ran out, I paid for an additional year, I loved the site so much. However, Best Tech Videos takes the cake for computer related videos. Anyone can register on the site and view the videos; although, again, it is not necessary to register. After I found a very helpful, fully detailed video on Fireworks, I did a search of some other topics that I thought would generally come up in search terms and found tons of videos on Windows XP, Win 7, Mac OS X, and photoshop. The site is a D-I-Y designer's dream!

If you do register, again, totally free, you can log in and set up a customizable profile selecting topics and search tags that interest you. It then searches for the latest videos on your selected topics. Need help with Dreamweaver, Fireworks, or Photoshop? No problem - the videos are there! You can watch the video all at once, or pause it as you follow the steps in the program on your own computer. I watched the video all the through once, then watched it again as I followed along in Fireworks. There is also a forum, blog, and RSS feeder available. Looking for code? They have videos full of whatever kind of code you need. PHP, Ajax, javascript, jQuery, C+, asp.net - its all there!

I've found other video tutorial sites before but have always found them limited in the amount of videos you were allowed to watch at any one time, for free, or limited to specific programs or applications. Best Tech Videos has everything. Check it out!