Archive for the ‘Design and Usability’ Category

« Older Entries

Would your website stand up in court?

Tuesday, March 2nd, 2010

As an online business, operating your online presence within the regulations and law is of utmost importance; for multiple reasons beyond avoiding the wrath of the law… are you taking the necessary steps to protect your company website? Beyond your website looking good there are several considerations which must be addressed for your website to ’stand up in court’.

The Disability Discrimination Act

First and foremost, how accessible is your website? The Disability Discrimination Act makes it unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public; online, this means that businesses must ensure that they make ‘reasonable adjustments’ to their website to ensure that users of all abilities can access it. The Sydney Olympic committee was successfully sued for $1 million in 2000 by a blind man for its failing to provide an adequately accessible website. Although an Australian case it, along with similar cases in the American courts, demonstrates that web accessibility is not an issue to be ignored.

The Web Accessibility Initiative outlines the essential components of web accessibility; providing guidance and best practice standards for creating an accessible website.

Copyright

Along with the website architecture your content and text requires careful consideration. Copyright theft is a common occurrence that can easy happen by mistake, and is a crime which can result in costly legal proceedings. When populating your website always be certain to never copy or incorporate any text, images, videos or music from another website without obtaining the permission of the owner. To do so would amount to a breach of copyright and make your business liable for damages.

Further issues can arise when commissioning third parties to produce copyright work on behalf of your company, for example photography or video; unless specifically requested you will not own the copyrights in that work therefore limiting what you can do with it.

If material on the website is copyright then to inform visitors and to prevent such material being copied notice should be clearly posted on the company website informing users of their rights.

(more…)

Tags: , ,
Comments

jQuery UI 1.7 – The User Interface library for jQuery – reviewed

Thursday, February 25th, 2010

jQuery UI 1.7 by Dan Wellman

jQuery UI 1.7 by Dan Wellman

jQuery UI is the official interface library for jQuery, the leading JavaScript framework. Dan Wellman’s book, jQuery UI 1.7 – The User Interface library for jQuery, is intended to be the ‘missing manual’ – fleshing out the online documentation with examples, tutorials, and an in-depth look at the API. The book is supported by many great code samples, which are available at Packt’s support site.

There are thirteen chapters in total, covering the high-level widgets (such as the accordion) and low-level widgets (such as the draggable and droppable interaction helpers.) In addition, the CSS and effects frameworks are covered too.

No knowledge of jQuery UI is assumed, although it is expected that the reader will have a decent grasp of HTML, CSS, and jQuery. The book is pitched at the beginner to intermediate level jQuery UI user, although I would think that even advanced users will find that it contains valuable information.

The structure of each chapter is similar. Starting with the most basic example to get you up and running, more options are gradually introduced to give you a greater level of control, with plenty of code samples to help you along. Most chapters finish with a more advanced scenario, showing some really imaginative uses in which jQuery UI shines. For example, the drag and drop chapter walks the reader through creating a simple game.

The book also takes the time to describe some of the rare occasions where cross-browser issues might rear their heads, along with the fixes. It would have been easy for the author to skip past those parts, but I appreciated this honest approach. It may not be the sexiest subject matter, but it’s something that we as web developers deal with on a day-to-day basis, so it was great to see it tackled in the book.

One of the major strengths of jQuery UI is its online documentation; there are several examples for each widget, and options and methods are well documented. I was initially a little concerned about what the book could add to this, but my concerns were unfounded. Every chapter revealed methods and options that I had missed, along with examples that used the library in ways I would never have thought of.

One of the biggest revelations to me was the chapter relating to the CSS framework. Although I’d used Themeroller before, I’d never appreciated the full extent to which it can be used, creating a consistent look and feel throughout your site and containing many valuable helper classes.

One area where I would have liked to see some information is that of extending jQuery UI. I would have liked to have read about writing your own widgets, inheriting from $.widget, but I appreciate that this would probably be out of scope for this type of book.

