Skip to main content

The importance of transitions...

I was just having a look at github's new tree slider.


In any case, it got me interested in the importance of transitions. Back in the old, pre-ajax, pre-broadband days, we would click on a link, go get a cup of coffee and then come back to a new screen. In the meantime the little "loading" icon would spin which would let us know that something was happening.

Nowadays, not only is it possible to change part of a page without reloading the whole page (thanks to AJAX), but with our new browsers and broadband connections, this could change so fast that we don't even notice.

I will be the first to admit that early versions of JavaScript transitions were not only buggy, but they seemed to be a luxury. For a start, the fades and slides were slow and jittery and led to a bad user experience. The extra JS libraries also added to page load. At the end of the day, who cares how we got where we were going as long as we got there.

Now however, they seem a bit more of a necessity. They let the user know what happened on the page and where.

Going forward, it would be nice to see some conventions appear as well. Fade in for dialogs, slide left for new page, slide right for old, etc...

Comments

Post a Comment

Popular posts from this blog

Freezing Gems

What is a gem and why would you want to freeze it? In Ruby, there are times when you want to access pieces of functionality that other people of written (3rd party libraries) and you normally have 2 options. You can install a plug in or install a gem. Normally the method you use is determined by which ever is made available by the author. Gems are installed on the host machine and are pretty handy when you want to run things in the command line or else across lots of projects, but their downside is that if you use a gem in a Rails project there is no automatic publishing mechanism when you deploy your site. You will need to log onto the remote host machine and install the gem manually. Plugins are specific to Rails and are similar to gems in that they are also 3rd party libraries. However they are associated with your Rails project as opposed to your machine so they will get posted to the server on a regular deploy. Freezing a gem is the process of transforming a gem into a plug in. Es
24 comments
Read more

Elixir - destructuring, function overloading and pattern matching

Why am I covering 3 Elixir topics at once? Well, perhaps it is to show you how the three are used together. Individually, any of these 3 are interesting, but combined, they provide you with a means of essentially getting rid of conditionals and spaghetti logic. Consider the following function. def greet_beatle(person) do case person.first_name do "John" -> "Hello John." "Paul" -> "Good day Paul." "George" -> "Georgie boy, how you doing?" "Ringo" -> "What a drummer!" _-> "You are not a Beatle, #{person.first_name}" end end Yeah, it basically works, but there is a big old case statement in there. If you wanted to do something more as well depending on the person, you could easily end up with some spaghetti logic. Let's see how we can simplify this a little. def greet_beatle(%{first_name: first_name}) do case first_name d
Post a Comment
Read more

Responsive Web Design

I wanted to go over Responsive Web Design using CSS. In the old days of web development, we had to code to common screen sizes (i.e. 800 X 600, 1024 X 768) and we patiently waited for people to upgrade their computers to have a decent amount of screen real estate so we could design things the way we really wanted. We also took on semi stretchy web layouts etc to expand and contract appropriately. Then about 2 or 3 years ago, Apple released this little device called an iPhone with a 320 X 480 resolution which took the world by storm and suddenly a lot of people were viewing your website on a tiny screen again... Anyways, as it can be difficult to design a site which looks good on 320 X 480 AND 1680 X 1050, we need to come up with some kind of solution. One way is to sniff the client and then use an appropriate stylesheet, but then you are mixing CSS with either JavaScript or server side programming and also potentially maintaining a list of appropriate clients and stylesheets. Also, you
14 comments
Read more