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.

Following on from ‘would your website stand up in a court of law’ I thought another area of e-business worthy of discussion is email marketing and the law.

As with any type of direct mailing, email marketing is strictly regulated to prevent the abuse or misappropriation of consumer data.

The transmission of Electronic Mail is regulated by the Privacy and Electronic Communications (EC Directive) Regulations 2003, which states that;

1. You cannot transmit, or instigate the transmission of, unsolicited marketing material by electronic mail to an individual subscriber unless they have previously notified you, the sender, that they consent, for the time being, to receiving such communications. There is an exception to this rule which has been widely referred to as the ‘soft opt in‘ (Regulation 22(2) refers).
2. You cannot transmit, or instigate the transmission of, any marketing by electronic mail (whether solicited or unsolicited) to any subscriber (whether corporate or individual) where:

• the identity of the sender has been disguised or concealed; or
• a valid address to which the recipient can send an opt-out request has not been provided. (Regulation 23 refers)

In summary the 2003 Regulation states that you can only carry out unsolicited electronic marketing if the person you’re targeting has given you their permission (opts in) or if there is a customer relationship in existence. An individual subscriber is defined as a living individual which includes sole traders and unincorporated partnerships, and are given much greater protection than the corporate subscriber.  Corporate subscribers are companies or individuals within companies; sending unsolicited emails to corporate subscribers is allowed.  The rationale for this being that the same safeguards imposed for a business to consumer relationship would impede a business to business relationship. No matter the recipient, corporate or individual, ecommerce regulations require that if your email is a commercial one it must be clearly identifiable as such.

Email marketing and individual subscriber

As the previous paragraphs states you cannot simply direct mail individual subscribers, you must obtain their prior consent to do so. The only exception to this rule is if there is an existing customer relationship between the business and the individual. Even still there are certain rules about how you contact them, firstly their email address must have been acquired through the course of a sale, secondly any further emails must relate to your business products or services, and at the time of the email being acquired the individual was given the opportunity to refuse their email address being used for direct mail purposes. As with all direct mail, including sending to corporate subscribers, the email must contain clear address details for the sender and must be given an option or means of removing themselves from the subscription list. Further to this, e-commerce regulations require you to make all commercial emails clearly identifiable as such, either in the header or the text of the email.

Obtaining mailing lists and contact details

The Data Protection Act 1998 is designed to regulate the capture and storage of personal data, and provide the individuals whose personal data is being capture with certain rights. If a business chooses to capture, purchase or store data, in this instance for the purpose of email marketing, then they must abide by the regulations outlined in the 1998 Act.
The key principles of the Data Protection Act 1998, relevant to email marketing, are:

• Data must only be used for the purpose of which it was collated
• The data must not be disclosed to other parties without the prior consent of the individual, this also includes reveals recipient details in emails.
• Individuals have a right of access to the information held about them
• Personal information must not be kept for longer than is necessary
• Adequate security, technical and organisational measures must be in place to protect personal information

Any business capturing visitor data on their website must provide appropriate warnings to the data provider and are legally bound to inform individuals of what the data will be used for.

In conclusion

You cannot send unsolicited marketing messages by email to individual subscribers unless you have their prior consent unless their information was collected in the course of a sale or if the recipient has expressed an interest in ‘similar’ items and chose not to opt out when the address was originally collected.

When sending a commercial email ensure:

• that your company title and contact details are clearly displayed
• the email is identifiable as being a commercial email
• recipients have the option to unsubscribe or opt out of future correspondence
• individual recipient details are not disclosed within the mailing list

Get all this right then you’re halfway to creating an effective email marketing campaign, check out our guide to getting email marketing right or view our case studies on how we’ve helped clients get excellent results with email marketing.

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.

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.

Last year we talked about getting more Christmas shoppers to your website and getting them to spend, but this year we 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.

