I quickly ran into issues though. Now, it wasn’t anything that animate.css does or doesn’t do. More the fact that there was no way to replace jQuery animations with the CSS3 fancy-pants ones.

“What did you do?” I hear you ask.

Well, I’ll tell you. I wrote a little function that handled adding the classes to any element dynamically. This gave me a little improvement in terms of ease of use and speed. There was still something missing though. I only realised when I had 3 animations that needed to run one after each other, that there was no way to determine when a CSS3 animation had completed so I could run another one. In the interim I set a delay parameter so I could say ‘do this, wait 3 seconds then do this’.

This ‘callback’ functionality does exist and CSS3 animations do indeed trigger an event when they finish, you just need to set a javascript event listener to detect that so you can apply some actions. After a little Googling I added this to my function. This now worked in a very similar way to jQuery’s own animate function so it was very familiar.

Then came the plugin

A few weeks later, Dan (@_dte) mentioned me in a tweet saying that my site was using his animate.css and looked good. I thanked him and showed him my jQuery function that helped. He seemed suitably impressed and asked if he could use it. It was already a public gist on github so I said no problem. That evening I decided it would be even better if it was an actual plugin that could be used in an even similar way to jQuery’s native functions. And so jQuery animateCSS was born.

To use it is pretty easy.

Basic

$('#your-id').animateCSS('fadeIn');

With callback

$('#your-id').animateCSS('fadeIn', function(){
    alert('Boom! Animation Complete');
});

With delay (in ms)

$('#your-id').animateCSS('fadeIn', 500);

With delay AND callback

$('#your-id').animateCSS('fadeIn', 1000, function(){
    alert('Boom! Animation Complete');
});

If you want to hide an element when the page loads and then apply an effect, it might look something like this:

<style>
    .js #your-id {
        visibility:hidden;
    }
</style>

$(window).load( function(){
    $('#your-id').animateCSS('fadeIn', 1000, function(){
        alert('Boom! Animation Complete');
    });
});

Remember to use a .js (or .no-js depending on how you role) so that the element still displays for non javascript users (and Google previews).

Again, the plugin is available here: https://github.com/craigmdennis/animateCSS/

That’s it guys. Have fun.

Let me start by saying that I am not a developer, I am a designer who dabbles in jQuery and as such my code will probably not be the cleanest or most efficient but it gets the job done.

I will also assume you have some basic knowledge of jQuery.

View the demo

Recently I had to create a sophisticated jQuery interface initiated by clicking an icon and showing a div then fading it away upon leaving the div. The problem was the shape meant that when a user moved the cursor from the icon to the div they briefly left the confines of the div and as such the div would fade out. This was a problem and the solution seemed to be the Hover Intent plugin which allows the mouse cursor to leave the div and re-enter it within a certain number of ms (milliseconds) and not fade out the div (or whatever action you have written).

This is great right? Well yeah, but this only works when you hover over an element to begin with. What happens when you want to initiate the initial action on a click instead of on hover? This was my problem.

My solution:

So lets set up Hover Intent set up to work on hover with a mega-menu. Below is just the jQuery, you can see the html and CSS in the demo if you want to or download the source files here.

$(document).ready(function(){
$('body').removeClass('no-js'); // Removes the class 'no-js' from the body to let us know javascript is enabled
function slideTheMenuDown() { // This function is called by hover intent 'over:'
$(this).find('.subnav').slideDown('fast'); // Slide the menu down
}

function slideTheMenuUp() { // This function is called by hover intent 'out:'
$(this).find('.subnav').slideUp('fast'); // Slide up the sub menu
}

$('ul.topnav li').hoverIntent({
sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
interval: 100,   // number = milliseconds of polling interval (we want this to be initiated on click rather than hover)
over: slideTheMenuDown,  // function = onMouseOver callback (required)
timeout: 500,   // number = milliseconds delay before onMouseOut function call
out: slideTheMenuUp    // function = onMouseOut callback (required)
})
});

Now that we have Hover Intent working on hover all we need to do is wrap the function slideTheMenuDown in a click event. When Hover Intent reacts to a hover event, there is no action until the associated click event has triggered (basically until you click nothing happens). The result is no animation until you are hovering over the desired element and are also clicking it. Sweet right?

This is what it looks like

function slideTheMenuDown() {
    $(this).click(function() { // We wrap the action in a click event
        $(this).find('.subnav').slideDown('fast') // Slide the menu down on click
    });
});

