Enhancing content with JavaScript

Enhancing content with JavaScript

There’s a million ways to make content look good. Ideally, it’ll be able to shine because it’s well-written, witty and interesting…but we all know that’s not always the case. Or even all that often. So instead, it needs a little help with grabbing the customer’s or visitor’s attention.

Fortunately for the clients, web designers tend to be good at that. Fancy colours, layouts and graphics – they all work, but they have one ‘flaw’ – they are static. Good for a solid foundation, static websites will only get you so far. Users are used to motion, animation and effects on the web by now, and have come to expect it in some regards.

Lucky you, because employing them is easier than you might think. While you can, of course, do simple animations with key frames and CSS (which depending on the size and impact of your project can be the perfect solution!), but if you want to go the extra mile towards something really special, you need something else.

Something you probably already have, and know well. JavaScript.

Enhancing content with JavaScript

Various forms of JavaScript and JavaScript frameworks are used almost everywhere now. Some websites are so dependent on it, they don’t actually work if it is disabled in some browsers. Obviously, this should be avoided at all costs. As such, the most important thing first: When you use JavaScript to enhance your content, regardless of how and what you do with it, be sure to have a fall-back or failsafe. It doesn’t have to look amazing – but it should absolutely look like a ‘decent’ website.

Ideally, a visitor that has JS disabled will be only marginally aware that anything is different from the way it is intended to look (if at all). The easiest way to do this is to build your site without the JavaScript elements and add them afterwards. You can of course prepare everything to implement the JavaScript later, however this way you can be sure that your website will look good without.

Now, what is it that you can actually do with JavaScript (that you don’t already know)?

enhancing content with javascript

Since JavaScript is client-side, you have a little more freedom in what you can do with it. For a first idea, think of animation. Depending on what your website is for or about, you’ll be able to choose something fitting. Whether it is a one-off motion to draw attention or a moving element to break up the flow of the page, or something more advanced like altering the flow of the page (a side-scroller for example), animations are a fine way to spice up static content. Whatever the element you animate may be, you might wonder why you can’t just do it with CSS.

Seems tempting right? Less code, same effect. Here’s an example of why not.

In this, the heart will enlarge on hover and stop pulsing. There’s a CSS and a JS version. As you’ll be able to see, both work. Both look fine. Until you hover. Then you’ll notice a huge difference: The CSS version jumps. It moves to a particular size mid-pulse before it enlarges. The JS completes the animation before it does the enlarging bit, thereby ensuring smooth transitions.

Now, this may seem like a minor thing, but imagine if you don’t have one element like that, but ten, and they ALL jump each time they are hovered over or clicked on. Creates a much less nice picture, doesn’t it?

A more business-suitable JavaScript function (compared to pulsing hearts) would be to have a bubble of content such as a chat window or menu ‘floating’ on the user’s screen as they navigate up or down. Just make sure to make it collapsible so that it doesn’t obscure any content the user may want. If you choose to do this, it is especially important to have it move smoothly, or it can very well destroy the image of the whole website. Many if not most web shopping sites use this particular tool in order to communicate with customers. They don’t always use JavaScript for it, as there are other solutions for this particular issue too, and yet JS remains one of the most popular solutions.

If you don’t want to or can’t include content like that, consider a fixed box as part of the layout, and place moving content in it. This could be interactive, something like pause on hover, or maybe start on click. You could have a bar across the top that rotates lines of text or images.

You are reading the DebugMe blog. DebugMe supports the design, development and testing phase of web sites and web applications by enabling visual feedback.
Register now to have free access to the tool for life

Don’t overdo it – you don’t want to overload the page with moving elements. Try instead to use this sort of thing to reduce the amount of content that is visible at any given point in time. Generally, people will prefer to see a paragraph rather than a complete block of text.

If possible, try to give the user some control over the speed of things, though. This could be, for example, a pause button or a next button. A fairly small addition, this still makes a lot of difference, as it still lets people read at their own speed, whether that is slower or faster than the default speed that you set. As far as that goes, when in doubt, go slower. Not too slow – you don’t want the visitors to get bored and leave the site prematurely. The easiest way to make up for this problem is to add manual controls.

Still, waiting for a second after finishing to read is more pleasant than being hurried and unable to finish, so if controls aren’t an option, don’t worry too much. A floating content box and some sliding content can be well-combined towards a great final product. Discuss this sort of thing with your client during, or even before you start your project. Your client may not even be aware that it is an option, or that you know how to do such things. They may well want to include some JavaScript in their project, which means you will end up with something you can be proud to add to your portfolio.


The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX  and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.

SHARE ON:Share on LinkedInTweet about this on TwitterShare on Facebook

Leave a Reply

Your email address will not be published. Required fields are marked *