A recent study written by reformed burglar Michael Fraser for insurer Legal & General, reveals that 38% of social network users post status updates with details of their holiday plans while others discuss trips away from home outside the privacy of their own page.

In his report Michael Fraser states that by discussing such private information they putting themselves at risk of burglary, according to Fraser criminals are using social networks such as Facebook and Bebo to target individuals. The report warns that by listing private contact details such as your address then openly discussing your holiday dates Internet users are putting themselves at risk of being targeted.

Further research conducted by insurer LV= has found that over 8 million adults have given their chip and PIN details to someone else to make a purchase on their behalf over the past year, resulting in 24% falling victim to fraud.

Online users particularily the 16 – 24′s, who are reportedly the worse age group for posting sensitive information online, need to be made more aware of the risks they face when they log onto social networks and pick up emails.

Did you know that 90% of internet users have email addresses? This makes checking emails one of the most common uses of the internet . So for successful business online, using regular and effective communication is key, making email marketing a popular and cost effective way to get your company message out there.

However, in order for your email marketing campaigns to reap all of the benefits follow our tried and tested pointers:

1. Use an effective email list. There are many ways in which you can create unique emails lists that are tailored to your market. Use your established customer’s details, get people to sign up at events you attend, or let people subscribe to it through your website.

2. Keep your emails regular. People like consistency so whether you are planning to send emails once a week, once a month or once a quarter, stick to it.

3. Make your emails interesting. Make sure that whatever you want to say in your email will be interesting to the readers. Whether it’s about new products or services, there has to be some advantage to the readers for the emails to make them take action.

4. Speaking of action… do your emails have an effective call to action? Don’t just send through information, make sure that your emails get your recipients to follow through to whatever outcome you want, whether it is getting them to buy new products, or using your services again.

5. Keep it short. People are less likely to spend time reading a long email, so the more concise it is, the more you can expect your emails to be read.

6. Don’t spam. Try not to make your emails spammy, if you do, it will just go into spam/junk mail and will probably never be looked at.

7. Can your recipients easily unsubscribe? To make your company and its emails more legitimate, you should make sure that they can easily opt out of receiving the emails.

8. ‘DO NOT REPLY’ email address. There is nothing more off putting for your email recipients than seeing that the email is sent from this type of addresses. Instead you should be encouraging interaction between your company and its customers, which may give you some additional insight.

9. If your sending mass emails out, use an email marketing software product. It will save you a heck of a lot of time!

10. Measure its success. The best thing about email marketing is that you can measure its effectiveness easily, so take advantage. You can record how many people opened the email and how many times the embedded links are clicked through. This can allow you to adjust your strategies to increase the response rates.

If you have any more pointers, we would love to hear them. Happy emailing!

So you have just taken ownership of your spankingly new online presence – be it a blog or a content managed website you’ve had developed.

You’ve read the manual, had the training and put on your best typing hat (ok, so that’s just me then! ) and you are ready to show the world your dazzling linguistic ability.

That’s all very good but its often all too easy to undo all of this good work with poor use of supporting imagery and bad formatting, making your posts or pages difficult to read, and ultimately affecting your user’s experience and perception of your online presence.

By taking a few simple steps to ensure the visual side your posts are properly cared for you can really help to improve the overall user experience.

Content Managment Systems

Here at 360innovate we offer content managed websites. These allow our customers to take full control of their websites allowing them add, edit and delete pages and giving the administrators full control of the website content.

This has huge benefits for the customer as they are able to quickly and easily update content without having to contact their web developer.

The responsibility of power

“With great power comes great responsibility.” –Peter Parker in Spider-man (2002).

When taking control of your web content it is down to you to make sure that the content reaches your user in a readable and well presented format. Well thought out web content combines of a number of factors including:

• Typography
• Layout
• Imagery

If you have had a website developed on you behalf or are using a blog template you might not have direct control over certain features, but you can still make an impact with carefully managed content.
Below I hope to outline a few hints and tips on how to edit and organize images.

