Agency Articles

Javascript effects can be cleverly utilised to enhance sites by making them more dynamic, offer the user the chance to interact with the design and can reduce the number of page loads or clicks..

Common Uses

Some of the more common uses for Javascript Effects are for scrolling, tabbed navigation and hiding and showing information on a page. Knowing what is available and seeing them in action will give you more options when it comes to designing a site mock-up.

Site Examples

Tabbed Navigation

Tabbed Navigation is great for displaying groups of information or options without having to display it all on the page at once or having to hide it behind layers of pages.

Example: http://expressionengine.com

Here the information is grouped by feature (Introduction & Overview, Extremely Flexible, Add-on Architecture etc) and clicking on each reveals a new panel

Show and Hide

This is a great technique for bringing in additional areas of the site without cluttering up the design. It can be used for login panels, paragraphs of content or navigation.

Example: http://www.leonjacksonmusic.com

This site requires you to login or register to be able to comment or contribute to the foums. But where is the login panel? Click Login/Register to see how this works.

Scrolling

This is similar to the tabbed navigation example except we are scrolling the contents from right to left. It adds some visual interest and again prevents a long page of information. Note the left and right arrows. This can easily be adapted for an image carousel.

Example: http://www.panic.com/coda

Navigation is via arrows (next/previous) for casual, serial reading or tabs for specific jump points (for specific points of interest).

Any Negatives?

None that we know of. If the user has Javascript disabled (and who does these days?) then they will still see something (although in a reduced capacity).

Like to know more?

We hope this has given you some ideas on how you can enhance your site designs and we are happy to discuss further ways in which Javascript can benefit your design obstacles.