We recently launched a new campaign website for WRVS with the purpose of raising awareness of how older people struggle to get to the places they need to on a daily basis without the support of community transport. With the theme of hitchhiking proposed by WRVS, Creative Jar put together a very unique campaign website.

Viral
To coincide with the campaign website, a viral video was shot and put up on YouTube. Together with some willing volunteers and people who use the services of WRVS, Creative Jar shot a video which presented the unrealistic image of older people having to hitchhike in order to get to their destinations. The aim was to produce a quirky way of showing what might happen if community transport was not available for older people across Brtiain. Why not check it out?

Speedometer Flash
As part of the build, the creative team were required to build a flash element in the bottom left of the page which would count the number of volunteers that had registered as a result of the campaign.

To tie in with the transport theme, the creative team produced a speedometer which would count the number of volunteers registering with WRVS. Below you can see a screenshot of the flash showing a total of 23 volunteers. As you can see the number is counted both within the mileage gage in the centre, and also the speed dial (pointer) moves depending on the volunteers. To the right of the speedometer are two call-to-action buttons styled like the indicators of a car. Hovering over them adds some nice moving animation.

404 Page
Though not a lot of people will see this page (we hope!) the team also created a unique Error 404 page (displayed when a page cannot be found). Styled to look like a person holding a sheet of cardboard, carrying through the hitchhiking theme, this visually makes the user quickly aware they are not looking a page within the intended site map.

These are just a few of the outstanding elements which can be found on the WRVS Give Us A Lift campaign website. Why not visit the site, explore and find more for yourself?

Twitter Competition
Alongside the campaign, WRVS are running a twitter prize draw and competition to give away two Flip Cameras a week for four weeks. The first five winners have already been contacted, which means there are a further three cameras to be won. Find out more by visiting the Twitter page.

It’s time to blow the dust off this blog and announce some rather exciting news for Creative Jar. Previously this year, Creative Jar launched Phase 1 of Cranfield School of Management's new website and was received with huge success. Recently, as part of the second phase, we were required to build a powerful search tool for the website much like Google – a scary comparison, but a challenge Creative Jar set out to achieve.

Your average search tool consists of a keyword search which displays a generic list of results relating to your search term. Leaving users to flick through link by link for what they were searching. However, the SOM Search uses your search term and returns results in an array of categories; images, videos, documents, website sections.

Directly from this results landing page, the user can watch videos, play audio files and read snippets of content. Alternatively, the user can select to view your standard results page if they wish to do so.

All of this is powered using Cranfield's custom CMS, giving the client full control over their content and their search... a powerful tool for any website – and very exciting for use techies to build!

Check it out and find out for yourself by visiting the Cranfield website!

I am currently in the process of packing up my belongings to move house - and let's face it, you inevitably will find stuff which you had misplaced about 6 years ago behind a book or in a box deep within your cupboard. One thing I did find was a box of untouched floppy discs and it got me thinking: when was the last time I used a floppy disc? With CD's, DVD's, Memory Sticks and External Hard Drives polluting every computer users repository for file storage, floppy disc's don't even get a look in.

So with the 'fate of floppy discs becoming apparent' what will happen to the Floppy Disc Save icon that we see on every computer application that has saving functionality? Will it be modernized to suit the advancing technologies that we now use to store our files? Or will it be standardized as one of those all-time-favourites that just don't need changing? Well I did a bit of googling on the matter, as you do, and found this interesting discussion: Modernizing the Save Icon?

You will find a few comic jokes thrown in here and there but some very valid points are raised about why should we both touching something which has become such a standard?

"Quick, off the top of your head, what does a red octagon with a white outline represent? How about a button on a GUI that looks like a pair of scissors? What about a red circle with a red line across it from the lower left to the upper right? A button on the corner of a screen window that has an X in it? Do *any* of these things actually look like the object or process that they
represent? Does it matter?

