Monthly Archives: July 2006

Google’s Accessible Search for the Visually Challenged

When I read about this new creation from Google I had to tell the world. For those of us fighting the good fight, trying to make the web available to as many people as possible, this is a huge step forward. You can test it for yourself at http://labs.google.com/accessible/

The project is headed up by a blind researcher who lost his vision from glaucoma as a kid. It is easy to overlook the fact that nearly 8 million online users in the US alone are visually impaired, and that the number increases as the web becomes available to more people. Can your business afford to turn away 8 million visitors? It could be the difference between sinking or swimming!

‘corePHP’ is dedicated to the education and development of a more accessible web. We have information on our site that discusses accessibility. Our info includes documentation, extensions and files that members can download. Make your site accessible to everyone!

You can read more on the Google Accessible Search Engine at http://www.newsfactor.com/story.xhtml?story_id=44748

JD-WP and Open-SEF

It has come to our attention that JD-WP doesn’t work out of the box with Open-SEF. This is because it has its own menu for Joomla!. After doing some research, we found out that all you have to do is add it to the menu and unpublish it. Go to Components -> Open-SEF -> Configuration. Click on Components in the menu above and make sure the check box next to Alias is checked. Once that’s done, name it whatever you want it to display.

Now JD-WP is Open-SEF friendly :)

Google Adwords: Dynamic Headlines

I am willing to bet that most of you didn’t know about this hidden Google Adword feature. You can increase the click-through rate for your Adword advertisements by having your headlines replaced by the search word or phrase that people use.

Lets use the search phrase ‘Getting on the web” as an example. If you have one of these search words in your list of Adwords then your link will show up. Lets say your ad title is “Web Site Development.” Ordinarily, this is the title that will be shown to people when your ad comes up. However, with the dynamic headline feature you can have your headline show up on the ad as “Getting On The Web” which will greatly increase your chance of getting a click through since it matches their search term. Here’s how to do it:

Instead of using your usual style of headline such as “Web Site Development” type this instead: {KeyWord:web site development}. This will dynamically substitute the search phrase if it matches one of the words.

Keep in mind that if their search term or keyphrase is longer then 25 characters, then your default (“Web Site Development”) will show up as the headline. Also remember that the phrase you put in (“Web Site Development”) is limited to 15 characters.

If you would like to capitalize your headlines, use the following chart:

  • {keyword:adword phrase} all lower case (“adword phrase”)
  • {Keyword:adword phrase} capitalize first character (“Adword phrase”)
  • {KeyWord:adword phrase} capitalize each word (“Adword Phrase”)
  • {KEYWORD:adword phrase} all caps (“ADWORD PHRASE”)
  • You can also add words before it, such as Quality {KeyWord:adword phrase}

We hope this helps with your website marketing. We’ll continue to keep our eyes open for other tips & tricks to help you generate more money for your business.

Are your tables breaking your tableless layout in IE?

I personally don’t think there is anything more frustrating than spending hours troubleshooting something only to find that one line of code is all that is needed to fix it. This is the recap of my day today: I had a great tableless designed site that seemed to hold up against everything I threw at it. Then I put in a page that had a table in it and all hell broke loose.

I don’t know why, but tables interact with CSS layouts in a very different way than any other code. For some reason it moved the table all the way to the left and pushed down the other two columns to the left of it. I started trying different numbers, then different CSS, then child selectors on just the tables, but nothing worked. I remembered in the back of my mind that IE always needed a width, so I started looking at my columns. They all had width, but I put my content within another div to get around the box model issue, and didn’t declare a width in my inner div. Once I put “width:100%” on my inner div the table snapped into place. Don’t you just LOVE Internet Exploder? I do, I do!!!

One additional note: If you are using PerForms or anything else that puts a table in a form then you will need to add width:100% to the form as well.

Tableless does NOT mean Accessible!

In the last year there have been major changes in tableless design and accessibility. Recently, laws have been passed requiring websites to be accessible and lawsuits have been filed against current sites and developers. Clearly, our world will never be the same again. It’s a case of ‘get up to speed or get out of the race.’ Unfortunately, there have been a lot of misunderstandings about the terms ‘accessible,’ ‘tableless’ and ‘valid xhtml+css.’

A short time ago, I was getting burned out doing the same ol’ coding day after day. I had pushed my nested table skills to the limits and could get a good design, but something always seemed off. I originally started out with prepress, graphic design and Photoshop work, and I wanted the web to do what I was used to doing in those programs. To say it was frustrating was an understatement. Then one day I came across CSS Zen Garden and my world was never the same again. I have learned all I can about tableless websites and accessibility, and it’s completely changed how do web development.

I think I’m accessible!

I go through several pages of news every day trying to find tips to increase my development skills and I have recently noticed a growing trend with the majority of developers. People seem to think that if they make their site tableless, it automatically means it’s accessible. This couldn’t be further from the truth. It is a great step toward greater accessibility, but chances are they are missing the mark in several other areas of their site. Another myth is that if their site passes the validation for xhtml and CSS, that their site is accessible as well. They are just as libel for a lawsuit with a tableless validated xhtml+css site as they are with a nested-table monster of a site. At the same time, a table layout website can pass as accessible. How is this possible?

Take the following steps to ensure that all of your customers can access your site. You’ll sleep easier at night knowing you won’t be spending development time in court explaining your ignorance of the topic to a jury.

Have proper form

The most non-accessible code seems to come from forms. Accessible forms aren’t too difficult, but there needs to be a little more care taken in how they are laid out. One of the best articles I’ve come across that teaches how to make accessible forms is on this page at WebCredible.co.uk. There’s a rule that I follow: If I can use the form completely without using a mouse then it’s accessible.

