Archive for the ‘Web Development Articles’ Category

« Older Entries

Dojo drop down menus

Monday, August 1st, 2011

We’re happy to announce the release of BigMenu 1.1, an open source drop down menu system for Dojo.

BigMenu allows you to display a large amount of hierarchical information, without overwhelming the user.

BigMenu has the following features, among others:

  • Options available for animation time, easing, and delay on hide / show
  • Support for declarative or programmatic syntax
  • Keyboard and screen reader accessible – uses plain old semantic HTML
You can see the demo, or download the source from Github. As always,improvements, forks and pull requests are welcome!
(Created by @johnmcc and @todd_unctious)
Tags: , ,
No Comments

Getting the foundations right

Thursday, January 6th, 2011

At 360innovate, we speak to a wide variety of clients looking for developments of all sizes – big and small. If your organisation is looking for a highly functional web site, it is critically important to get the foundations right – to plan the project and put together appropriate documentation before a single line of code is written.

Building a complex web solution is a lot like building a house. Before the first brick is laid, one would consult with an architect to develop the plans for the building. The architect’s job is take the client’s vision, and transform it into something that is safe, complies with the relevant regulations, and meets the client’s needs.

If the client asks for something inappropriate (for reasons of safety, practicality or whatever), then a good architect would advise the client of this and come up with an alternative that would meet the client’s needs.

Quite often, we see non-technical customers essentially trying to do the architect’s job. In producing specifications without having an understanding of the development landscape, the foundations of a successful development are jeopardised.

The stakes might not be quite as high as in architecture – not life and death in any case – but the risks are broadly similar. Unless you are taking security, the user’s experience, and technical considerations into account, your brief will very likely not be as good as it should be. The developers who work on the project will not be given the start they need. This will be to the detriment of the project as a whole; poorly planned features lead to poorly executed features.

The answer to this is simple – speak to us as early in the project’s lifespan as possible. We will take into account technical considerations, the experience of the end user, and your needs too. We can produce a high-quality specification document that will lay the foundations for a successful project, no matter who your developers are.

No Comments

Usability Testing: What it is, what it isn’t

Wednesday, December 1st, 2010

Usability testing is an important part of the web development process, but it’s also one of the least-well understood. Very often we see misconceptions about what usability testing is, and what it isn’t.

This blog post will hopefully provide a primer on how you should be using usability testing.

One of the most important concepts in usability testing is that it should focus on how easily the user can complete a given task.

These tasks should be clearly defined from the outset of the project, and should be the key actions that you want your users to be able to perform. For example, this might be:

  • Filling in a contact form
  • Finding essential contact information
  • Completing a purchase

It’s essential that we know from the outset what the goals for your website will be; this allows us to create appropriate calls to action and a design that is consistent with these goals.

When testing how well users complete these goals, there are four criteria used to judge the success of the test:

  • Performance: How long did it take the user to complete the task? How many steps did it take?
  • Accuracy: Did the user make mistakes in the process? If they did, were they able to recover from them?
  • Recall: Could the user remember how to complete the task afterwards? Will they remember how to do it in the future?
  • Emotional response: How did the user feel on completing the task? Stressed? Relieved? Comfortable?

Depending on your budget, there are various methods for implementing usability testing.

Hallway Testing

The least expensive option is hallway testing, where people unconnected with the project are asked to complete tasks, as specified above. The advantage of this method is its cost. This method is also called “hallway intercept testing” – literally stopping people in the hallway and asking for their help!

The disadvantage of this method is that it doesn’t necessarily provide a good cross-section of the group that will be using the site. It’s an informal method, and the familiarity of the user and the person conducting the tests could influence the outcome of the tests.

Remote Testing

Remote testing involves the use of specially set up online surveys to test the usability of a site or application. One such service, Amazon’s Mechanical Turk, offers a cost-effective method of testing your site with a wide variety of users.

Although more expensive than hallway testing, this method offers a more formal testing structure, and encourages a goal-centred approach. With Mechanical Turk, you can also choose to reject submitted results if you feel the quality of feedback is not good enough.

Expert Review

The third, and (by far!) most expensive option is expert review. This involves working with a specialist usability testing company to provide in-depth analysis for the goals listed above. 360innovate work with a number of these companies, and can suggest one that is suitable for your needs.

Usability testing: what it’s not

The most common problem we see with usability testing is that it is performed without goals in mind, or that the goals are not clearly defined at the start of the project. In effect, test subjects are being asked “what do you think of this site”?