A good icon is simple, visually distinctive, easy to recognize instantly, consistent across many interfaces. The floppy disk icon for save is all of these things, and it's also familiar to almost every experienced computer user. It could be simplified a little (removing some superfluous details, like the label and the little readonly-lock thingydo), but the basic visual is already
quite simple and distinctive. Nobody's going to mistake it for (say) the paste button. Sure, it's an anachronism, but the standard icons for cutting and pasting are scissors and paste, respectively, and nobody's used *that* method of cutting and pasting since word processing came into vogue. So what? The icons are visually distinctive enough (well, the scissors are; they should
probably have used a roll of transparent tape for paste, but it's too late to change that now) and their meaning is well established."

I think the above nailed the point really: an icon is something which is easy to recognize instantly, consistent and requires no thought. Just because the technologies that we use nowadays look different and are structured differently physically doesn't mean functionally they do not have the same purpose - to save your current file

We have recently been working on a multi-lingual website - one supported language being Korean. Thankfully, on Windows Vista, we have a pre-installed language pack which displays all of the Eastern language characters. However we were running into a problem on some Windows XP machines, that even after installing the language pack, some elements (primarily select drop-down menus) were rendering with square text rather than the Korean language.

After researching into whether or not it was the DOCTYPE of the page, if the font being used supported Korean characters, or it was infact a browser issue as the problem only occured in Internet Explorer. I was able to fix  the problem by setting the language charset for the page to Korean by using a meta tag:

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />

So simply place this in the <head> tag of your web page and the problem is fixed. Hurrah!

Following on from Billy's post on Tuesday, I recently stumbled across this interesting post at Smashingapps - 21 Stunning Examples Of Creatively Done Stop Motion Animations

Here are my top 4 favourites:

What's yours?

Being a part of the web industry means that you have to keep up to date with all the current trends and make use of new features. With the release of Internet Explorer 8 came a new way of following website updates – Web Slices.

Though currently only supported by Internet Explorer 8, hopefully this will feed through into others such as Firefox, Safari and Opera.

Web Slices take a specified snippet of a web page and displays it within a 320px x 240px iframe within the browser (see example below). Much like an RSS feed, the web slice will be updated regularly to check for updates. If an update has occurred since you last checked, the item in your ‘Favourites’ bar will glow orange.

If a web page that you are currently viewing features a web slice, a green icon will appear in your toolbar on the top right. To subscribe to the web slice, and therefore add it to your ‘Favourites’ toolbar, click this green icon and you will be asked to confirm you wish to continue.

As a test, Creative Jar have added a web slice to the ‘News’ section on the home page (found in the left-hand column). So if you are with the times and have Internet Explorer 8, then check it out. If not, then why haven’t you updated?! But just in case you cannot, below is a screenshot of what we are talking about:

A very interesting feature for keeping up with certain areas of websites you frequently visit. Other examples include weather forecasts and lottery numbers.

And do not worry – a blog post will be following shortly with instructions on how you can add a web slice to your own page! :)

I was very privileged in being able to attend this year’s Future of Web Design Conference in London hosted by Carsonified. Whilst primarily aimed at web designers, there were quite a few talks which interested me as a front end developer and that the topics would provoke ideas which I could bring back and discuss for Creative Jar.

Some highly renowned names were amongst the speakers, including Meagan Fisher from Simplebits, who discussed the level of support for Mobile Interfaces. Do we make our websites viewable to suit the ever increasing number of mobile web users by just making sure it works, or do we offer them something special – a layout and application specifically built for their mobile?

Robin Christopherson from AbilityNet gave a demonstration on how unusable popular websites such as Youtube, Google and New Scientist are from the perspective of a blind user. Also giving us some tips as to what can help us make our websites a bit more accessible.

Sabrina Dent demonstrated what happens when you throw client collaboration out of the window. A very nice method of thinking, but not too sure how much clients would appreciate just being told “No!”

Molly Holzschlag informed us on the future of web standards and whether there is one. CSS3 is looming just around the corner, even though there is a lot of scepticism of whether we should start implementing it. The support of IE6 was also mentioned; be careful with it. Rather than just throwing it in the bin as we would with any other trash, we should still cater for it. Offer a milder user experience, whilst at least there is a new push of upgrading browsers coming shortly. Overall, the talk proved to be very informative talk on how best handle our code and move forward with our standards.

