While testing a project on which I’m working I accidentally went to TMN’s website (a Portuguese cellphone company) with Javascript disabled.
First of all I think that is great that they use a <noscript> tag to warn the user that the user experience quality will be decreased because Javascript is disabled. Because of this message I switched it on right away. Without this message I would probably get some strange behavior while using the website, complaint about it and then maybe I would remember that I had Javascript disabled (or just leave the website without realizing it).
Something that you can’t see in the image above is that the website look & feel doesn’t get too damaged by the absence of Javascript support which is nice too.
One thing that I didn’t like that much was the fact of this website language is Portuguese but the warning message is written in English… TMN’s clients don’t have to understand English, and I believe that many don’t. This issue seems like a “copy-paste” without message customization. 
Today I was testing a website using a HTML W3C validation tool (XHTML 1.0 Transitional) and I found a problem in my links. Some URLs had the & symbol, since they linked to dynamic webpages which need parameters. The trivial solution is to replace the “&” occurrences on all links by the equivalent “&” expression. But while changing some dynamically generated URLs I found out an interesting fact about ASP.NET controls vs HTML controls that I was not aware of.
In the example bellow you can see 2 pairs of Links and Images. The first set are ASP.NET controls, the second one are HTML controls (markup) with runat attribute set to server in order to allow their manipulation by ASP.NET code.
When you look at the source code in the client side bellow you can spot a slight difference that can make your HTML validation fail. href and src attributes that originally contained the “&” and which are the result of ASP.NET controls rendering have “&” instead, but the HTML controls still have the invalid &-based URL’s.
Since I had both type of elements mixed in the website, and I was threating them in the same way I was getting different behaviors. Now I know why…
In my daily work It is quite usual facing applications and websites which have what I consider some usability issues (including projects in which I have worked, its true). It is so common that I’ve decided to start posting some thoughts about usability using examples that cross my path.
I am not and usability expert and what I will post may not be accepted by usability experts or by any person at all. I’ll just write about things that annoy me and which I think that should be different. So, if you think that I am not right about something, just comment the correspondent post. This way I can get different points of view and learn about usability from you.
Today while using Live Mesh Remote Desktop I noticed something. While the ActiveX is connecting to your remote computer you get a loading screen. You have a “Cancel” button in order to cancel (how obvious is that caption 
). In the button’s normal state you can see a “Cancel” message below the loading animation, but you don’t really notice it is a button until you put your mouse over it.
If it is a button, I think it should look like a button before I try to click it (this is the moment when I need to know that it is a button). Or at least it could resemble like a link, which would have the same effect. Since Live Mesh is still a Tech Preview, maybe this usability issue will not be present on the final release.
In the System namespace there is a class called Environment which gives you access to a lot of information about the environment where your application is running. A nice one that I use is stored in the NewLine property. It gives you the characters sequence that represent a new line (\n and \r together typically, and since I never remember the order, this property is useful :-P)
In the image above you can the complete list of properties and methods available. More information can be found at the MSDN .NET Framework Developer Center.
As I have said before my favorite browser is Firefox. And my current operating system is Windows Vista Ultimate. They work well together, but visually I think that Firefox doesn’t fit that well. When you have Aero turned on it is even worse. I would like to make Firefox look a little bit more like IE7 on Vista. And now it does! The picture bellow shows how nice it looks now and it’s perfect fit with Windows Explorer.
How can you achieve the same result? By taking advantage of the great customization features of Firefox!
First of all I installed Glasser which is an experimental Firefox add-on that adds the Windows Vista glass frame to Firefox toolbars.
The next step is to customize other visual settings. I was surprised to find out the Firefox theming is based on CSS, so you can adjust a lot of the look’n'feel of your favorite browser like you were styling a webpage. A great add-on that can help you with this task is Stylish. It allows you to manage several stylesheets files, by adding new ones, activating/deactivating the existing ones (with preview) and even editing the files manually.
Obviously you don’t have do write your own stylesheets from scratch. There is a huge (or at least decent) database of stylesheet files for Firefox that can be found at userstyles.org. It has not only styles for your browser but also for specific websites like Gmail, Google Reader, etc.
Here’s a list of user styles that I used to accomplish the final result shown in the image above.
FF3+Glasser: Vista OS integration - Gives the IE7-like look to the address bar and back/forward buttons
Firefox 3 Glasser Padder - Just gives a little space to the main toolbar, not required.
Hide Home-button text on the Bookmarks Toolbar - If you want the Home button in the address toolbar without the “Home” text, you can use this style.
Native-looking progress meter for Fission ext - Makes the progress bar green and glossy like the Windows Explorer progress bar (e.g. folder search progress bar). You must use it with Fission add-on which puts the progress bar behind the address bar, otherwise it doesn’t have any effect.
I used an add-on in order to add a “New tab” button next to the last open tab, on the tab bar.
Personal Menu add-on allows you to transfer the main menu items to a single button that you can put in any toolbar. It is the last button next to my bookmarks. Using this add-on you can get rid of the main menu, but have it easily accessible whenever you need it.
The best of all is that since I am using a portable version of Firefox 3, I won’t lose any customizations even if I format my computer, or move into another one.
Feel free to ask any questions regarding the customizations I’ve done to Firefox.
You can find several ways of putting some sample text in a HTML input text which fades away when you click it. Some of them use a few lines of javascript, others take advantage of Javascript frameworks, and there are even ways to achieve it using just CSS (but it doesn’t work in IE anyway). But I haven’t found any guidance on doing it to password inputs. So I did it my way.
The problem
The image bellow shows the desired behavior. When you open the webpage you can see an input with a grayed out message on it, telling the user that it is a password field. When you click the input, you can type your password (without being displayed on the page). If you click outside the input, and it is empty, the “Password” message appears again.
The solution I present is based in Javascript, and you can achieve it without using any server-side technology. But since I had to do this using ASP.NET, I’ll show you an example using this technology.
ASP.NET markup
First of all let’s take a look at the markup. I’ve create 2 textboxes, one using the Password text mode, where you can type text without displaying it on the browser, and another one which is a simple textbox with our “Password” message. I’ve grayed out this message and left the input as readonly, since we don’t need its value.
Disclaimer
As you may know I am a fan of C#, and I don’t like VB.NET that much… But since while writing this demo I accidentally created an VB.NET project, instead of creating another one I took advantage of the opportunity to test my VB.NET skills. 
Now I love C# even more…
Javascript Injection
Now lets the the Javascript part of the solution. I use ASP.NET to inject the Javascript into the page in the server-side. I use the Attributes property of the textboxes to set styles and client-site event handlers. In order to hide the real password input when the page is rendered, I set the style attribute of the input element with the value “display:none”. When the fake password input gets focus, the browser hides it, shows the real password input and changes the focus to it. The user doesn’t even notice the input switch, at least if you make sure that the two inputs have the same style. When the password input loses focus (onblur event), if it is empty, the fake input is shown again .
About ClientID
If you are not that familiar with ASP.NET, or at least with client-side scripting used with ASP.NET, you may be wondering that is ClientID. Well, in this example it has the server-side name of the textbox, but when you use User Controls or Master Pages, not always the server-side name of a control is the same that the name/id in the client-side. So the ClientID property gives you the name/id that will be valid while trying to access the control on the client.
What if there is no Javascript support…
Ok, it works fine. And it is pretty clean. But what if by some reason the Javascript is disabled in the client browser? Well… The user won’t have access to the real password input, and will get stuck with the fake input which has the “Password” text and is read only. Even if he could write on it, in the server side the password wasn’t expected from that input anyway. So we need a solution that works even when Javascript is disabled. The user will not have the fancy sample text inside the input, but he will be able to type and send the password to the server. How?
First of all the default visibility status of the inputs will have to change. When the page is rendered the real password input must be visible and the fake one invisible. This way if Javascript is disabled, the user will get a standard password input. After the page is loaded, if Javascript is enabled, we switch the inputs. This switch occurs before the user sees the page, so the final result is the same (while using a Javascript-enabled browser).
The code that the “…” hides is the code of the first VB.NET block.
RegisterStartupScript
This is the method used in order to register script that is supposed to be used in the client side. Page.ClientScript has other nice methods, that allow your to attach onSubmit client-side event handlers and do other client-side Javascript related tasks. Two nice links about RegisterStartupScript are this an this.
You can download the complete source-code of this post.
