Archive for the ‘User Experience’ Category

JQuery Plugin: Simple Textbox Watermark

In a previous post, I’ve written about creating a simple JQuery watermark. The code I wrote in that post is simple, and breaks down how a watermark really works. I expanded on that simplicity with this plugin, but not too far. Most watermark plugins I’ve seen are overly complex, attempting to account for all usage scenarios, when a majority of people only need to handle a small subset of those scenarios. So, I built a light plugin (under 1.3KB) that handles those basic scenarios well and implements easily. Here’s how it works:

Here’s how to implement it:

  1. Add in the most recent version of JQuery and the plugin code.
  2. In a document ready function, bind the plugin to any inputs and textareas you want with a single line of JQuery.
  3. Add the watermark text you want into the title property of the appropriate inputs and textareas.
  4. Apply any CSS you want to style your watermark text (suggested), and that’s it!
  5. Dependent on your usage scenario, call the function to clear out the watermarks before submitting the form.

The javascript:

$(document).ready(function(){
     $('.watermark').watermark();
});

The plugin applies a class of ‘marked’ to inputs and textareas when the watermark is active:

input.watermark, textarea.watermark { color: #000; }
input.marked, textarea.marked { color: #999; }

You’ve got to include your title property and the watermark class for the plugin to bind to the form item:

<input type="text" title="WATERMARK_TEXT class="watermark" />
<input type="text" title="WATERMARK TEXT" class="watermark" val="PREPOPULATED_VALUE" />
<input type="password" title="WATERMARK_TEXT" class="watermark" />
<input type="email" title="WATERMARK_TEXT" class="watermark" />
<textarea title="WATERMARK_TEXT" class="watermark"></textarea>

Here’s the javascript function to call if you want to clear out the watermarks before a form submission (just make sure to use the same JQuery targeting you used to bind the plugin to your form elements so you don’t miss anything):

$('.watermark').watermark('clearWatermarks');

It is as simple as that. Did I sell you on it? If so, download the plugin and enjoy! Here are links to both the unminimified and minified versions.

Download Full (1.66KB)Download Minified (1.26KB)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

If you have any questions or comments on the plugin, please share. I may release more versions if there are specific feature requests that can be implemented without using a heavy amount of code. I want to keep this light, so if you want really advanced features, then this isn’t the plugin for you. But who knows, maybe I’ll write a more advanced one later…

JQuery Plugin: Hide And Show “N” List Items

My previous post was on using JQuery to hide and show part of a list. The javascript was simple and clean, but it was also a little hacky, because it required a hard-coded height to collapse your lists to. I felt it would be a little more appropriate to go further in depth and actually take a parameter for the number of list items you want to show by default. Notice in my sidebar, I automatically hide list items in my categories and popular post lists. I used the first version with a hard-coded height, to handle those. Here’s a really simple plugin that takes an optional number of list items to show, on page load, collapses lists to that number, and appends a link to toggle the list display.

Here’s an example of how it looks after you’ve applied it to multiple lists. You can apply it to both ordered and unordered lists. You can apply a different collapse number to individual lists, or the same number to them all. You can also change the text of the toggle link. As you can see below, there are two completely different implementations, using default settings on the left, and custom settings on the right.

  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7
  • item number 1
  • item number 2
  • item number 3
  • item number 4
  • item number 5
  • item number 6
  • item number 7

To implement the JQuery plugin, just bind the collapseList function to any ordered or unordered list. To stick with the default settings, use the first line of code in a document ready function. To customize the collapse number, and the toggle link text, use the second example.

$('ul.collapse').collapseList();
$('ul.collapse').collapseList({
	'collapseNum' : 4,
	'moreLinkText' : 'custom show text',
	'lessLinkText' : 'custom hide text'
});

Now to the goodies. Download the plugin! Here are links to both the unminimified and minified versions.

Download Full (1.39KB)Download Minified (790B)

This plugin has been tested in the following browsers:

Chrome Firefox Internet Explorer Safari Opera

I’m thinking a more robust version 2 could be in the works, but I don’t know what kind of customization would be needed. There are a lot of possibilities, and I’m just trying to decide what would help more. Feel free to put in requests so I can start working on putting something out.

Mobile Friendly Design

To make a successful website, user experience is vital, otherwise users feel alienated. By offering what users need, without getting in their way, they’ll be much more likely to return – a key metric in determining website usability. As technology advances at an ever increasing rate, the internet must adapt to that technology (and visa versa). Depending on what type of website you are working on, you should expect anywhere between 5 and 25 percent of your traffic to access it on a mobile platform. It is important to keep in mind what “mobile” is typically used to describe. Tablets are lumped into the mobile category, which I personally think is a mistake. Tablets have one thing in common with phones – they use touch. However, the more important factor in my opinion is screen size. The difficulty that arises in using a fully functional, non-mobile website on a small screen is accuracy. It is difficult to accurately enter fields (like email addresses or passwords) and just as hard to click on incredibly small links. For this reason, it is vital to put effort into a mobile friendly website (mostly for phones, but a little for tablets).

There are some easy steps you can use to do this, and here are a few to put you on track:

1. Add in the appropriate meta tag. It is helpful to tell devices how to render your website. Start with a viewport tag to tell a mobile device how to orient a page when it’s loaded. It also determines if a page can be scaled larger or smaller and if it should rotate as the user rotates their mobile device.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

2. Make bookmark branding work to your advantage. If you want users to be able to add bookmarks to your website on their iOS device homescreens, you need to make yet another favicon. Remember the favicon? The favicon handles what browsers show in their address bar and bookmarks folder. Then, there is the alternative webclip icon, which Apple uses when someone bookmarks a website on their homescreen. The default if you don’t define the image is a screenshot, which is never a good idea. The solution? Make a 129×129 pixel image that you want to represent your website. Think of it as a larger favicon. You can tell iOS devices to use your webclip icon in two ways. One, name your image apple-touch-icon.png (exactly) and put it in your root folder. Or two, tell the devices where to find the image if you aren’t going to put it in your root with the following two link tags:

<link rel="apple-touch-icon" href="FILE LOCATION" />
<link rel="apple-touch-icon-precomposed" href="FILE LOCATION" />

3. Think about file sizes. When using mobile devices, often times people are mobile, making their internet connections slower and potentially spotty. Don’t make it hard for them to load your site with excessive HTML, Javascript, and CSS. But even more importantly, do whatever you can to shrink any images you want to load, and use them sparingly when you can. Code your site intelligently with multiple classes to keep your CSS and HTML clean. Compress your images before you upload them using one of many online or downloadable tools. Don’t include Javascript just for the hell of it, only include it if it will significantly improve your user experience.

4. Consider the difference between hover and click. This is an important one. A lot of usability principles hinge on the feedback you provide to users for their actions. One of the most common feedback techniques used is the hover effect. However, the hover effect doesn’t exist on touch devices (almost all mobile devices nowadays). So, you need to compensate in your design. Where previously, a link may have been fine without an underline because it had a hover effect indicating it was a link, you may want to employ underlines in an effort to be a little clearer for mobile devices.

5. Most importantly, decide between a completely separate mobile website and different style rules. This is the biggest decision you’ll have to make. You have two choices, make a totally separate website (m.example.com versus example.com), or apply a different set of style rules when accessing the website on a mobile device. For large websites that have a lot of functionality, I’d suggest the separate website because most likely they’ll have to cut out certain functionality that is more difficult to use on a small screen. However, for smaller and more simple websites, you should strongly consider just applying simpler styling rules. This option is the one I’ll talk a little bit more about for now.

Start by coding your website intelligently (as I mentioned in point 3). Think about how your want your page layout to be for both desktop viewing and small screen viewing. Using that knowledge, write your HTML so that your CSS can switch the design easily between each version. I assure you, this is a much easier task than it might sound if you know your HTML and CSS well. Take the CSS Zen Garden as proof of that concept. If you write your HTML well, then CSS can make completely different websites come to life. Then, apply the appropriate rules to your mobile version versus your standard version using one of two tactics. You can set the media parameter in your link tag in the head of your document like so:

<link rel="stylesheet" href="FILE LOCATION" type="text/css" media="only screen and (max-width: 480px)" />

Or, if you prefer only one CSS document, you can include all of your mobile only rules inside of the following HTML:

@media only screen and (max-width: 480px) { ALL CSS RULES GO IN HERE }


Either of these two options will trigger the CSS you add when the screen width gets below 480 pixels. If you are curious about how the iPhone 4 handles screen resolution in comparison to the older models, check out this interesting article which points out some more detailed icon information. This 480 pixel requirement could easily change when the iPhone 5 is released, and it certainly isn’t a catch all for all Android phones (such as the Galaxy Note), but it does a pretty good job. If you are curious, you can trigger the mobile version of my website by shrinking the width of your browser screen down to 480 pixels.

Hopefully, this information should set you up to make a relatively friendly mobile website. Of course, it isn’t full proof, so you should always test on as many devices as possible… but it is a start! Good luck.

Opting Out Of Advertising Cookies

The internet is a creepy place, if you haven’t noticed… The majority of people are oblivious to what really goes on behind the scenes. Companies buy and sell information about you more than you could imagine, and they spend a lot of money on it. One of the most common pieces of information about you is your browser history. Advertising companies set cookies in your browser when you visit certain websites, and then they use that information to target additional advertising toward you after you’ve left those sites. Let’s run through an example scenario.

You open up your browser to your homepage of Google and do a search for laptops. Google keeps track of this for their future advertising usage. You click on a link to Best Buy. Now you have another cookie indicating you went to that website to look at laptops. Then say you click on an ad while looking at laptops for a Wii. Now another advertising network knows you are interested in buying a Wii or other video gaming system. So with just a few pageviews, several ad networks know you want a laptop, video game system, wii, and that you were thinking about buying one at Best Buy.

Now, the next hour, the next day, the next week, the next month, you will see ads now targeting those exact things, Best Buy, Wii, laptops. Some people consider this a convenience and prefer that ad networks know these things about you. I however, along with many others, consider this an invasion of my privacy. I will do my own research, and I don’t need some cheap ad on the internet to tell me what to read and what to buy. That’s why I’ve opted out of advertising cookies. It is a legal requirement of advertising networks actually, which shows you how sleazy what they are doing really is. If you want to opt out of every advertising network out there, there is a fantastic non-profit resource available to you. Check out the Network Advertising Initiative to get rid of all those ad networks on your computer so they can leave you alone!

Safe browsing…

Server And Client Side: What’s the Difference?

It’s a pretty simple question if you know how the web works, but if you don’t, it is very complicated. To succeed working in the web world, you’ve got to have a firm grasp on the difference between server-side and client-side interactions. If you want the quick answer, here you go:

Server-Side: Server-side interactions require sending data to a server and the server sending data back to you, the client.

Client-Side: Client-side interactions don’t need a server, and data is exchanged or altered on your own computer browser without sending any information to a server.

Now if you need the longer explanation, you’ll first need a little background on how the internet works. The internet is just a mapping of connections between millions of computers around the world. When you type in a web address–such as http://www.google.com/–your computer knows that means go find the computer somewhere in the world that has the website for Google on it (I’m really simplifying things here if you can’t tell). The computer that has Google on it is called a "server". Servers aren’t typical computers. They don’t necessarily have any screens to view anything on, and for sites like Google, thousands of servers are collectively used to house the website.

So now that you understand the web (at least in a basic sense), we can start to learn about what server-side and client-side means with a more indepth explanation. So say you are on Google’s homepage. As a user (consumer) of Google, you can interact with their homepage in a multitude of ways. To understand each type of interaction, I’ll give an example using the Google homepage.

Client-Side: When you rollover a link in the navigation bar at the top and its display changes, you’ve just triggered the most basic client-side interaction, the pseudo class :hover in CSS. For a slightly more complex client-side interaction, by clicking on the "more" link in the navigation bar, a menu expands with more options. This is a very typical client-side interaction using simple javascript to hide and show something on your screen. In addition to CSS and Javascript being client-side languages, you should also include HTML, the basis of all displays in the web. Without HTML, the internet would be completely different from what we know it as today, and all three of those languages are interpreted on your own computer within your own browser, needing no interaction or data transfer from a server.

Server-Side: Now, after you’ve typed a search phrase into the search bar, when you click the "Search Google" button or click enter, you’ve now triggered a server-side interaction. Your computer doesn’t have the information it needs to conduct the search you are requesting, so it must send your search across a series of connections to a Google server somewhere in the world, that then sends back the results that it found for you. This is the basic concept behind server-side interactions. Typical server-side scripting languages include Perl, PHP, Java, and ASP.NET (I could keep going, but who is it really helping?). The key to identifying a server-side interaction is noting when your browser page reloads. Server-side interactions require reloading the browser window to show the results that were found. There is one exception to this rule.

A Combination Of Both: It is possible to conduct a server-side interaction without reloading the browser window. This requires a combination of both server-side and client-side interactions. Using a subset of Javascript called AJAX, we can send requests to a server, and then load those results into the client browser without a page reload. An example of this on the Google homepage is the suggested search phrases that change as you start typing. You type in a few characters, Google sends those characters to their server which then looks at frequent searches conducted by other people to make suggestions, and then sends them back and fills in the drop down menu for you to make a selection.

Now hopefully you’ve got a firm understanding of the difference between server and client side interactions and languages. If you’ve got any questions, don’t hesitate to ask.

Javascript: Creating a Text Watermark

Update: Read about the JQuery version of this text watermark or better yet, check out my lightweight JQuery plugin which handles inputs, textareas, and even passwords!

This post is in response to a request to see how to create a textbox watermark using only text instead of an image. In a previous post, I explained how to use an image for a textbox watermark. Textbox watermarks are fantastic tools you can use to improve the usability of a website, as they give the user guidance on what to enter into the textbox. If you don’t want to use an image as my other post describes, here is how to create a simple watermark using javascript. Before we begin though, see exactly what you are making:


So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function watermark(inputId,text){
  var inputBox = document.getElementById(inputId);
    if (inputBox.value.length > 0){
      if (inputBox.value == text)
        inputBox.value = '';
    }
    else
      inputBox.value = text;
}

This javascript function checks if the textbox text isn’t empty, and then determines whether to clear the text or not. It also will put the watermark text back in if the user deletes what they entered or doesn’t enter anything. The function needs to be called in both the onblur and onfocus events of the textbox, which is explained below.

Here is the HTML that goes with the JS:

<input id="inputTextboxId" type="text" value="type here" onfocus="watermark('inputTextboxId','type here');" onblur="watermark('inputTextboxId','type here');" />

That’s all you need! And if you have any questions, don’t hesitate to ask! A question on my image watermark post lead to this post, so you never know!

AJAX: Wait Here Just A Minute

The best thing about Ajax is you can get brand new content on a page without having to reload it. The worst thing about ajax is people aren’t entirely used to waiting for content if they don’t see a page reload. Well, there is a quick and easy solution for that problem: animated gifs! In the beginnings of the web, animated gifs were used to make flashing titles that somehow everyone thought were the bee’s knees. Now that those are thankfully out of fashion, we can use animated gifs as an indicator that the website is “thinking”. The average web user won’t understand what all this AJAX stuff is doing in the background, all they need is something to tell them to wait just a little bit. Here are a few examples that I created using an awesome AJAX loading gif generator:

Oooh, that’s pretty. But maybe something more simple?

I like the simplicity, but it is too circly. Fix it designer!

And here’s a bar that could be used to indicate more of a “progress” concept instead of a “loading” concept:

I can guarantee that you’ve seen these types of images all over the web, and now you know why. It is possible people will implement these animated gifs for other purposes, but mostly, you’ll just experience them because of AJAX. Now go have fun making your own!

AJAX: What The Heck Is It?

Ajax is the new web 2.0 fad, and it is probably here to stay for quite some time. AJAX, or Asynchronous Javascript and XML, is a method used to communicate with the server and load new content in a website without having to reload the page. You’ve probably seen it all over the web, but possibly without necessarily thinking about what it is. The minor difference makes a huge positive impact on users, and a pretty negative impact on page impressions.

So what type of things would AJAX come in handy for? Well a very common implementation is for search tools. Say you are on a site looking for houses and there are tons of criteria you can enter in to narrow down your search. It is really helpful to see how each change in your criteria affects your results. To offer constant feedback, web developers need to use AJAX to bring back search results each time you change criteria. If they didn’t use AJAX, you’d be staring at a page reload every time, and that’d be mindbogglingly annoying…

So now maybe you understand the benefits of AJAX. It makes for a much more fun and usable experience for users as they traverse your website. The serious downside is a decrease in your pageviews. Every time you make an AJAX call, you lose what would have been a new page load and thus a new pageview. With each pageview (if you know what’s good for you AND have a highly trafficked website), you gain ad income. Now you could argue that with the improved user experience, you’ll make up for the lost pageviews in your AJAX tool with more devoted users (an argument I agree with), but that doesn’t cut it for everyone.

So make the choice to go with AJAX. In an upcoming post, I’ll write about the basics of AJAX and how to implement it.
Cheerio!

Take a Stand: No More IE6!

It is time for the web design community to take a stand and stop supporting Microsoft Internet Explorer 6! That’s right, I said it, as many have said before me, and yet somehow, most web designers still cross-browser test in IE6. Well, guess what, I’ve stopped. Okay, not completely. With my freelance clients, I will probably still check IE6, because truthfully, many of my clients themselves still run IE6. However, at my fulltime job as the web designer we have officially stopped supporting IE6! So why did I push for this, and how are we handling it?

So, some quick stats on Microsoft Internet Explorer 6. IE6 was launched by Microsoft in 2001. Though it has had some minor updates since it’s initial launch, you know that doesn’t change anything, especially because some people out there are still using that first launched version! IE6 came standard on every Windows machine since then until IE7 was launched in 2006. Now last time I checked (aka when this post was written) it was late 2009. IE6 has been out of date since it’s inception, but has definitely been out of date since it was replaced by IE7 over 3 years ago. So how it is that still approximately 5% of internet users still use IE6? Well sadly, Microsoft does not require, or even really push users to update, especially in the olden days. I grabbed that 5% estimate off of Google Analytics for my own site, my fulltime employer’s website, and a few of my freelance clients. Though the percent is slowly falling, it will be around for a while I’m sure. So, based off of the small percentage, which is slowly falling, and the fact that cross-browser testing IE6 occupies at least 50% of my cross-browser testing time

The irony of it all is that even Microsoft is desperate for users to upgrade off of IE6 to IE7 or IE8. This of course begs the question, how stupid do you have to be to still run IE6!?! At least 90% of the display bugs I’m aware of are solely IE6 problems. Entire blog articles are devoted to listing bug fixes for IE6. Well, based off of all of those stats, our company finally let me move away from IE6. We put up a warning (only visible to IE6 users) that we don’t support IE6. We even included a link to download IE8, but somehow I don’t think that’s gonna do anything. I’m just glad to be done with it!

So if you know what’s good for you as a web designer, forget IE6! The more people that stop supporting it, the faster people will switch off of it, and the faster we’ll be rid of that evil browser that has trouble outputting today’s beautiful websites. Of course, if you are still making websites with red text on a blue background, maybe you should still be testing in IE6…

Javascript: Creating an Image Watermark

Well, this is my last javascript post for a bit, seeing as this is just an offshoot of my last post Javascript: Dynamically Altering CSS Properties. In this post, we’ll go over creating a simple Javascript watermark for a textbox using an image. If you are curious how to create a watermark with just text, read my other post on how to create a textbox text watermark. A textbox watermark can help encourage its use and reduce confusion for your users. I typically employ a watermark for textboxes that exist outside of a form (they only gather one piece of needed information such as a zip code as opposed to an entire address).

So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function hideWatermark(theID)
{
    var element = document.getElementById(theID);
    element.style.backgroundImage = 'none';
    element.style.backgroundColor = 'white';
}
function showWatermark(theID)
{
    var element = document.getElementById(theID);
    if (element.value.length == 0)
        element.style.backgroundImage = 'url(\'IMAGE_LOCATION_HERE\')';
    else
        element.style.backgroundColor = 'white';
}

On focus (when the user clicks on the textbox) the hideWatermark function is called. The javascript takes in a string of the textbox ID. It then sets the background image to none, and the background color to white. On blur (when the user clicks away from the textbox, putting focus on any other element), the showWatermark function is called. This javascript also takes in the same ID. It then checks to see if the content of the textbox is empty, if it is, it puts the background image of the watermark back in. If it is not empty, then it keeps the background color as white.

Here is the HTML that goes with the JS:

<input type="text" class="gatherZip" id="theTextBox" onblur="showWatermark('theTextBox')" onfocus="hideWatermark('theTextBox')" />

And the CSS:

.gatherZip{
   background: white url('IMAGE_LOCATION_HERE') no-repeat center center;
}

The image you create can say or imply whatever you want. As an estimate, try to keep the image no more than about 15 pixels high or it won’t fit in standard sized textboxes. And that’s it. A beautiful textbox watermark just for you and your users! Comments? Questions?