Although jQuery UI 1.8 is just round the corner, I would have no hesitation in recommending this book. There is a wealth of information here, and it is presented in such a way that the reader is given a real understanding of the library, meaning that you won’t have any problems when the next version rolls along. In fact, if you read this book now, you’ll be well prepared for all the goodies that 1.8 contains!

So if you’re looking for a jQuery UI book, you should definitely check this one out!

Tags: , ,
Comments

Serving html5 videos with Apache

Wednesday, February 24th, 2010

Just a quick tip today – the solution to a bit of a ‘gotcha’!

While writing the jCaps plugin, we came up against an issue where .ogv videos were refusing to load, but bizarrely, only in Firefox. In its place was a grey box where the video should be, with a question mark in the middle.

After a little bit of head-scratching, we found the solution – Apache wasn’t sending the right MIME type with the video, resulting in a Firefox fail. The solution is to put the following AddType directive in your .htaccess or httpd.conf file (mod_mime is required):

AddType video/ogg .ogv

Make sure that you restart Apache if you put it in httpd.conf.

On another note, jCaps is nearing another release – hopefully this week. It will take into account some of Bruce Lawson’s wishlist, and includes a big refactoring of many elements of the plugin, including the API. It should be leaner, meaner, and easier to use! In the meantime, you can fork or download the project at Github.

Tags: , ,
Comments

La Lanterna goes live

Monday, February 22nd, 2010

La Lanterna has officially launched their new website.

Located in the heart of Glasgow city  and serving food for exactly 40 years, La Lanterna is one of the cities most favourite Italian restaurant.

The restaurant appointed 360innovate the task of building a website where people can view the restaurant menus and make online table bookings. The final product is an information rich website that provides visitors with all the necessary information and tools to book a table; strong calls to action entice customers to navigate through the website which they can do with little effort.

So happy with the service provided La Lanterna have further employed 360innovate to develop an online marketing campaign for the restaurant.

Check the La Lanterna website out for yourself here.

Tags: , ,
Comments

Atwood’s Law and browser features

Friday, February 19th, 2010

“Any application that can be written in JavaScript, will eventually be written in JavaScript.” – Jeff Atwood

Wednesday’s blog post introducing the jCaps plugin (which aims to provide accessible captions for HTML5 videos) sparked an interesting discussion with John Foliot on Twitter the other night.

John brought to my attention the WAI’s Media TextAssociations specification, which will tell browsers how to associate alternative content with rich media, such as video. Little did I know that while I was developing a “home-made JavaScript solution” (which the spec is specifically designed to counteract), the task force was carrying out a meeting to move the spec forward to the testing and implementation stage.

If there’s a W3C endorsed spec which will handle the issue, then great! My concern, though, is the length of time it will take for the specification to be implemented by browser manufacturers. Even if we’re only months away from a spec, it could be much longer until it is reliably implemented.

So in a similarly self-aggrandising way, I’d like to propose McCollum’s law: “If a browser feature which should exist, doesn’t, someone will write a javascript implementation.”

Witness the excellent jQuery UI library. HTML5 provides a datepicker element, a slider element, and native drag and drop functionality, but until these elements are natively supported across the majority of browsers, we’re stuck with home-made JavaScript.

Finding the right compromise between pragmatism and idealism is essential for modern web development.

What are your thoughts? How do you find a balance? Should jCaps development proceed, or should we wait until standards catch up?

Tags: , , , ,
Comments

jCaps – easier html5 video captions with jQuery

Wednesday, February 17th, 2010

It’s been a good year so far for html5 video. You might have noticed that YouTube and Vimeo have introduced their own player, and with the iPad’s lack of flash support, we are likely to see the tag used in more and more places, at least as an option alongside Flash.

Bruce Lawson of Opera recently showed off a proof-of-concept subtitling system for html5 video. It’s a great concept, and I’m happy to present the work I’ve done on the subject, turning it into a jQuery plugin, with a few extra enhacements. I hope that doing this will provide an easy API for front-end-developers.