That’s it, you’re done.

I have added a few embellishments such as adding an active class to the parent li so when you hover onto the submenu, the hover state sticks on the top level menu item.

Get the menu style as a psd from Premium Pixels

View the demo

The objective was to create an interactive environment with the premise of a 21st century ‘village fete’. Looking into what makes a fete and how this can be recreated with new interactions. The traditional village fete was analysed to see what underlying principles to find out of what one consisted.

What did people remember from them? Why did they go to them? Research shows that people enjoy village fetes because of the sense of community, fun and prizes.

Designed to give the user a feeling of fun and community, Shoutbox creates ‘bubbles’ in a variety of shapes and colours based on sound input. Any sound can be used such as a single voice, many voices or instruments. The louder the input; the larger the bubble and the longer the length of the sound; the faster the bubble moves across the screen. In addition, whenever there is a collision between the bubbles, the sound used to create the bubble is played back. Sound attracts people, drawing them together and developing an ad-hoc community wherever it is deployed.

Watch a video of Shoutbox »

The aim was to create a stamp that promotes renewable energies. While traditionally a graphic design brief I tried to make the process of informing people more tangible.

The stamps use thermochromic ink which, when heated, turns transparent. Two different colours are layered to create a nice effect. Body heat is enough to activate the process. When the ink is activated it turns transparent and reveals a QR tag underneath. The QR tag is then captured by a mobile device and automatically directs it to a mobile site. The site contains contextual information related to the specific stamp as part of a photo sharing social network

The inherent social aspect allows for real discussions about problems and solutions. With the rise in connected devices and the increase in mobile cameras, the concept relies on existing technologies. QR tag readers are available on any mobile device and can be downloaded for free. Many mobile devices are being sold with readers already installed and if this continues then the uptake of QR tag usage would naturally increase.

My dissertation is about internet security and internet privacy issues. The fact that they are both such large parts of everyone’s online experience and yet they seem to constantly battle against each other for supremacy. Can there be harmony or is there an inherent paradox between them meaning they can never function in equilibrium?

As part of the dissertation process interviews were conducted, one of which with the global IT manager of Premier Oil, to establish what issues are involved in business as well as consumer experiences and what guidelines they have to adhere to. More importantly if any of them are working or not.

Read my dissertation here ›

Yesterday at work I stumbled upon an idea that I haven’t seen before when dealing with pure CSS drop-down menus. The general premise is to use an unordered list within an unordered list activated on hover of the parent li. This is pretty standard (but won’t work in IE6 due to hovers only being available on anchor tags) and was no problem to implement:

View the demo ›

The HTML

<ul id="menu">
  <li><a href="#item1">Menu Item 1</a></li>
  <li><a href="#item2">Menu Item 2</a>
    <ul>
      <li><a href="#sub1">Sub Menu Item 1</a></li>
      <li><a href="#sub2">Sub Menu Item 2</a></li>
      <li><a href="#sub3">Sub Menu Item 3</a></li>
    </ul>
  <li><a href="#item2">Menu Item 3</a>
</ul>

The CSS

ul#menu {list-style:none;}
ul#menu li {display:inline; float:left; width:200px;}
ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
ul#menu li a:hover {background:#333333;}
ul#menu li ul {display:none; position:relative;}
ul#menu li:hover ul {display:block;}
ul#menu li ul li a {background:#333333;}
ul#menu li ul li.overlay {position:absolute; top:-26px; left:0;}

The problem?

The problem you will notice is that as soon as you start to hover over the sub menu items, the main menu item returns to it’s native, non-hover state. This is a problem as this affects the aesthetic quality of the menu and goes against the expected action.

The solution

The idea I had to solve this problem was to add anextra list element at the top of the sub menu unordered list and absolutely position it over the item on the main menu when the cursor hovers over the sub menu. Again this action is only supported by IE7 and above.

1. The list item will have a class ‘overlay’ applied to it so as it can be uniquely identified.
2. The list item will have the same text and same link destination as the main menu item.
3. position:relative; needs to be added to the sub menu unordered list in order to add position:absolute; to the class ‘overlay’
4. The position of the class ‘overlay’ needs to be the negative value of the sub menu list items. So if your list items are 20px in height, the class ‘overlay’ needs to have top:-20px; applied to it.
5. For some reason float:left; needs to be applied to the sub menu unordered list for the effect to work properly in IE7.

