Whitehouse.gov uses ASP.NET

The website used by President Barak Obama, http://www.whitehouse.gov/, uses some of the same features we use everyday in our programming as well as the same backend software ASP.NET. Techniques such as search engine friendly URL's, friendly navigation elements, and a clean layout can be found on the President's website as well as throughout the websites that we build.

The whitehouse website employs breadcrumbs so you'll always know what section you are in although we like to go one step further and also have an "on" state for the navigation. Having an onstate can be something as simple as a different color background or enlarged text but it allows users to easily be aware of what area of a website they clicked into without having to follow the breadcrumbs.

By replicating the navigation again the footer users can quickly navigate to other sections of the website without having to scroll back up to the top of their browser. Finding a balance between the pages in a website and what actually needs to go into the navigation is something we strive to perfect. We try and eliminate problems where the navigation and page may feel lopsided by not including everything in the primary navigation. This can aleviate problems with so many pages in the agenda offbalancing the footer.

All-in-all the whitehouse.gov website is a clean site follows some of the same practices we employ every day in building solid websites and web applications for all of our clients.

jQuery Slider

I just upgraded my project to the latest version of jQuery (currently 1.3), and everything seemed to be working fine, except some sliders I was using. After lots of trial and error to figure out what the problem was, I stumbled across the answer. The problem was that the slider was defaulting to vertical orientation instead of horizontal (which it was defaulting to before). If you're seeing these issues, change your code to look similar to this:

$('.slider').slider({
  min: 0,
  max: 100,
  value: 20,
  orientation: 'horizontal',
  slide: function(event, ui) {
    //slide function
  }
});

Free Fonts

Having good fonts is pretty important for a web design, and here are 22 that are free:

22 Most Used Free Fonts By Professional Designers

jQuery, IE and change events

I just came across something rather interesting. Apparently, IE7 has an issue with the change() function of jQuery. It works just fine in every other browser, like Firefox, but not in Internet Explorer. Here's an example of what I was using:

$('input:checkbox').change(function(){
  $('.container').toggle();
});

Instead, I'm forced to use the click function and check the this.checked value to see if I should actually do any work or not. I suppose you don't necessarily need to check the this.checked value, but it's probably good practice. Here's an example of the revised version that's IE friendly:

$('input:checkbox').click(function(){
  if (this.checked)
    $('.container').slideDown();
  else
    $('.container').slideUp();
});

ASP.NET CheckBoxList

Please, somebody help me figure this one out. All I wanted to do was create a simple CheckBoxList that's built dynamically based off of some database values. I wanted something that goes a little something like this:

<asp:CheckBoxList id="CheckBoxes" runat="server" />

foreach(DataRow row in table.Rows)
{
  ListItem item = new ListItem();
  item.Name = row["Name"].ToString();
  item.Value = row["Value"].ToString();
  item.Selected = true;

  CheckBoxes.Items.Add(item);
}

Here's the rendered HTML:

<input id="ctl00_PageContent_CheckBoxes_0" name="ctl00$PageContent$CheckBoxes$0" type="checkbox">
<label for="ctl00_PageContent_CheckBoxes_0">##Name##</label>

Guess what: it doesn't work. Well, I should say that it only works server-side. But, if you want to do anything client-side (say, jQuery), there's no value associated with the check box. Really? Am I missing something here? Let's look at the HTML documentation for a check box:

HTML Forms and Input

<input type="checkbox" name="vehicle" value="Bike">

Uh oh, what's that? A value property?? Clearly I'm not dreaming that I want a value associated with a check box. Apparently, .NET strips out any value parameters from it's check boxes and will only work when dealing with post-backs (server-side). On top of that, I tried to insert my own attribute on those dynamically built check boxes, but got the same result. Am I missing something here? Doesn't it make sense to write correct HTML with the value attribute?

Good User Interface Design Tips

As a follow up to an earlier post, Smashing Magazine posted 12 Useful Techniques for Good User Interface Design.  You can see many of these employed on our sites already - particularly darkening backgrounds when using a modal popup, shortening forms to a minimum, and effectively using tab navigations and dynamic 'lightbox' style slideshows.

The one we're just beginning to use (we started with our own intranet first) is enabling keyboard shortcuts from within the browser.  For example, we have built content management systems that let you press 'ctrl+s' for 'save' inside the browser, just as you would do inside Microsoft Word.  We've found keyboard shortcuts most effectively used on internal functionality, such as content management systems (as mentioned above), intranet applications (like calendars and schedules), etc., but we've also implemented keyboard shortcuts in slideshows - letting site visitors move through photos using the arrow keys, for example.

All in all, it's a good read, so check it out.