Enough waffle!……How do I go about editing my images?

Photoshop of course! …. You don’t have Photoshop? Just us designer types, huh? So we need to find something that will do just as good a job but for free.
Luckily for anyone with a half decent broadband connection, help is at hand. There are several free to use image editing applications that are extremely robust and will handle many of the basic tasks required to get your images online.

Below is a list of the online editors I’ve had a chance check out though there are many others available.

Pixlr
Sumo Paint
Aviary Pheonix
Splashup
Adobe Photoshop – (requires sign up to Adobe.com – this is free, but takes about 5 mins)

For the purposes of this article I will be using Pixlr though any of the applications above will be able to handle the tasks in the tutorial, although maybe not in exactly the same way.
I have also set up a dummy WordPress blog to go along with this tutorial and while I’m aware that WordPress is a fantastic tool with some great easy to use image control options I’d like to maintain focus on our image editors, so the blog just shows our images edited down and placed in context.
My dummy blog can be found at http://sufferingsuccatash.wordpress.com

You can click most the screenshots below to view an enlarged version.

First up – Image Resizing/Cropping

Taking beautiful digital photography to go along with your article content is becoming a lot easier these days, due to the proliferation of high quality digital cameras. When it comes to the web though all of your extra megapixels suddenly become a bit redundant as you will usually end up needing to resize your photograph to fit within the bounds of your website or blog.
Even if you have some sort of popup image gallery that requires a larger popup image you will still probably need to resize this as well.
There are benefits to resizing your images.

• Smaller images load a lot quicker than larger images.
• You can precisely control the layout of your web content.
• Careful cropping and position can have stunning results.

So lets get started (finally!)

The first step I would recommend would be a little preparation with a pen at the ready to note down the width in pixels of your intended content area. This is where using Firefox as your web browser comes in very handy – there are a number of Firefox add-ons that will let you measure elements on the web page precisely. I’ll be using the ruler from web developer’s toolbar, though measurelt will do just as good a job.

Measure your content area width by activating your ruler of choice and dragging from the top left of your content area to somewhere on the right that looks about right – a few pixels either way should not make too much of a difference and round numbers are easier to work with (always round down rather up – images that are too wide may inadvertently ruin the layout of your site).

My blog has a content width of 455px. So from here we can work out precisely the sizing we need to create a number different layout styles for your images and content.

Go to http://www.pixlr.com/editor/ and launch the application.

The Pixlr interface is very similar to Photoshop in look and feel and features a menu bar along the top, a tool bar on the left as well as a Navigation and Layers palette on the right. Pixlr also features a really handy history tool usually located the bottom right. This allows you to cycle through every change you made to the document – just like Photoshop – to undo any errors. First up we want to open our image. Pixlr has a launch menu that allows you locate the image you need to edit. Alternatively you can click file and open to find your image.
I have chosen a fairly large stock photograph of some mountains.

Creating a wide banner image

I am going to resize our image to the full width of the content area. From the top menu bar in pixlr click image and from the dropdown choose image size… a popup should appear – type in 500 in the width box ensuring the “constrain proportions box is ticked”. This will stop the picture getting squashed or distorted when we resize.

The height box should automatically adjust to right proportions. Hit “ok” to commit the changes.

Now we have an image that is set to the correct width, we will need to use the crop tool select a narrow area.
From the left hand tool palette select the crop tool (three options down from the left).

Click and drag across the image then release the mouse button and you should see a crop selection box appear.

At the corners of this box there are handles that allow you to alter the selection into a position you are happy with. I have made sure that my selection is the full width of the image and that it is sitting over portion of the image that I want to work with. Once you are happy with your selection press return to commit the changes and your cropped image should appear.

If you are not happy with your selection you can use the history palette (on the right hand side) to go a step back and try again.

