Getting the Word Out On Web Standards and Accessibility October 20, 2006
Posted by ptvGuy. Comments: 6 comments
…otherwise intelligent business people are entrusting their entire web presence to such as these…
Let's face it, we live in a world where any high school kid with a semester course in "web design" (if even that much training) and a copy of Frontpage can hang out a virtual shingle calling himself (or herself) a "webmaster." Factor WordPress into that with its five-minute install and innumerable themes and you have a job title glutted with people who don't know the first thing about what they're doing. An amazingly large number of otherwise intelligent business people are entrusting their entire web presence to such as these. The general public's lack of knowledge in this area only serves to exacerbate the problem.
Without any foreseeable way to prevent this practice from continuing and growing exponentially, those of us who care are left with the onus of attempting to educate these fledgling webmasters about the need for good coding practices, accessibility, and web standards. I know, many of you have been doing that for years already, but this is an ongoing problem requiring constant reminders.
To help out in this endeavor (and to provide professional web developers with yet one more way to stand out from the crowd,) I've created a document called the "Declaration of Standards Compliance." The style and wording may sound a little familiar to you.
When in the course of online events, it becomes necessary for web developers to ensure access to the content over which they have so meticulously labored and to assume among the powers and tools available to them, the basic responsibility to ensure proper markup and accessibility, a decent respect for their site’s users regardless of their browser, platform, or possible disabilities requires that they should declare their document type for proper page rendering and their assent to basic web standards.
–ptvGuy, Declaration of Standards Compliance
…need for web standards and accessibility cannot be understated…
Now, before anyone gets in an uproar and thinks that I am perhaps mocking the document upon which this is based–The Declaration of Independence–I'm not. I don't know of a clearer way to outline an ongoing problem and then express the need for action and the conviction to carry it out. As a pure study in writing, it's one of the greatest essays ever written. I humbly borrow from the masters.
The need for web standards and accessibility cannot be understated. If you're putting content out there for the world to see, use, and interact with, then there is a certain underlying responsibility to do it correctly. That requires some extra work and study. Fortunately, the web is full of people willing to share that knowledge. I've put together a list of such resources on my Anal Coding page to serve as a beginning point. The very abundance of this information made freely available to everyone everywhere is what makes the practice of bad coding so pointedly shameful.
…standards are themselves evolving and subject to change…
One important thing to remember, however, is that the web is not a static technology. It is constantly growing, expanding, and evolving. New people, ideas, and technologies will come along and suddenly change everything we've taken for granted. (That may even include the aforementioned high school student.) The standards, therefore, that guide us in the creation of accessible and well-coded pages are themselves evolving and subject to change.
I encourage you to read the document itself, comment on it, and, if you agree with it, go to the declaration page and find out how to become a signatory of this important declaration and thereby further get the word out on the need for web standards and accessibility.
Thank you all, code well, and good night.
- << First
- < Previous
- Web Accessibility
- Next >
- Last >>
Beta Testing and the New PBS Web Modules October 4, 2006
Posted by ptvGuy. Comments: add a comment…new web content modules and the need for beta testers…
The recent spate of new web content modules coming out of PBS (and beyond) has me thinking about the need for beta testers. For those of you that may never have given it a try, beta-testing is the process of testing something out before it's ready for release to the general public. It can be quite interesting whether it's software or a new web module. It gives you a chance to not only critique someone else's work, but to sharpen your coding skills and offer suggestions for refinement. It makes you a part of the work. The biggest kick for me, however, is getting to play around with all the newest toys before anyone else even gets to see them.
Testing is a process of executing a program or application in the intent of finding errors. With that in mind, testing can never completely establish the correctness of arbitrary computer software. In other words, testing is criticism or comparison, that is comparing the actual value with an expected one.
–Wikipedia, Software Testing
Basics of Beta-Testing PBS Web Modules
…have noticed the recurring use of common words for CLASS or ID element names…
There are a few important things to remember when beta-testing PBS modules for your station site. The first and most important of these is to test it on a working version of your actual station website as it would run under normal conditions (although in a nonpublic area protected from search bots and perhaps requiring a password to enter.) The idea here is to see how it functions on a real station website. The PBS Interactive in-house alpha testing should have already covered how it works under other conditions.
It must be allowed to interact with your usual station CSS in place on the page. No matter how narrow and focused the CSS for a new module may be, there may still be unforeseen interactions with already existing styles. That's exactly the kind of stuff that PBS Interactive is looking for and needs to learn from your feedback, and that's exactly why they have to have beta testers. I, for instance, have noticed the recurring use of common words (like "description") for CLASS or ID element names which virtually guarantees problematic interactions with already existing styles and script triggers.
…picked their beta testers from a wide selection of stations…
The module should also be tested under the normal coding restrictions (or lack thereof) imposed by your site's primary document type declaration. To make the modules as cross-platform, cross-server, and cross-browser compatible as they can possibly be, they need to be tested under differing document types. Ideally, the people at PBS Interactive should have picked their beta testers from a wide selection of stations representing as many different document types and servers as they possibly could to get the widest possible testing results and thereby eliminate the most possible errors. Therefore, the minimum testing that should be performed from our end is simply to set it up on a regular page of our site. We're, of course, always welcome to test more beyond that.
The Process of Beta Testing
I don't know how others do this–and I'd love to hear–but I generally start out by implementing a new web module in its raw state (no code or style modifications) in the widest possible section of a page. I usually pick a single-column page layout for this (no sidebars) in order to get a good 700 to 740 pixels of width to play in. A site with a non-fixed-width (or "liquid") layout will, of course, have variable outcomes for this. I do this even if the module is actually meant to be narrow sidebar content.
The idea here is twofold; first, to see if the module even works, and second, to see just how wide the module will go. After looking at the results of that–and assuming it works–I check the code and CSS to see if there's anything in place that restricts the module from going even wider. Playing around with the Pre-K Block Module, for instance, shows that it can be used not only as sidebar content as it was originally intended, but also as a variable-width page filler wherever needed. That gives me a nice new tool for balancing out low-content pages.
The next test I do is to implement the module into a narrow, restricted space. The easiest way to do this is by putting it into a table and deliberately setting the width too low (like 10 pixels) and the border to zero. If your CSS has predefined table element padding and margins, then this experiment may require the creation of a specially named CLASS for a non-padded table that will have to be defined in your style sheet.
…followup module states must also be taken into account and planned for…
The point of this test, of course, is to get a minimum width for the module—usually the width of the widest single element like a graphic. I personally think that every web module should have the minimum and maximum widths spelled out in the documentation. It makes it easier to plan layout and placement. Everything after this is just about playing around with the CSS and coding to either fit it in better with your site's style or run further experiments.
My general last step is just to put it into a page with other content, style it to fit, and get an idea of the full visual and content impact of the module and, of course, what it does when a user intereacts with it. Some of the modules take users offsite, some open new content windows, and some (like the TeacherSource Monthly Theme Module and the Schedules Module) open out on the same page from a small space initially into larger pieces of content. These followup module states must also be taken into account and planned for (as many stations discovered after implementing the Schedules Module.)
Some Final Words
…shortages of staff and time are already impacting development of new content…
Although most of the PBS member station websites routinely rely on the content they receive through PBS web modules to fill out their own sites, there is quite often a shortage of station web developers willing to help out in the beta-testing phase of their development. That's too bad since shortages of staff and time at PBS Interactive are already impacting development of new content. It's in our own best interest, if we're to remain relevant in the 21st-century, for us to be a willing part of this important aspect of content development.
Meaghan Zimmerman of PBS Interactive sums it up best:
BETA testing is a vital part of the process of building and launching modules for stations. Our thanks and appreciation go out to those stations who continue to volunteer when asked for their time. The more BETA testers who volunteer, the better the results.
–Meaghan Zimmerman, Senior Associate, Station Services, PBS Interactive
Thank you all, code well, and good night.
Internet Explorer 7: Is Your Site Ready? September 11, 2006
Posted by ptvGuy. Comments: 22 comments…Virtually overnight, you'll find most of your site visitors have made the switch…
Potentially more exciting than the arrival of a new phonebook is the planned automatic update of Microsoft's web browser, Internet Explorer. If you haven't already heard about it–and I'm sure that most of you have–Microsoft is planning to release the first major upgrade to Internet Explorer since IE6 in 2001. With many new features, security upgrades, and changes to the core software itself, it's a totally new browser that will suddenly be the primary browser of a good 70% or more of your audience. Is your site ready for that? If you don't know for sure, now's the time to find out.
At some point during the next few months (the fourth quarter of this year,) Microsoft will be rolling out this upgrade as a high-priority, automatic update. That means that most Windows XP users will simply be online one day when they'll receive a popup alert from the system tray saying that updates are ready for their computer. Virtually overnight, you'll find most of your site visitors have made the switch.
This all seems straightforward enough until you consider someone like my father. My father is in his 70s. He browses the 'Net daily. If presented with the option to install a security update, he has been trained to click accept (without trying to comprehend what specifically it is patching). If he accepts this and suddenly his browser experience changes (sites that used to render properly no longer work) he'll be completely confused. He wouldn't know how to uninstall.
- Tom Raftery IE7 + Automatic Update = support nightmare
Frankly, this is true for the majority of your users. Like it or not, once the change is made, there'll be no going back. Certain questions then arise:
- What will they see when they go to your site?
- Should you panic?
- Will you need to recode?
- Are you ready for the new toys? (Didn't expect that last one, did you.)
Let's have a look at what this change will mean for your site.
Things to Be Happy About
…an open opportunity to provide new services and gain a larger audience…
Those of us that routinely use other browsers or check our sites out in multiple browsers will find a lot of very familiar things integrated into IE7. I have mixed feelings about this. On the one hand, I'm happy for the changes and improvements they've made, but on the other, I find it annoying that a majority of non-technically-oriented web users will think of these as Microsoft innovations rather than Microsoft trying to catch up with everyone else's innovations. Still, there is a lot to be happy about in this upgrade. Some of it–like improved web standards and CSS support–might require changes for some sites (That's a good thing, really.) and some of it–like RSS integration–are an open opportunity to provide new services and gain a larger audience.
Tabbed Browsing
That's right, tabbed browsing has finally made its way to Internet Explorer (boldly going where everyone else has been for quite some time.) If you're like me and you regularly have to have a number of applications running simultaneously and then additionally have to open several different browsers to compare page layouts, then you'll truly appreciate this addition. I can finally have ONE window of Internet Explorer open with a number of web pages displayed in different tabs (as I always could in other browsers.)
My only regret here is that there's not yet a good, all-purpose, cross-browser compatible script to automatically open external links in new tabs rather than new windows. This would make a nice addition to Paul Boag's External Links script that I (like many others) use so extensively. However, I'm sure that one will come along eventually.
RSS Integration
…That's practically an unsolicited advertisement for viewing your feed…
This is truly an awesome feature. I know that it's already been a standard part of other browsers, but, because 70% to 90% of your users are surfing the web with nothing but Internet Explorer, the sudden ability to read and subscribe to RSS feeds right in their browser will be a totally new experience. If your site already has an RSS feed, then now's the time to start planning how you might promote it to a more main-stream audience as well as how you might make it a more prominent part of your pages. If your site doesn't, then now's the time to start working on one.
The feed button for IE7 remains grayed out and inactive while viewing pages without a recognizable feed (RSS1, RSS2, Atom, etc.) and then springs to vivid, orange life when viewing a page that has one. I don't know about you, but I'd like it to be one of MY sites that a user first notices this strange new button on. You know it has to be tried at least once just to see what it does, and what it does is tell your users that there's even more content available from your site then they may have ever been aware of otherwise.
The drop-down list of available feeds and feed types next to the button is a potential source of confusion for non-technical users, but most will simply click the main button and get the topmost, default feed. Upon clicking it, however, they get not only a new feed page, but some helpful information about feeds and how to use them. My favorite part, though, is the bolded statement in the yellow box that says, "You are viewing a feed that contains frequently updated content." That's practically an unsolicited advertisement for viewing your feed. I really have to thank Microsoft for including that.
Between all the browsers that I've tried (Firefox, Opera, and IE7) and all the feed readers I've tried out (including Outlook 2007 RSS) nothing beats the simplicity and ease of reading feeds of IE7.
- Greg Kniffin RSS Feed Readin' - IE7 is king
They've even gone a step further and added a sidebar allowing users to sort or filter your feed by date, title, author, and even category. These categories, by the way, are the ones you've assigned to each piece of feed content. A little careful forethought in this department could net you some permanent, new site users viewing your content and, more especially, your membership reminders–especially if you pad every RSS "post" with a membership link.
Extensibility
…This misguided approach froze it into being a passive browser…
One of the problems that Internet Explorer has always had was its inherent lack of extensibility. It was a proprietary, Microsoft application meant to do only what Microsoft had in mind when they shipped it–nothing more. This misguided approach froze it into being a passive browser. Firefox, with its numerous extensions, changed all that along with everyone's concept of what a browser could be and what it can do.
With IE7, Microsoft has seen the light of following this approach, and they're not stepping in with nothing either. They're starting right out with some heavy-hitters, two of which immediately caught my eye, the Developer Toolbar–the Internet Explorer answer to Chris Pederick's indispensable Web Developer add-in for Firefox–and Fiddler which is an HTTP Debugger that lets you fiddle around in that particular pot of code.
Of course, it remains to be seen if they can harness the kind of voluntary developer community that Firefox has, but they are off to a good start. At least this kind of "raising the bar" back and forth between the various browsers will continue to benefit all of us out here in the trenches.
Security Features
After taking it on the chin for ages, Microsoft has gotten downright serious with security–perhaps a little overboard in some ways–but serious nonetheless. One of the better aspects of this new security consciousness is their phishing filter. IE7 will block access to (or at least warn you about) fake sites that pretend to be trusted sites in order to get you to reveal private information, download malignant software, or just look around while it loads crap onto your computer in the background.
None of the phishing features in IE7 appears to cause problems with legitimate Web sites. I tested all the features in both application suites in all environments, without once running afoul of this particular feature. In fact, developers should be happy about this feature, because it means that nefarious individuals are less likely to hijack users that are coming to your Web site.
- John Mueller Making Your Apps work with Internet Explorer 7
IE7 defaults to blocking most pop-ups now. As an underhanded advertising method, this is better dropped anyway, but, as a legitimate method of delivering small pieces of extra content like program information or auction item windows, this might require a little rethinking. It's also more aggressive about cookies. A good P3P Privacy Policy should prevent most problems of this nature.
It also has safeguards in place to protect against old or inappropriate SSL certificates. If yours is out of date or contains invalid information, it's time to get that fixed now.
Better CSS Support
After working with the Web Standards Project (WaSP) since July of 2005, believe it or not, IE7 now sports CSS 2.1 compliance. That means that Internet Explorer, still the most popular browser on the planet, has made a major move–at least for Microsoft–toward the world of web standards. It's a start.
With all these major bug fixes in place, there are those of us–myself included–who may have to revisit some of our CSS files to double-check their compatibility with IE7.
If your layout relied on us "growing" the box (if your content did not fit the dimensions you gave it) then this can lead to breaks. You can easily discover breaks related to overflow by observing content suddenly overlapping other content.
- Cascading Style Sheet Compatibility in Internet Explorer 7
Some of the CSS hacks we've been using for awhile are no longer valid. I'm sure new ones will come into play. Currently, the Star-HTML hack is still okay, but others may not fair so well. It's worth running through their posted list and checking for any hacks you may have used. Frankly, it's just time to move away from that whole way of coding. (I'm saying that for my benefit since I'm sure that you already knew that.)
After all this, they still treat ALT text as a tooltip. Will someone please tell them that that's a bug and not a feature. I'm so tired of it.
PNG Support
Real PNG support and everything that goes with it has finally made it to Internet Explorer.
You can now display Portable Network Graphics (PNG) images without relying on odd workarounds to implement transparency. However, some older features are also gone. If you rely on the Dynsrc attribute of the <IMG> tag, you'll need to change your Web page, because it no longer works in IE7.
- John Mueller Making Your Apps work with Internet Explorer 7
I'm looking forward to seeing a lot more sites taking advantage of the real power inherent in PNG images. The combined use of lossless graphics images with layered transparencies and semi-transparencies can not only create stunningly vivid pages but, with a little imagination, whole new ways of presenting content.
Things to Worry About
Although most sites tend to look the same in IE7 as they did in IE6, there are some potential problems. Most of these have to do with site applications (like shopping carts and such) and the use of ActiveX controls. John Mueller outlined these in detail on the DevSource website, and I really encourage you to take the time to read through all five parts of his article on Making Your Apps work with Internet Explorer 7, because I'm only scratching the surface here.
Don't wait until Microsoft releases IE7 to begin testing your applications. Based on what I've seen so far, unless you're using pretty much pure HTML on static pages, your application is going to break in some way.
- John Mueller Making Your Apps work with Internet Explorer 7
ActiveX Problems
I don't know if anyone else remembers it this way, but I seem to recall that ActiveX was developed by Microsoft as an extension of OLE back in the mid to late 90's and pushed as an incredible new way to make the web work directly with your already existing desktop applications–especially the Microsoft ones. Now, in a bizarre turn of events, they're trying to protect users from their own creation.
After having seen many examples of just how bad malignant ActiveX controls can get, Microsoft finally decided to add some protection for users in IE7. Unfortunately, this halfway measure doesn't really help anyone. Users will be annoyed by having to OK every ActiveX control, every time one appears on a Web page.
- John Mueller Making Your Apps work with Internet Explorer 7
If you haven't done it already, lose the ActiveX reliance. It's just going to be more and more of a problem over time.
Since most other browsers (including Firefox) ignore ActiveX controls, you might want to phase out use of ActiveX in your applications. They were always a bad idea. Unfortunately, this one change is going to break many applications; everything from shopping carts to data collaboration.
- John Mueller Making Your Apps work with Internet Explorer 7
Header Information & Range Checking
If you've gone out of your way to provide appropriate content to your users based on the browser he or she is using or whether or not a specific plugin is available, then you're to be commended. You went above and beyond the call of duty for the sake of your users. Unfortunately, you may now have more work to do.
A check of the request header information that IE7 provides shows that some applications will break when they employ poor range-checking methods. My test system shows that IE7 supports nine file types by default… The user agent information is also different… If your application checks for specific version numbers, rather than a range of numbers, it may stop working with IE7.
- John Mueller Making Your Apps work with Internet Explorer 7
Multiple Home Pages
This is kind of a weird thing to get used to and you may not think of it as something to worry about. The idea here is that you can have more than one home page, and they'll all open up in separate tabs of which you can set the order.
…I still think that the real opportunity is in the RSS integration…
While that's all well and good, I can easily picture a lot of web developers running out and dusting off their old "Make this your homepage" JavaScript link. I tested this in IE7 Beta 3, and yes it does still work. If you click on one of these links, it will bring up an "Add or Change Home Page" dialog box. This will allow you make that page your only home page or add it to your home page tabs. So what's the matter with that, you may ask. Well, frankly, familiarity breeds contempt.
I, personally, don't want my pages associated with anything that can clog up a user's experience online. Setting three or four homepages won't really impact broadband users, but dialup users will see significant delays in just being able to get started when they open IE7. The usual reaction to that is to blame the last page that was added, and I don't want that to be my page. There's also the problem of incomplete page rendering if an impatient dialup user (Name one that isn't.) starts browsing in another tab while your page is still loading.
All in all, I'm planning to avoid encouraging the use of my pages as home pages. It's not really the opportunity that it might seem to be. Instead of that, I plan to create content that users will want to come back to again and again and even add to their favorites or bookmarks. I still think that the real opportunity is in the RSS integration.
Some Final Words
…If users make this change and begin seeing broken pages, they'll blame the browser…
With all of that said about this changeover, you might be wondering about how you can check your site out. Well, to be honest, the two main methods are only available to customers running genuine Microsoft Windows. Apparently, Microsoft doesn't want to help non-Windows-based web developers to get their sites ready for IE7. That makes no sense to me since they should want the majority of websites that their customers have been using to continue to work in their new-and-improved browser. If users make this change as planned and begin immediately seeing broken pages, then they'll blame the browser, not the web developer.
Anyway, the two main tools are the Internet Explorer 7 Readiness Toolkit and simply downloading the latest release candidate of IE7. If you can stand the wait time and their servers aren't too overwhelmed, then you might want to check out BrowserShots.org to get screen shots of your pages in multiple browsers including IE7.
I'm going to let John Mueller sum up what he calls "The Bottom Line" of all of this.
You might think that all of these changes are a pain. In many respects, you're right. However, the changes really are necessary. Creating a secure internet (or at least one where you don't have to walk on eggshells) is everyone's responsibility. The changes you make to update your Web site to IE7 will benefit everyone. The user benefits from added security, enhanced privacy protection, and improved features. Your company benefits from fewer attacks and reduced support requirements. You'll benefit from those extra weekends you get to spend at home, rather than at the office. Unfortunately, to get all of these benefits, you'll need to spend time now fixing the things that caused the problems in the first place.
- John Mueller Making Your Apps work with Internet Explorer 7
Thank you all, code well, and good night.
