Creating Accessible Cross-browser Compatible Forms

Posted on by Jonathan Kemp

I set out recently to learn how to create forms that utilized standards better. The first thing I learned was that I was not using a very important tag that actually helps make forms more accessible. Accessible forms mean forms that are easier to navigate for those with disabilities. To create a form that is accessible, all you need is 1 tag, label.

The label tag makes this possible by associating text specifically with a form field. To do this use the label tag including the attribute for. The value of for should be the id of the form field. That’s it. Then, all you have to do is make sure you use the label tag for all the fields in your form. This will make your forms easier to navigate for screen readers because it knows which fields to associate with which text.

Other tags you can use include fieldset and legend. Fieldset is used to group a set of fields together while legend is used to give that fieldset a title.

For specific examples of correct usage of these tags, see this post on HTML Dog on accessible forms.

The second part of this is how I learned the best way to structurally markup forms. I was looking for a way to markup a form using CSS and not tables. After experimenting a bit, I learned it is best to use tables for now and to use CSS to style the tables. There is just no way to do it and maintain cross browser compatibility without using tables. I think the reason is that there is so much variance in how browsers display form fields.

Using tables to structurally markup forms, CSS to style the forms, while using label to make them more accessible, allows you to create accessible forms that look the same across all major browsers.

Getting Out of Supplemental Results

Posted on by Jonathan Kemp

Shoemoney posted yesterday about how Aaron Wall gave him advice on how to get his blog out of the supplemental results in Google. According to Shoemoney, after one month, his blog is out of supplemental results, and his traffic from Google increased 1400%. He also said that most of it was done in the robots.txt file.

In the comments, a user posted the content of Shoemoney’s robots.txt file. Here is what he posted at that time.

User-Agent: Googlebot
Disallow: /link.php
Disallow: /gallery
Disallow: /gallery2
Disallow: /gallery2/
Disallow: /gallery/
Disallow: /category/
Disallow: /page/
Disallow: /pages/
Disallow: /feed/
Disallow: /feed

It looks like Shoemoney is avoiding supplementals by getting rid of duplicate content issues. That is why he disallowed the gallery, category, pages and feed directories.

Shoemoney then responded that the robots.txt was only 50% of the problem. The rest was overcome by adding dynamic title and description tags plus more on page internal linking.

There you go. SEO advice straight from Shoemoney. He claims he sucks at SEO, but it looks like he is getting some good advice from the right people.

Free Keyword Suggestion Tool

Posted on by Jonathan Kemp

It was announced today that Wordtracker unveiled a new free keyword suggestion tool. Wordtracker already has a free version of their keyword research tool, but it only gives you 15 results at a time. Plus, you have to register to use it. Otherwise, it has a lot of the functionality of the paid version of the tool.

The new tool gives you up to 100 results, but has no other functionality of the paid version. And you don’t have to register. It does still allow you to click on a keyword result to search on that phrase, rather than typing it in, further allowing you to narrow your searches.

I think this is pretty cool, even though I am already an active Wordtracker subscriber. I should find it pretty useful. Most of the time when I am looking for keywords, I need to find the top ones pretty quickly. Plus, it’s free. So if you haven’t seen it yet, check it out. If you don’t already have a subscription, it is another place where you can get quickie keyword research for free.

Posted in SEO

Correctly Setting Z-index

Posted on by Jonathan Kemp

One thing I always have had trouble with in building web pages with CSS is setting the “z-index” property. In CSS, the “z-index” is the stacking order on the page. It makes sense if you think of it as adding a third dimension to the web page.

I run into the problem often where I need an element to load on top of another element, and they always seem to want to load in the opposite order. Many times I have tried to change the z-index without much success. So much so, that I gave up trying to use it.

Well, I finally figured out what I have been doing incorrectly all this time. To get z-index to work, both elements have to have the same parent. What this means is that if two elements have different parents you cannot change the z-index relative to each other by setting the z-index for those elements. You have to change the z-index of the parent element.

Duh! Solving this problem is a major help to me though because now I can correctly set the z-index and solve a lot of CSS design problems I have been having.

Microsoft Downgrading E-mail Support for CSS

Posted on by Jonathan Kemp

I ran across this blog post today from Campaign Monitor about how Microsoft is taking email design back 5 years. Microsoft Outlook 2007 was released yesterday as part of Microsoft Office 2007, which is being released at the same time as Windows Vista, Microsoft’s new operating system.

According to the blog post, Outlook is going from using the Internet Explorer rendering engine to using the Microsoft Word rendering engine to display e-mails. The reasoning behind this is that Outlook uses Word to compose e-mails. Using Word to display e-mails ensures that the e-mail will look the same across all versions of Outlook 2007. Smart, huh?

Calling this colossal stupidity on Microsoft’s part is an understatement. Although it doesn’t surprise me in the least. Microsoft is not known for their support of standards. This genius move ensures that using CSS based layout for e-mail design will make it break in Outlook 2007 due to lack of support for any CSS except inline styles.

If you are an e-mail designer, you need to read the article to find out how this will affect you. In short, it looks like table based layout will be the way to go to ensure your e-mail will display properly in Outlook 2007.

After thinking about it though, it may not be as bad as it seems, for a while anyway. Most users of Microsoft Office will not upgrade right away. Those that do may not even use Outlook. I don’t use it, but I do use Office. The downside is that Microsoft has ensured that this will continue for years to come. Because when people do eventually upgrade, they will get Office 2007, even if it takes years.

Shoemoney for the Win

Posted on by Jonathan Kemp

This is a paid review for Shoemoney’s blog. I have to say that I am a big fan of Shoemoney, aka Jeremy Schoemaker. So I was surpsrised when I saw that he had asked for a paid review on my site. I’m not sure what Shoemoney is up to here, but I’m guessing that he is testing out paid blog review services somehow. Shoemoney, I would have done this one for free buddy, so here goes.

