We all love a slick functionality fueled website, but are your users being given what they want, when they really want it?
Your homepage gives your user the opportunity to sign up to your newsletter with some nifty validation, check out your office location on a google map, interact with your content on a social level and look at your great photography in a carousel. This is awesome, but we know they can’t do all of these things simultaneously, right? When the user lands on your page, all they need to know is that they can do all these things – if they so wish.
Introducing the ‘facade’. Handling the starting state of your functionality with CSS, and then implementing initialisation ‘just in time’. As an example, if your newsletter sign-up form is half way down your page, and unlikely to be something your user is clamouring to fill in the second they arrive on your website, it’s highly likely that you don’t need your super awesome validation hovering in anticipation.
$(document).one('focusin','.newsletter input[type=text]', function(){
var $input = $(this),
$newsletter = $input.closest('.newsletter');
$newsletter.loadValidation();
});Deciding which event to use is always dependent on your content, but in this case it’s likely your user will click or touch the input field so they can add their email address to your sign-up form. ‘focusin’ is ideal for this scenario. Using ‘one’ ensures the validation functionality is only loaded in once, even if the user focuses out and then focuses back into your form.
And that’s it. Delegating your function to only run when the user really needs it to, enables you to focus on getting your website content to them as fast as possible, without unnecessary page loading delays. They don’t need to know that the form wasn’t quite ready to give them the user experience they were expecting – if you don’t tell them, I won’t!