Check out the demonstration here.

The latest version has the following features:

  • Multiple language support
  • Public methods to show, hide, or toggle captions
  • Ability to show full transcript in the selected language

The HTML

Make sure you’re using the HTML5 Doctype. Link to the stylesheet, jQuery and the plugin as below:

<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="jcapstyles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="jquery.jcap.js"></script>
</head>

Next, embed the video in the page, doing something like the following. I’m using Bruce’s slightly silly sample video here, since it has a multi-language transcription already!


<video id="myVid" width="400" src="http://www.360innovate.co.uk/blog/leverage-a-synergy.ogv" autobuffer controls>
<p>This page is to demonstrate open HTML5 video, so if you're not using a browser that can display the open Ogg Theora codec, there's not much to see. Sorry!</p>
</video>

Finally, create the transcript HTML.


<div id="transcripts">
<div lang="en">
<p>
<span data-begin=1 data-end=6>Hi, my name's Dr Archimedes Einstein and I'm a Doctor of Science at the University of Science</span>
</p>
<div/>
<div/>

Note that you must give the child div a ‘lang’ attribute.

The JavaScript

This is where the action happens. First, pass an anonymous function to jQuery to execute as a callback for when the document is ready. Then, call the jCaps plugin, with an object literal as a parameter. You should pass the following as a bare minimum, but there are other options that can be passed – see the code file for details.


$(function(){
$("#myVid").jCaps({
transcriptsDiv: $('#transcripts'),
language: $('select[name="changeLang"]').val()
});
})

Note that you must pass a transcripts div as a bare minimum. This will hide the transcripts div from view. By default, captions are not shown. You can switch it on by attaching the following methods to a click event on a button, or link for example:


$('#toggleCaptions').click(function(){
$('#myVid').jCaps.toggle();
});


$('#switchOn').click(function(){
$('#myVid').jCaps.switchOn();
});


$('#switchOff').click(function(){
$('#myVid').jCaps.switchOff();
});

switchOff() and switchOn() should be self-explanatory; toggle() will show the captions if they are hidden, and vice-versa.

You can change the language of the captions by calling the switchLanguage method:

$('select[name="changeLang"]').change(function(){
$('#myVid').jCaps.switchLanguage('ja');
});

There is one final public method at present: swapOut(). This shows the full transcript in the selected language when activated.


$('#transcript').click(function(){
$('#myVid').jCaps.swapOut();
});

That’s it! You can view the demonstration here.

Please note that this is very experimental, and might change or break at any time. You can download the source at github, and of course I would welcome any feedback or pull requests. Credit for the original script goes to Bruce Lawson, Philip Jägenstedt, and Daniel Davis.

Tags:
Comments

How we built 360innovate.co.uk

Thursday, February 11th, 2010

As you might be aware, we recently re-launched the 360innovate website. We thought that some of the geekier blog readers out there might be interested in the technologies we used to put the site together!

The 360innovate website marked a departure for us; it was the first website that we have built using Django, the Python based web framework. We’ve built many, many sites using PHP, so why did we decide to change that for this development?

Put simply, Django is a joy to work with. It combines superb flexibility with out-of-the-box features to provide a great platform to use as a base for bespoke web development. It espouses a DRY philosophy – “don’t repeat yourself” – which means that changes to the site can be quickly programmed and rolled out.

It also saves a great deal of time on back-end development, as it comes with an admin area that is totally customizable to the users’ needs. This means that more time and effort can be redirected to the front-end development – where the spit and polish provides a great end-user experience.

Speaking of the front-end, we once again used jQuery, jQuery UI, and a sprinkling of Flash to provide the interface for the site.

This combination of technologies wouldn’t necessarily be used for every project that we take on, but where it’s appropriate to do so, it allows us to provide a better site within the same budget.

So if you’re thinking about a bespoke web development project, please get in touch!

Comments

Small changes, big results

Friday, January 8th, 2010

