Anyway, I’ve been playing around with QR codes lately. Seeing what sort of information can be stored in them, if they’re a viable technology for the masses, and if they’re worth investing in. I thought I’d share my findings.

What is a QR code?

A QR code is much like a bar code, but they look a lot cooler and in theory can contain a lot more, and a wider variety of information. Everything from plain text to contact information and URLs. They’re actually very robust and there’s a ton of cool stuff we can do if they ever actually catch on and reach the public.

Most modern phones will have an available app for decoding QR codes. I’m not sure about Blackberry, but I know Android, iPhone and Palm all have free apps.

I put together a QR code generator based on the Google Charts API if you’d like to play around:

• View Demo

What can we use them for?

QR codes can be used for all sorts of things. Anytime you want to transfer data, a QR code can be used. I’m sure there are some limitations on the amount of data, but I haven’t encountered it yet. Many times a URL is embedded into the code and then the user is sent out to the Web for more information. This is basically a shortcut to help you get to the data without having to type in a URL (it’s actually a pretty big time saver).

One of the best use-cases for QR codes I’ve seen has been attaching them to a venue. For example: If, on the side of a building, you found a QR code you could decode it to find a calendar of events going on in that building, then choose which ones to add to your calendar, set reminders, etc. All by simply taking a picture of a QR code. Again, a bit time saver.

Since the QR code can basically be an extension of the Web, the possibilities are endless. The problem is… how will we let people know they exist? It’s not a problem in the Web community, but based on the speed most technologies like this are adopted, it could be a while.

Are they viable for the masses?

This is always a debate with a “geek technology”. We can use them, they’re very helpful at conferences for passing contact information from person to person or the location of presentation slides. But will everyone else use them? Probably not.

Don’t get me wrong, they’re a great technology with endless uses, but I’m not sure they’re going to catch on in the way we’d like. They’re pretty strange, and no one really knows what they are. They have a along road ahead, much like the way RSS quietly became popular. I think they’ll have the same fate in never really being a main stream technology, but stil very popular behind the scenes.

For some reason, these free technologies really struggle but the second Apple charges 99 cents, they take off like a rocket. Here’s hoping QR codes make the next Steve Jobs talk?

Are they worth investing in?

They are absolutely, 100% worth investing in. The upside of QR codes far outweighs the downside. The QR Code Generator I built took all of 2 hours to fully develop and launch. Most of that time was reading through the Google Charts documentation and testing out all the options.

I don’t see any reason we shouldn’t explore QR codes more, they have a very promising future and I look forward to see what we can make happen, especially when combined with RDFa, Microformats , and some of the new HTML 5 data embedding.

The upside

Everyone loves it, you’re a genius and you get piles of money handed to you on a daily basis for doing something innovative.

The downside

Most people many not get it, so they get the information the “old fashion way”. The worst-case scenario is that it totally fails and you wasted 2 hours. It’s very much like progressive enhancement for real-life.

• View Demo
• Plugin
• Minified Plugin

Version: 3.2 – Added a “className” option so you don’t have to use “.slider” as the wrapper

Version 3.1: Changed “children” to “find” so it will work with a UL. Thanks to Oro for the feedback

Version 3 of Sliding Labels brought some big changes, the largest being that I finally converted it into a working jQuery plugin.

Maybe it was the 200 e-mails requesting an official plugin, maybe it was my curiosity. Whatever it was, I heard everyone and I wanted to let you know that I’m listening to all the feature requests and bug reports; and I really do appreciate them.

Additions to version 3

Plugin status: Obviously creating an official plugin was the biggest change

Position: relative: It seemed like a lot of the questions I was getting had to do with adding position:relative to the .slider element in the CSS, so I just moved that into the script.

Animation speed: I added an option to easily control the animation speed. It can take strings like “fast” and “slow” or any numeric value.

Axis option: I got a lot of requests to add in some functionality to have the label slide up rather than only to the left. I added this in with an “axis” variable which can take either “x” or “y” for sliding direction

Subtractions to version 3

Label Color: Originally I had this in the script so it looked nicer inline to the field, but I got to thinking that this really should be defined in the CSS, and it’s just color; so I took it out.

Using the plugin

Just like the previous version, you need an element wrapping the <label> and <input> elements. I use a <div> in the demo, but you can use whatever you’d like. The only requirement is that it have the class name “slider”. I can change that if anyone finds it to be annoying, but let me know and I’ll update the script