jQuery UI Tips

Here's a list of different things you can do with jQuery to improve your UI (user interface).

45+ New jQuery Techniques For Good User Experience

I was actually fairly surprised to see a bunch of things that I've written myself pop up in this list. Not things I wrote that other people are using, but things I've written for my own projects that someone has tried to make a plugin for. For instance, I've already got a site that uses a sliding panel at the top for login information and such that was really easy to write in jQuery. A bunch of others I had seen before and are actually pretty useful.

Personally, most of these suggestions are good, but I would rather write the code myself. There's so much more control and satisfaction seeing something work exactly how you want it to and know you wrote that code. jQuery definitely makes it easy (and fun) to write a small amount of code that can have such a huge impact on the user experience. However, this is a great list to get some ideas for your own projects and how you can make things clean, simple and powerful at the same time with some design and jQuery.

Interface Techniques

Here's a great article on UI design and implementation.

10 Useful Web Application Interface Techniques

MailMessage.ReplyTo Property

We frequently send emails through .NET using hosted gmail as the server. If you have any experience with this, you'll know that you can't set the sender of email. Gmail will use the email of the account you log in with on the SmtpClient.

So for instance you want to have a contact form on your website that submits the form to you so that you can reply directly to the customer. When you receive the email the sender will be the account you authenticated with not the email of the customer.

But have no fear! In this case you can use the MailMessage.ReplyTo property and set that to the email address of the customer. So now when you hit 'Reply To' you'll be replying directly to the customer and not the account that sent the email.

jQuery sortable with Tables

I'm not saying to use tables, but if you have to and need the sortable option, here's a cool plugin i found for jQuery. Looks like it works a lot like Netflix. Pretty cool stuff.

Table Drag and Drop JQuery plugin

Cloning in the DOM with jQuery and IE

Well, our old "friend" IE has struck again. This time, it has to do with cloning an element with javascript (jQuery to be exact). The basic idea was this: let's create an html element that can be a template for loaded information, and then clone it so everything has a similar look and feel. With jQuery, it should be a fairly painless operation of:

var clonedElement = $(elementToClone).clone();
objectToAppendTo.append(clonedElement);

Apparently, IE doesn't like the way that looks. Must be too easy. So, so we had to do a workaround that looks something like this:

objectToAppendTo.append("<div class="abstractionName"></div>");
var newElement = $('.container .abstractionName:last');
newElement.html(template.html());

What sucks about this process is that you have to specify the main container explicitly instead of just cloning it and retaining the information dynamically. But, I'm just happy it works now.

CSS3

It looks like the new version of CSS is on the verge of being released. Here's an article I read about some of the cool features that CSS3 will boast.

Push Your Web Design Into The Future With CSS3

The big down-side here is that IE still won't support these features. Since IE6 and IE7 together hold the biggest market share, we still have to do all of our normal work-around for them. But, this could give us the ability to make faster loading pages with fewer images using some of the techniques outlined in the fore-mentioned article.

NovelProjects.com and AJAX loading

I've had a few people ask me how I built the NovelProjects site using AJAX, yet still kept the SEO practices in tact. The answer is that I built the site first as if there was no AJAX, which means a tags with href's and titles. Basically, the whole 9 yards of basic SEO coding standards. Here's an example of what our nav started looking like:

<ul id="nav">
  <li><a href="/" id="home" title="Home"></a></li>
  <li><a href="/about/" id="about" title="About Us"></a></li>
  <li><a href="/contact/" id="contact" title="Contact Us"></a></li>
  <li><a href="/work/" id="work" title="Our Work"></a></li>
  <li><a href="/news/" id="news" title="Latest News"></a></li>
  <li><a href="/blog/" id="blog" title="Team Blog"></a></li>
</ul>

That should take care of the SEO side of things, now I added the attributes that I would use for my AJAX loading. This is the final HTML that I ended up with:

<ul id="nav">
  <li><a href="/" id="home" class="npload on" load="/index.aspx" title="Home" preview="load Home"></a></li>
  <li><a href="/about/" id="about" class="npload" load="/about/" title="About Us" preview="load About Us"></a></li>
  <li><a href="/contact/" id="contact" class="npload" load="/contact/#contentonly" title="Contact Us" preview="load Contact Us"></a></li>
  <li><a href="/work/" id="work" class="npload" load="/work/" title="Our Work" preview="load Our Work"></a></li>
  <li><a href="/news/" id="news" class="npload" load="/news/" title="Latest News" preview="load Latest News"></a></li>
  <li><a href="/blog/" id="blog" class="npload" load="/blog/" title="Team Blog" preview="load Team Blog"></a></li>
