Janko At Warp Speed

Create YouTube-like adaptable view using CSS and jQuery

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Sun, 08 Nov 2009 23:30:00 +0100

Besides Turn off the lights feature I explained earlier, YouTube has more great stuff. I believe that you noticed "change view" feature which allows you to switch between normal and wide mode and thus expand/shrink movie area. I like this feature because in different circumstances, I need a different view. But the thing I like the most is that, although layout changes, it is done seamingly and all the information remains easily accessible.

Download source (29kb) View demo

Wireframes above shows what happens when you change the view. By changing to wide view sidebar goes down and content stretches fully. Creating this is very simple. The trick is in properly defined structure and a bit of jQuery.

Structure

This is the most important part of the story. In order to simulate YouTube structure we will define five sections: header, content, comments, sidebar and footer. The structure we need is quite simple:

<div id="header"></div>
<div id="main">
    <div id="content"></div>
    <div id="sidebar"></div>
    <div id="comments"></div>
</div>
<div id="footer"></div>

The key is in CSS - content and comment areas will float to the left, while sidebar will float to the right. This will allow for sidebar to go down when content streches without disturbing the layout. They will be placed inside container "main" that will clear all floats. There won't be any special styling for header and footer.

#header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}

Initially, content will be 600px wide (including paddings). When user changes to wide view it will stretch to 960px. To achieve this we will place a command link somewhere on the page, let's say inside the content area. I used CSS Sprites for the command link in demo, but you can create a simple textual link as the one below.

<a id="wideView" href="#">Change View</a>

Interaction

Next we will add a simle jQuery function that will toggle CSS class named "wide". This class will determine the look of content section in wide mode.

$(document).ready(function() {
    $("#wideView").click(function() {
        $("#content").toggleClass("wide");
    });
});

So "wide" CSS class wouldn't contain nothing more than width property set to 900px (with paddings it will be 960px total, which is the with of out sample website).

#content.wide { width:900px;}

The only thing you need to do next is to check the demo and try clicking on "wide view" button ot go direclty to YouTube - Projcet Home page and try playing with the layout. You can even watch that fantastic movie and see what we, humans, did to our planet.

Conclusion

I really like adaptable views. In one of my previous articles, Adaptable View - how do they do it I explained two great examples of this UI pattern. YouTube example is also a great solution that could could be very useful. Additionaly, you can remember users' choices and show wide view whenever they come to your site (or as long they have your cookie). Would you use this feature somewhere?

Usability tips for visualizing Ajax requests

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Sun, 01 Nov 2009 23:00:00 +0100

The usage of Ajax in web applications and web sites is rapidly increasing. If not handled properly Ajax fucntionalities can break users' expectations and conventions. This is why it is important to help users easily identify what is going on with the system and prevent them to make errors during Ajax operations.

Keep users informed

Ajax indicators are very important tools that help users to have an understanding of what is going on with the system and what are responses from the system. Indicators should be shown as soon as request starts and hidden when request ends. I've seen so many times that indicator is visible even when it was obvious that request is finished (or even worse, in some cases there were not any visual clue of what is going on).

Simple indicators

Simple Ajax indicators provide a strong visual clue that request is in progress. They can be shown as simple text or as an image, usually animated.

If it is in a text form, be sure to provide meaningful message, like "Sending email...". Messages like "Waiting..." could confuse users. What am I waiting for? Is something wrong with the system?
If it is an animated image they are usually represented by rotating animation. This is one of the rare good usages (if not only) of animated gifs today

Loadinfo, my favorite choice when it comes to indicators, offers a plenty of animated gifs. Some of them are really fancy, like rotating hourglass.

Progress indicators

If an operation needs a longer time to execute you should use progress indicators. This type of indicators provide a real time information about the progress status, usually by showing how much time has passed and how much has left to the end of request. Progress indicator can also show a status message explaining what is happening at the moment.

Dropbox provides graphical status indicator as well as textual status messages. This is the efficient way to communicate the status of long operations.

Position

Whatever option you choose, you have to make sure that indicator is clearly visible. Depending on their purpose, indicators can be placed inside the same context as the element that started a request or they can be shown in a single position for all request. Previous example shows the case where progress indicator is shown in the upload area.

Google Mail has centralized Ajax indicators in the top of the window that is revealed upon any Ajax request.

Which one to choose?

I think it's the best to quote Jakob Nielsen's article Response Times: The Three Important Limits. I wouldn't have anything to add here:

0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
1.0 second is about the limit for the user's flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
10 seconds is about the limit for keeping the user's attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.

Disable UI elements during Ajax request

While one Ajax request is in progress user can start another one which may bring about the risk of data damage. By double clicking the same button or by clicking on another users can even cause an application failure. But if that happens it's not their fault.

This can be easily prevented by disabling UI elements during Ajax request. Depending on the case, you can disable a particular element or you can disable the entire user interface. UI elements should be disabled when Ajax request starts and enabled again when request ends. In some cases your user interface will change view after Ajax request so you won't enable disabled elements again.

BuySellAds shows Ajax indicator in centralized area on the screen while the rest of the user interface is disabled. This behavior is consistent through the application.

Highlight updated area

When partially updating a page it is important to emphasize the outcome of Ajax request. The goal of this method is to draw users' attention to updated area and enable them to easily confirm the update. This can be done by highlighting updated area for one second and then fade it away (you can even flash it once or twice). The usual color for highlighting updated area is pale yellow.

Basecamp highlights the updated area with yellow color.

Conclusion

To make Ajax functionality easy to understand, you have to provide the information about state of the system during a request and after the request is finished. Basically, when working with Ajax you should:

Use textual or animated Ajax indicators
If requests are long, use progress indicators
Disable UI elements during Ajax request to prevent potential errors
Highlight area updated by Ajax
And of course, you should always show status message indicating whether operation failed or suceeded

