Some stuff about Web and .NET development
RSS icon Email icon Home icon
  • A standards-compliant alternative to target=”_blank”

    Posted on March 28th, 2010 Thibaut No comments

    1. The context

    At least once in every web developer’s life, the target attribute of an anchor link (<a>) was used with the “_blank” value to tell the browser “open this link into a new window”. The problem is that this attribute is deprecated and thus doesn’t pass the W3C Validation.

    Although it’s considered a usability error to force that behaviour (the user should be the only one take that decision) and usability experts such as Jakob Nielsen totally agree with this, it’s sometimes a need to control this. It can be within the context of a web application to satisfy a customer request for example and I think a lot of people needed to use this once for a good reason.

     

    2. The alternatives

    • Add a “external” css class to the anchors links in the server-side code, and in javascript open those ones in a new window
    • In javascript, find links having a URL starting with “http://” and open them in a new window

    The first solution isn’t ideal according to me :

    1. You don’t always have access to the server-side code
    2. If the website uses a CMS, you don’t wanna force your users to add these classes by themselves
    3. It generates a heavier markup (with useless “class” attributes)
    4. It requires a manual intervention to add these classes and is thus error-prone

    The second solution is better but yet imperfect :

    1. It’s better because it’s an automatic process
    2. It works quite well as internal links are relative paths (ex: “products.aspx”) so URLs starting with “http://” will open in a new window
    3. Sometimes you have absolute paths who are not real external links. It’s sometimes the case for websites with a CMS. Example : you have a website, “http://mysite.com”, you don’t want a URL “http://mysite.com/products.aspx” to open in a new window, even if it’s starting with “http://”.

     

    3. The solution : target_blank.js

    With all of this in mind, I created a target_blank.js file that does the job, using the great jQuery library :

    $(document).ready(function() {

        $("a").filter(function() {

            return this.hostname && this.hostname.replace("www.", "") != location.hostname.replace("www.", "");

        }).click(function() {

            window.open($(this).attr("href"));

            return false;

        });

    });

    1. When the DOM is loaded (document ready)
    2. Find all the links having a hostname (thus not links such as “mailto:” etc) and having a hostname different from the one of your website (without the “www.” as you want to consider “http://mysite.com” and “http://www.mysite.com” as the same domain)
    3. When clicked, open that link into a new window (passing the href value as argument) and return false to cancel the standard behaviour (which would have been to change the URL within the current window)

     

    4. Conclusion

    We’ve seen here a standards-compliant alternative to target=”_blank” using non-obtrusive Javascript (it degrades well as a browser with javascript disabled simply won’t offer that functionality without crashing the whole thing) and that requires no manual intervention from the developer or the user (case of a CMS). Just keep in mind that it’s not a good usability practice and thus this technique should be used for a good reason (eg : within the context of a web application for a particular need).

    Make good use of it ;)

    Share/Save/Bookmark

  • In bulk #3

    Posted on August 13th, 2009 Thibaut No comments

    Share/Save/Bookmark

  • The 3 seconds usability test

    Posted on July 28th, 2009 Thibaut No comments

    In his Don’t make me think book, Steve Krug introduces his simple and fast, yet very interesting usability test. On a web page, go to your browser options and increase/decrease the font size. If there’s no effect, then the website has failed a fundamental rule in usability and considering that 34% of the internet users suffer from sight disabilities (source), this situation should clearly be avoided. The solution : don’t use units in px but rather use proportional units such as em and percentages.

    Another simple trick not mentionned in the book but that I use to test some sites is to disable the visual styles. The website should still look well structured. Ok you won’t have colors, images etc that makes the site visually attractive but it should still be usable (menu should be at the top, just like a table of contents, etc…). Try this on some popular websites (that’s more chance they’ll respect the standards) so you’ll see what I’m talking about.

    See you !

    Share/Save/Bookmark

  • Don’t make me think

    Posted on July 16th, 2009 Thibaut 3 comments
    Don't make me think There are several kinds of books. Steve Kurg’s Don’t make me think is one of these books written by top industry experts renowed worldwide, whose book became an instant classic by the time of its release. And myself being a web passionate, having this book on my bookshelf was just straightforward. As the title suggests, Steve Krug teaches us web usability, that is, the art of making websites not only good looking or technically correct but also usable by remembering us his master rule : “don’t make me think”. All over the book, a common sense approach is conducted to demonstrate and teach us that we make websites for users first and how to build websites that are easy and simple to use in order for the project to reach its goal. Don’t be mistaken : you’ve got loads to learn about this apparently simple, but in fact complex and essential topic.

    Pros

    • A very pleasant book to read. It’s fast, fun and very interesting
    • The approach which puts the reader at the user’s point of view and literally living the experience
    • Teaches you how to optimize lots of things, such as the homepage, searching, forms, testing and many other aspects of a web project
    • The great chapter about website testing, where you’ll feel like having assisted to a real experience thanks to an immersive story
    • At first I thought I would learn little because things seem obvious. And I’ve learned many useful things about web usability in this book
    • You won’t develop websites the same way after reading this. Get ready to start thinking as a user
    • If you’re developing/designing websites/apps, this book is a must-have on your bookshelf

    Cons

    • No really cons. Except the fact that there’s no Volume #2 in order to cover even more in detail this vast and essential topic

    Conclusion

    As you’ve seen, I truly recommend this reading which is, according to me essential. Because too many people think as a developer for the nice-to-have technical aspects, as a designer for the cool-looking stuff, or as a manager or CEO for things they think would be great to add (and the real disaster it is, like doubling the overall font size), learn to make something for users, allow them to find the information they want easily, don’t make them think and ultimately achieve complete success with your web project.

    Share/Save/Bookmark