Have a look at the code below and check out the demo

The HTML

<ul id="menu">
  <li><a href="#item1">Menu Item 1</a></li>
  <li><a href="#item2">Menu Item 2</a>
    <ul>
      <li class="overlay"><a href="#item2">Menu Item 2</a></li>
      <li><a href="#sub1">Sub Menu Item 1</a></li>
      <li><a href="#sub2">Sub Menu Item 2</a></li>
      <li><a href="#sub3">Sub Menu Item 3</a></li>
   </ul>
  </li>
  <li><a href="#item3">Menu Item 3</a></li>
</ul>

The CSS

ul#menu {list-style:none;}
ul#menu li {display:inline; float:left; width:200px;}
ul#menu li a {background:#CCCCCC; display:block; padding:5px 10px; text-align:center; text-decoration:none;}
ul#menu li a:hover {background:#333333;}
ul#menu li ul {display:none; position:relative; float:left;}
ul#menu li:hover ul {display:block;}
ul#menu li ul li a {background:#333333;}
ul#menu li ul li.overlay {position:absolute; top:-26px; left:0;}

This is the basic principle. View the demo to see it with some styling.

View the demo ›

Please feel free to comment with any improvements or criticisms.

My Setup

• TV – LG 42LH7000
• Surround System – Logitech Z5500
• PC – Windows 7 Media Center PC

A few common problems and solutions

Problem: Loss of signal when changing inputs on the TV or when PC goes to sleep.

First thing first – With everything off, connect the Media Center to the TV with an HDMI lead. This is important because Windows 7 has old drivers for the nVidia GeForce 8200 and has problems with HDCP so your TV needs to be on and set to the correct HDMI input before you turn your PC on. This is known as the ‘HDCP handshake issue’ and is quite common. It results in a loss of signal when changing TV inputs or when the PC goes to sleep.

If, like me, you have an nVidia card then fear not as they have fixed this problem with a driver update. Go to nvidia.com and select ‘Automatically find drivers for my NVIDIA products’ and download the latest version. Mine was 130MB. Install this and reboot.

Unfortunately if you are using an ATI card there is no driver fix. The only thing you can do is download an application that disables and re-enables the HDMI connection fooling the device to re-initiate the handshake. This can be mapped to a keyboard shortcut.

Problem: No sound through S/PDIF

There are many reasons for this to happen. If you are using the Asus V3M28 motherboard then you have to switch the default audio output to be S/PDIF.

Remember to look in the sound setting to make sure that ‘allow programs to take control of this device’ is checked.

If you use VLC and can’t get S/PDIF to work or it’s stuttering, in the options set the sound output to Wave32.

There is also a problem with the S/PDIF VIA audio when the computer goes into sleep mode as when it resumes, the connections seems to be ‘dead’. A work around for this is to write a small bat file and have it run on resume which disables and enables the sound device. I think this may have been fixed in a recent Windows Update.

Getting the best experience

Media Broswer

To make the best of your Windows Media Center experience, download Media Browser. It’s a plugin for Media Center that provides you with cover art for Films and TV series, meta data for all the IMDB ratings and synopsis as well as having it’s own plugins such as themes and more information about the actual files themselves (such as 1080p or 720p or DTS audio or AC-3). It uses http://thetvdb.com/ and http://www.themoviedb.org/ to get all the information. It also provides user generated backdrops that fill the screen with scenes from whatever is selected.

You can also add multiple locations for media. For example I have films stored on my local machine and on an external hard drive. Add both locations and they show up under one category listing that I can name. So I have HD, DVD & TV. One of the plugins allows you to add film trailers to the menu.

Shark007 Codec Pack

Couple this with the Windows 7 Shark007 codec pack, you can watch any format of video on your Media Center. This is pretty straight forward to install as it uninstalls any other codec pack you might have on your system. Check the ;use Shark’s recommended settings’ to get the best setup.

NOTE: If you are using S/PDIF then in the audio tab you will need to check ‘Use pass-through (Dolby Digital)’ in the section titled ‘FFDShow S/PDIF pass-through’.

Once you have installed the codec pack and set it up, you can use Media Browser on your Media Center Extender device to stream all your content to it – this includes .mkv files. The way you do this is by opening the Media Browser configuration utility, clicking ‘advanced’ and selecting the tab mentioning extenders. Now all you have to do is add ‘.mkv’ to the list on the left as well as ‘.avi’ and any other format you want to play on your extender or just untick ‘use Transcode 360′.

