Tag Archives: User Experience

Amazing WordPress Plugins: SPEED

Aside

5

In this three part series I will detail the plugins I use when creating a wordpress site. In this part I will go over the plugins that can greatly increase your sites loading speed. Study after study continue to find that user experience is directly related to how responsive your site is. Put it this way

Plugins that can increase your blogs speed:

Autoptimize basically takes your sites javascript and CSS files and adds them all together completely compressed (and gzip’d). It also compresses your html and removes all comment code from the browser’s source (it keeps it in the file though). This is great if you paid a lot for a custom design that you don’t want others to copy.

cSprites works in the same manner, except this time it works with images. It adds all your images into one big image and adds the appropriate CSS to make it work. The reason to do this is that if you have 20 images in your design and posts, your browser has to send a request for each image individually, resulting in some significant lag time.

Use Google Libraries is excellent for blogs using javascript frameworks such as jQuery or MooTools. The reasons to use Google’s CDN network rather than your own server are many but the basic thing is: ITS FASTER! Why? Google will geo-target your viewers and serve them a copy that is closer to them and if they have been to a site that used google’s version previously they will have it cached and not have to load it at all!

You probably don’t need it unless your have 10k+ monthly views or get hit by Digg, but to be on the save side using WP Super Cache will generate static html files of all your posts and pages. This way each time someone comes your server does not have to process all the dynamic data from the database.

Stay tuned for the next round of plugins which will focus on SEO and getting your site noticed.

Added a few bells & whistles to the blog

Aside

Hey people, I want to point out a few improvements made to this blog in recent days. They have been stuck in my mind for awhile and I finally got around to getting them done.

First of all the sidebar has these huge links at the top now. If you want to learn more about me and are on LinkedIn, Facebook, or Delicious then I suggest you click them immediately. The real cool thing about these links is they are actually all one giant image. The two main reasons to create them this way; first it reduces the number of HTTP requests your browser makes which decreases load time, and second it completely bypasses any flash between hover states if you mouse over an image. The technique is called CSS sprites and you can find many tutorials on creating your own throughout the web.

While I was at it, I created a CSS sprite for the social bookmarking image links under the title of all our posts. That saves 7 HTTP requests alone, but I also added a little jQuery magic to animate them to appear to float up if you mouseover one. Amazing how just a little animation has so much effect on User Experience!

Another cool feature is the “Top” link in the bottom right, it has been there for awhile now but I was unhappy with the fact that it would be shown even if you were at the top of the page already! So I found an elegant jQuery solution and modified it to fit my needs. Now if you scroll the page down it appears and if you go back to the top it disappears. And so it is that jQuery once again saves the day.

Another thing to mention is all the jQuery I use is unobtrusive meaning it won’t break anything for people with javascript disabled.

What good is a post without some code? Here is the jQuery code I used, sorry but it comes with no explanation or support!

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
 
<script type='text/javascript'>
$(document).ready(function(){
	$(function(){
		$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){
		$(this).fadeIn("fast")}var scrollDiv=$(this);
		$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("fast")}else{$(scrollDiv).fadeIn("fast")}})
		$(this).click(function(){$("html, body").animate({scrollTop:0},"fast")})}
	});
 
	$(function() {
		$("#toTop").scrollToTop();
	});
 
	$(".share-container img").mouseover(function(){
		$(".share-container img").animate({
			top: "-10px",
		}, 500 );
	});
});
 
</script>

Disable form inputs when submitted with jQuery

Aside

3

One of the most frustrating things on the internet is when you click a button and the page just sits there. The chances are that many of us will click that button again. This is negative because it causes bad user experience and that most often results in them leaving your site never to return. A quick way to combat this client-side is by disabling the submit button after it has been pressed. Web developers will also need to make sure that any data submitted twice will be taken care of accordingly from the server-side.
Continue reading →

Will Twitter learn its lesson and embrace users?

Aside

Reply

All day on twitter the leading trending tags have been “#Twitterfail” & “#fixreplies”.

The site with the most buzz has just been hit by a crowd of angry people. Will they embrace the feedback how facebook has as of recently or will they do something else like block those trends? One things for sure, we will know soon. This trend is spreading faster than #swineflu! Seriously though people are angry and if you use search for the right thing you can find some really pissed off people!

One thing twitter should do is open up to the crowd and ask for advice and suggestions. I am sure their are many people who could improve upon twitter in some way. I know I have a few ideas that would improve the user experience of twitter.com and maybe even make it profitable! Twitter if you read this, I am available for hire! I need food moneys, so contact me!

I want to leave this post open for the commentaries’ opinions. Please share this blog post or put it on your blog… you can use this tr.im‘d url: hhttp://tr.im/lifJ to share on twitter or Laconi.ca or any of the other “short updates r cool” sites.