Use your own domain name for your RSS feed address

This is a little tip where if you're using an external web feed management provider like Feedburner for your blog feed, your feed url looks more professional if it uses your own domain name instead of a third party domain name.

I use FeedBurner so in my case, instead of feeds.feedburner.com/onwebusability, it's at feeds.examinemysite.com/onwebusability . There's no cost in doing this. Hopefully your web host gives you access to your dns entries. If not, have them do it for you manually.

In addition, the benefit of using your own domain name is having more control. If for example Feedburner goes down for days or goes out of business, you will not lose your subscribers. You just make a quick dns change and redirect the subscribers to another feed location such as the blog's own feed.

I followed these instructions to make the necessary changes at my host and at Feedburner. Good luck.

separator

An anti comment spam bot technique without using captchas or extra user input

Yesterday I was using a support forum to post some messages and one of the antispam measures they had was the usual reCaptcha AND another text field to enter the two words next to that field. This means I have to enter 4 words for every post. I don't understand why the need for the second field. The forum is not popular at all with just a few posts belonging to the company's customers. While the forum is public, it's meant for the customers only. Are they getting hit so much by spam bots that the bots cracked reCaptcha and they had to use another field? Highly unlikely. This is adding extra friction to the user. It's enough I have to keep refreshing the reCaptcha to get two legible words.

Here's an idea for an anti spam bot measure without using any captchas and without adding any extra work for the user:

First I want to say I don't take any credits for this idea. I read it somewhere long time ago and always wondered how many sites use it knowing reCaptcha and other captchas are so ubiquitous these days. (Unless the sites use both methods.. and more. Good for them). Technically a spam bot, ignoring the sophisticated ones which hopefully are rare, is pretty dumb. A spam bot is an automated script or program which goes to web sites, follows all the links looking for pages which contain forms. Once it finds one, it fills all the form fields. It also specially takes note of text area type of fields. The gold nugget. That's usually the form post or comment which the bot wants to use to unload its message with the spammy urls. The urls which they hope the user clicks on or just for the sake of upping their page ranks (An SEO practice).

Now you can take advantage of the fact that they blindly fill ALL the form fields. The counter measure is that you hide one of the fields, an extra field which has no use to the user. Visually hide it through css or JavaScript as in giving it a "display: none" for example. A dumb bot doesn't know it's hidden and it fills it with data as usual. In your code, you test for that field. If it's not empty, you know the field was filled by a spam bot. If it's empty, you know a human posted the form because they can't see that field.

Even if the form was submitted by a bot, play the innocent and let the form submit successfully and send out a Thank You message without any errors. In the backend, send the form's contents to a black hole! :)

separator

Make areas in webpage clickable only when they serve a specific purpose

Clickable areas or sections in a web page should be confined in their exposed area. This limits the user from accidently clicking on a part of a page they did not intend to. One example which suffers from this is Hotmail.

hotmail

 

Once a while I have a bunch of emails I want to delete. So I go clicking rapidly on each message’s checkbox to mark them for deletion. On one click, I accidently click a few pixels away from the checkbox. Hotmail unselects all the checkboxes and opens the message which I clicked on. That wasn’t my intention. Then I have to go back and select those messages again. Not user friendly and quite annoying when it happens.

There’s no reason to have the checkbox area part of the selected message row. Most users will click on the message’s title or less often on the author. Highly unlikely clicking somewhere very close to the checkbox.

 

Limit where users can click if close areas do different actions.

separator

Use descriptive file names for downloadable files

Over the years, I have downloaded thousands of files, mostly software. Freeware, shareware and commercial. Most of the time I have to rename the download to a more descriptive filename. A file name  like setup.msi is really a bad naming choice. A setup file for which software? I am not going to remember the purpose of that download after 2 days. Or what if another vendor also renamed their download setup.msi? All my downloads go into the same folder. The other naming problem is the 8 characters or fewer names. Is anyone still using Windows earlier than Windows 95? All operating systems support long filenames. Use long file names to your advantage. For the longest time, Adobe’s Acrobat reader was named something like adb_rdr.exe!

 

File names should be descriptive enough to not exhibit any ambiguity.

 

My perfect naming convention example: Adobe Acrobat v8.0.3 build 2009 trial 64bit.msi.

Include the company name, the software title, the full version number, whether it’s a trial version and whether it’s a 32bit or 64bit version. A year later when I look at the file name, I know exactly what the file is.

Sometimes I even add an important  note or comment to the filename if I really need to remember it.

separator

Podcasts should have release date announced at the beginning

