Great Software
In my quest to rid the EduTech web site of broken links, today I did a quick search for software that would identify them for me. Dreamweaver MX does have an option for this, but not without several issues. First, it only checks links locally on your hard drive. Second, anytime I point to a directory instead of a file (/stagenet/ vs. /stagenet/index.htm), it assumes it's a broken link. Since I have a lot of these links on the site now, I didn't want to go wading through tons of false positives to get just the couple of real broken links.
I used a web-based service called Net Mechanic way back in 1998, but it has long since turned into a pay service, and its free trial does just a page or two. A quick Google search led me to Xenu, a Windows based software that tests live web sites for broken links. It even offers to create a summary report when its finished, although I found the software interface to be more than enough to get the job done. All of this, and it's FREE!
My other recommended software is still in beta, but is worth the download. It's called FeedDemon and is made by a company called Bradbury Software. Bradbury also makes the extremely useful TopStyle Pro CSS editor, which I use regularly. FeedDemon is a news aggregator which downloads RSS newsfeeds from web sites. What does that mean? Many web sites, including a lot of blogs, offer a RSS file (a XML application) that summarizes new stories, updated content, etc. FeedDemon downloads these files (called channels) for you (it comes with quite a few installed by default, which is very handy) on a timed basis, letting you quickly read the text summary to determine if you want to read the whole story at the actual web site. Why is this useful, you ask? Newsreaders like FeedDemon make information overload much more manageable. You can more quickly sort through the mounds of information on the web, saving you time for reading what you are really interested in. Download it and give it a try! NOTE: There are many other news aggregators available, but so far, none have matched the interface and ease-of-use that FeedDemon offers.
Why Good Page Design Matters
While I admit the switch to the new web site design has taken longer than I expected, it shouldn't have surprised me. It has been a week and about nine hours since I uploaded the first pages to the web server, and I still have several small sections to go. Let me explain why.
Dreamweaver MX and its use of page templates makes it very easy to convert pages from one design to another. In theory, it should have taken a matter of minutes to detach pages from Template.dwt and reattach them to hybrid.dwt, the new layout design. There were several things preventing me from doing just that:
- In the old design, almost every piece of text on every page was wrapped in nested tables. In the new template, I have tried to minimize the use of layout tables as much as possible (There are almost no nested tables on the site now).
- The old pages had no structure. By this I mean there was no page outline - it was in effect, flat. It's important to note that there appeared to be structure by looking at the page, but almost everything was regular text with different fonts, font sizes, and boldness applied. There was limited use of the different heading tags (h1, h2, h3, etc.), and if they were used, they were usually used for presentation purposes. This is really no one's fault, even I did it before I was "enlightened". Now, every page title has a h1 tag wrapped around it, every subsection has an h2 tag, every paragraph has a p tag around it, etc. This makes it easier for people using screen readers and text browsers to get an idea of the pages structure.
- Lists were sometimes not used when they should have been, and sometimes were "faked" by adding letters and numbers to the front of regular text. Now, lists are used regularly and in the right way.
- Some text, mostly imported from Microsoft Word, Excel, and PowerPoint, had a tremendous number of garbage tags wrapped around it. While it's nice that Microsoft is concerned about making web text look the same as it does in Word, if doubling or tripling the page size is the cost, I don't think it's worth it. Just this morning it took me almost 20 minutes to cleanup one page of all the span tags and wacky styles from Word.
Those are the main issues I'm facing in updating the web site content. The old web design is not much different from many other sites designed around the same time. Accessibility (508, WAI) was not on the radar at that time, and web standards were a fantasy yet to be realized. The webmaster did what they had to in order to make the site consistent across most browsers. Since cascading style sheet (CSS) support in browsers has only become a reality in the last couple of years, this meant using nested tables for layout, lots of font tags, and rollover images, etc.
Thanks to a little book called Designing With Web Standards, I was able to get a better picture of what it means to use web standards, why they are important, and how they can be utilized to enhance accessibility.
You can call me a web standards geek now, because I feel very passionate about creating pages that are valid and viewable to any standards compliant browser/device. The importance of accessibility has finally "clicked" for me as well, especially for a site that serves education as EduTech does. Why wouldn't you want to make it easy for everyone to view and navigate your site? Isn't that what you would want if the situation was reversed?
The Web Site Update Continues...
Well, the conversion to the new web site design is almost complete. Most of the pages left to change over to the new template are in the /supserv/ directory, particularly the software archive and the software agreement folders. There are also random pages here and there that I missed in my first & second passes. Thankfully I'm getting good feedback from the rest of the EduTech crew as to which links are broken.
With the new web design, I've standardized on .htm as the page extension of choice, versus the combination of .htm and .html used for the last design. Is .htm any better? Not really, but I wanted to make sure every page possible has the same extension, so either way I was going to have some file names to change and broken links to fix.
I've been trying to think of a way around the filename problem, and I think I have a solution, but I'm not sure how well it would work in production:
Here is my dilemma: As shown with the web site update this last week, pointers to hard coded html files creates a problem. Want to change the file extension from .html to .htm? Find every link to that page and update accordingly. I do have to say that Dreamweaver makes this process very easy (if you make changes it understands), but it's still a pain. My worry is if and when I begin converting pages over to php smarty templates. At that point, every file would have a .php extension rather than a .htm extension. More links to update and more bookmarked pages to break.
My proposed solution: Instead of creating a file in /video/ called "ipower_antivirus.htm", create a subdirectory of /video/ called "/ipower_antivirus/" and stick an index.htm, index.php, index.cfm, index.jsp, index.whatever in it. This way, you can simply point to the directory without even caring what file type is being used. Users can bookmark the directory, in this case /video/ipower_antivirus/, and can get to it even after a change in file extension is made, because they are no longer pointing to the actual filename.
The main problem with this is that is lead to the creation of A LOT of folders, each one of which would have just a single index.whatever file. Would that really make things easier?
Fun with IE5.x
Yesterday I received word that some schools using Internet Explorer 5.x for Macintosh were experiencing problems accessing the EduTech web site. This sounded peculiar to me right away, so I switched over to my Mac and had a look for myself. While I could get to the site, it seemed to take FOREVER for the page to actually show up. I switched over to Safari and access was extremely fast. I switched again to Firebird (Mozilla), and again, the page showed up very quickly. Interesting, no?
I immediately suspected that the problem was somehow linked to how IE5 renders CSS (cascading style sheets). While IE5 was one of the first web browsers to actually get style sheet support right, I guessed that the rendering engine (the part of the browser that interprets the style sheet information and actually draws it on the screen) was slower than some of the rendering engines in current browsers.
I started doing a little research last night and did find some good information on CSS bugs in IE5.x. I did not, however, find any info related to my particular issue.
My next step, after returning from the dentist this morning, was to duplicate the index page from the EduTech website and detach it from the Dreamweaver template and the default style sheet (sophisto.css). Putting my troubleshooting skills to good use, I moved each style from sophisto.css, one by one, into an internal style sheet and then uploaded it to the web server and previewed it in IE5. I made it through all of the styles without any noticeable performance issues. Again, very interesting...
Next, I removed all of the styles I used for testing and reattached to a copy of sophisto.css, which I called test.css. I uploaded and previewed, and again, everything came up quickly. What was going on? Looking at my code, I noticed only one difference between the two pages: in my Dreamweaver template, I actually linked to two different style sheets, sophisto.css and basic.css. Basic.css actually existed on the web server but was empty. For some reason, IE5 got to this second CSS file and started choking. It eventually displayed the page, but it took about 12 seconds by my count. All I had to do for a fix was remove the second css link from the template and them update all of the pages and upload to the server - quite a learning experience!
Welcome!
Welcome to my web log (i.e. blog)! Here, I intend to post comments about current projects, interesting tidbids (techie & not) I come across, and else that is important to me. I hope to post at least daily, but that will depend on my crazy schedule.
