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.

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.

Drum Central is Scotland’s leading provider of drum kits, accessories and hardware in Scotland.

Selling their wide range of drumming products both offline and online Drum Central appointed 360innovate to redevelop their existing website with the intentions of making the brand image more current and the website easier to administer.

360innovate proposed an ecommerce shopping cart that allows shoppers to find their desired product with ease, purchase gift vouchers to spend instore, sign up for newsletters and connect with the brand via social media. The final result is a vibrant website that is sympathetic to the rock genre and information rich providing visitors to the website with a wide array of content to aid and enhance their shopping experience.

Visit the Drum Central website.

Like what you see then get in touch with 360innovate today.

Rubberseal are flat roofing specialists,  providing roofing products and installation services to commercial companies, contractors and home owners.

The Rubberseal website was built on a content management system, making it easy for the client to update the web pages. The main areas of the website are separated into Installers, Commercial and Home Owner pages with clear navigation buttons on the main homepage making it very easy for visitors to the website source the information they are looking immediately.

Like what you see?

For further information about 360innovate’s web design services please contact us on 0141 241 6190.

Colour is a major factor in all aspects of design. It can create moods, styles and can evoke feelings and actions within people. Colour is a truly fascinating area, one which is constantly evolving and inspiring us to create new and refreshing designs.

Gone are the days where there were certain rules  with colour such as never mix red with pink, now we can put any colours together and still achieve a well balanced and stimulating design. But what if we start to limit colour in design? Instead of splashing colour about without much thought, what if we refine colour back to the very basics and only use what is really necessary.

Limiting colour in designs can create a more coherent and consistent look, making them more defined and altogether stronger. Using a limited colour palette doesn’t mean restricting the design, rather it can create emphasis on content, branding and messaging. It can also make a design more creative and intuitive, focusing on typography, imagery and layout.

Black and white is commonly used to create this limited colour scheme, however any colours used in isolation can be manipulated for this type of style. For instance take our very own 360innovate website, where we employed the dark blue as the primary colour with only white included for text and purple and orange used very sparingly for some content headers. This gives the site an easily flowing design, pulling the information together giving it a clear sense of purpose.

Below are some examples of other websites employing the effectiveness of limiting colour:

Following on from our previous post announcing that the Ardanaiseig Hotel had been nominated for several awards at the prestigious Scottish Hotel Awards we are pleased to announce that the hotel was presented with several awards including:

• Romantic Hotel Restaurant of the Year 2010
• Intimate Wedding Hotel of the Year 2010
• Chef Medaille D’Or for Dinner Excellence (Gary Goldie)
• Gold Medal for Housekeeping (Ruth Clark)
• And lastly, but by no means least, the hotel website received special commendation.

Having redeveloped the Ardanaiseig Hotel website we are delighted for it to be recognised by the Scottish Hotel Awards, and can only imagine how ecstatic the staff of the Ardanaiseig Hotel must be- well done to everyone!

If you would like to visit the Ardanaiseig Hotel website you can do so here.

360innovate have launched a new ecommerce website for the Stirling Pram Centre.

Having identified that the previous website was no longer fulfilling the requirements of the business Stirling Pram Centre sought the services of 360innovate and following a design session it was identified that refreshing the website design, bringing it up to date and in line with their competitors, would be beneficial for increasing the success of the Stirling Pram Centre website.

In redesigning the website emphasis was placed upon the shopper experience, 360 aimed to increase the level and quality of engagement of visitors to the website.

“Right from the word go 360 listened to what we were looking for and delivered exactly that. The support and advice I received from them was second to none – a company I would highly recommend!” Abby Porter, Stirling Pram Centre

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.

Design Crush is back after a long break and after months of silence we are here again, this time we are talking about good examples of websites employing motion graphics.

Using full screen images with video or motion graphics as the design basis for a website used to be something that many designers shied away from due to the large loading time required for such demanding tasks. However with better, faster broadband speeds, using full screen graphics with motion technology is becoming more and more popular.

It’s really quite amazing watching web design evolve into a moving, involving and all encompassing experience. Full screen imagery and motion graphics is popular with clothing, car and technology sites but it can and has been used for a variety of  markets and for a multitude of purposes. The appeal of this style is down to it’s ability to pull users in, encouraging them to explore the site which in turn allows them to find out more about the company, product or service being advertised. It’s not enough to just supply users with information and flat imagery anymore, they want to be entertained, they want to be moved and motion graphics can cater to this need. Motion graphics can give users a richer user experience however, if not done properly it can be seen to be a time waster and can even turn users off.  Therefore this type of medium should only be used to serve an actual purpose, not just as decoration and of course should be executed to the highest standard.

To show just how far we have come with motion graphics in web design, here is a collection of sites that reflect this ever growing and developing style and technique.

If you are interested in finding out more about motion graphics in web design here are some links to help you out:

4 web design tips for motion graphics sites

motion graphics gallery - motionserved.com

If you have any outstanding examples of this type of web design please share them with us, we would love to see what everyone else likes.

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.