What is your experience with visualizing Ajax requests? Is there any specific method you prefer?

Invoicera giveaway winners

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Mon, 26 Oct 2009 23:55:00 +0100

Three days ago Invoicera decided to give away 3 subscriptions of their Classical package to jankoatwarpspeed.com readers. I am happy to announce lucky winners.

The winners are:

Sid
Nemke
Tony Gray

Congratulations to the winners ans a lot of thanks to Invoicera for this great giveway.

Win a free license for Invoicera billing software

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Sat, 24 Oct 2009 20:04:00 +0100

I am pleased to announce that Invoicera has kindly decided to giveaway 3 subscriptions of their Classical package absolutely free to jankoatwarpspeed.com Readers!

A bit more about Invoicera

Invoicera is an online billing software which fortifies every individual and helps you to channelize your revenue without committing any invoicing errors. The software comes with many features, many of them are listed below and many more are yet to come, which every freelancer or an entrepreneur will crave for.

Features:

Report Generation
Automatic Invoicing for Recurring/Regular Billing
Export and Import your Documents
Multiple Payment Gateways
Staff Management
Create Professional Quotes and Estimates
Data Back-up
Multiple Currency Support
Alerts and Reminders
Invoice Scheduling
Late Fees Payment
Invoice/Estimate As an Attachment

Is it free?

Well, there is surely a free plan with limited features that will help you try it out. But as some say, “All good things come with a price”. Invoicera plans start from as low as $7/month. But the winners will be getting it absolutely free.

What to do to win?

Well, it’s pretty simple; you can take part in this contest and stand a chance by tweeting about this contest and confirming your tweet by commenting here the twitter status URL (you have Retweet button at the end of this post). ex. http://twitter.com/onlyyourspiyu/status/2604845236. You get this URL by clicking the link just below the twitter entry containing text like this: “about 2 hours ago from web”.

Important Pointers

The winners will be decided via http://www.random.org/
Fill your name and e-mail address correctly because the winners will be contacted via e-mail only.
Post your comment before the contest ends. After the due date comments will be closed.
The contest is open till Monday, October 26th 2009, end of the day, and the winners will be announced a few minutes after that.

Good luck and don’t forget to follow Invoicera on twitter!

Adaptive web forms

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Mon, 19 Oct 2009 09:30:00 +0100

I believe it's general knowledge that nobody likes filling in web forms. Neither you, nor me. The longer and more complicated the form, the more repellent it is to users. Understandable. Here, I'd like to present a concet which is very interesting to me - adaptive web forms.

For example, I'm a regular blog reader and often comment on them. This means that every time I have to enter my name, e-mail and url before posting a comment. Browsers do help here, however, by remembering data I've previously entered, but I still have to fill these fields in. Some blogs don't even offer this.

Remember my input

You may have noticed that once you comment on any of my blog posts, your data is saved and the next time you visit it has already been filled in. This is a way in which regular readers are enabled to quickly post comments. However, besides saving just data, the whole of user interface can be adapted to provide a different kind of interaction for returning readers.

Here is the case: the idea is to save the data that I've entered when I visited a blog for the first time (eg. using a cookie). It is also a good idea to inform visitors that the data is going to be saved for next time. In the example above, the message is next to the title "Add comment". The data is automatically filled in the next time I visit. However, it can also be hidden. The image below is showing a case of returning to the above blog.

As the data is read from the cookie, it can be saved to a database together with the comment, and almost the whole form (4 fields) can be hidden and replaced with the message "Welcome again". In this way, I would be not only focused on leaving the comment but it would affect the overall user experience. At least, I think so.

Of course, in case you want to change your data, you can do so at any time by using a link on the right hand side of the welcome message (this message could be more meaningful, but you get it). By clicking that link, the hidden fields would become visible and the welcome message would be hidden.

Potential problems

Adaptive user interfaces in general have one serious problem - learnability. Users must constantly adapt (remember Microsoft Office Adaptive menus, they were discarded). But I don't see this will be a big problem here. However, there is another potential problem here, and that's trust ie. privacy. Advanced users understand how this data is kept, but some users would definitely pose a question.

Both these problems have a solution in adding a "Remember my personal details" checkbox instead of a message that data is to be saved. This way, the control is back in the user's hands, which should be a rule. A short survey, I conducted, confirmed this. Around 76% of users surveyed thought this option as the best one, 20% consider a message to be enough while 4% don't think this feature is necessary at all. Ok, I know that survey is not the best tool, but it's still better than nothing.

Conclusion

In the end, I think this is one way web forms could adapt to us instead of us adapting to them. Still, my enthusiasm to shorten the time spent in filling in web forms aside, this should definitely be tested. Do adaptive web forms make sense to you and do you know some other examples?

Fade colors using jQuery

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Tue, 13 Oct 2009 10:48:00 +0100

Retweetradar has nice little effect in the footer - links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery.

Download source View demo 1

In the example in this tutorial we'll will fade links in unordered list like in the example below.

<ul id="links">
    <li><a href="#">Some text here</a></li>
    <li><a href="#">Some text here</a></li>
    ...
</ul>

Fade links using opacity property

In the first example, we will use opacity CSS property and apply different opacity to each link in unordered list. To do so we need two variables - the number of links and the number that will determine the step for decreasing the opacity. See in code that, for determing the step, we divide 90 with the number of links. This means that the last link will be 90% transparent. If we would divide 100 with the number of links, the last link will be completely transparent and thus invisible.

function fadeElements(color) {
    var count = $("ul#links li").size();
    var step = 90 / count;
    $("ul#links li").each(function(i) {
        var currentOpacity = 100 - (step * i);
        $(this).find("a").css("color", color)
            .css("opacity", currentOpacity = 100 ? "1" : "0." + parseInt(currentOpacity));
    });
}