Back in 2008 we published a blog post on making your company recession proof with SEO and for 2010 we are going to keep the momentum going. Last year saw the demise of some big brands including Woolworths, FlyGlobeSpan, Zavvi and Borders; the B2B and SME’s were no different with many closures and struggles endured throughout the year of 2009.

Going forward in 2010 we at 360innovate are looking forward to working with new and existing clients helping them to create economies, increase sales and beat the recession using the opportunities available on the Internet.

In the past year we have helped a variety of businesses streamline their sales process and increase customer satisfaction helping them to save and make money. In one instance we developed an event booking and management system for a large organisation who had previously managed the booking of events offline through a form submission process. The new online booking system has saved our client money by allowing them to direct resources previously wasted on event administration to other areas of the organisation and its simple application process has resulted in an increase in the number of attendees at events.

This simple yet efficient addition to an existing website has helped to make life easier for our client and by making things easier for the customer it has paid for itself. Small changes can go a long way and in many cases a lack of time or knowledge will prevent people from seeking out a solution instead settling to carry on with a website which is not working to its full capacity and in these difficult times, when everyone is penny watching, we need to ensure that every aspect of your business is operating at it’s best.

So for 2010 take a look at your website and ask yourself whether you are getting the most you possibly can from it. Do you feel you should be; getting better sales, spending less time managing it, updating it on a more regular basis or integrating it more into the overall marketing mix? As well as this consider asking a friend, colleague or customer what their thoughts of the website are. Don’t be scared of any negative feedback; modifying or enhancing your website doesn’t have to be expensive. From enhancing the usability of your website, integrating mobile technology, refreshing the graphics to a one off email campaign… these are all small things which can pack a big punch and can be tailored to suit every budget helping you to make 2010 the year we beat the recession.

Comments

Winter window displays

Tuesday, December 15th, 2009

One of the best things about Christmas shopping has to be the window displays, nothing warms the heart like a nicely decorated window covered in chintz, glitter and expensive gifts to buy for our loved ones. Having unfortunatley never had the chance to visit New York at Christmas, or ever for that matter, I have never seen the wonderful Christmas display windows which I hear you actually have to queue up for!

This years windows featured a certain Mr and Mrs Obama

Selfridges took on Little Red Riding hood for one their Christmas window.

The high street really does seem to go to town, the main purpose obviously being to get us to spend more money. The online stores are no different, in fact you could imagine it is much harder to get a customer in the store and to purchase when the competition on a national or even global size!

So this Christmas season have the online shops being following the high street and decorating their digital windows to entice shoppers?

You decide, here are some of the best festive websites for 2009:

next

Topshop-Christmas

waterstones

Agent-Provocatuer

cadbury

Firebox-Chrismtas

Greggs-xmas

Tags:
Comments

AOL’s new branding gets us talking

Monday, November 23rd, 2009

AOL have announced that they are to ditch their triangle and running man logo with its familiar blue branding in favour of a new  “simple, confident logotype, revealed by ever-changing images… one consistent logo with countless ways to reveal.” Along with a changing background (which the company are calling “reveals”) the new logo will see the word AOL go lowercase and become accompanied by a dot; something which AOL CEO Tim Amstrong claims will all make sense when the full brand revamp is revealed on 10th December.

The sneak preview AOL released shows the new logo with several different “reveals” and the feedback across the web so far is…. mixed. One opinion that keeps cropping up is that it’s all a bit mad and perhaps a little slap dash.

aol-new-logo-001

The amendments to the logotype- going lower case and adding the dot- don’t do enough to change our perspective of the brand if anything reducing the logotype from the bold symbolic AOL- full caps no dot- could do more damage than good taking away the emphasis of the bold brand name and making a brand name seem like any old word. AOL claim that having the o and the l as lower case is an excellent lead in to the dot. A lot of emphasis upon the dot it seems, it will siginify AOL plus something else such as Aol.Music