NOTE: Because the Media Center had the codec to play it, you can even stream HD content to your Xbox 360!

Media Center Studio

Now you have Media Browser set up, you don’t really need the video section of the Media Center menu. It’s kinda annoying having something that you no longer need there and so Media Center Studio comes to the rescue. This provides a WYSIWYG interface for manipulating the Media Center menu to your heart’s content. I went minimal and just have tasks, TV, Music & Media Browser.

The remote

Most people tend to forget about this part of the setup which is strange as it possibly the most important. It is your point of contact with the system so you want it to feel as natural as possible and to be effortless. I recommend one of the Logitech Harmony remotes – they are learning universal remotes and much more. You can program button configurations so you use the up, down, left & right buttons for the Media Center but still use the volume up & down for the TV without having to select various inputs. It also has macros so with the press of one button you can turn all of your devices on and set them to the correct inputs! Excellent! I have the Harmony 550.

Other useful things

There are many more things that can be customised in Media Center and a great resource for find them out is http://www.hack7mc.com/

Let there be light!

The main thing to realise is that all browsers are not created equal. Older browsers lack support for new technologies (CSS3 / HTML5) and render pages in sometimes odd ways. They also tend to be less forgiving with various structural models and dynamic scripting languages like JavaScript. Something often forgotten is that some users may decide to turn off features in browsers or may be impaired in a manner which affects their browsing habits.

Examples include:

• disabling JavaScript
• disabling images
• not using a mouse
• using a screen reader
• using a text-to-speech device

Now while it is near impossible to include in a design every aspect that could affect the way someone experiences a website, there are things that can be done to improve the experience where possible.

Graceful degradation

“Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.”

– Fluid Thinking, by Peter-Paul Koch

Graceful degradation is finally being addressed as the wrong way to approach the problem – design utilising the most advanced features of a browser and where a browser is not capable of implementing those features, a compromise needs to be made. The testing of older browsers is often done towards the end of the development cycle. More often than not this results in a less pleasing site for those using older browsers. This mainly affects IE6 which is still widely adopted throughout the corporate world. Using this approach focuses on using the latest technologies and not considering the experience for people with older browsers, disabilities or with certain functionalities disabled.

So how do you add bells and whistles to a site while maintaining  focus on usability and experience? The answer is in the design process. By first focusing on what ‘everyone’ will see and use, you can address the broadest issues. Bear in mind that a good experience with a site does NOT mean pretty pictures (although they can help) and a person can have a good experience on a simple site, for no other reason than being able to do what they want to do with ease and no interference.

Progressive enhancement

Leading on from core usability is the inclusionof  features to improve the experience for those people who are able to experience them – this is known as ‘layering’, starting with semantic  (X)HTML, wrapped in some CSS and finally some JavaScript on top.

“Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing those with better bandwidth or more advanced browser software an enhanced version of the page.”

– Wikipedia

There is a far more tasty explaination using an M&M that defines the same point:

“Start with your content peanut, marked up in rich, semantic (X)HTML. Coat that content with a layer of rich, creamy CSS. Finally, add JavaScript as the hard candy shell to make a wonderfully tasty treat (and keep it from melting in your hands).”

– Aaron Gustafson

Good for SEO too?

When you write rich, semantic (X)HTML you are making life easier for search engines to index your site. It is written in a predictable, organised fashion and as such means the search-bots are more likely to pick up on any extra information as well as index it in the way it is intended. If you think about a search-bot ‘seeing’ in a similar way to a screen-reader, they generally only read text and links and with progressive enhancement you have given them both the best opportunity to get the most out of your site.

In practice…

It’s difficult to keep this in mind when you want to use newer technologies to make your life easier. CSS3’s rounded corner declaration or shadow facility would be great, but what happens when you meet a browser that doesn’t support it? As long as the contrast of text to background is suitable and the corners are not an integral part of the design then they will just have square boxes and normal text – something that doesn’t affect their experience too much and won’t affect the usability in any way.

This post is about using TimThumb to create an on-the-fly, greyscale image thumbnail of the first image in a post and use jQuery to fade in a colour version on top creating a nice effect.

Let me also say that this is not in-depth and is not for beginners as I’m not going to walk you through each step, merely give you an overview.