Next, we determine opacity intensity for each link (currentOpacity) and assign it through CSS, together with chosen color (which is passed to the function by parameter). Note that I used inline "if" statement to assign opacity value of 1 if it is the first link, and less than one for all others.

$(document).ready(function() {
    fadeElements("#000");
});

You can then call fadeElements function and pass it the color you wish to fade. In the example above it's black.

Fade links using RGB values

Download source View demo 2

If you don't want to use opacity for whatever reason, here's the complicated version - using RGB values. Let me explain the code below. The first four functions (that I found on the Web long time ago and reuse since then) convert Hex color values to red, green and blue values.

function HexToR(h) { return parseInt((cutHex(h)).substring(0, 2), 16) }
function HexToG(h) { return parseInt((cutHex(h)).substring(2, 4), 16) }
function HexToB(h) { return parseInt((cutHex(h)).substring(4, 6), 16) }
function cutHex(h) { return (h.charAt(0) == "#") ? h.substring(1, 7) : h }

Function fadeElements that you've seen earlier in this tutorial is now slightly complicated. Basically, it is doing the same job and that is fading colors. Only this time it won't make one color transparent but rathar scale original color and make several variations.

function fadeElements(color) {
    var count = $("ul#links li").size();
    var r = HexToR(color);
    var g = HexToG(color);
    var b = HexToB(color);
    var stepR = (230 - r) / count;
    var stepG = (230 - g) / count;
    var stepB = (230 - b) / count;
    $("ul#links li").each(function(i) {
        var valueR = parseInt(r + (stepR * i));
        var valueG = parseInt(g + (stepG * i));
        var valueB = parseInt(b + (stepB * i));
        $(this).find("a").css("color", "rgb(" + valueR + "," + valueG + "," + valueB + ")");
    });
}

The logic is similar to the first example. We also determine the number of links and number to decrease red, green and blue values for each link. Number 230 is 90% of 255 which is the highest value of a color in RGB model. Next, for each link we create color by decresing values of red, green and blue component of original color. It doesn't sound so complicated, isn't it?

Conclusion

This was just another demonstration of jQuery capabilities of its possible uses. The two examples are different although the output is similar. Which one would you use?

If you need additional feedback from your readers - just ask them

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Thu, 08 Oct 2009 13:06:00 +0100

Comments are certainly one of the most important aspects of blogging. They keep blogs alive. They are a communication tool that let your readers leave their questions, thoughts, suggestions or advices. But are comments the only way of getting feedback?

You can also get feedback by asking your readers a direct question. Do you like what you see? Do you want more of these? Here are two examples I stumbled on recently.

Noupe.com

At the end of the latest article on noupe.com Fresh Web Development Goodies Bag, there is a call for readers to leave their opinion on the article. This can help new owners (Smashing Magazine) to focus on right topics in the future.

BoagWorld.com

At the end of each article on boagworld.com asks readers a simple question - do they like the article or not.

Do you think this could be a way to get a relevant feedback from your readers? Do you know some other examples?

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Mon, 28 Sep 2009 22:28:00 +0100

This detailed tutorial will show you how to turn long webform into a wizard with "steps left" information. A plugin is also available for download.

Download plugin with example View demo

What is our task?

If you would, for whatever reason, have a large webform all fields shoud be semantically divided into fieldsets. Each fieldset would clearly describe each group of fields. Although many examples on the web today look different, this is how it should be.

So, we can say that each group of fields represent a sub task of a larger task - filling the entire web form. Thus, each sub task can become a step with a description, input fields and navigation that is common for wizard forms - back and next.The entire process can be done in several simple steps.

1. Create "steps"

The code should look like the example below.

<form id="SignupForm" action="">
    <fieldset>
        <-- input fields -->
    </fieldset>
    <fieldset>
        <-- input fields -->
    </fieldset>
    <fieldset>
        <-- input fields -->
    </fieldset>
</form>

Let's explain the following code. In order to determine how much steps there will be, we need to select all fieldsets and get the size of this wrapped set. Next, we iterate through this wrapped set (that returned all fieldsets), wrap each fieldset into a div and append a paragraph that will hold "back" and "next" buttons.

Now comes the funny part. If this is a first fieldset in wrapped set, we'll create "next" button only and make this step visible. If it is the last fieldset in wrapped set, we'll create only "back" button. In all other cases we'll create both buttons. Methods for creating buttons will be explained later in this tutorial.

var steps = $("#SignupForm fieldset");

var count = steps.size();

