Todd Taylor's Blog - Web Design

Using Conditional Compilation for UI Testing

Todd M. Taylor — Sat, 02 Sep 2006 19:33:50 GMT

When trying to test a long web form, it gets really annoying having to manually populate the form with information only to submit the form to see your error and then have to do the whole thing over again once you think you’ve fixed the problem.

Since I don’t own a copy of Visual Studio .NET 2005 Testing Edition, I haven’t had much luck with finding good ways to test the UI (i.e., good ways to pre-populate forms for testing.) Of course, one way to test a form is to actually set all the values in a form on the ASPX page and then hope you remember to delete all those values once you publish the site. However, this becomes very annoying if you don’t get things right the first time.

To make my life easier and make UI testing less painful, I came-up with a nifty way to "cheat"... I’ve started using conditional compilation to populate my forms when Visual Studio is in DEBUG mode, but leave the forms blank when in RELEASE mode. So far, it works pretty slick, provided that I remember to compile my code in release mode before publishing it!

I wish I would’ve know about conditional compilation a while ago… it’s a really neat feature. It took me a while to get it working properly, and here is how.

Start with a Visual Studio 2005 Web Application Project instead of the Visual Studio 2005 Web Site Project. Note that you’ll have to download the Web Application Project because created after Visual Studio was released. The application project behaves more like the Visual Studio 2003 web project and gives you “Build” options in the project’s Properties menu.
Once you have the web project created, right-click on the project title and select Properties and then the Build tab. You should see a screen like this.
While Configuration is set to Debug, leave Define DEBUG constant and Define TRACE constant checked. Then switch Configuration is set to Release and uncheck Define DEBUG constant and Define TRACE constant.
The rest is easy. In your code, you can use the conditional compilation directive #if to make sure the code you use to pre-populate your forms only exists in your code when Visual Studio .NET is in Debug mode:

protected void Page_Load(object sender, EventArgs e) {

if (!Page.IsPostBack) {

#if DEBUG

this.txtFirstName.Text = "John Doe";

#endif

}
}
Run your site in >Debug mode and you should see your textbox named txtFirstName populated with “John Doe”. Run it in Release mode and your form should be blank. Sweet!

Obviously, to keep your code a bit cleaner, you should probably create a method that contains all your form population code and you can mark that method with a conditional attribute by marking it with [Conditional(“DEBUG”)]. Note that you will have to add the System.Diagnostics namespace to your file in order for this attribute to work.

So there you have it! Make your UI testing a bit easier and still keep your production code clean.

How to Ruin a Web Design

Tue, 25 Jul 2006 23:16:11 GMT

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!

Pricing the Project

Wed, 03 May 2006 13:15:00 GMT

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.

Stand-Alone Internet Explorer for Backwards Compatibility

Todd M. Taylor — Tue, 21 Mar 2006 03:52:16 GMT

When ever a client requires that the application you are going to build for them must be backwards compatible, their old browser become you’re new problem. Fortunately, if the old browser is Internet Explorer, you now have hope! Thanks to a link forwarded to me by my friend Mark Schmidt, there are several ‘stand-alone’ versions of Internet Explorer available for download that can be run along with your currently installed version of IE. Visit Evolt.org to download everything from IE 3 to IE 6.

Using Visio for Rapid Prototyping

Todd M. Taylor — Fri, 10 Mar 2006 00:35:50 GMT

Creating wire frame diagrams and quick screen mock-ups shouldn’t be a difficult job, but finding the right software to make the job easy actually seems difficult… until now. If you own Microsoft Visio, it’s worth reading How to use Visio for rapid prototyping on Guuui.com. In the article, you’ll find downloadable Visio templates called the "GUUUI Web Prototyping Tool" that make creating web site wire-frame diagrams a snap. In addition to the templates, there are many great tips in the article that should make your life quite a bit easier.

Web Standards and ADA Compliance

Todd M. Taylor — Fri, 06 Jan 2006 20:14:13 GMT

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:

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.

Testing Your Web UI with SW Explorer

Todd M. Taylor — Thu, 22 Dec 2005 17:18:10 GMT

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 :'( )

The HTML Label Tag

Todd M. Taylor — Wed, 21 Dec 2005 21:33:16 GMT

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>

Taking the Pain Out of Designing Multi-Column CSS Layouts

Wed, 14 Dec 2005 15:08:04 GMT

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.

Simple Toggle Layer Script

Todd M. Taylor — Tue, 06 Dec 2005 18:48:13 GMT

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) {
    var thisDiv = document.getElementById(divName);
    if (thisDiv) thisDiv.style.display = !thisDiv.offsetWidth ? "block" :"none";
    else alert("Error: Could not locate div with id: " + divName);
}

How to Properly Utilize Image ALT Tags

Todd M. Taylor — Tue, 20 Sep 2005 17:23:18 GMT

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.

Search Engine Optimization vs. Exaggeration vs. Deception

Todd M. Taylor — Tue, 20 Sep 2005 13:50:52 GMT

“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!

HTML Fieldset and Legend Tags

Todd M. Taylor — Mon, 29 Aug 2005 16:59:43 GMT

Here I thought I had seen every (valid) HTML tag that existed, until I was reading some articles on the W3C site and stumbled across the <FIELDSET> and <LEGEND> tags.

<FIELDSET> groups form fields into a 'container by wrapping a border around all of the fields. Obviously, you could put anything you want in the Fieldset tags, but it's designed for grouping form fields.

The <LEGEND> tag simply puts a label on the border of the <FIELDSET>. Here's an ugly sample (which could be made pretty with some CSS):

A Fieldset LegendWho ever knew there was an HTML tag called "FIELDSET"?

Internet Explorer 6, FireFox 1.1, and Netscape 7.01 all recognized this tag, so I guess that means it's 'fair-game'!

Internet Explorer... the way it should be!

Todd M. Taylor — Wed, 04 May 2005 16:21:07 GMT

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.

No More Ugly Submit Buttons!

Todd M. Taylor — Wed, 05 Jan 2005 03:35:19 GMT

Depending on which browser and operating system you are using, the submit buttons on a web form can either look really pretty or really ugly... the default is really ugly (gray blocks with black text.) Granted, using CSS on a button can pretty-them-up somewhat, but this CSS trick is the best by far!

[CSS] 


input.btn{ 


color:#050;

font-family:'trebuchet ms',helvetica,sans-serif;

font-size:84%;

font-weight:bold;

background-color:#fed;

border:1px solid;

border-top-color:#696;

border-left-color:#696;

border-right-color:#363;

border-bottom-color:#363;

filter:progid:DXImageTransform.Microsoft.Gradient

(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');}

For details on the original article: WebReference.com: Stylish Buttons