HTML

<div class="form-slider">
<label for="user">User name</label>
<input type="text" id="user" name="user">
</div>

JavaScript

$(function(){

	$('#contactform').slidinglabels({

		/* these are all optional */
                className    : 'form-slider', // the class you're wrapping the label & input with -> default = slider
		topPosition  : '5px',  // how far down you want each label to start
		leftPosition : '5px',  // how far left you want each label to start
		axis         : 'x',    // can take 'x' or 'y' for slide direction
		speed        : 'fast'  // can take 'fast', 'slow', or a numeric value

	});

});

That’s all there is to it. Let me know what you think, any extra features you’d like and any bugs. I should be submitting this to jQuery.com in the next few days.

Obviously, I highly recommend all those these books, as they’ve had a pretty large impact on me as a designer & a developer. The best part about them is that they’re all pretty easy reads, they’re not the kind of books you have to spend a week or 2 reading.

Does anyone else have books like this? Or do we all just read blogs now?

I’m speaking at the upcoming Penn UI Conference July 21 & 22 in Philadelphia this year. It’s a great conference with a high profile history of speakers, so I was definitely honored to have been asked to contribute.

My talk will be on HTML 5, and loosely based on my Smashing Magazine article: HTML 5 and the Future of the Web. I’ll be up there for close to an hour and a half, so I’m hoping to cover a lot of the ins and outs of HTML 5.

Much like I did in the article, I’ll be talking about the new elements, APIs, use cases and probably touch on Mobile as well.

Official description

HTML 5 and the future of the Web will explore the new monster on the block, HTML 5. It will present a broad overview of the new structural elements you’ll be dealing with, various APIs built into the language, and what you can expect to encounter as you move forward with HTML 5.

We’ll talk about how it is currently being implemented, how it may be implemented in the future, and how HTML 5 can create a more personalized and enriched experience across multiple platforms while saving development time.

We’ll also look into ways you can start using HTML 5 right now, what you can do to prepare for the transition and how we can apply some of those methods to academia.

People smarter than me

There’s a huge speaker list for the conference, the likes of which include:

• Derek Featherstone
• Jeff Croft
• Dana Chisnell
• Don Norman

I won’t list them all, but they have a full list of speakers if you want. A lot of great minds will be there. I’m looking forward to not only speaking, but also attending. Should be a great time.

Hope to see you there.

Last week I wrote an article about sliding form labels that got quite a bit of attention. Many of the commenters brought up a couple good points/bug in the Sliding Label code that I wanted to address and provide a patch for:

• The sliding label was barfing out in Safari when auto-fill was active
• The default scripting didn’t work on textareas

I sat down yesterday and wrote a patch/new version of sliding labels which I think addresses these two problems.

View the Demo

The new jQuery

$(function(){
$('form#info .slider label').each(function(){
	var labelColor = '#999';
	var restingPosition = '5px';

	// style the label with JS for progressive enhancement
	$(this).css({
		'color' : labelColor,
		 	'position' : 'absolute',
	 		'top' : '6px',
			'left' : restingPosition,
			'display' : 'inline',
    		        'z-index' : '99'
	});

	var inputval = $(this).next().val();

	// grab the label width, then add 5 pixels to it
	var labelwidth = $(this).width();
	var labelmove = labelwidth + 5 +'px';

	// onload, check if a field is filled out, if so, move the label out of the way
	if(inputval !== ''){
		$(this).stop().animate({ 'left':'-'+labelmove }, 1);
	}    	

	// if the input is empty on focus move the label to the left
	// if it's empty on blur, move it back
	$('input, textarea').focus(function(){
		var label = $(this).prev('label');
		var width = $(label).width();
		var adjust = width + 5 + 'px';
		var value = $(this).val();

		if(value == ''){
			label.stop().animate({ 'left':'-'+adjust }, 'fast');
		} else {
			label.css({ 'left':'-'+adjust });
		}
	}).blur(function(){
		var label = $(this).prev('label');
		var value = $(this).val();

		if(value == ''){
			label.stop().animate({ 'left':restingPosition }, 'fast');
		}	

	});
}); // End "each" statement
}); // End loaded jQuery

Textarea HTML

The HTML for the textarea follows the same convention as the rest of the inputs, in only needing a wrapping element.