steps.each(function(i) {
    $(this).wrap("<div id='step" + i + "'></div>");
    $(this).append("<p id='step" + i + "commands'></p>");

    if (i == 0) {
        createNextButton(i);        // to do
        selectStep(i);                  // to do
    }
    else if (i == count - 1) {
        $("#step" + i).hide();
        createPrevButton(i);       // to do
    }
    else {
        $("#step" + i).hide();
        createPrevButton(i);       // to do
        createNextButton(i);       // to do
}
}

Now let's explain how to create buttons and how users will actually move through the wizard.

2. Create next and back buttons and add interatcion

Creating the buttons isn't that hard. Each button will have a unique name (e.g. step1next, or step3prev) and will be appended to their panels created in previous step. In order to add some interaction, and that is to enable moving between steps, we need to bind click event to each button. This is how they will work:

When user presses back button it will hide the current step, show the previous one and call selectStep() method which will mark it as current.
When user presses next button it will hide the current step, show the next one and call selectStep() method which will mark it as current.

function createPrevButton(i) {

    var stepName = "step" + i;

    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Back</a>");

    $("#" + stepName + "Prev").bind("click", function(e) {
        $("#" + stepName).hide();
        $("#step" + (i - 1)).show();
        selectStep(i - 1);
    });
}

function createNextButton(i) {
    var stepName = "step" + i;
    $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next ></a>");
    $("#" + stepName + "Next").bind("click", function(e) {
        $("#" + stepName).hide();
        $("#step" + (i + 1)).show();
        selectStep(i + 1);
    });
}

Function selectStep() that I mentioned before removes CSS class "current" from all steps and assign it only to the currently selected.

function selectStep(i) {
    $("#steps li").removeClass("current");
    $("#stepDesc" + i).addClass("current");
}

At this moment wizard is functional. But that's not all. Let's apply Steps left UI design pattern here.

3. Create "steps left" information

This is easier than it might look like at the first sight. At the very beginning of our code we have to add unordered list that will be a container for steps left information. In addition to this we will hide signup button. We want it to be visible only in the last step.

var steps = $("#SignupForm fieldset");
var count = steps.size();
           
$("#SaveAccount").hide();
$("#SignupForm").before("<ul id='steps'></ul>");

We also need to extend each() function and add information about steps for each fieldset in wrapped set. Each step will have it's natural number, starting with 1. Below the step number we'll add a description that is extracted from <legend> element.

steps.each(function(i) {
    var name = $(this).find("legend").html();
    $("#steps").append("<li id='stepDesc" + i + "'>Step " + (i + 1) + "<span>" + name + "</span></li>");
    ...
});

Let's do just one more thing. Since submit button should be visible only in the last step, we'll hide it every time user presses next. Only if user comes to the last step, it should be visible.

$("#" + stepName + "Prev").bind("click", function(e) {
    $("#SaveAccount").hide();
});

$("#" + stepName + "Next").bind("click", function(e) {
    if (i + 2 == count)
        $("#SaveAccount").show();
});

If you want to see the full source code, download it or check out the demo.

Plugin for easier use

It would be a pity not to create a plugin that will enable all of this in just one line of code. I called it FormToWizard. I guess it's clear what it does :) In order to apply the plugin you will have to add a reference to script file and apply it to y <form> element.

<script type="text/javascript" src="formToWizard.js"></script>

$("#SignupForm").formToWizard();

If you want to hide a submit button (or placeholder for multiple buttons) you can add a parameter sumbitButton with the name of element you wish to be hidden.

$("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })

Lightweight and Cross Browser compatible

This plugin has only 2,3KB and with compression it can be even smaller. It is compatible with all major browsers: FireFox, Google Chrome, Safari, Opera, Internet Explorer 8, 7 and 6. The latter is collateral, I was surprised it actually works there :)

If you, however, find any bug or have some suggestion on how to improve this or extend it, please share!

Tips for writing an effective tutorial

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Tue, 22 Sep 2009 21:21:00 +0100

Writing a development tutorial requires a few more considerations in comparing to writing a regular article. Readers would have to follow the steps, read code, view demos or examine a picture explaining some feature. Here are several tips that might help you write more efficient tutorials.

I won't explain here how important it is to choose the right subject, good title and other things that you can read in many other articles about writing for the web. I will focus on things that are specific for tutorials. Alhtough some of these tips can be applied to any type of article, they are even more significant in tutorials. For more general guidelines on how to write for the web, especially from usability perspective, I recommend you read Writing for the Web series of articles.

1. Make it short but to the point

Let's be honest, a very few readers will read the entire tutorial. As with any content on Web they will scan the content instead of reading it. Only if they find an interest in what you are showing they will read. Avoid long paragraphs and series of paragraphs without code snippets or images. Also avoid describing each tiny thing user should do, but rather show the key points in the path to tutorial completion. However, you shouldn't omit anything important. For example, it is important to explain how an element will be animated with jQuery, but it is completely unnecesary to explain and show each line of HTML structure or CSS code used in tutorial.

2. Explain each task shortly

You should be able to explan each task in a few simple sentences. Einstein said "If you can't explain it simply, you don't understand it well enough". Imagine what would readers think of your knowledge of the subject and how they would understand it. If you make it too long, go back and rewrite it.

3. Break it into logical steps

This will help users read and follow a tutorial more easily, and get back to a specific step if they need to. Each step should contain several tasks after which reader will be able to actually see some result.

Build Internet tutorials are easy to follow. Each tutorial is divided into logical steps and each step is easy to understand.

4. Include code but don't over do it

If you have code to show, do it but don't paste the entire demo in the tutorial. No one will be interested in reading couple of screens of markup. Show only key snippets. You should, for example, show just a few fields of a large web form to enable readers to get the big picture of what you are showing. Readers who are interested in the full code will check out the demo or download source code. Which bring us to the next tip.

5. Provide a demo

Always try to provide a demo. I tested several of my previous tutorials and tests showed that nearly 70% of all readers view the demo. Many of them (63%) view demo first and if they like what they see they read the tutorial. Don't forget to add a link to the tutorial on all demo pages so that readers can easily go back.

The screenshot above is taken from one of the tests I mentioned. The link hidden behind clicks is a link to the demo page and it shows how important it is to include a demo in a tutorial.

6. Visualize the most complex tasks

You can also provide images explaining the most complex taks or steps. When readers see a demo they will understand how it works, but they will understand how it is made only if they read the demo or see the image explaining the process of creation. Such images also help readers visualize some steps or the entire tutorial.

In one of my previous tutorials, Create Vimeo-like top navigation I provided two images that help users visualize the most complex tasks.

In his latest tutorial How to Add a Fixed Position Banner to a Website, Steven Snell uses images effectively. He provides several live examples of the feature he decomposed.

7. Always provide source code

Some readers will like to have the code from the tutorial offline. This way they can examine the code even if they are not able to access your tutorial for whatever reason. You should compress your files and give a meaningful name to the compressed file. Same applies to all other files. You should also add a link to the tutorial in your demo pages so that reader can easily go back if necessary.

8. Have download and demo links in prominent position

This is one of the most important aspects in web dev tutorials. As I mentioned before, a lot of users will take a look at the demo first and that's why it is important to place a link to the demo at the top of the article and make it prominent. The usual position is below a short introduction and/or image but before the first step in the tutorial. I also tested three different versions of the same tutorial.

Tutorial with a prominent link to demo page at the top of the tutorial
Tutorial with a plain link to demo page at the top of the tutorial
Tutorial with a link to demo page placed at the end of the tutorial

The results I mentioned in tip #5 refer to the first version. Other two had significantly lower number of users that viewed the demo, which is somewhat expected.

The exception is the case when you have more than one demo; in which case, you should place links to each demo just below the heading of a section describing it.

3 Easy and Fast CSS Techniques for Faux Image Cropping tutorial on CSS Globe has three demos.

9. Join the discussion

Once you publish a tutorial your job is not done. Readers will have different opinions about your work. They might criticize the way you created something or they might have some suggestions and improvements. Answer those comments. By joining the discussion you will send your readers a message that you care about their opinion and that your tutorials are really there to help.

You will also learn more and be able to see a specific problem from different angles. After all, you started it all by posting the tutorial ;)