And then there is the changing backgrounds. Armstrong tells Paid Content that these changing “reveals” represent all the different things going on at AOL “underneath the surface”. The idea of a changing logo is nice but in practise it does very little to present a strong brand image and the concept is very similar to another highly successful search engine whose logo we often see accompanied by highly popular doodles.

Of course only having a sneak peak at the proposed brand image it is too early to be drawing conclusions, however, at this early stage a lot of people are starting to wonder whether AOL themselves know who they and what they want to be? Hopefully it will all become a little clearer on 10th December.

Tags: ,
Comments

Design Crush – edition 18

Wednesday, November 18th, 2009

With the build up to the festive season already under way and many Christmas lights  being switched on in cities and towns all over the world, it is no wonder that lighting effects have crossed over to design and are playing a big part in current web design trends.

Lighting effects within web design come in a variety of different forms, from creating subtle shadows and dim glows that produce a peaceful tranquil mood to multi coloured and faceted light rays that give across an energetic mood. More and more websites are utilising these lighting effects to give websites a dimensional interest, coming away from flat designs that can often look bland and seem uninteresting.

Visually, employing light and shadow effects enables us to better understand and relate to what we see on screen by creating texture, aspect and perspective. Therefore we are able to make web pages appear more natural, existent and intuitive by utilising these effects which in turn makes the design  stand out on screen creating a true sense of depth, layers and realism.

These lighting effects can create interest to areas on a page that are seen to be more important. By highlighting specific aspects within a web page with lighting, you can subtly draw the viewers eye around the page, guiding them to the parts of information that you desire. Creating these prominent areas not only gives interest to the page but give the page a defined purpose.

With all these reasons and plenty more, it’s no wonder that lighting effects are playing a large role within web design at the moment. And we are sure that with the festive cheer set to continue it will only amplify this trend bringing light not just to streets and trees, but to web pages as well.

Below are some exquisite examples of lighting and shadow effects being employed within web design:

lighting1

lighting2

lighting3

lighting4

lighting5

lighting6

If you fancy trying your hand at creating lighting effects here are some resources:

16 Photoshop Light Effect Tutorials >

Creating Lighting Effects with Brushes >

30 Lighting Effect Photoshop Tutorials >

Tags: ,
Comments

The Social Media Diaries | Turning a follower into a sale!

Tuesday, November 17th, 2009

We are big supporters of social media and its brand building qualities;  it is the perfect channel to ‘connect’ with your target audience and push your message. However, once you have your hundreds of followers and fans how do you convert them into a sale? According to a recent publication by MediaPost,  at its core social media works best when relying on good old fashioned marketing tactics promotion and customer service.

Your social media campaign should aim to increase brand awareness, drive customers to the website and convert the follower to a sale. The MediaPost article using data published by Razorfish states, “of those who follow a brand on Twitter, for example, 44% said access to exclusive deals is the main reason. And on Facebook and MySpace, 37% cited special deals as the main reason they have “friended” a brand”. As the stats tell us brands must be enticing customers to their websites using promotions and discounts doing so will increase brand interaction and encourage customer loyalty.

Using social media platforms to give customers added value such as insider hints, tips and additional information regarding products can push customers onto your website and help the decision making process. The correlation between such brand engagement and providing above average customer service is high. Big brands such as BT are utilising social media platform Twitter to provide immediate and relevant customer service, e.g. within minutes of a complaint about their service is aired a message is recieved by the complainer asking for contact details with someone dealing with the response as soon as possible saving you the time and effort of phoning and sitting on hold!

BTcare

Online customer service from BT

However, as we touched up on in our Habitat Getting It Wrong post for a successful online marketing campaign you must strategically plan a course of action. Many businesses and brands may rush into setting up social media profiles on the premise that it will ‘be good for the brand’, however, as this post has hopefully communicated there is more to social media than building brand awareness and that it takes a little more than having a big brand to entice friends/fans/followers to your website to purchase.



Tags: , ,
Comments

