Archive for the ‘Design and Usability’ Category

« Older Entries
Newer 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: , ,
View 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: , ,
View 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: , ,
View 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: , ,
View 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: , , , ,
View 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:
View 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!

View 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.

View 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:
View 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: ,
View Comments
« Older Entries
Newer Entries »