And these were just a selection of the many great speakers that I was able to watch! To make it even better, I was able to attend 2 workshops the following day on Accessibility and Javascript! Both being such an eye opener of what can be achieved; one with the problems which disabled users face on day to day websites and how we can use ‘Personas’ to create the best user experience for our audience even if they are disabled through vision or movement; and the other demonstrating what can now be achieved through the many Javascript libraries which are at our finger tips and help solve some of our common problems such as dynamic graphs.

At the end of the 2 days I felt that I had never laughed so much, debated so much amongst like-minded designers/developers and met so many interesting people. Definitely worth the visit and looking forward to the next!

I was working on a project this morning which uses a non-safe web based font and decided to use sIFR 3. For the first time implimenting it, I was impressed and got it looking how I intended in Firefox quickly. It wasn't until I was cross browser testing that I found - oh! the flash isn't loading at all in Internet Explorer. To cut a long story short, a lot of googling and head-meeting-desk bashing, it turns out that even though I had the Flash Player installed in Firefox; I had not installed the Internet Explorer Flash Player. Find it a bit odd that you need to install one player multiple times, but I digress.

Not 2 hours later, we found an issue with some flash that would not work in Opera - the embedded no flash content was appearing instead. Luckily, because of the work I had just done with sIFR, I found that again I had to install the Flash Player for Opera. Hey presto! It fixed the issue.

So in future, if you find that your flash is working perfectly fine in one browser; do not spend hours trying to pick your code apart to fix the problem. Make sure your browser has flash installed. I found this was a handy tool to quickly know if my browser had flash installed.

Here at Creative Jar we are constantly on the look out for tools in which we can use to en-rich the user experience for our customers. This involves finding new ways in which to perform tasks on a website such as filling out a form, re-ordering items on the website and at the same time making them easier for the customer to use.

I have recently been looking a lot into jQuery -- a code library that builds upon the Javascript language and is designed to make things easier; both for the developer and the end-user.

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." -- jQuery official site.

jQuery enables to create a lot of the UI (User Interface) which we want to create for our customers; we can make items drag and droppable, animate objects to draw attention such as success or error messages. I find that by integrating jQuery into our websites, we can really lift the website off the page and bring it to life.

What I love most about jQuery is the ease of use, browser compatibility and the size of the code. We get a tool that; is easy to impliment on a webpage; works in IE6+, Firefox 2+, Opera 9+, Chrome and Safari 3+ and is roughly 19KB in size meaning that it does not affect the page loading times.

To make things even more exciting, jQuery released a new verson of their jQuery UI on March 6th.

"jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications." -- jQuery UI official site.

This new UI offers semantically clean code for their 'widgets' that can be styled easily using a CSS Framework -- making the tools we use a lot more easier to style and fit in more with the design created by the Creative team. That way everyone is happy -- as developers we have cool tools we can implement into web pages and as designers we are happy with the look and style of these tools. I will definitely be looking to use this a lot more in our projects.

You can view demos of what you can achieve with jQuery and jQuery UI here.

Recently I had to do some Research & Development into a pre-built chat system using Windows Live Messenger for a client who wanted to offer Live Chat Support on their new website, and stumbled across this gem: The Windows Live Messenger IM Control.

Just 2 lines of code on your webpage and you would find an iframe which allows users to log into their own Windows Live Messenger account, (or just type their name!) to begin a live chat with you. Everything from the users end is done through the iframe, whilst you can chat through your Windows Live Messenger application, as you normally would if you were chatting to someone on your contact list.

Of course there are a few settings you have to change, but all the instructions can be found here.

I myself was quite thrilled at this point of what you could achieve, when we (Gareth and I) realised that if you are a support team; you would probably want more than one person to be able to recieve messages from the IM Control, but with how Windows Live Messenger is set up at the moment, this isn't possible.

This is where Windows Live Messenger 2009 Beta 2 comes in. With the next release of Windows Live (no release date yet specified), you will be able to log into the same account in multiple accounts. Hence fixing our problem: If your support team were all signed into the same account, the messages sent from the IM control will appear on all of their computers. Of course this comes with a slight catch, if you do something to the chat on one computer, this change would be replicated on every computer that is signed into the account e.g if you were to close a conversation window on one computer, this would happen across all the other computers.

So if you were looking for a quick and easy live chat, 'straight out of the box', then this is extremely cool indeed! :)