I thought we were done with tables!?

The second most iΩaccessible code comes from our old friend the table. Keep in mind that tables are completely valid to use in xhtml+css layouts. In fact they are the preferred choice if you are presenting tabulated data. The problem is that they are very hard to read if you are using a screen reader that’s not coded properly. There are many extra tags you should insert that you may not have ever heard about, but that are necessary for those who are using an alternative browser. My favorite article on accessible tables can be found here on 456 Berea Street. It covers a lot of the basics so you can make accessible tables in no time at all. I would recommend doing some of your own research on more advanced accessible tables.

Know how to use your page tags

Another easy way to assist users who require accessible technology is to use your page tags correctly. Using them correctly will also make them more semantically correct, which will make your site more popular in search engines. I start laying out my sites in pure text before I even touch CSS. This assures me that everything will look right in screen readers and cell phones, as well as older browsers (which I filter out into a nicely formatted text only layout). Visit this page on Mezzoblue for a more complete description of how to correctly use tags within your page.

Can you read my script?

There are other less crucial code styles that can help with accessibility. I urge you to know as much about your site’s coding as possible since you are responsible for what you put on the web. Most Ajax is not accessible, as well as a lot of JavaScript. If you use JavaScript, be sure to include a noscript explaining what is happening to those who can’t use it, or give a link to a place where they can use it (ie. JavaScript iframes).

Minimalists are people too!

Try to keep in mind that some people browse the web with their graphics, css and/or JavaScript OFF. Think about how your page will be viewed if this happens. Also, keep in mind that many people increase their text size in their browser. Try not to use px for your font sizes since that locks the text sizes in IE. Use em (or %) instead, so it will increase with the size increase function within the browsers. You won’t be sued for not having this, but it’s good etiquette for web accessibility.

Help for you in less than 12 steps

Hopefully this will give you a more complete picture of what it means to create an accessible website. Some people seem to be looking for lawsuits these days, so it’s good to have your bases covered. Here are a couple tools that will help you with all this:

  • Firefox Web Browser: I doubt there is anybody who doesn’t use this anymore for web development, but if you don’t then download it here.
  • Web Developers Toolbar: Once you have Firefox you need to download this toolbar. It’s an absolute must. It’s a good idea to choose CSS > Disable Styles > All Styles. This will allow you to see your page the way it looks with no CSS – which is a setting people often use for slow connections. This also gives a good indication of what screen readers will see. One other great feature is under Information. You can choose to display virtually any tags in your site at a glance without going to your source.

Good luck!

Stop the OSX 10.4.7 Dashboard advisory from phoning home

I just saw this little script to stop the Dashboard Advisory feature in OSX 10.4.7, and thought I would share. If don’t know why someone would would want to do this, it’s because Apple decided to put in a little program to see if your widgets are up to date and automatically update them for you if needed. I personally like this feature as I usually have 25 open at once and it takes too long to do manually. Of course, many people feel this is an invasion of their privacy, so if you feel Apple is spying on you, read on.

First of all, make sure you know what you are doing with the Terminal or you could screw up your OS pretty badly. If you are fearless (but fearful of someone finding out what goods you have) then type the following command in Terminal.

sudo mv /System/Library/LaunchDaemons/com.apple.dashboard.advisory.fetch.plist /System/Library/

TAAAA-DAAAAA!!!! No more ‘spyware’ on your mac. You may now go about your questionable downloading with a false sense of security. Enjoy!

Hidden gem in Developers Toolbar

I found this little gem while surfing for some new CSS information. Did you know that if you press Control + Alt + F (Mac: Apple + Alt + F), a more advanced CSS viewer will show up as a pop-up in Firefox’s Web Developer Extension from Chris Pederick? I still love it and will always use Xyle Scope for most of my CSS information digging, but this is a major tool for finding elements quickly.

Kudos to Content with Style for the tip!

What resolution do I use?

After being in the graphic design business for over 12 years I have a tendency to take things for granted and forget the struggles of my past. One question that comes up a lot is what resolution to use for different media types. Here is a quick run-down of what I currently know:

  • Web: 72dpi (RGB)
    • Web: If you develop for 640√ó480 then make your page 600√ó300.
    • Web: If you develop for 800√ó600 then make your page 760√ó420.
    • Web: If you develop for 832√ó624 then make your page 795√ó470.
    • Web: If you develop for 1024√ó768 then make your page 955√ó600.
  • Print: varies
    • Typical Poster: 150dpi (Typically RGB: 85/100 lpi)
    • Newspaper: 150dpi to 200dpi (Greyscale or CMYK: 85/100 lpi)
    • Press: 225dpi to 300dpi (CMYK: 133/150 lpi) is the ‘norm‚’ but double check with your printer before starting the job.
    • Home Printers: (Typically Greyscale or RGB) This can be a little more difficult to figure out, but once you know the math it’s easy. Just divide the total number of inks your printer produces by the dpi stated on the printer. Example: An Epson printer may boast that it can produce a 1440 dpi image, but you have to divide that by the amount of inks it uses, which is probably 6. That leaves you with 240. This is the dpi you should use on your image for maximum quality. Note: You may get a better image with a higher dpi with some printers.

    If you are scanning for a particular job and don’t know how to correctly scan the images, use this page as a reference: http://www.scantips.com/basics03.html. It does a better job explaining than I can. If it is for the web, just use 72dpi, unless there is a possibility it will be used for print later as well.