10. Update the tutorial if needed

If you made a mistake or if someone comes up with an improvement, you should update your tutorial. It will give satisfaction to readers that noticed issues and also give motivations for others to actually read your tutorials and comment on them. Not necessarily, but you can also give credits to people who spotted issues.

Marco updated his tutorial A fancy Apple.com-style search suggestion with PHP4 version of the code provided by one of his readers

Your tips?

Would you add/change anything? What annoys you the most when you read tutorials? What do you like the most?

Sixpack status - free icon pack

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Thu, 17 Sep 2009 14:10:00 +0100

Sixpack status is a small set of high quality icons which can be used for status messages. It is completely free for personal and commercial use. Icons are available in four sizes, 32x32, 64x64, 128x128 and 256x256px. They are also available in vector (SVG) format, which can be edited using applications such as Inkscape (they are actually made in Inkscape).

Motivation for creating this icon set is simple. I needed six uniform icons with specific light effect for status messages. Other, similar icons just didn't fit!

Please don't use direct download link if you refer to these icons but rather link back to this article. Reselling or redistributing is not allowed.

Download PNG icons Download vector icons (SVG)

Enjoy!

Animate validation feedback using jQuery

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Wed, 16 Sep 2009 09:46:00 +0100

Yesterday, I came across Jumpchart.com and while I was checking out their website one thing catched my eye: validation feedback was animated! In this tutorial I will explain how to create this nice little trick.

Download source code View demo

The trick is very simple: after user presses signup button, validation occurs and all fields that are invalid get shaken a little bit. They have very simple web form as example below shows. I won't explain the web form structure and styling here, but will rather focus on animation effect.

<ul>
    <li class="first">
        <h3>Your Name</h3>
        <p>
            <input type="text" value="First and Last name" id="name" name="name" /></p>
    </li>
    <li>
        <h3>Email</h3>
        <p>
            <input type="text" value="my@email.com" name="email"  /></p>
    </li>
    <li>
        <h3>Password</h3>
        <p>
            <input type="password" name="passwd" /></p>
    </li>
    <li>
        <h3>Password confirmation</h3>
        <p>
            <input type="password" name="passwd_conf"  /></p>
    </li>
    <li>
        <h3>User name</h3>
        <p>
            <input type="text" value="MyUserName" id="userName" name="user_name"  /></p>
    </li>
</ul>

This is how this demo works: when user presses signup button, jQuery will get all empty input fields. If there is at least one empty input field, an animation will be applied to field(s).

$("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
        emptyfields.each(function() {
            // animation goes here
        });
    }
});

Let's see how to create simple animation. We want to move each field 10px to the left, then 10px to the right, repeat this one more time and set them back to their original positions. Example on Jumpchart even randomizes animations, but I will keep it simple here.

$("#signup").click(function() {
    var emptyfields = $("input[value=]");
    if (emptyfields.size() > 0) {
        emptyfields.each(function() {
            $(this).stop()
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "-10px" }, 100).animate({ left: "10px" }, 100)
                .animate({ left: "0px" }, 100)
                .addClass("required");
        });
    }
});

Signup on Jumpchart has one usability issue, though. After short animation user looses validation feedback. That is why we will add CSS class "required" to invalid fields that will change their borders to red. This is all you need.

Please keep in mind that this animation can't be substitution for static validation feedback. Each invalid input field should be clearly marked once validation fail. This only adds nice effect that helps catch the user's attention. It's the same as difference between saying "I am here" and "Hey, I'm here!". You can read more about validation in Web Form Validation: Best Practices and Tutorials article.

Do you have some nice and original example of validation feedback?

Couple of issues with dates on web

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Mon, 07 Sep 2009 14:00:00 +0100

It's surprising that many websites display dates in formats that can be very confusing to users. Take this date for an example: 11/04/09 - is this April 11th, or November 4th? Format MM/DD/YYY is common for USA, but most of the Europe use DD/MM/YYYY. In Japan it's YY/MM/DD. They would be very confused with such date. Is it April 2011 already?

You should make dates understandable for all cultures and you can do it if you make it obvious. You should use month names (localized if there is a need for that) and 4 numbers for year. So, our example from the beginning can look like this: 11 April 2009 (or April 11th 2009). This looks better.

Designm.ag shows date in a proper format

Another common issue is showing only day and month information without a year. This is especially common for large calendars on blogs. You can often see "15 Aug" in a calendar. In cases like this it is hard for users to determine if the reading is relevant for them. This applies especially to novice users who are not familiar with the topic. It would be good to show full date in order to enable them to quickly determine if reading is outdated or should they find some more up-to-date reading for particular area.

