If you are a graphic designer, web designer, or any kind of artist or designer that gets paid for your designs, you must read Matthew Inman’s blog post, “How  to Ruin a Web Design.”  After you get done laughing, I would suggest printing the article and hanging it somewhere that your boss and co-workers can see it!

I recently had to writing a proposal for a web site design RFP which I had never done before.  The company I work for doesn’t typically respond to RFPs and we typically do development work, but this time we made an exception.

It was quite the learning experience to write the proposal and quite difficult because there were so many unknowns, despite the details of the RFP.  In addition, since the company I work for really isn’t a design firm, we weren’t sure what the ‘other guys’ would propose.  Unfortunately, we didn’t get the work, but I’m still curious as to how other companies price web site design jobs.  The design company Blue Flavor has published the blog entry Pricing a Project which is a little inside-look at how they price projects and is very insightful.

I’ve had a small obsession with learning about web standards recently, mostly because a world of truly standards-compliant browsers is a world where web developers don’t have to test their web sites on all the latest (and very quirky) browsers.

Along with attaining standards compliance comes meeting the needs of those with disabilities, such as those who are visually impaired or blind.  The Internet is a wonderful place full of nearly unlimited amounts of information and it would be a shame if your web site was preventing people from tapping into part of it!

So how do you make your web site standards compliant and make sure it caters to the needs of those with disabilities?   Well, this MSDN article does a great job of explaining all of this:

MSDN: Building ASP.NET 2.0 Web Sites Using Web Standards

One thing I like about the article is that even though it is from Microsoft, it doesn’t hide the fact that Internet Explorer isn’t quite up-to-snuff when it comes to meeting some of the stricter standards (like XHTML Strict).  The article also offers some work-arounds for some of the problems one will encounter with trying to make a site fully standards compliant.

In addition to the MSDN article, these two articles may also come in handy when designing more usable web sites:

• Trace Research and Development: Designing More Useable Web Sites
• UseIt.com: Accessible Design for Users With Disabilities
• Section 508: The Road to Accessibility
• W3C Web Accessibilty Initiative

As you'll read in some of these web sites, there are laws that require a web site to be accessible (Section 508) when working with government agencies.

As a site designer (in addition to being a developer), one thing I’m finding challenging about creating accessible site designs for users with disabilities is that it greatly limits what I can do with my site in terms of formatting and using scripting technologies like DHTML.   It seems to me that when designing a site for a client that has business requirement for designing an accessible site, it may be best to either create a text-only version of the web site or make sure there is a CSS style sheet that can display the web site without all the glitz.  This also means that dynamic DHTML menus have to go away in favor of more static hyperlinks and sitemaps.

One of the biggest pains is testing a web application is testing the User Interface (UI).  When you’re trying to track-down a bug that occurs after clicking through 20 different links on your site and having to fill-out multiple forms, you’ll soon start pulling your hair-out but might have thought there was no other way around doing this manual testing.

For those of you who can’t afford Visual Studio Team System 2005 (which has a UI recording tool), there is still hope!  Alex Furman created an incredible application called the SW Explorer Automation Designer that can automate UI tests for you and its free!

I just downloaded it and ran through the same scenario that is shown in the online demonstration.  I must say that I’m impressed and I wish I would’ve discovered this tool a long time ago.  Granted, it only works with Internet Explorer, but that’s ok for me as most of the applications I build target IE as the primary browser.  I highly recommended going through the demo step-by-step (keep your cursor over the ‘pause’ button!) to learn how to use the tool.

Setting-up a test takes a little bit of time, but I think it’s worth taking a few minutes up-front to save you many minutes (or perhaps hours or days!) when testing your site. If you'd like to integrate your SWE tests with your NUnit tests, TestingReflections.com has an article explaining how to do that (in C#, of course )

Seems that a new HTML tag pop-ups every once in a while that I wasn’t aware of.  Today it’s the <label> tag.

So what is the label tag for? Using the label allows the user to click on the text associated with a form control instead of having to click on the radio button, check box, select box, etc.

Granted, this isn’t likely to be hugely useful to you, but I know I’ve often found it convenient to simply click on text next to a check box (or similar form field) when I’m in a hurry, hence it increases the usability of your page.

However, if an accessible web site for the visually impaired, using the label tag helps those who visit your site with a screen reader to associate a fields label with the field that it belongs to.

How do you use it?  Here is how:

<label for="radio1">This Radio Button 1 has a label associated with it.</label>

<input type="radio" value="Selected" name="Radio" id="radio1">

One thing I find convenient about the label is that I can now create a CSS style for the HTML label tag and know that all the field labels will be formatted the same. I no longer have to create a <span> or <div> tag with a special CSS class for field labels.

However, in ASP.NET, I could envision the label not working as it’s supposed to in many cases because it’s often hard to predict the name of the field controls.  For example, if I have a textbox with an ID of “txtFirstName” which is nested in a User Control, which is nested in a Page, which is nested in a Master Page, ASP.NET will rename the control and it’s ID to something like “ctl001 MyMasterPage MyPage MyUserControl txtFirstName.”

With that in-mind, the functionality of the label control might be limited in ASP.NET applications, but at least it provides a new tag to bind CSS to!