Christmas tips for B2B websites

Monday, November 9th, 2009

Last year we talked about getting more Christmas shoppers to your website and getting them to spend, but this year weChristmas Lights will turn our attention to B2B, an industry which can be incredibly quiet over the Christmas period we have put together some handy tips and advice on how to get visitors to your website and how to use online marketing techniques to keep your business busy this festive period.

Social media has been big news this year and Christmas 2009 is no different; B2B websites should be using the micro blogging platform Twitter as a way to continue relationships with prospective clients; don’t stop talking about products and services online just because work/enquiries seem to have slowed down.

Most people send a Christmas card every year so why not send an e-Christmas card this year, use it as way to not only wish your stakeholders season’s greetings but to offer them seasonal offers as a means of encouraging a decision (in your favour of course) over the festive period. This method of wishing them well is not only greener but allows you to add a more personal touch, although throw in a donation to a local charity to show your not being cheap!

Get into the festive spirit, do some charitable activities such as helping out at the local soup kitchen or even throw an office pantomime inviting clients to watch. Take it online by blogging and posting photos on Flickr, yes it’s something that can be done all year round but at Christmas time there is a lot more fun things going on and it is much easier to get clients involved in Christmas parties etc.

Use professional networking websites such as LinkedIn to locate or arrange a Christmas party. LinkedIn has an excellent event finding tool which is already listing several Christmas networking events, take it one step further by hosting your own Christmas networking event and post it on LinkedIn and any other social networking site the business gets involved with.

Whatever you choose to do for your business this Christmas the best advice we could possibly pass on is to keeping talking about your brand, just because business is quiet it doesn’t mean you can’t continue helping the customer make their decision in your favour or increase the brand visibility with your target market.

Tags: ,
Comments

Writing the perfect product description

Wednesday, October 21st, 2009

Writing effective copy is an important component for any successful website and the same attention and care should be afforded to product descriptions.

First Things First: Target Market

Before writing a product descriptions you must have a firm understanding of who the target market is. They are who will be purchasing your product and you need to understand how they will be shopping and what information they will be looking for.

Defining Features

Highlighting the products defining features or specifications is a good place to start when writing the product description. Already understanding the target market will enable you to look at the product and know what information that market is looking for.

The Blackberry smartphone is typically a business phone and the target market would be professionals that can use the phone as a business tool. The Blackberry product description, within the O2 website, has been designed and compiled to highlight the key features that would make the product attractive to the target market.

o2 blackberry description

However, the main disadvantage all online retailers face is the fact that a customer cannot pick up and feel the product nor can they read the back of the box. Therefore although it can be beneficial to highlight the key product features of an item you still need to provide as much information as you feel necessary to inform, educate and persuade the customer of the product. This does not mean copy the entire product manual nor does it mean swap the customer with swathes of text telling them about how the texture of the product feels but it does mean providing enough information so that the customer feels they are getting better value for money.

Habitat product

In the above example you can see that along with providing the key features of the product Habitat throw in ‘Good to Know’ information where they have provided the customer with care instructions and further detail which will aide them in the decision making process.

To exemplify the importance of writing good description look at the following examples, all are product descriptions for YSL Touch Eclat for Men.

YSL Touche Eclait

Given that the product is a make up item specifically for men; a market who are perhaps not so used to purchasing make up, not familiar with the jargon and who would maybe need even more persuasion than women to purchase the item; the bottom two descriptions are very limited and not effective at all. Going the extra mile to provide additional information on the product and its application greatly enhances the shopping experience for the customer thus increasing the likelihood of converting a visitor into a sale.

Keep it original

Not only does an informative product description inform and persuade customers to buy it is also very search engine friendly. However, don’t copy and paste your descriptions from another website, always keep the content throughout a website unique and original, the search engines work to provide searchers with relevant and distinct web pages. So, to not only improve conversions rates having original product description can also be beneficial for the product listing in the search engines.

Tags: ,
Comments
« Older Entries