To animate or not?

I have being in a battle at whether or no to animate a lot of the site so everything looks “pretty”. I haven’t really came to any conclusion on this but I have ended up somewhere.

I always saw that the most important part of this site was that it should never hinder the user. This could happen on a couple of fronts for someone that is constantly moving and swapping devices.

Firstly;

The animations will get so annoying over time if your are to be using the site constantly checking when a desk is free. This is probably one of the biggest things for me that is putting me of it as I could see this annoying me when I am tired, that tired were you just want to sleep but you have a two hour bus journey in the heat then a twenty minute walk to the hostel were you room isn’t ready so you just sit in a chair complimenting the decisions that brought you here and then on top of that you have to wait the tiny bit longer for this page to load, nah not having it.

Secondly;

This slightly ties in with the last point but it will make the website bigger so it will take longer to load. No doubt in the future developments this won’t be a problem as we can build the site with this in mind and work around it so it is minimal. Though even still I think a site like this should have very little that could hold the load time back as you don’t know where your users are and how good their wifi is.

What drives this point home for me literally is the fact that my wifi is so bad where I live (it shouldn’t be, like really shouldn’t) this site had trouble loading at all, as well as every other site though.

With this in mind I have decided to add in a tiny bit of animation to the nav and a few elements on the home page as these are the parts that people will see on page load.

Looking at the tiny animation that I have added I can see how it has added that extra element to make it that little bit better so I am happy that I have taken the time to add them in.

I used Animate.css for this as I have used it before without having a problem with it. Turns out this time I had a slight one where I have some overlapping of elements that were using ‘z-index’. I unfortunately couldn’t find a solution so I ended up just removing the animation from this element and that was everything working again.