I’m not sure where I first heard of Shoemoney, but I know I started reading his blog sometime last year. Now, I read it everyday at the top of my list (knocking off SEOmoz, by the way, sorry Rand.) I think it’s because he likes talking about making money online, and that is something I am really interested in right now. Plus, he likes to mix a lot of humor in his writing. He also likes to write about business and making money in general. I guess you could say I am really trying to take his advice and put it into practice. I started using Google Adwords as well as Yahoo and MSN search advertising based on Shoemoney’s advice. I also have looked into affilate marketing, but I learned I suck at it so I have to learn a lot more before I jump into it and build more traffic first.

I also love Shoemoney’s podcast on Webmaster Radio. I listen to it every week and even went back and listened to a lot of the past shows. He seems to have the best and most interesting guests. The podcasts are definitely worth your time. I was dissappointed when he said his contract would be up soon. I will miss it but I understand it’s stressful, and you have to try new things and then move on.

If you are new to Shoemoney, I recommend going back and reading what he has to say. There is great content in the archives of his web site. Seriously, you can learn a lot about making money on the web. Late last year, I went back and read all of his posts for 2006 to catch up and to learn as much as possible.

Well, I probably sound like a geek sitting here gushing about Shoemoney. But I really do believe what he says, and that if you work hard like he does, you can really make good things happen for yourself. I think that is what Shoemoney is about overall. Also, Jeremy if you would leave a comment here, that would be pretty cool. Maybe you could let us know why you are paying for blog reviews, when Lord knows you have tons of links already. Peace.

I’m Not Doing SEO Right Now

Posted on by Jonathan Kemp

I haven’t spent a lot of time on this blog since I launched it. I think there are only 42 posts here right now. I guess that is because I’m not really doing any SEO right now. Most of what I do involves putting together web sites for the company I work for. Part of that includes things most people would consider SEO, but I’m not really actively doing it.

I am actively doing SEM, but for my own stuff. So I guess that counts. I do read many SEO blogs everyday, so I keep track of what is going on. I think the SEO world is changing though. SEO has become more about marketing and less about keyword placement and things like that. I think that is a good thing. You have to look at the overall picture, and not just one part of it.

Anyway, since I signed up for the Review Me service, all of my posts have been paid reviews. I like that I can make money through this site, but I don’t want it to become a collection of paid reviews. That said, I have another one to write. Shoemoney is paying for a review on my site, and I would have done that one for free. So next up is a post about Shoemoney.

CSS Validation

Posted on by Jonathan Kemp

Wow, 2 posts in a row about validation. This post is about CSS validation because I decided to break the last post into 2 parts. Yesterday, I was having difficulty working on a site I did not build. So, I decided to run the CSS through a validating tool to see if there were any problems.

Not surprisingly, there were some. What was surprising is that using different validation tools gave me different answers. First, I ran my code through this tool by the W3C for CSS Validation. This report indicated I had 3 errors in my code and gave me 7 warnings.

Then, I ran my code through this tool also by the W3C for CSS Validation, although technically it is for any markup validation. This report only indacted one error. But, it did allow me more options for checking the CSS.

After comparing the 2 validators rather briefly and unscientifically, I think you are better off using a tool specific for CSS validation, like the first one. You will more than likely get better results that way.

Web Site Validation

Posted on by Jonathan Kemp

This a quick post about validating the code on your web site because I happened to be thinking about it today. Usually, validation is one of the first things I check when something breaks on a site. Running your site through a validator is a good way to spot errors in your code quickly.

Although I support standards and build sites based on them, I am pretty lazy about vaildation. I have the HTML Validator plugin installed in Firefox. Usually, all I do is check for the green checkmark there, and I am good to go. I recommend doing more than that though and making sure you run your entire site through a validator at least once before you launch. However, having the HTML Validator installed will help you check your code for errors on the fly, and save you time in the long run.

script.aculo.us effects

Posted on by Jonathan Kemp

If you are a designer and you haven’t heard of script.aculo.us, surely you have heard of Ajax. Even so, you may be surprised to learn that script.aculo.us and Ajax are not the same thing.

I have heard of both Ajax and script.aculo.us, but I thought that they were the same thing. I have seen both of them in use on sites that Mediapulse designed, but I have never used them myself. Well, once I learned recently that script.aculo.us is not Ajax and it is very easy to use, I decided to give it a try on a site that I am working on.

It turns out it is very easy to implement some cool looking effects with script.aculo.us. If you don’t believe me, take a look at 4 easy steps to script.aculo.us, and then take a look at the effects you can do with script.aculo.us.

The effect I found the most practical so far is the “toggle” effect. The toggle effect allows you to hide and reveal an object by clicking the object. You can also combine the toggle effect with any of the other visual effects. The visual effect I find the most practical for this is the “blind up” and “blind down” effect. You can even modify settings on these effects, like speed of movement.

In using these effects though, I have some tips to help you get the best performance out of these effects for your users. For the toggle effect, you can make a div clickable to reveal or hide another div on the page. I learned that by doing this, you do not need to add a link because the div itself acts as the button. The only problem is that because it is not actually a link, the cursor will not change to a hand when you mouse over it, so the user may not automatically recognize that it is clickable.

You can solve this problem through CSS. There is a CSS property, called “cursor,” you can set to “pointer” for any object. This means that whenever the user mouses over that object, the cursor turns to a hand, and lets the user know that object is clickable.

Now you have an object that looks and acts like a link and when clicked can reveal another object on the page with cool motion or animated effects. I recommend not waiting, like I did, and trying out script.aculo.us effects on your sites today! I don’t think you will be dissappointed.