Creative Jar Blog RSS Feed

Give Us A Lift!

December 9, 2009 09:47 by Ben

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.

Give Us A Lift website hompage

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.

Give Us A Lift Speedometer Flash

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.

Give Us A Lift 404 page design

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.


Currently rated 4.3 by 4 people

  • Currently 4.25/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , , , ,
Categories: Ben MacGowan
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Powerful Cranfield SOM Search Launches

October 7, 2009 14:09 by Ben

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!


Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , ,
Categories: Ben MacGowan | Technical
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Stopping Skype plugin replacing phone numbers

August 18, 2009 09:33 by Ben

We recently came across a problem on one of our websites where if a user had Skype's browser plugins installed, all phone numbers would be replaced with their own "widget" of sorts, therefore breaking the layout:

 

Skype Plugin in use on Creative Jar website

 

After some browsing and head-bashing, I came across this fix which tells the Skype plugin to not replace any numbers on a webpage. Simply add the following code to your <head> section and the problem will stop occuring.

<meta name="SKYPE_TOOLBAR" content ="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>

Very handy if you have phone numbers which are quite prominent in the website's design, and don't want Skype ruining it.


Currently rated 5.0 by 6 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:
Categories:
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

The Floppy Disc Save Icon

July 10, 2009 14:27 by Ben

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


Currently rated 5.0 by 4 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: ,
Categories: Ben MacGowan | Technical
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Korean Charset

July 2, 2009 14:48 by Ben

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!


Currently rated 4.7 by 3 people

  • Currently 4.666667/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , , ,
Categories: Ben MacGowan | Technical
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Stop Motion Animations

July 2, 2009 12:08 by Ben

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?


Currently rated 5.0 by 2 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , ,
Categories: Ben MacGowan
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Internet Explorer 8 - Web Slices

June 11, 2009 17:31 by Ben

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! :)


Currently rated 4.8 by 6 people

  • Currently 4.833333/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: ,
Categories: Ben MacGowan
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed

Future of Web Design London 2009

May 21, 2009 15:56 by Ben

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!


Currently rated 5.0 by 1 people

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , ,
Categories: Ben MacGowan | Technical
Actions: E-mail | Permalink | Comments (17) | Comment RSSRSS comment feed

Flash not working Cross-browser?

March 10, 2009 13:53 by Ben

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.


Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags: , , ,
Categories: Ben MacGowan | Technical
Actions: E-mail | Permalink | Comments (3) | Comment RSSRSS comment feed

JQuery & UI

March 9, 2009 09:36 by Ben

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.


Currently rated 4.0 by 1 people

  • Currently 4/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:
Categories: Ben MacGowan | Technical
Actions: E-mail | Permalink | Comments (1) | Comment RSSRSS comment feed

Calendar

<<March 2010>>
SuMoTuWeThFrSa
28123456
78910111213
14151617181920
21222324252627
28293031123
45678910