Calendar on UsabilityPost shows date in a proper format

Althought this looks obvious, many blogs and websites display dates in confusing or incomplete formats. Does this bothers you as well?

Automatically generate table of contents using jQuery

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Thu, 20 Aug 2009 08:00:00 +0100

Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code.

Extract information from HTML

I will start with the basic example - where we just want to get title and subtitles and show them before the article itself.

<div id="toc"></div>
    <div id="content">
    <h1>Title goes her</h1>
    <h2>Subtitle goes here</h2>
    <p>Text goes here...</p>
</div>

Div element with "toc" id will be a container for TOC links (this can be also added dynamically but for this example, we'll keep it in static structure). The actual article is placed in div element with id "content". Check out demo 1 for full lorem ipsum article. Now let's create TOC. First we'll append a paragraph inside "toc" container with text "In this article". You might have seen this in some blog posts around. Next, we'll find all H1, H2 and H3 elements and assign unique id (for this page) to each one of them. This will make them easily accessible on click. At the end, we'll append a link for each heading.

$("#toc").append('<p>In this article:</p>')
$("h1, h2, h3").each(function(i) {
    var current = $(this);
    current.attr("id", "title" + i);
    $("#toc").append("<a id='link" + i + "' href='#title" +
        i + "' title='" + current.attr("tagName") + "'>" + 
        current.html() + "</a>");
});

The output of this code looks like this:

<div id="toc">
<p>In this article:</p>
<a id="link0" title="H1" href="#title0">Article title</a>
<a id="link1" title="H2" href="#title1">Header Level 2</a>
<a id="link2" title="H3" href="#title2">Header Level 3</a>
<a id="link3" title="H3" href="#title3">Header level 3 again</a>
<a id="link4" title="H3" href="#title4">Header level 3 once again</a>
</div>

And headings will have id's like in the example below:

<h1 id="title0">Article title</h1>

View demo 1

Fixing TOC position

In order to fix the position of TOC we have to do two things. First one is to wrap TOC and content into a div and center it on the screen (you can place TOC anywhere you like, but in this example we'll fix it to the left of the content).

<div id="container">
    <div id="toc"></div>
    <div id="content">
        <h1>Title goes her</h1>
        <h2>Subtitle goes here</h2>
        <p>Text goes here...</p>
    </div>
</div>

Next, set #toc to float left with fixed position and #content to float right.

#container { width:960px; overflow:hidden; margin:0px auto; position:relative;}
#content { width:660px; float:right;}
#toc { width:200px; position:fixed; float:left;}
#toc a { display:block; color:#0094FF;}

This will ensure that TOC remains on the screen on a fixed position while scrolling.

View demo 2

Scaled Table of Contents

The idea is to get positions of all headings and scale them vertically on a page. This can give users the idea of how long sections are.

View demo 3

We would have to modify the script from previous demo:

$("h1, h2, h3").each(function(i) {
    var current = $(this);
    current.attr("id", "title" + i);
    
    var pos = current.position().top / $("#content").height() * $(window).height();
    $("#toc").append("<a id='link" + i + "' href='#title" + i +
    "' title='" + current.attr("tagName") + "'>" +
    current.html() + "</a>");
    
    $("#link" + i).css("top", pos);
});

This code determines the position of each heading (current.position().top) and scale it to fit in the window. After appending HTML anchor, a new position is assigned via CSS. Finally, we have to position HTML anchors absolutely. Also, each heading type has different font size. The CSS in demo 3 looks like this:

#toc { width:200px; position:fixed; float:left; position:fixed;
    top:0px; background:transparent url(bkg.png) right; height:100%;}
#toc a { display:block; position:absolute; width:190px; text-align:right;
    background:transparent url(chapter_bullet.png) no-repeat right;
    color:#0094FF;  padding-right:10px;}
#toc a[title=H1] { font-size:18px;}
#toc a[title=H2] { font-size:14px;}
#toc a[title=H3] { font-size:10px;}

This is an interesting concept and would be even more interesting if the area between headings won't be empty. Instead, it can show scaled preview of each paragraph. But this is a topic for other tutorial. What do you think?

AllBusinessCards.com giveaway winners

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Wed, 19 Aug 2009 23:59:00 +0100

Two days ago AllBusinessCards.com decided to give away 1000 business cards to 3 lucky winners of JankoAtWarpSpeed. After 75 comments I am happy to announce 3 winners of this amazing giveaway.

The winners are:

German Piñeros
Yelena Dobric
Nicolas Pascual

Here is the screenshot taken from random.org.

Congratulations to the winners ans a lot of thanks to AllBusinessCards.com for this fantastic giveway.

1000 business cards giveaway from AllBusinessCards.com

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Mon, 17 Aug 2009 21:03:00 +0100

Our friends from Allbusinesscards.com is giving away 1000 professional business cards to each of 3 lucky readers of JankoAtWarpSpeed. The cards could be single or double sided, printed on thick 16pt card stock, and have a Glossy UV finish or a Silk Matte Finish.

How to participate?

To participate, just leave the comment at the end of this post. Winners will be automatically determined using the random list generator and will be contacted via email, so please provide real email address. The giveaway ends on Wednesday, August 19th 2009, the end of the day (CET). Comments will be closed after this period.

Please note that shipping is free for US residents only.

Good luck!

Does twitter need another redesign?

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Mon, 10 Aug 2009 22:19:00 +0100

There are a lot of discussions going on lately about the redesign of twitter home page. Some people like the design, some criticize it. My overall opinion is that it doesn't tell enough what twitter actually is. I love twitter. This home page isn't twitter.

There are several things I noticed instantly:

A - As regular twitter user, I don't think this is an adequate tag line. At least I wouldn't connect this tag line to the activities I perform each day on twitter. For instance, if I want to see what's happening right now in the world I will check out some news site.

B - This large search box has too much emphasis and suggests that this site is some kind of search service, which twitter isn't (as far as I can see).

C - This confused me at first. I guessed these are popular tags, but wasn't sure about it until I saw the burried heading "popular topics by the minute, day and week". The icons were not helpful at all. Besides this, there is a question mark that reveals a description about these topics. Having help for this area implies that you didn't provide a clear way to show off information. Also, in my opinion, what's popular this minute is irrelevant.

D - "Sign in" is often mistaken for "Sign up". I think "Log in" would be better for this link.

E - I like to see benefits of signing up to a service. Imagine you are a new user, coming first time to this page. Why would you signup? To search? To read about some topics? I am afraid it's not good enough.

These are just a few of possible usability issues with new twitter home page. But what I really want to know is what do you think about it? Would you change anything?

What would you do if you weren't in development/design job?

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Thu, 06 Aug 2009 23:00:00 +0100

I am sure we all sometimes ask ourselves this question, usually when we're tired of our work and everyday things. I constantly question my work and goals. As developer, designer and solutions architect it's really hard for me keep up with all the work. Sometimes I just wish I became a painter or cook.

I like to paint, I have been painting since I was 12. And the older I get, the more I realize it's a pitty I did't take that path. But it's never too late. What would I do in my retirement anyway? Creating diagrams through UML? No way!

I also like to cook. I know I will never be as good as my wife, but I love to do that. It's also creative with endless possibilities. By the way, are there any crazy meals that you would recommend me to try?

Let's hear your thoughts! What would you do if you weren't in development/design job (well, IT in general)?

Reinventing a Drop Down with CSS and jQuery

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Tue, 28 Jul 2009 08:00:00 +0100

For me, standard HTML Select element is pretty much annoying. It's ugly. It can't be styled properly in Internet Explorer. And it can't contain nothing but simple text. That is the reason why I needed to reinvent Drop Down element. This tutorial shows how to do that (easily, believe it or not).

View demo Download source code

There is an update at the end of this tutorial and the second demo that shows the results of this updated code.

Simple structure

Let me explain HTML structure that will be used here. In this example we will use a short list of 8 countries. List is created using Definition List (DL) element. Why this element? It is similar to unordered/ordered list - the only difference is that DL consists of two elements: DT (term) and DD (definition). This makes it perfect candidate for Drop Down element. Element DT can be used to show collapsed state with currently selected option while DD can show all the available options in nested UL. Here is the sample structure:

<dl class="dropdown">
    <dt><a href="#"><span>Please select the country</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">Brazil</a></li>
            <li><a href="#">France</a></li>
            <li><a href="#">Germany</a></li>
            <li><a href="#">India</a></li>
            <li><a href="#">Japan</a></li>
            <li><a href="#">Serbia</a></li>
            <li><a href="#">United Kingdom</a></li>
            <li><a href="#">United States</a></li>
        </ul>
    </dd>
</dl>

In order to make Drop Down functional we have to add several important CSS styles. First of all we have to reset margins and paddings for DD, DT and UL. DD will be positioned relatively, so that nested UL can be absolutely positioned. As I mentioned earlier, in collapsed state, only DT will be visible. It contains link with span inside it and two elements make sliding doors, a technique that is often used for creating buttons and tabs. Styling UL is simple, it will be positioned 2px below DT and initially hidden.

/* General dropdown styles */       
.dropdown dd, .dropdown dt, .dropdown ul { margin:0px; padding:0px; }
.dropdown dd { position:relative; }
/* DT styles for sliding doors */
.dropdown dt a {background:#e4dfcb url(arrow.png) no-repeat scroll right center;
    display:block; padding-right:20px; border:1px solid #d4ca9a; width:150px;}
.dropdown dt a span {cursor:pointer; display:block; padding:5px;}
/* UL styles */
.dropdown dd ul { background:#e4dfcb none repeat scroll 0 0; display:none;
    list-style:none; padding:5px 0px; position:absolute; 
    left:0px; top:2px; width:auto; min-width:170px;}
.dropdown span.value { display:none;}
.dropdown dd ul li a { padding:5px; display:block;}

After adding some colors, borders and hover effects (check out source code on demo page), the result so far will be something that really looks like Drop Down.

Let's make it work

It's time to involve jQuery. Each click on DT (actually link inside DT) will toggle nested UL.

$(".dropdown dt a").click(function() {
    $(".dropdown dd ul").toggle();
});

This was the simplest part. Now let's simulate other features of Select element. When you choose an option from the list (UL) it become selected option and is shown inside the link in DT. The function below replaces the HTML of currently selected item with the inner HTML of clicked link. At the end, it hides nested UL.

$(".dropdown dd ul li a").click(function() {
    var text = $(this).html();
    $(".dropdown dt a span").html(text);
    $(".dropdown dd ul").hide();
});

This looks more like Drop Down, but there are still some things that need to be done. First, once you reveal nested UL by clicking on Drop Down it remains visible. And that's a bug. Although there can be better solutions, I've came up with this one:

$(document).bind('click', function(e) {
    var $clicked = $(e.target);
    if (! $clicked.parents().hasClass("dropdown"))
        $(".dropdown dd ul").hide();
});

The function above checks each click on a page and if click occurred on some elements outside the dropdown it hides nested UL. Now this looks like regular Select element.

What about selected value?

Although it looks fine it will surely become a headache for developers. Select element has "value" attribute where you can store some data then needs to be sent to the server. This attribute is usually populated by ID's of records stored in the database. In our example with list of countries, it is more likely that some country ID will be needed for any serious processing on the server. So how to store these values and how to get selected one?

Let's modify HTML structure from the beginning of this tutorial and add <span> element inside links in UL. Each <span> have class "value" and real value inside it.

<dl class="dropdown">
    <dt><a href="#"><span>Please select the country</span></a></dt>
    <dd>
        <ul>
            <li><a href="#">Brazil<span class="value">BR</span></a></li>
            <li><a href="#">France<span class="value">FR</span></a></li>
            <li><a href="#">Germany<span class="value">DE</span></a></li>
            <li><a href="#">India<span class="value">IN</span></a></li>
            <li><a href="#">Japan<span class="value">JP</span></a></li>
            <li><a href="#">Serbia<span class="value">CS</span></a></li>
            <li><a href="#">United Kingdom<span class="value">UK</span></a></li>
            <li><a href="#">United States<span class="value">US</span></a></li>
        </ul>
    </dd>
</dl>

It would be strange to have codes next to country names in the list, so let's hide these spans.

.dropdown span.value { display:none;}

And that is the only change we'll need to make in order to make this Drop Down fully functional. Take one more look at click handler for links in UL - it replaces inner HTML of link in DT with inner HTML of clicked link. This means tha tlink in DT element will have <span> with value included.

var text = $(this).html();
$(".dropdown dt a span").html(text);

It's easy now to get selected value from our Drop Down. You can create a function like the one below to extract selected value. As the matter of fact, the very same function extracts selected value in the demo and shows this value under the Drop Down.

function getSelectedValue(id) {
    return $("#" + id).find("dt a span.value").html();
}

The code works in all major browsers: Firefox, Safari, Google Chrome, Opera(9.64), Internet Explorer 7 and 8. It works even in IE6, althoug it needs some polishing :)

Update (29.07.2009): Creating DropDown from SELECT

Since many of you pointed out the issue with accessiblity (and I agree with that) I made another example that creates DropDown dynamically from SELECT element and binds click event to it. It still doesn't have up/down key navigation, though.

Instead of having hard-coded DL, we will have SELECT element with all the items here:

<select id="source">
    <option selected="selected" value="BR">Brasil</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
    <option value="IN">India</option>
    <option value="JP">Japan</option>
    <option value="RS">Serbia</option>
    <option value="UK">United Kingdom</option>
    <option value="US">United States</option>
</select>

We will then use jQuery to dynamically create list from SELECT:

function createDropDown(){
    var source = $("#source");
    var selected = source.find("option[selected]");  // get selected <option>
    var options = $("option", source);  // get all <option> elements
    // create <dl> and <dt> with selected value inside it
    $("body").append('<dl id="target" class="dropdown"></dl>')
    $("#target").append('<dt><a href="#">' + selected.text() + 
        '<span class="value">' + selected.val() + 
        '</span></a></dt>')
    $("#target").append('<dd><ul></ul></dd>')
    // iterate through all the <option> elements and create UL
    options.each(function(){
        $("#target dd ul").append('<li><a href="#">' + 
            $(this).text() + '<span class="value">' + 
            $(this).val() + '</span></a></li>');
    });
}

Let me briefly explain the code here (you can check the entire source code in the second demo). It first reads all the <option> elements and selected <option> element as well. Next, it creates DL and DT with selected item inside it. After DL is being created, the code iterates throug <option> collection and create UL with list items inside it.

In order to fully bind this DropDown to SELECT element we need to refresh SELECT each time new selection is made in DropDown. We have to modify click event handler for links in UL. It will get the selected item from the DL and assign a value from <span> to SELECT element.

$(".dropdown dd ul li a").click(function() {
    var text = $(this).html();
    $(".dropdown dt a").html(text);
    $(".dropdown dd ul").hide();
    var source = $("#source");
    source.val($(this).find("span.value").html())
});

That should fix the issue. Thanks everyone for pointing out this.

View SECOND demo

Wasn't that simple?

I think that reinvention of Drop Down wasn't that hard, although it might seems as is it. There are several features that need to be implemented in order to have a credible simulation, but each one of those is simple and straightforward. Have you ever had a need for reinventing Drop Down? What are your experiences? In any case, let me know your thoughts!

Fanurio giveaway winners

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Tue, 28 Jul 2009 00:01:00 +0100

Last week, people from Fanurio decided to give away three licenses for Fanurio Time Tracking software. Seems as if many of you were interested in this great piece of software, and after checking out trial version I can say that it is worth buying.

There were 69 comments on the contest and I am pleased to announce three lucky winners:

Mayank Raichura
Nikola Plejic
Hamid Jooon

Here is a screenshot taken from random.org:

Congrats to all the winners, I hope Fanurio will make your freelancing easier. I would like to take this opportunity to thank to people over at Fanurio for offering a valuable price.

Win a free license for Fanurio, software for freelancers

this.nospam@nospam.jankoatwarpspeed.com (Janko) — Fri, 24 Jul 2009 08:00:00 +0100

I am aware of the fact that many freelancers struggle with effective time tracking and billing. Therefore, I am happy to give three licenses of Fanurio Time Tracking software to my readers! Since many of you are freelancers I am sure you fill find this software useful.

Important info: This contest is closed.

What is Fanurio?

Fanurio is a software application that helps freelancers to track time and manage invoices. Time tracking is very simple with manual and smart timers. Fanurio helps you track taxes, invoices and payments. Reports are very detailed and can help you analyze your performance. For detailed information about all the features, check out Fanurio Features Overview page.

How can you participate

To participate, just leave the comment at the end of this post. Winners will be automatically determined using the random list generator and will be contacted via email, so please provide real email address. The giveaway ends on Monday July 27th 2009, the end of the day (CET). Comments will be closed after this period.

Everyone can participate because Fanurio works on multiple platforms! Good luck!