</ul>

At this point I added a class onto any elements that I wanted to trigger AJAX loading by giving it the class of "npload". Using jQuery, once the document is ready, I then removed the attributes of href and title for any element with the class "npload". This would remove the redirect functionality of my a tags (which would be replaced with AJAX loading). I then used the custom attribute named "load" to tell me which document to load. At this point, it was just an AJAX "GET" call, along with some fancy animations to move the pages in and out of the screen.

PNG fix

One of the difficulties with Web 2.0 is browser compatibility. We do our best to make our web sites look exactly the same in every major browser in the market. We want to use PNG images because they look good and offer transparency, which is really convenient. Well, our good friend (sarcasm) Internet Explorer doesn't treat transparent PNGs very nicely.

There are ways to "fix" this issue for IE, but it takes a lot of work and isn't very much fun to implement. I stumbled across this page that attempts to use jQuery to do all the hard work for you. I haven't been able to test it too much with the work we do here, but it's possible that by reworking some CSS that this could become a valuable tool.

jquery.pngFix.js - PNG-Transparency for Windows IE 5.5 & 6

web.sitemap Macro

I found my self needing to create a web.sitemap file for the newest web app I was working on. Of course I'm always looking for easier and faster ways of doing things, so I started looking for an automated way of creating web.sitemap file.

I ran across a blog from K. Scott Allen where he did exactly what I wanted. It's a macro that you add to Visual Studio and after a couple small fixes, voila!

Here is my version: click to download.

jQuery and ASP .NET

I really love jQuery. It makes a huge difference in user interfaces and usability on any site. Not only that, but it's so simple to implement. I feel like I'm starting to really get a grasp on its potential.

One area that's been a little annoying to work with is the integration of jQuery AJAX calls and ASP .NET. Luckily, there's a good article I found that details the process so you can have a function in your code-behind that jQuery can call.

Using jQuery to directly call ASP.NET AJAX page methods

The one thing I would add to this is passing data to your code-behind. He doesn't seem to cover that in this article, so I'll just make a quick point about that. I was actually pretty surprised at the process: in the data section of the ajax call, you want to specify the parameter name, and then the value. In most languages you just pass the right datatype into the appropriate place, but in jQuery and ASP .NET it looks like you have to specify both for it to work properly. Here's an example:

ASP .NET

[System.Web.Services.WebMethod]
public static String ServerSideFunction(String myArgument)
{
  //server-side code goes in here
}

jQuery

$.ajax({
  type: 'POST',
  url: 'index.aspx/ServerSideFunction',
  data: "{'myArgument':'"+ argumentValue +"'}",
  dataType: 'json',
  contentType: 'application/json; charset=utf-8',
  success: function(msg){
    //success code goes here
  },
  error: function(xhr, msg){
    //failz code goes here
  }
});

P vs. BR

We've got a few subjects within our profession that has caused turmoil even within our office. One of those subjects is the use of paragraph tags or break tags.

I'll go ahead and state that I am all for paragraph tags. I know break tags might be 'convenient', but I would rather have proper code than convenient code. You'll probably see me say this over and over, but I really think it's true. Of course, sometimes you just need to get something done, but this is one subject where I really feel that this argument doesn't apply. It takes just as much time to wrap some text in a paragraph tag as it does to type out a break tag.

Why do I think paragraph tags are better? I think it looks prettier and cleaner, but the big kicker is CSS. If you feel like you need just a little more padding above that text, you're done with a break tag. It really allows you to have complete control over the text you're wrapping. Yes, you could adjust the container around the text, but just think about the actual name of the tag: paragraph. Does it not make sense to put a paragraph of text inside of a paragraph tag? Unfortunately, I can't always use this argument for every aspect of my profession due to some circumstances (*cough* Internet Explorer *cough*), but I do as much as possible.

footnote: I already changed all the other posts by the guys to use paragraph tags

Monkey Business

When looking for inspiration, I typically take my stuffed monkey jimmy to the park and feed him sunflowers seeds while on long walks gazing at the the beautiful flowers and taking in the satisfying smell of dandelions and weeping willows.

Credit Card Security

I went to fill up my truck with gas yesterday and the gas pump had a new credit card security feature that surprised me. I actually had to type in my zipcode to use my credit card. This is the first gas station that I've seen this feature on.

I wish more gas stations would follow suit and do this as well. This just adds more security because before using a stolen card the thief would have to know your billing zip code.

This is something we do on every e-commerce application we build. It adds an additional layer of protection for the customer and the merchant. Specifically for the merchant, the AVS (Address Verification Service) on the payment gateway reduces the chance of fraud which could result in lower fees and reduces liability.