If you want to see a demo then look at my homepage as I’ve used this effect there and on my search & post lists. As the thumbnails are created on-the-fly and not during image upload, you can use this technique anywhere you like! Why there isn’t a plugin for this I don’t know.

Things you will need:

1. TimThumb.php
2. Get the Image script (includes a TimThumb.php in a package file)
3. jQuery
4. WordPress

Put TimThumb.php in your theme folder in /scripts/ (create this folder if it doesn’t exist)

Follow this tutorial to get TimThumb and Get The Image working in wordpress. It’s as simple as copying the script to your functions.php file (or create one if you don’t have one).

Link to jQuery (there is a way to link to the jQuery library that comes with WordPress but I prefer to link to the one hosted on Google)

To view all the code, simply hover over it.

Link to jQuery

Add the following to your header template to link to the Google Code hosted jQuery library:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>

The PHP

This goes in your template file

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="home-thumb">
<a class="post-thumb-a" href="<?php the_permalink(); ?>"><?php echo get_image(150, 306, '2'); ?></a>
<a class="post-thumb-b" href="<?php the_permalink(); ?>"><?php echo get_image(150,306,''); ?></a>
</div>
<?php endwhile; endif; ?>

This should be generally familiar to WordPress people but it’s saying if there are posts, while there are posts, get the information within the post. More information can be found on the WordPress Codex about The Loop. The permalink links to the url of the post (can be any link destination though) and inside the link we call the function you should have pasted into your functions file – get_image(). The arguments are ‘height’, ‘width’ and ‘filter’. I have yet to find a list of all the filters supported by TimThumb but for this you’ll only need filter 2 – greyscale.

So get_image()  gets the first image in the post and crops it to the dimensions inside the callback (in this case a height of 150px and a width of 306px but you can choose any size that is smaller than the image in the post). The third number is calling a filter from TimThumb which creates a greyscale thumbnail of the image. Then we duplicate this call but remove the ’2′ so we get the full colour thumbnail. We do this so that we can position them one on top of the other and fade one in creating a cool transtion.

The class ‘.post-thumb-a’ should be on the link containg the greyscale image & the class ‘.post-thumb-b’ goes on the link containing the colour image. This is important as ‘.post-thumb-a’ will be placed on top to hide the colour image and will be faded out to reveal the colour image.

The CSS

This positions the images and title correctly

.home-thumb {

	overflow:hidden;

	position:relative;

	width:306px;

	height:150px;

}

a.post-thumb-a img, a.post-thumb-b img {

	position:absolute;	

	top:0;

	left:0;

}

a.post-thumb-a img {

	z-index:10;

}

What the CSS does is position ‘post-thumb-a img’ (the image inside the link) on top (z-index:10;) of post-thumb-b img. This needs to be inside a div as it uses an absolute position to make sure they are pixel perfect overlayed. Make the parent div the same height and width as the thumbnail size you specified in the get_image() callback above.

If you test this now, you should see the greyscale image and not the coloured on — that’s because they coloured one is hidden underneath.

The Javascript

This goes in the header.php template of your WordPress theme

<script type="text/javascript">

jQuery(document).ready(function($){

	$(".home-thumb a img").hover(

		function() {

			$(this).stop().animate({"opacity": "0"}, 800);

			},

		function() {

			$(this).stop().animate({"opacity": "1"}, 800);

			});

});

</script>

The Javascript selects ‘.home-thumb-a img’ (the greyscale image within the link, the one hiding the coloured image) and sets the opacity to ’1′ until the mouse hovers over it, then change the opacity to ’0′ over the time of 800 ms (1000 ms = 1 second) to reveal the colour image, creating a colour fading effect.

That’s it, you’re done. Now have a play around. I’ve added a title tag in mine.

If I’ve made a mistake anywhere here please let me know and I’ll make sure to change it. Any questions and I’ll be glad to help.

I had seen these before but something was different with this one as instead of a traditional heat-map over a browser, this showed it more like modern art. Each dot represents a pause on that area of the screen and the larger the dot, the longer the pause was. This article also included a download link for the program which produces them.

So I decided to give it a go. The results of my mouse movements today can be seen below. I work on a dual screen setup but this is take from the left screen. I’d be interested to run this again on the right screen and compare then two.

If you would like to try it, it is a simple .jar file that you execute and run in the background. Pressing [s] saves the screen as a .tif file and [r] resets the screen.

Download mousepath ›