In this case I am reasonably happy with the selection but I think it is has just a little bit too much height so I will use another technique to crop some more height off the image.
The information in the navigator palette on the right hand side will give details your crop box height and width while you are using it, which allows you to be pretty accurate with your cropping. However I have a specific height in mind and I can specify this using the image menu and selecting canvas size…

A dialogue box appears which allows you specify the height and width of the canvas (the working area of the document). At the moment the height is 108px and id like to crop this down to 100px. So we type 100 in the height box and leave the width at 500px.

Simple right? But wait, there’s more….
Below the height and width boxes there is a section labelled anchor. This tool uses 9 boxes, arranged in a 3×3 grid, to specify where in the document any cropping will occur. For instance click on the top left box and cropping will occur at the bottom and right hand side of you document.

I’m going to select the bottom center box, which will crop from the top and (had I specified a width other than 500px) from both the left and right hand sides – preserving the bottom portion of the image. Click ok on the dialogue box to commit the changes.

So there we have some very basic cropping techniques. With these image editors it will often be the case that there is more than one way to achieve a particular outcome and it comes down to practise and personal preference as to which will work best for any individual.

Saving a document

We now need to save our document and make it ready for the web.
Click File then Save… to bring up the save dialogue box. You will be asked to choose a file format either .jpg .png .bmp or .pxd. Below is a very brief explanation of the formats available. Click the links to find out more.

• JPG – the commonest format for web based imagery and the one we will be using. Uses a lossy (some of the original image information is lost) compression format to reduce the size of images. More information about jpg here.
• PNG – Best image quality and ability to use transparency make this format versatile allowing very creative results to be produced. Not so good for general photography as file sizes tend to be larger. More information about png here.
• BMP -Lossless images and some transparency support – however, file sizes tend to be way too large for web applications and I would advise against using them. More information about bmp here.
• PXD – This is Pixlr’s very own file format allowing you to save layered files for future editing. Great stuff – give this a try when you have time.

As I said, we will be saving in JPG format so making sure that JPG is selected from the dropdown list, we can take a look at giving the file a unique name (be sure not to overwrite the original file).
Next we want to take a look at the quality slider, which is set at a default of 80.

This slider lets you set a number between 1 – 100 and determines size of the file, which will be generated. The lower the number you choose the smaller the file size, but there is a trade off to be made here as the smaller file sizes also result in a poorer quality final image. The reason for this is your choice of number sets the level of compression or shrinkage (to use the scientific term ). When a file is compressed using the JPG format some of the data is removed in order to shrink the file size.

I would usually try to set a level of 80 – 90, which will give a relatively clear result and decent file size. Every image will have a different optimum compression and it may be worth trying to save in a few different compression levels to see the difference for your self. Once you have set your compression level hit ok to activate your own computers save dialogue and save the file as you would any other. Your file is now ready for upload to your site.

So why am I banging on and on about file sizes?

Image files tend to form quite a large part of page loading time for a web page and the smaller we can get our files the quicker the page will load. If you have lots of images on your page it takes longer to load (think – one of those viral emails we get every so often which contain a hundred images of ‘animals that look like their owners’ or ‘preposterously overloaded vehicles’).

You can repeat the steps used here to create web ready images of differing sizes to compliment your text content. I my dummy blog i have used some other photos and cropped them in various ways to show what can be achieved.

The importance of consistency

I really cannot stress this enough – CONSISTENCY IS THE WAY FORWARD!!!! Maintaining a consistent look and feel to your site is really important for ensuring a professional appearance and enjoyable user experience.

With our imagery we can keep it consistent by choosing specific heights and widths for imagery and sticking resolutely to those sizes.

We can also achieve consistency by through well thought out combinations of typography and imagery.

Its all too easy to go wild with experimentation when given control of a website. The basic styles that have been created for your site should give plenty of scope for adding you content. The temptation is often there to start adding bright colours and using a number of different font styles/sizes/weights to try and draw attention. This can often lead to some really unprofessional looking pages.