This is very definitely  not usability testing. Unless you relate feedback to the original goals of the project, it’s very unlikely that you’ll get useful feedback on the success of the project. You might get some useful information for future development, but you won’t get useful feedback on the success of what you’ve built.

In short, you should know what the goals of the project are before the first the first line of code is written, and you should be testing how well each task relating to a goal has been implemented.

Why should I bother at all?

Usability testing is a vital tool to judge the success of a project. The internet is awash with stories emphasising the importance of usability testing, and the real question is “can you afford not to perform usability testing?”

Please get in touch if you’d like to talk about what usability testing can do for you.

Tags: ,
No Comments

Our 10k app, Video Poker!

Tuesday, August 31st, 2010

As you might be aware, An Event Apart have been running a competition to find the best web app written in 10k or less. For the web-developmentally-challenged among you, (you lucky, lucky souls…), this isn’t a great deal of space to work with, so optimization is the name of the game!

You can see the gallery of apps here. There are some truly amazing examples of what can be achieved with a little creativity, and the standard of app on display is extremely high. (Although with some rock-star calibre developers entering the competition, this was almost to be expected!)

For our own entry, I recreated the game of Video Poker (with graphics from Allan).

If you want to take a look at the uncompressed source code, it’s available on github, under the MIT License.

Tags: , ,
No Comments

Self-executing functions in JavaScript

Thursday, July 29th, 2010

In Ryan Florence’s excellent post comparing jQuery’s approach to Mootools’, he makes a number of interesting comparisons about each framework’s approach.

One area where jQuery provides an elegant solution is its use of anonymous functions to set DOM properties, as shown in the following snippet.

This is something that I certainly missed when working with Mootools, but fortunately there’s an easy, quick solution.

Ryan proposes the use of the setEach plugin to solve this issue, but to me, this doesn’t seem necessary. You can work around the issue by using a function that executes immediately, as follows.

The key here is the extra pair of parentheses after the function definition, which forces the function to execute straight away. Simple, quick, and it gives the same functionality as the jQuery equivalent without having to add the overhead of a plug in.

Tags: , ,
No Comments

jQuery plugin to show and hide vertical menus

Tuesday, July 20th, 2010

It’s very common for us to show and hide vertical menus when developing sites. This idiom is particularly common on sites with a lot of submenus, such as e-commerce shopping carts.

Since it’s a technique we use so frequently, we decided to write a little jQuery plugin to make life easier for ourselves. This plugin takes nested unordered lists and turns them into expandable and contractable menus.

The plugin has the following features:

  • Dual licenced under GPL / MIT licences – do what you want with this code (as long as you leave the licence intact!)
  • Lightweight (~2Kb packed)
  • Keyboard accessible, basic WAI-ARIA support. Usable with JavaScript switched off.
  • Easy to use and deploy
  • Configurable through CSS, callback functions and numerous options

Please note that this plugin optionally uses of Klaus Hartl‘s excellent jquery.cookie.js plugin.

You can download the plugin here, and view the docs, and an example here.

Tags: , , ,
No Comments

So you’ve got an idea for a website?

Thursday, April 1st, 2010

If you have a idea for a website and an off-the-shelf system just won’t cut it, you might be in need of bespoke web development. As specialists in this field, we talk to a great many people who have ideas for online businesses, and in this article, I’d like to outline some points to help you get the most from your development experience, and your business.

Treat your online business like an offline business

“Information technology and business are becoming inextricably interwoven. I don’t think anybody can talk meaningfully about one without the talking about the other.” – Bill Gates

Before you even think about beginning development, it’s essential to research the market thoroughly, and one of the best ways to formalise this process is to write a business plan.

A business plan will encourage you to think about your business objectives and strategies, the markets in which it will operate, and its financial projections. In doing this, you’ll spot potential pitfalls earlier, and be better able to plan the future of the business. (And perhaps even decide whether you will proceed with the business or not!)

Once you’ve completed your business plan, it’s a good idea to gather feedback from neutral parties (in other words, not family members!) Banks, investors, and business partners are all good sources of feedback at this stage.

Most importantly, think about your unique selling point. What problem will your website solve? What can you do that your competitors can’t? These are age-old questions, and they are just as important when doing business online.

In addition, it’s a good idea to prepare everything you need to launch well in advance. Imagery, content, and stock all need to be readied prior to launch, as do any payment gateways. Make sure you’re ready to kick-off your website with a bang, just as you would launch a bricks-and-mortar business with a bang.

KISS – Keep It Simple, Stupid!

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” – Antoine De Saint-Exupery