<div id="comment-wrap"  class="slider">
    <label for="comment">Comment</label>
    <textarea cols="53" rows="10" id="comment"></textarea>
</div><!--/#comment-wrap-->

There are no major changes to the plugin, just a few tweaks. If you find anymore bug, please let me know.

View the Demo

Lately, I’ve been having to work with a lot of redirects and I was going through different redirection options with a client. So I thought I would do a quick write up about the different types of redirection.

I also haven’t seen a collection of these in one place, so I thought I would put this together.

There are a few different types that are commonly use when redirecting users:

• .htaccess / apache
• php header
• javascript
• meta refresh

The top two are the one’s you’ll be using most often, I don’t really recommend the last two. But they are available, so I think they’re worth noting. So here they are in the order I would recommend:

.htaccess / apache redirects

Redirect /old_directory http://example.com/newdirectory

This redirection is most efficient at the apache level, but if you’re like me and are on shared hosting, getting into the apache installation probably isn’t an option. In that case you can put this in an .htaccess file in the root directory of your site.

Using an .htaccess redirection is great for moving entire sites because you can not only redirect a page, but you can redirect entire sites and subdirectories with one line of code.

PHP header redirects

<?php header('Location: http://example.com/newdirectory/'); ?>

PHP header redirects are good for single page redirects and if you’re not comfortable working with the .htaccess file. This code goes at the very top of the page you’re trying to redirect. If it’s not there you may get a “headers already sent” error.

If you’re publishing out static HTML files, you can still use this by adding this code into your .htaccess file:

AddType application/x-httpd-php .php .html .htm

This will let you execute PHP in an HTML file.

JavaScript redirects

<script type="text/javascript">
<!--
window.location = "http://example.com/newdirectory"
//-->
</script>

JavaScript redirects are generally not used unless you’ve exhausted the other two options. If you don’t have access to the .htaccess file AND you can’t run server-side script on your page, this is an OK fallback option, but you have to make sure to provide a link to the forwarding page incase a user is browsing without JavaScript.

Meta redirects

<meta http-equiv="refresh" content="0;URL=http://example.com/newdirectory">

As your last option, I don’t see this in the wild anymore, but it’s worth mentioning that it does exist and does technically work (I’m not sure about it’s validity in HTML 5). You would place this in the document HEAD with the rest of the meta elements.

content=0 is a second timer for the redirect, I have this one set to 0 so it will redirect immediately.

Those are the options I’ve used in the past; did I miss anything? Maybe an ASP redirect? Let me know!

A few weeks ago I was reading an article on form UI by Luke Wroblewski of Yahoo!. For those who aren’t familiar with Luke, he (quite literally) wrote the book on good form design.

In the article, one certain section about placing labels inside of form fields stood out to me:

Because labels within fields need to go away when people are entering their answer into an input field, the context for the answer is gone. So if you suddenly forget what question you’re answering, tough luck—the label is nowhere to be found. As such, labels within inputs aren’t a good solution for long or even medium-length forms. When you’re done filling in the form, all the labels are gone! That makes it a bit hard to go back and check your answers. Luke Wroblewski

He brings up a good point. Generally speaking, you can look at a field that says “Tim Wright” and know that it was a field for your (my) name. But for long forms, yea, I do agree that you can forget some of the questions you answered.

For best practice, Luke talks about leaving your labels outside the form field so it’s always available to the user. I do think it’s a pretty good solution, but I think we can get a little more creative than that.

Enter: Sliding Labels

After reading that article it occurred to me that there’s no reason we can’t have the best of both worlds. I like how inline labels look, and I see Luke’s point about them disappearing as you fill out the form. But, we have jQuery, we know about progressive enhancement, and we have creative minds, so let’s build something that allows us to keep the label inline, but slide it off to the left (or up, whichever you prefer) rather than going away on click.

View demo (version 2)

The HTML