The tutorial above only covers the very basics of image manipulation and you may have noticed in the dummy blog that there were a couple of images which had some simple but very effective effects applied. In my next post i will introduce the concept of layers and show how powerful effects can be achieved with relative ease.

If you have managed to read this far without keeling over from exhaustion – I thank you for your patience and resilience.

Domain name theft is no rare occurrence, and the numerous incidents that have made the tech headlines including the theft of Adios.com, have went unprosecuted, this may change after the recent arrest related to the theft of popular website domain name p2p.com.

On Friday July 30th a New Jersey man, Daniel Gonclave, was arrested on suspicion of stealing the rights to p2p.com and selling them to Mark Madsen, who coincidently plays for the NBA team the Los Angeles Clippers. The full extent of his arrest includes theft by unlawful taking or deception, identity theft and computer theft.

Was is Domain Name theft?

The illegality of domain name theft is no different from any other form of theft.

Basic definition of theft

1.–

(1) A person is guilty of theft if he dishonestly appropriates property belonging to another with the intention of permanently depriving the other of it; and ‘thief’ and ‘steal’ shall be construed accordingly.

A domain name is essentially a piece of real estate online, hacking into an account and selling it unlawfully is no different from breaking into a house and stealing a vase off the mantel piece. In the present case Daniel Gonclave is accused of hacking into the previous owner of the p2p.com domain and transferring all rights to himself, the p2pcom domain was then sold by himself on ebay to Mark Madsen for $111,000.

Why is Domain Theft so common?

Many entrepreneurs make a living from buying and selling easy to remember and desirable domain names, at the time of the theft the p2p.com domain was valued at $200,000, therefore in any situation where there is money or items of value there is also a black market equivalent; criminals hacking and stealing popular domain names and selling them on to unsuspecting buyers.

What now?

This is the first case of its kind and it brings to light to lack of law protecting people online and although many domain name registry companies have safeguards in place it is evident that many unlawful registry transferrals are slipping through the net. Perhaps the biggest safeguard would be to issue domain name owners with title deeds, similar to when you buy a house? Fingers crossed the p2p.com case will bring to light a suitable solution for this online criminal activity.

Okay so you have a design meeting with the web designers coming up… you’ve got a few ideas floating around but not quite sure what exactly you want- so how do you get the most out of your meeting? Preparation!

1. Know exactly what you want your website to achieve. What is its aim: Brand awareness? Increase sales? Customer Service?

2. Look at your current company image and branding, establish whether you want to continue with this or not. Developing a new website is the perfect opportunity to have a brand overhaul, many web design companies now offer branding consultancy and can assist in the development of brand guidelines.

3. Create a detailed description of what you want the website to do. Have a list of the various things you want users to be able to achieve and do on the website.

4. Provide the design company with as much information about your company as possible; who your stakeholders are, what your mission statement is, what your future goals are etc. Your website should form part of your overall marketing mix, it is a business tool in itself therefore to make the most of it you need to ensure that it fits in with your current and future plans for the company.

5. Who are your main competitors and what sort of online profile have they achieved so far?

6. Have a specific image of how you want the website to look? Create a mood board with all various design elements and inspirations that you have for your new website.

7. Put together some of your favourite website, scour the web for websites you like and which inspire you. See any functionality or features that you like then take a note and tell your web designer about it, it may be something you have seen on a random website that has no relation to the industry you currently work in but elements of it could still be adapted for your website.

8. How much do you really know about web design? How much do you want to know? Compile a list of all the different questions you want to ask your designer, once you get into the crux of the meeting you may become bamboozled by all the chat and forget all the points you wished to raise. A design meeting is not only about the design team getting information from you it is about you getting information from the design team.

9. Bring along any corporate literature; pamphlets, brochures and flyers all form part of your offline marketing and your online marketing should reflect this.

10. Have a good look at what your design company have already produced, perhaps contact them prior to the meeting to request further information on any specific website so you can gauge what they did and how they did it.