Update - 01/06/2006

Those guys at Microsoft are no dummies... they made sure the ASP.NET 2.0 Framework produces standards compliant and accessible code.  To assure that your ASP.NET 2.0 form fields are properly labeled, you must use the AssociatedId property for the ASP.NET Label control in order to make the .NET Framework spew the correct HTML:

    <table>
    <tr>
        <td><asp:Label AssociatedControlID="txtFirstName"
          runat="server">First Name:</asp:Label></td>
        <td><asp:TextBox ID="txtFirstName" runat="server" /></td>
    </tr>
    <tr>
        <td><asp:Label AssociatedControlID="txtLastName"
          runat="server">Last Name:</asp:Label></td>
        <td><asp:TextBox ID="txtLastName" runat="server" /></td>
    </tr>
    </table>

After dabbling with XHTML and extensive CSS a few months ago, I finally ‘saw the light’ as to why some web designers make such extensive use of CSS and DIV tags over traditional HTML and tables.  However, for as many cool things you can do with CSS and DIV tags, there are drawbacks… like trying to make a simple 2 or 3 column web page ;-S

On the surface, it seems like an easy task to create a multi-column CSS layout, but the problem sets-in when you try to view your site in different browsers.  At the moment, it seems like no two browsers will display content the same even though many of them are trying to adhere to the W3C’s standards. As a result, most of the multi-column designs I’ve seen have all sorts of “CSS hacks” to fudge the layout in various browsers.

Anyway, to aid in creating a multi-column CSS design, give this template generator a try:

CSS Source Ordered Variable Border 1-3 Columned Page Maker

Using the generator is a little easier than trying to reverse engineer someone else’s design that doesn’t quite fit what you want to do.

I like adding help messages to web forms, but I find that these help messages can often make the page very long.  Since a user won’t like need a help message once he has read it, it’s nice to be able to hide the message.

With that in-mind, the JavaScripts below are nice samples of scripts that will display or hide content that is within a specified <DIV> tag.  They can be called from a single button or hyperlink:

function toggleDiv(divName) {
    thisDiv = document.getElementById(divName);
    if (thisDiv) {
        if (thisDiv.style.display == "none") {
            thisDiv.style.display = "block";
        }
        else {
            thisDiv.style.display = "none";
        }
    }
    else {
        alert("Error: Could not locate div with id: " + divName);
    }
}

function toggleDiv(divName) {
    var thisDiv = document.getElementById(divName);
    if (thisDiv) thisDiv.style.display = !thisDiv.offsetWidth ? "block" :"none";
    else alert("Error: Could not locate div with id: " + divName);
}

I’ve been spending a lot of time recently trying to make sure that any web sites I produce standards compliant in addition to being functional and ‘pretty.’   I’ve decide that defining all my web site pages as XHTML Transitional is what I am striving for, and this means (among other things) that all my images must have ALT tags defined.

That seems easy enough, right?  An ALT tag is just a description of the image, right?   Well… maybe. 

Image if you were blind and all of your image ALT tags were converted to text and read to you as part of your web site’s content.  For me, that is a scary thought as most of my ALT tags would be pretty meaningless when used in conjunction with my page content.

To help me better understand with the appropriate use of the ALT tag is, I found this article very insightful:

Use of ALT Text in IMGs

For the most part, it would appear as though I should leave many of my ALT tags empty (ALT=””) because there is no sense in describing images that are just there for creating the look and feel of the site.

“So Mr. Taylor, how can we help our customer reach #1 on all the search engines?”   Questions like this seem to arise a couple times a year when a customer of the company I work for notices that his or her site is hard to find in the major search engines.   The average person thinks there is some magic pill that will get their site to #1 and keep it there without actually spending time or money on their site.  WRONG.

I learned many years ago by an ex-Yahoo! Asia employee that the best way to reach #1 in the search engines is simple: Create quality content.   Don’t create ‘door-way pages’, don’t liter your pages with keywords, don’t spend time using META tags that don’t accurately reflect what your site actually contains… the search engines will know better (if not today, they will tomorrow.)

Rather than ramble-on, I found this excellent post on James Archer’s blog describing exactly what I’ve been trying to tell people for years:

Ethical Search Engine Optimization

So stop spending your time, money, and effort on applications like Web Position Gold and focus on quality content!

FireFox is nice and all, but I work for a ‘Microsoft Shop’, so it doesn’t do me much good to browse the ‘Net on a Mozilla-based browser.  Yet, we all know that Internet Explorer is nearly become a dinosaur.

Well, there’s a bit of hope (and it’s free!)  I recently downloaded the Avant Browser which is basically a wrapper for Internet Explorer.  Some of the nifty features include:

·         Flash Animation Filter (Yippee! Block those annoying Flash ads.)

·         Built-in Pop-up Blocker

·         Multi-Window Tabbed Browsing

·         Real Full Screen Mode and Alternative Full Desktop mode

·         Built-in Yahoo/Google Search Engine

·         Full IE Compatibility

·         Records Cleaner

·         Safe Recovery

·         Skins

There certainly are other browsers like the Avant Browser, but I found that this one works best for my needs.