<form action="" method="post" id="info">
   <h2>Contact Information</h2>
   <div id="name-wrap" class="slider">
      <label for="name">Name</label>
      <input type="text" id="name" name="name">
   </div><!--/#name-wrap-->

   <div id="email-wrap"  class="slider">
      <label for="email">E&ndash;mail</label>
      <input type="text" id="email" name="email">
   </div><!--/#email-wrap-->

   <div id="street-wrap"  class="slider">
      <label for="st">Street</label>
      <input type="text" id="st" name="st">
   </div><!--/#street-wrap-->

   <div id="city-wrap"  class="slider">
      <label for="city">City &amp; State</label>
      <input type="text" id="city" name="city">
   </div><!--/#city-wrap-->

   <div id="zip-wrap"  class="slider">
      <label for="zip">Zip code</label>
      <input type="text" id="zip" name="zip">
   </div><!--/#zip-wrap-->

   <input type="submit" id="btn" name="btn" value="submit">
</form>

The only necessary items to make sliding labels (as I built it) work are the wrapper element (DIV in my case) and applying a class of “slider” to it (you can change this easily in the JavaScript).

At this point we have a pretty basic, and ugly form

The CSS

body                       { font:12px/1.3 Arial, Sans-serif; }
form                       { width:380px;padding:0 90px 20px;margin:auto;background:#f7f7f7;border:1px solid #ddd; }
div                        { clear:both;position:relative;margin:0 0 10px; }
label                      { cursor:pointer;display:block; }
input[type="text"]         { width:300px;border:1px solid #999;padding:5px;-moz-border-radius:4px; }
input[type="text"]:focus   { border-color:#777; }
input[name="zip"]          { width:150px; }

/* submit button */
input[type="submit"]       { cursor:pointer;border:1px solid #999;padding:5px;-moz-border-radius:4px;background:#eee; }
input[type="submit"]:hover,
input[type="submit"]:focus { border-color:#333;background:#ddd; }
input[type="submit"]:active{ margin-top:1px; }

The only 100% necessary CSS in there is the position:relative on the wrapper element (DIV). The rest is basically cosmetic and you can mess with it as you see fit.

At this point you should have a pretty normal looking form with labels on top of their respective inputs.

The jQuery

Now for the section everyone skipped to, provided you didn’t go straight to the demo (which I usually do).

$(function(){
$('form#info .slider label').each(function(){
	var labelColor = '#999';
	var restingPosition = '5px';

	// style the label with JS for progressive enhancement
	$(this).css({
		'color' : labelColor,
		 	'position' : 'absolute',
	 		'top' : '6px',
			'left' : restingPosition,
			'display' : 'inline',
    	               'z-index' : '99'
	});

	// grab the input value
	var inputval = $(this).next('input').val();

	// grab the label width, then add 5 pixels to it
	var labelwidth = $(this).width();
	var labelmove = labelwidth + 5;

	//onload, check if a field is filled out, if so, move the label out of the way
	if(inputval !== ''){
		$(this).stop().animate({ 'left':'-'+labelmove }, 1);
	}    	

	// if the input is empty on focus move the label to the left
	// if it's empty on blur, move it back
	$('input').focus(function(){
		var label = $(this).prev('label');
		var width = $(label).width();
		var adjust = width + 5;
		var value = $(this).val();

		if(value == ''){
			label.stop().animate({ 'left':'-'+adjust }, 'fast');
		} else {
			label.css({ 'left':'-'+adjust });
		}
	}).blur(function(){
		var label = $(this).prev('label');
		var value = $(this).val();
		if(value == ''){
			label.stop().animate({ 'left':restingPosition }, 'fast');
		}
	});
})
});

At this point, you should have a fully working sliding label form!

View demo (version 2)

Making sure everything is still usable without JavaScript is important (no matter what people say), it’s just a basic principle of progressive enhancement. Believe it or not, there are still people browsing without JavaScript (blackberry users – turned off by default). So creating the interaction in layers, as we did, will help it be past-proof.

Try it out and let me know what you think. So far I’ve used it on a password change form, so definitely let me know if you find a place to use it!

For years (and by “years”, I most likely mean “the years since I started using jQuery… maybe 2″), there’s been one aspect of jQuery that’s bugged the crap out of me, the animation speed.

View demo

We’ve all probably seen the problem that happens in many drop down menus of varying height. We set slideDown(300) (or whatever you set it to) on all the submenus and leave like that. Inevitably, menus grow and shrink based on the content and we get this weird and mildly annoying behavior of really fast moving tall menus vs. shorter menus that move painfully slow just because there’s not much content in there.

This problem stems from where we set the speed of the animation; the value isn’t actually a speed, it’s how long it takes (in milliseconds, I think) for the animation to finish. So you can see why you get varying behaviors based on the element height.

It’s true, that you can use the built-in speed values like “fast” and “slow”, but if you want more fine-grained control over your animation, you’ll have to use a value.

Problem Child ∞

This is what our problem menu looks like all collapsed, just 2 clickable headings (h2) that will slide open to expose content (p)

Normally our jQuery would look something like this:

$(function(){

$('h2').toggle(function(){
    /* get the next element */
    var next_element = $(this).next();

    /* open it  if it's closed */
    next_element.slideDown(500);
},function(){
    /* get the next element again */
    var next_element = $(this).next();

    /* close it if it's open */
    next_element.slideUp(500);
});

});

Note: just example code, I didn’t check to see if it actually works

This is our menu fully expanded. As you can see, the first item has a lot more content then the second. Using the code above will make menu #1 move noticeably faster than menu #2; which, to me, creates an odd user experience. Because you’re like “Why’s is moving so slow?”

So let’s see if we can’t fix that.

Ben Healy (Solution) ∞

What we’re looking to do here is get the height of each collapsed item, do some JS math, and set a speed (animation time) value based on the height.

jQuery functions we’ll need

• next()
• height()
• slideDown() / slideUp()

The Code

$(function(){

	/* Variables to set */
	var id = '#heightCheck';
	var click_element = 'h2';
	var height_value = '100';
	var tall_menu_speed = 400;
	var short_menu_speed = 250;

	/* System variables, probably don't change */
	var target = id +' '+ click_element;
	var menu_content = $(target).next();

	/* Hide the element after the click_element, whether it's a
	div, p, ul, whatever you choose to wrap the items in */
	menu_content.hide();

	$(target).toggle(function(){
		/* save the menu items in a variable */
		var this_menu = $(this).next();

		/* get the menu height and save it */
		var menu_height = this_menu.height();

		/* Calculate the animation speed based on the element height */
		/* if the height is greater than the height set above use the
		tall menu height */
		if(menu_height > height_value){
			var speed = tall_menu_speed;

		/* If it's smaller, use the short menu height */
		} else if(menu_height < height_value) {
			var speed = short_menu_speed;
		}

		/* slide the menu down */
		this_menu.slideDown(speed);

	},function(){
		/* this is the same but reversed to close the menu */
		var this_menu = $(this).next();
		var menu_height = $(this).next().height();

		/* Calculate the animation speed based on the element height */
		if(menu_height > height_value){
			var speed = tall_menu_speed;
		} else if(menu_height < height_value) {
			var speed = short_menu_speed;
		}
		this_menu.slideUp(speed);

	});

});

That should give you a little more control over the menu speed. I'm sure it needs to be tweaked based on the menu you're using, but the general concept is there, and it should work pretty well. I hope it was helpful. Let me know if you have any additions to the code or suggestions to improve it.

View demo

]]> http://www.csskarma.com/blog/conditional-animation-speed/feed/ 2 http://www.csskarma.com/blog/behavioral-css/ http://www.csskarma.com/blog/behavioral-css/#comments Mon, 21 Dec 2009 16:46:32 +0000 Tim http://www.csskarma.com/blog/?p=681

Hi all,
I had a new article published over the weekend at Smashing Magazine. Check it out and let me know what you think!

Behavioral CSS

I wrote it quite a while ago and it seems to be showing a bit in the comments, but overall, I’m pretty happy with the way it came out and the reader responses it’s getting. Hope you enjoy Behavioral CSS

]]> http://www.csskarma.com/blog/behavioral-css/feed/ 0 http://www.csskarma.com/blog/css-techniques-i-wish-i-knew-when-i-started-designing-websites/ http://www.csskarma.com/blog/css-techniques-i-wish-i-knew-when-i-started-designing-websites/#comments Fri, 18 Dec 2009 15:30:42 +0000 Tim http://www.csskarma.com/blog/?p=675

I know I haven’t posted in a while, but I wanted to stop by and let everyone know that I have a new article out on Noupe.com called “CSS Techniques I Wish I Knew When I Started Designing Websites”

It was pretty fun to write trying to think back to my beginnings in the Web and sort of relive that frustration. I tried to include something for beginners and some for the more advanced users, so hopefully everyone will be able to take something away from the article.

Let me know what you think!

]]> http://www.csskarma.com/blog/css-techniques-i-wish-i-knew-when-i-started-designing-websites/feed/ 2