The most successful websites have simplicity at their heart. Think about two obvious examples, Google and Twitter.


Although these sites offer some very complex functionality, their core actions could be described in a couple of sentences. This has an effect on the interface – key actions are thrust to the forefront of the user’s attention, giving the impression that the site is easy to use.

By keeping your application simple, you will also reduce development time, and therefore keep development costs low. So when you’ve thought about all the functionality you would like for your site, go through that wishlist again and cut out anything that doesn’t directly and obviously benefit the user. Be brutal – it can always be added at a later date if your users need it.

Also, reconsider any internal features that could be dropped to reduce costs while the business is starting up. For example, you might want your web site to integrate with an accounting package, but if you are only anticipating a couple of orders each week, could this data be migrated manually? If this feature could be rolled out at a later date, that’s money in your pocket right now that you can invest in marketing your website.

Whatever you do, be aware of the ‘kitchen sink’ mentality and avoid it!

Launch early, launch often

“I like to launch early and often. That has become my mantra” – Marissa Mayer (Google)

Some of the biggest and most successful companies espouse launching early and often. This means that websites and applications are launched as early as possible, even if some features are not in place. The main benefit of this is that you gain invaluable feedback at an early stage, allowing you to tweak your product based on what your user actually wants – not what you think they want.

Again, this mindset helps to reduce costs since you don’t spend time developing features that your users don’t…well…use!

Think about your post-launch strategy

“Business has only two functions – marketing and innovation.” – Milan Kundera

A common mistake is to consider your website ‘finished’ once it has launched. From online marketing to developing new features, you should always be thinking about how you can provide a better service for your users. Look at what your competitors are doing on a regular basis – think about what works for them and what doesn’t work for them.

Remember that these activities cost money, so don’t spend every penny of your budget before your site has launched.

Tags: ,
No Comments

jQuery 1.4 Reference Guide review

Tuesday, March 16th, 2010

In the interests of full disclosure, Packt Publishing sent me a copy of this book for me to review. There was no other compensation received for this review. I am reviewing this book for the benefit of the blog readers.

The recent release of jQuery 1.4 brought a plethora of new features and major performance improvements across the board. At the same time, the new jQuery API site was launched in an effort to improve the documentation and community spirit. Make no mistake, 1.4 is a milestone release for jQuery.

To mark this, Karl Swedberg and Jonathan Chaffer have released the jQuery 1.4 Reference Guide, an exhaustive tour of the functionality that jQuery 1.4 offers. There are eleven chapters, covering selectors, DOM traversal and manipulation, events, effects, AJAX, plug-ins, and more. In addition, there’s an alphabetical API reference guide and a couple of really useful appendixes providing lots of handy information.

As I mentioned above, each chapter groups together jQuery methods with a common theme. There are helpful code samples for each method, and they are explained thoroughly in the accompanying text. Occasionally, performance tips are mentioned, but as the book stresses early on, you shouldn’t worry too much about micro-optimizing code – your time as a developer is more valuable than that!

So who is this book aimed at? Well, as the name suggests, this is a reference guide. A familiarity with jQuery syntax is essential, and in some areas, a decent knowledge of vanilla JavaScript will be beneficial too. Although there are hints and tips peppered throughout the book, this is no tutorial book. If you’re not familiar with jQuery, you should pick up Learning jQuery instead, by the same authors.

As such, I would recommend this to the intermediate to advanced jQuery user. You will almost certainly learn something from the book, and a reference guide always comes in handy! Some of the major points I picked up were:

  • Many jQuery methods accept anonymous functions as parameters now – this is a really clean, practical way of writing code
  • There are more ways to measure elements than I realised – I knew about .height() and .width(), but not .innerHeight(), .outerHeight() etc. This has caused me problems in the past!
  • The Sizzle selector engine is really, really powerful and I’m not using it to its full potential.

The downside of a book like this is that it dates relatively quickly. For example, jQuery 1.4.2 introduced two methods – .delegate() and .undelegate() – which are not covered in the book. There’s no getting around this when the library itself is under heavy development, but it’s something that you should be aware of if you’re considering purchasing.

I also spotted one error  that I reported at the publisher’s website, so if you do purchase this book, you should keep an eye on the errata there.

However, if you’re looking for a jQuery reference guide, this is the book to own. The publishers will donate to the jQuery project for every copy of the book sold and you will learn something from this book, so it’s a win-win situation! The jQuery Reference Guide is on sale now, with a cover price of £24.99.

Tags: ,
No 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: , ,
No 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: , ,
(1) Comment
« Older Entries