Just like blogs, podcasts should  have their release date announced at the beginning of the podcast so listeners can know a podcast’s age. Is it a day old, a week old , a year old …?

If I plan to save a podcast on a computer,  I could include the date in the file name and when I come back to it I know how old it is before I listen to it.

separator

Always have a Contact Us link accessible from every page in your web site

[This is the first post in the web usability category. This blog's main category.]

There are times when visiting a web site I have the need to contact the people behind the site for whatever reason. I noticed some sites try hard to obscure every means of contacting them. As if they don’t want to be bothered by anyone. If you are providing a service and expect some kind interaction, you MUST provide something like a contact us page accessible from every page. Whether in the main navigation or in the footer or at least no more than two clicks away in the main navigation hierarchy.

What if you have an issue on your website or I have a question? There needs to be a way for me to contact you with the least amount of effort. I like to see a Contact Us link at the top. This way I know customer service is important to you. You value your customers and their feedback.

Example of a site with no contact links of any kind:

http://twit.tv

twit_cap

I am a regular listener to some of their podcasts and I know Leo laPorte (the host) since the TechTV channel (no more) from the late 90’s. One day I wanted to contact them about something so I headed to the site looking for a contact page or an email address. I spent about 10 minutes clicking on links here and there until I got frustrated. I thought these people purposely did not include any contact links or forms. What to do? See the last section below. I sent emails to several known boxes and it eventually reached a person and received a reply.

I know people do not include contact information because for fear of getting more spam. There are several ways to limit the spam. I will post about some anti spam techniques in a future post.

What do to do when a site has no contact information?

  • I know every mail server has some default mailboxes. I would send the email message to each of them. The mail boxes include ‘postmaster’ & ‘catchall’. Then include some popular ones like ‘webmaster, ‘support’, ‘service’, ‘custservice’ and anyone you can think of. What I do also is add a note in the email mentioning the fact there was no contact info on the website, which makes it hard to contact them
  • Do a whois on the domain name and look for an email address. If the information is private, you're out of luck here.
  • Depending on the type of site, like if it’s a personal site, do a search on the domain name and you might be able to find a post with a signature which includes a link to the domain name. This could be a forum and you could send them a private message through the forum.
  • Do a search and get hits to social networks where a person from the site could be reachable.
  • Use some other creative methods. If you any, please post a comment.
separator

How I modified a WordPress theme to work with BlogEngine

The title I was going to use for this post was “How to convert a Word Press theme to a BlogEngine theme”. This blog uses BlogEngine (BE) as the blogging engine. Due to the lack of quality themes for BE, I decided to use a WordPress (WP) theme. I thought I would just be able to convert the theme to a BlogEngine theme and be done.

WordPress is written in PHP which resembles classic ASP where the code is interlaced with the HTML. I expected a WP theme would just be a bunch of HTML, CSS & Javascript files like most web site templates. It turns out that a WP theme could include a lot of PHP code. The strength of a WordPress theme lies in its ability to extend WordPress’s default functionality by adding extra options and workflow. When I looked at the theme I wanted to use with BlogEngine, I noticed all the PHP code which define what and how things display in the web page.

My first expression was that the task wasn’t going to be a straightforward conversion. My first attempt was trying to understand what the PHP was doing. Although I didn’t have experience in PHP, the code is pretty easy to read and understand. At least it’s not Perl whose syntax I hate! The problem was the code wasn’t easy to follow. The code is in many files and functions are calling other functions which are scattered in several files. I needed to trace and step through code and have breakpoints. What do PHP developers use as an IDE? First thing I did was check JetBrains.com and examine their PHP offerings. I know they develop good IDE’s and I LOVE their Resharper tool. I found an IDE called PhpStorm.

I set up a php develpment environment on my Windows box. Installed PHP under IIS. Installed WordPress and unzipped the theme in it and activated the theme. Installed phpStorm and the first thing I did was look for the debugger. PhpStorm doesn’t come with a debugger of its own! Not like Visual Studio. You have to download and install a third party debugger extension. I used xdebug. I had to do some configuration tweaks and finally got it working with breakpoints and single stepping. Cool! I actually thought that there’s no PHP IDE which works like Visual Studio. After trying to follow the PHP code I came to the conclusion that this is going to be a ton of work. Converting the theme and code into .NET, user controls and trying to also understand how BlogEngine theming and code works. Getting dissapointed now. So I scrapped this method.

I decided to use a completely different approach. I am actually only interested in the layout produced by the theme. Just the HTML and CSS. So I decided to let PHP do its work and just grab the page’s html & CSS source. However I also need to understand how BlogEngine theming method works. I read the theme documentation and got a good idea of the different user controls. So I grabed the html source and converted it into a master page minus the main content. The different sections on the right side are made by different BE widgets. I modified them a bit to use the WP theme. WP has a similar concept of widgets but I just grabbed their html as well and plugged into The BE widgets. BlogEngine’s posts and comments reside in user controls. I modified these controls to use the WP theme html and css classes as well. What I did is completely ignored all the PHP code and just get the actual layout. I used Firebug to find which CSS classes where used and copied them over to BE. I noticed a lot of the CSS attributes where not used in the HTML tags. The theme needs to be cleaned.

While BlogEngine does support themes, the themes are not isolated and do not work without supporting code. There’s code in BlogEngine which spit out css and html. I didn’t like this about BE where they have things hard coded like that. There was no way to fit the WP theme without modifying BE’s code or at least not for the theme I am using. I am guessing the reason why all BE themes resemble each other is because of the theme bounderies and limitations BE imposes on the theme developer.

I managed to get the theme and BE working together. The result, and probable issue, is that I won’t be able to do an inline BE upgrade because of all the custom code. This might not be a big issue because blogging software do not change often. If the next upgrade does have a functionality I need, I will take it apart and plug manually into my system. The most challengin part was the threaded comments. A reply to a reply will actually display under the reply with some indentation. I added an anti comment spam technique and eliminitated the use of a captcha. I will explain what I did in a future post.

I did encounter a bug in BE where it breaks all the CSS conditional comments. I reported the bug and a BE developer released a newer version.

separator

Why I chose BlogEngine as the blog platform?

When deciding on a blog platform, I had two clear options. It either be on WordPress (WP) or one which is based on ASP.NET. WordPress because it's the widely popular blogging platform, with the most support and the largest collection themes & widgets. (Just learned that Microsoft is shutting down Live Spaces, one of its online blog platforms and migrating the users to WordPress). WP’s drawback is it's developed in PHP, a language I don't program in and which I am not interested in learning & using.

OR

An ASP.NET based blogging platform because I know ASP.NET very well, in case I need to do any custom work, which I did for this blog. I decided to go with an ASP.NET based blog engine and chose BlogEngine (BE). The other candidates where dasBlog & Subtext.

My blog platform requirements are:

  • widely used and has good active support
  • supports themes
  • supports threaded comments
  • has measures against spam comments (comment moderation, Akismet, .. etc)
  • being actively developed. Meaning last build is not more than a year ago.
  • supports protocols for publishing using clients like Windows Live Writer

 

BlogEngine seems to best fit these requirements. One issue I found with BlogEngine is the lack of cool themes. All the themes I found were simple, look pretty much the same and quite boring. A lot of the BlogEngine based blogs use the default theme which comes with BE.

In my next blog, I will talk about the WordPress theme I used for this blog and how I modified it to work in BlogEngine.

separator

What is this blog about?

I have visited thousands of web sites and have looked at, probably, tens of thousands  of web pages since I started looking at them around 1994. It surprises me the number of issues many pages suffer from. From spelling mistakes, poor grammar, links to pages which do not exist including ones on the same site, inaccessible pages, usability problems, hard to read text, colors which bleed your corneas, hard to find information, walls of text  plus many other issues.

In an effort to help web authors, designers and users make a place better out of the web, this blog will showcase examples of real-world web pages which exhibit some form of bad behavior which can be improved with littleor no cost (time or money). My hope is you, as a web page creator, do not repeat the same mistakes or at least be aware of the pitfalls.

For web usability issues, I will be following similar methodologies as explained in books like Defensive Design for the Web and Don’t Make Me Think.

The blog will also include other categories in topics of  interest to me in general.

Blog topics will include:

  • Web page usability issues. This includes anything inhibiting frictionless use of a site
  • Web standards and technologies. HTML, CSS, browsers, JavaScript, jQuery.. etc
  • .NET technology and related technologies. That’s what I use in my day job.
  • Productivity tips. In life and work
  • Rants about current tech trends
  • Software & hardware
  • Industrial design. Anything which I have encountered which make me go "This is good design”.

Blog will be:

  • 2-3 pages long. I dislike long blogs and I respect your time
  • easy to read and follow. No ‘academic’ walls of text
  • Web usability posts will most likely have a screen capture of the issue I am discussing plus the better method(s) in refining it to make it more user friendly

 

I am still tweaking the template and code. Please report any issues.

Enjoy!

separator