Firstly, it's important to understand that the success of any website is measured by the results that it achieves.

What do we mean by website results?

When visitors of our website complete the actions we want them to complete - i.e., more sales, more enquiries, more bookings, more business and more customers.

So how do we get more visitors to take action on our website?

There are 5 factors to work on...

1. Find visitors who are motivated - this will happen if the promotion is relevant, i.e., it's attracting the right kind of people to our website

2. Convey the value proposition - the website needs to communicate this aspect quickly and clearly

3. Reduce friction - make it easy for the visitor to navigate around the website and complete the website goals smoothly (for example, long or unnecessary forms can lose visitors).

4. Relieve anxiety - get  the visitors to trust you so they are willing to do business with you

5. Create incentive - offer something to prompt action (putting a time frame on it can also create urgency)

But....... the one thing that most websites ignore and the one thing that can make the most difference (from our experience) is a value proposition conveyed clearly and concisely!

What do we mean by value proposition?

When anyone visits a website, they have 2 questions in their mind....

1. What? What is this about? What can I do, buy or get here?

2. Why? Why should I be interested? Why should I continue?

Marketing Experiments study shows that if your website can't answer these 2 questions in about 3 seconds, visitors are less likely to take action.

Therefore, in the first 3 seconds, the top part of the page needs to tell the visitor why they should stay here to look for the solution..... rather than look somewhere else.

The order is important

Not only does the page need to answer these 2 questions, but it's important that the questions are answered in the correct order.

Our tendency is to rush into 'why' before we have answered 'what'. For example, it's no use describing the unique flavour if I don't even know that you sell ice cream.

Otherwise you create confusion..... & confusion creates mental resistance.

How does design fit in?

The visitor must be interested, understand and believe the message and design is the art of presenting that message.

Great website design will communicate the message...

• Clearly
• Concisely
• Quickly

How can design do this?

Using an eye path

Design controls what the visitor sees 1st, 2nd, 3rd and 4th. There are 6 ways to control this...

1. Size
2. Colour
3. Shape
4. Motion
5. Depth
6. Position

We use these methods to emphasise one thing over another - we create a visual hierarchy to control what the visitor sees 1st, 2nd, 3rd & 4th.

Let's see that in practice....

1. Present the message in a linear format so that the visitors' thoughts come in the right order. Their eyes should travel from top left down to the center through the headline and vertically down the page.

2. Incorporate the value proposition in the opening headline. If the visitor reads anything on the page, you can guarantee that it will be the opening headline.

3. Make the message short and sharp. Get straight to the point - provide just enough reason for the visitor to continue with the next step.

4. Break content into headings and sub-headings - Use bullets or icons such as a 'tick' to break up text and draw the eye

5. Use large text for important words

6. Remove clutter

7. Reduce distractions - Remove, separate, tone down 'related content' so it does not distract from the primary message

8. Convey the message with images - take care not to confuse or distract with irrelevant images

9. Tell the story with case studies & testimonials - convey your value proposition through a story and build trust and credibility

10. Convey your message with your 'call to action' - let the visitor know exactly what you want them to do next

11. Use white space - to reduce clutter and make the message easy to read. Think of it like a 'pause for effect'

12. Use depth - depth can be used to separate and emphasise content. Textures and drop shadows create the illusion of depth

And finally... our golden rules

1.  'Quirky no worky' :-)

2. And always remember to measure, review and improve for continual progress and improvement on your website results.

It is easy to design a good looking website. A good web designer will create a website design that is unique, reflects the brand and builds instant trust with the visitor.

It is hard to design a website that generates results. It takes an expert designer to create a website that presents the right information, in the right way so it achieves your business goals.

Contact us for your website needs.

You can't just publish your website, leave it and expect it to succeed.

The number one reason websites fail is because they are forgotten about and neglected. Remember, running a successful website is like running a business. It involves regular ongoing improvement.

Inhouse vs partners

You need to find the right person or team of people to work on the ongoing improvement of your website You need to first of all decide whether to work on it inhouse or pay for a professional.
Either way it will cost money, whether you handle it yourself inhouse or pay a professional. Your decision will of course come down to which method provides the greatest return on investment (ROI).

How much time do you dedicate to improving your website?

We are often asked this and our answer is, it depends. It depends on a number of things such as; how much budget you have available, how integral the website is in your sales and marketing process. But to give you some ideas....

Minimal - 1hr per month
Average - 2hrs per month
Healthy - 8hrs per month
Go hard - 8 hrs or more per week

Your website users will occasionally land on a page on your website that doesn't exist. This could happen due a number of reasons - they may have typed the wrong URL or there is a broken link on your website or the link has been moved. When this happens, your website will direct them to a standard 404 page which is basically informs them that the link is broken.

A typical 404 error page is generally uninviting and unfriendly. It's very unlikely that people that arrive at this page usually explore any further - they are pretty much lost visitors.

A custom, unique error page will keep them on your website

Having a custom 404 page that is unique and guides your visitor back to a working page on your site can greatly improve your user's experience. People often make a mistake when they type in URLs and end up landing on your error page. If this page is vague and also unintuitive, you will find that your user will leave your site and never come back. This is the reason why some of the best sites in the world come up with a creative and informative designs for their 404 pages.

Therefore, we highly recommend that you take some time out to customise your error page and make it your own. You can do this by going into the back end of your website under the 'standard pages' section and edit the page called 'Page not found'.

A few tips to consider when designing your 404 page

• Help your visitor find information. A 404 error page should do its best to help your visitors find what they are searching for. Therefore, include details of where they can go to find more information or how they can inform you about this error.

• Avoid being vague. Providing a vague message like "Not found", "404" or just not having a 404 page at all can and will lose you valuable website visitors.

• Use a design that is consistent with the rest of your site. Remember that this page is part of your website so keep your personality and design consistent.

• Configure web server to give 404 HTTP status code. You want to make sure that Google spiders know that this page doesn't exist so Google will remove the page from cache so people won't come to this page through search engines. If you have a Zeald website, we will take care of this automatically for you.

A few examples of 404 error pages to inspire you

1. Zeald

2. Livadaru.net

3. Fryewiles.com

4. Twingly.com

5. Hootsuite.com

The following table compares a number of the top Stock photography suppliers. We have rated each supplier out of 10, 10 being excellent and 1 not so good.

We have tested each supplier for the selection and range by using 2 popular search phrases "New Zealand" and business person"

Stock photography supplier	Overall rating	Selection	Photo Quality rating	Pricing structure
www.istockphoto.com	9 Great price Excellent quality images Great selection (The best selection of illustrations)	9	8	Average US$1 for a low quality web graphic and $US7 for a scalable vector illustration Payment via a credit system
www.sxc.hu www.stockxpert.com	7 Great price Good quality Good selection	7	5	Range from Free using the www.sxc.hu catalogue and average US$1 via a credit system
www.inmagine.com	6 Good selection Good quality images Reasonable pricing Good size comp images without watermark	6	7	Average of $NZ65 - $NZ150 for low res screen images
www.photos.com	7 Great price Good quality Good selection	5	7	1 month US$139.95   3 Months US$249.95   6 Months US$349.95   1 Year US$599.95
www.gettyimages.com	7 Very expensive but very high quality Great selection	8	9	Combination of royalty free and royalty images Range from US$100 - US$500
http://pro.corbis.com/	7 Very expensive but high quality Great selection	7		Combination of royalty free and royalty images Range from US$100 - US$500
www.bigstockphoto.com	6 Good price Good selection Good quality	8	6	Buy ANY photo as low as $1.48 (Buy credits – Discount oferred for bulk credit purchase)
www.shutterstock.com	5 Good price Average selection Average quality	5	5	Subscription model - 1 Month -25 per day US $139 3 Months -25 per day US $395   6 Months -25 per day US $749   1 Year -25 per day US $1359
www.photonewzealand.co.nz	5 Very expensive Great NZ selection	5	7	Rights protected only – quoted manually by account manager

The ecommerce website designers you select and the technology you choose to build your site with will be a major influence on the success of your new website. But how do you make a good decision? This article talks through some of the key factors that you need to understand.

 

More Than Pretty Pictures

People often consider websites to simply be a more modern version of a printed brochure or business card, in practice so much more can be achieved. Websites need to be useful to the end user. On the internet the competitive environment is different - people have much more choice, and the competition is two clicks away rather than 20 minutes drive! If your website doesn’t give the user what they want quickly and easily they will go elsewhere. In particular a website needs to be fluid; it must be constantly evolving, up-to-date, and usable. Ecommerce website designers are beginning to realise that the old methods of building a website and providing an ongoing 'update service' is not good enough.

Static versus Dynamic

A static site is a collection of website documents that require website design skills to update. Users of the site can navigate and view these pages, but because they are “static” nothing will change until the original ecommerce website designers change it.
A dynamic ecommerce website is an application. The website is able to respond to the user inputs, allowing more advanced features like forms, shopping carts, forums, searches and database access. A good dynamic website will also provide tools that enable the website owner to create and update website content without any assistance from the original ecommerce website designers.
These dynamic features are very important to a serious website owner. An ecommerce website should not be thought of as a static brochure. For an ecommerce website to be effective it should be constantly evolving. It should be going through a continual process of measurement and improvement. A good dynamic website system should continually measure your ecommerce website performance and feed-back to you any problem areas that are occurring.

Why Not Flash?

Flash is a technology often used to create animation on the web. While it can create visually impressive movies and presentations, and is definitely useful for specialist purposes, it has some fundamental flaws that make it unsuitable for general purpose ecommerce websites. Below are some basic reasons for steering clear of flash unless it is used very carefully in a very specific setting.

• Flash websites tend to be created once and then left alone.
• Flash content is typically superficial, and seldom provides useful information to the customer.
• Flash typically requires an external specialist designer to create and update the content. This content can quickly become stale.

 

Ecommerce Websites

Ecommerce is defined as the process of selling and buying goods and services via the internet. When selling your goods and services online, it is important to display your products and services in a simple and logical way so that they are easy to find. It must be very simple and intuitive to navigate the website and use the buying functions. Placement of the products, sales copy, product photography, general page design and so on will all make significant differences as to whether your products sell well or poorly.
Security is a vital factor when collecting sensitive information over the internet. Your ecommerce website should use a technology called Secure Sockets Layer (SSL) to protect all sensitive information. Customers want to know that all key information is safe from theft when they shop online.
After an online payment is received, an order confirmation needs to be sent immediately to the customer letting them know that their payment was received and their shipment will be sent out as soon as possible. Remember, many customers will be a little nervous when they purchase off you for the first time. It is important that you reassure them as soon as possible.
The final part of the process the business will be alerted that an order has been placed and needs to be shipped as soon as possible.

 

Selecting an Ecommerce Website Designer

 

DIY Ecommerce Website Designers

This option involves purchase a piece of the software that will assist in the authoring of a website and taking the DIY approach. You will need to select a software package, learn the software package and create the website.
This method is used as an initial attempt by many small businesses. It is often a cheap alternative to commissioning a professional ecommerce website designer. Unfortunately the time required to learn not only the technology but also the techniques and the methods required to build a successful ecommerce website is enormous. Skilled ecommerce website designers and developers generally require a tertiary qualification and years of experience. A successful ecommerce website requires a rare combination of artistic, technical and online sales and marketing skills
Most ‘Do It Yourselvers’ end up spending a lot of time producing a ecommerce website that is a complete failure. How do we know? We are talking to people who have taken this path every day! The time and energy that you will spend learning a software package and how to design and build an ecommerce website is far better spent concentrated on the important aspects of the ecommerce website that relate directly to your business – sales copy, photography, marketing and promotional strategy, customer service policies etc.

 

Cowboy Ecommerce Website Designers

Your uncle's aunt's nephew's cousin can NOT cheaply build you a successful ecommerce website, any more than they can build you a house or fix your car. The website development industry is still a very young one - most website development companies only started to appear in the mid-nineties. So, it is perhaps not surprising that the WWW sometimes resembles the Wild Wild West.

 

Graphic Designers -> Ecommerce Website Designers

Since you already have an existing relationship with someone who designed your business cards for you; you might wonder whether they can build you an ecommerce website. Graphic designers generally have just *one* of the skills needed to produce a good ecommerce website: they have the ability to produce something that looks good.
Unfortunately graphic designers tend to focus on this to the exclusion of many other important aspects such as usability and functionality
In many cases to deal with the technology, design agencies will have a relationship with a website development company who will implement the website designs that the design agency produce. This can prove expensive and cause issues with support and communication.
For websites with limited functionality, a website design agency will produce a static site. The real problem with this method does not become apparent until you have to pay for the time and expertise of a professional ecommerce website designer to make any small changes to your ecommerce website.

 

Website Development Companies

Website development companies specialise in the construction of websites and have the required technical skills to produce an ecommerce website with all the bells and whistles. This is sometimes the downfall of such an approach, because this functionality is often at the expense of the design. If a design is not professional looking, you run the risk of not only losing customers, but more importantly degrading your company image and brand.
Most website development companies can setup a dynamic system for your ecommerce website, but it will come at a price. Because they are constantly rebuilding the wheel, designing and building websites from the ground up each time, the cost of building a dynamic ecommerce website can be very expensive. These completely custom dynamic ecommerce systems are unable to leverage off the testing and constant improvement process that occurs when many websites are built on a single ecommerce website engine (or ecommerce product). Once the initial website development is over and your ecommerce website has been launched, you are “on your own”. Further enhancements to the ecommerce website and the system come at a cost. Support is often limited as the website and the associated system becomes completely out-dated.

 

Ecommerce Website Products

Whenever a new technology is introduced everyone builds their own customised solution using the new technology. Eventually products are developed that utilise the technology. These products become the standard – or the common way to utilise the new technology. And once these standard products are developed, prices drop and the technology becomes cheaper to obtain. By reinventing the wheel each time, there is little standardisation, commonality and consistency and the cost is high. Custom-building a dynamic ecommerce system for your business will either result in a very high cost or a poor solution. Many ecommerce website products now exist that provide a high quality solution for a very reasonable cost

 

The Cookie Cutter Ecommerce Website Product

A cookie cutter ecommerce website product allows the customer to design their own website very quickly by completing a quick ‘wizard’. The ‘wizard’ will take the owner through a quick set of questions such as; website layout, colours, logo etc. Cookie cutter ecommerce websites are low-cost because the remove the consultative part of building a website. The website owner is given no assistance from a website expert and the key areas of design and planning are removed from the website development process. The result: a poorly planned website that looks highly unprofessional. (These comments may sound extreme – but if you are considering an ‘cookie cutter’ type solution try checking out the portfolio of websites that have been produced. For example – take a look at the Yellow Pages Site Builder websites (www.yellowpages.co.nz)).

 

The Zeald Ecommerce Website Product

The Zeald ecommerce website product provides the benefits of outside expertise (experienced internet consultants, website designers and developers) combined with a powerful and flexible website product. It contains a suite of tools that provide you with everything you need in order to be amazingly successful online (Find Out More About The Zeald Product >>)
Summary
There are so many different options and methods for producing an ecommerce website. Take your time, inform yourself, become aware of the pitfalls and you will be secure in the knowledge that you have made an educated choice.

 

Good Luck!

---

“Is Your Website Producing Amazing RESULTS?”

Find out how Zeald can help you with your ecommerce website design

---

Images are a very important part of your website. They tell a story and help convey information but the key is to make sure that you optimise them so the user still has a great experience while browsing your website. Use the following simple tips to make sure that your images are fast loading, tidy and professional - while still conveying the information.

Understanding the different image formats

When you are dealing with images, you will find that there are often few different file formats available - meaning the file names will have different extensions. Each one has its own benefits and depending on the situation and the kind of image, it is a good idea to look into which format works best and use that file format. The two most popular file formats for images that you will come across are Jpg and Gif:

Jpg format 

The Jpg format is very commonly used and it is good for displaying photographic images, which normally contain colour blends and tones. The Jpg file format can have several million colours, but it does not support transparency. Transparency is a feature that allows you to overlay a background colour on to your image. This is a great feature when you want to include text on a graphic background - if you go with Gif file, the background will come through the text box so the text is just sitting in as part of the background. Where as a Jpg image will not support that feature.

 

Image file types - Jpg vs Gif - photographs are a lot clearer in a Jpg format when the file size is small

Gif format

Gif images are good for small images or images with a small number of colours that are just solid colours without any fading, for example, company logos typically have a few colours and they are generally flat colours that are suitable for a Gif format. The Gif file format can have up to 256 colours and supports transparency.

 

The Gif format is great for smaller size images with limited colours or tones

The Gif format also supports basic animation so you can include files with animation for extra effect like these cute kittens for example:

 

Gif file animation

Use image editing software

When you are editing images, like for example you want to add text to an image to explain its context or you want to change colours or play around with it to make it your own, you will need to use third party image editing software. Zeald image manager also gives you access to an image editing program but it is more basic so anything that requires editing of the image itself like colours, we recommend using other software.

You can look into Adobe programs like Photoshop and Illustrator or Fireworks but there are number of online applications you can use that are free and also very easy to use. So no need to download a program on your computer. And some of these free applications also allow you to store your files on the internet. We have reviewed a few of these options so you can choose from the best available.

Crop and resize images

Image files are made of pixels and every pixel of an image takes time to load. One of the most effective methods used for reducing the file size of an image is to remove pixels by reducing the dimensions. 'Cropping' and 'resizing' are two ways we can use to do this, and depending on the kind of image you have and what you would like to focus on, you could either use one of these methods or you can use a combination of both. Keep in mind that the final image should still contain all the necessary information to get the story across.

Cropping

'Cropping' is a feature that allows you to cut the unwanted edges of an image, which makes it a very effective technique for reducing the size of an image, while still keeping the most valuable part of the image intact. By cropping an image we can remove elements of the image – like unwanted background, sky, grass, crowds, office walls, etc. This method is pretty much like the zooming function, because we are highlighting the part of the image we want our visitors to look at.

 

The cropped image on the right retains the information that we are trying to convey, while the original image on the left does not tell the story

Resize

'Resizing' an image allows you to change the size of the entire image – so all the elements of your image are still present, just in a smaller size. And because we are changing the size of the image, it is important to keep the proportions of the image the same, i.e., the height and the width ratio of the image, otherwise the image will look squashed or stretched. The Zeald website image manager program allows you to 'lock' the proportions so you can just change one of the dimensions, either height or width and the other will change automatically in proportion to the original image.

Use small thumbnail images and link to large files

Another technique used to reduce the download time of a page is to move large images, audio, video and animation files to other pages. Then create a link to them on your web page using much smaller images (called thumbnails). This will reduce the download time significantly so your customers can quickly have a look at the smaller images and choose which ones they would like to see a larger image of. So instead of having all your big files download onto a page, which could be slow and lose you customers, you will be showing them a gallery of images very quickly and giving them the choice to see more of whatever they would like.

A product category page is a perfect example of this method of displaying images. The category page presents a list of thumbnails and short product descriptions, which are linked to the larger more detailed page.

Reuse images

Web browsers have special software built into them that allows them to store files once they have downloaded, so that they can be reused. This is called caching. This means that if we design pages that reuse the same images, they do not need to download again and will display faster.

So once your users have loaded the first page, the transition to loading up secondary pages will be a lot smoother.

Some examples of images we can reuse on your website include:

• Logos and branding graphics
• Background image and textures
• Stylistic images, such as dividing lines, header backgrounds
• Product images for product highlights
• Icons, for example email marketing, shopping cart
• Accent graphics, such as "New" or "Hot"
• Call to action buttons and graphics 

Increase the compression rate

'Compression' is basically reducing the size of a file, which also lowers the visual quality of the image. So if you have a 1Mb file and you reduce the size down to 100kb, you will lose some of the sharpness in the image. Therefore, reducing the file size is a bit of a balancing act. You want to reduce the size but still make sure that the image is not too blurry or unclear. Compression works really well when you use it to display a smaller image like a thumbnail and then link it to the larger file which will open in a new page (as described above).

Compression is usually done in image editing software such as 'Adobe Illustrator', 'Adobe Photoshop', 'Fireworks' or any of the free online sources like Picnik or Photoplus 6. You can also use the Zeald website manager, which includes software that can do basic image editing that will allow you to specify the file format you want to use, i.e., Jpg or Gif and also compress it by reducing the quality. Depending on the format of the image file you are working with, the reduction in quality appears different in different image formats.

With a Jpg image, compression can make the it blurry and also muddy. With Gif images, compression reduces the number of colours so they end up looking monochromatic.

 

 

When it comes to the design of your website, it's very important to have a great looking website so it gives a great first impression of your company, but it should never trade off with a slow loading website. With a slow website you run the risk of your user not even hanging around for the page to load, let alone go through your conversion goals and purchase something or enquire about your products.

Tips on how to keep your website looking great while also loading fast:

Reduce the size and number of images. One of the most common reasons for websites to load slowly is the size of images on the page. Images are very important to tell a story and break up large blocks of text. They are also a fantastic tool to display your products and services, but the trick is to use them effectively so they look tidy and professional while also not taking too long to load. The best way to do this is to make sure that all your images are well optimised. There a number of things you can do to ensure that this happens - you can crop them, resize them, use thumbnails, etc. Read our article on how to optimise your images using simple techniques.

Reduce the number of clicks on each web page. For each of your web pages, try to keep all the info you are trying to convey in the one place if possible. Unless there is a good reason why you want your user to click through to other pages, like say you have another article that might give them more info or you have your high res images on different pages, try to avoid doing so. This will reduce the number of page loads. If you are worried that there is too much information is on one page, use suitable headlines to break up long bits of text and use a headline that summarises each idea in your copy so your visitor will get an idea of what you are saying without having to read through the whole copy.

Limit the number of objects on your page - this means all the various image and text components you have on  your page should be limited to absolutely what is necessary. For every object to download on your visitor's computer, a request has to be sent to the server and it needs to be processed and the info then sent back. So if you have too many objects on your page, it could potentially take a while for the whole page to display.

On the flip side, don't have just one big object with all your text and images in it. If you have just one big object or a component with all your content in it, then the whole object will take a while to download and your visitor won't know what is going on as he or she will just a have a blank screen until the whole thing loads. That's why you still need to have separate blocks of information when you layout your page. That way the parts of your page which are smaller in size will load first (which is usually the text part of your website) and your visitor will have something to be engaged with while waiting for the whole web page to load. It's all about balance when it comes to laying out your page. 

Avoid flash animation, unless you have a very important business reason to include it, and even then we would probably advice you to reconsider. This is because most websites with flash animation increase the download time drastically. For instance Snow Planet website uses a flash banner on their website. When you test this website for download time, it shows that it takes around 151 seconds to download on a 56k modem - which is more than 10 times the recommended time! So you need to always think about the primary goal of your website - is it to generate results or do you want a website that you "feel" looks good? You can achieve great design without jeopardising your results for example Prestige Real Estate website uses an animated image gallery instead of a flash banner and their download speed at 56K modem is around 30 seconds, which is five times less time than a flash banner! In fact, their website just won the Best Real Estate Agency Website Award New Zealand in the Asia Pacific Residential Property Awards. Mama Mias website is another great example of a website that has great design and this one loads within the 10 second mark.

Do not have audio or video files that play automatically. Always give your website visitor the choice to load up a video or music file on your website. If your video loads automatically every time someone lands on your page, not only will it add to the load time of the page but it will also ruin the usability of your website. There is nothing more annoying than having to listen to the same music or video the 5th time I've landed on your page - I will start avoiding it like plague! Even big players like YouTube and Myspace now give users the choice to load up videos or music - even though the entire purpose of the sites is to provide audio or video entertainment.

Having flash and lots of animation on your website might seem like an appealing option but the reality is that it could be costing you more than you think. Not only do you have to consider higher bandwidth costs and the rent of the servers, the slow loading website could actually be effecting the number of sales you get from your website.

Why is that? It's because many studies conducted by a number of experts have shown that a fast website can persuade your users to take action better than a slow website.

How exactly can it effect your business?

Not only does a slow website mean that your visitor is not getting instant feedback, i.e., they are having to wait for things to happen so they are not as engaged, but if your website is really slow the user would have left well before it even loads.

A number of large industry players have actually quantified the effect of page loading times on their results:

• Amazon's tests in 2007 also showed that every 100 millisecond increase in load time resulted in a decrease of sales by 1%

• Facebook also found that increasing page load time decreased the number of pages the users visited during their session

• Google's tests in 2006 showed that increasing load time by 500 milliseconds resulted in 20% drop in traffic – that's just half a second!

This is one of the main reasons why Google is looking to speed up the web and encourage website owners to do everything they can to keep their page loading speeds as small as possible. Google recognises that fast loading websites provide a good user experience, and their job is to find the best and the most relevant websites and put them at the top of the search results. The way Google judges the 'best' results is based on a number of factors but website speed has become a big factor in the mix.

So what is a good response time for website loading?

Usability guru Jakob Nielsen in his article Response Times: The Three Important Limits gives advice based on studies on what is acceptable when it comes to response times:

• 0.1second delay is about the limit for the user to feel that the system is reacting instantaneously
• 1second delay is about the limit for the user's thought to stay uninterrupted, i.e., they are not thinking about any other tasks. However, even at this fast speed the user will notice the delay
• 10sec delay is about the limit for keeping the user's mind focused on the conversation that you are trying to have. Any longer, and your user will look for other things to do while waiting for the website to load. This could very well be to surf other websites.

Since the general internet speed in NZ doesn't allow for loading speeds of under 1second, the target for your web pages should be to load within 10 seconds on a 56k modem as a rough guide. We say 56k modem because if you cater for the worst case dial-up speed scenario, you will be well covered for the broadband users. So if you are over the 10 second threshold by a small amount, you should be OK as most homes in New Zealand now have broadband.

If you'd like to find out how long your website takes to download request our free Website Audit service which will tell you exactly how your website is performing.

If you have a Zeald website, learn how to lower the time it takes for your images and content to download.

We are sometimes asked to use a Pantone^® color in a website design. We use the following colour conversion chart to convert Pantone® spot colors to RGB color values (Red/Green/Blue) and Hexadecimal color values.
source: http://www.seoconsultants.com

PMS     R       G       B       Hex     Colour
100     244     237     124     #F4ED7C       
101     244     237     71      #F4ED47       
102     249     232     20      #F9E814       

103     198     173     15      #C6AD0F       
104     173     155     12      #AD9B0C       
105     130     117     15      #82750F       
106     247     232     89      #F7E859       
107     249     229     38      #F9E526       
108     249     221     22      #F9DD16       

109     249     214     22      #F9D616       
110     216     181     17      #D8B511       
111     170     147     10      #AA930A       
112     153     132     10      #99840A       
113     249     229     91      #F9E55B       
114     249     226     76      #F9E24C       

115     249     224     76      #F9E04C       
116     252     209     22      #FCD116       
116 2X  247     181     12      #F7B50C       
117     198     160     12      #C6A00C       
118     170     142     10      #AA8E0A       
119     137     119     25      #897719       

120     249     226     127     #F9E27F       
1205    247     232     170     #F7E8AA       
121     249     224     112     #F9E070       
1215    249     224     140     #F9E08C       
122     252     216     86      #FCD856       
1225    255     204     73      #FFCC49       

123     255     198     30      #FFC61E       
1235    252     181     20      #FCB514       
124     224     170     15      #E0AA0F       
1245    191     145     12      #BF910C       
125     181     140     10      #B58C0A       
1255    163     127     20      #A37F14       

126     163     130     5       #A38205       
1265    124     99      22      #7C6316       
127     244     226     135     #F4E287       
128     244     219     96      #F4DB60       
129     242     209     61      #F2D13D       
130     234     175     15      #EAAF0F       

130 2X  226     145     0       #E29100       
131     198     147     10      #C6930A       
132     158     124     10      #9E7C0A       
133     112     91      10      #705B0A       
134     255     216     127     #FFD87F       
1345    255     214     145     #FFD691       

135     252     201     99      #FCC963       
1355    252     206     135     #FCCE87       
136     252     191     73      #FCBF49       
1365    252     186     94      #FCBA5E       
137     252     163     17      #FCA311       
1375    249     155     12      #F99B0C       

138     216     140     2       #D88C02       
1385    204     122     2       #CC7A02       
139     175     117     5       #AF7505       
1395    153     96      7       #996007       
140     122     91      17      #7A5B11       
1405    107     71      20      #6B4714       

141     242     206     104     #F2CE68       
142     242     191     73      #F2BF49       
143     239     178     45      #EFB22D       
144     226     140     5       #E28C05       
145     198     127     7       #C67F07       
146     158     107     5       #9E6B05       

147     114     94      38      #725E26       
148     255     214     155     #FFD69B       
1485    255     183     119     #FFB777       
149     252     204     147     #FCCC93       
1495    255     153     63      #FF993F       
150     252     173     86      #FCAD56       

1505    244     124     0       #F47C00       
151     247     127     0       #F77F00       
152     221     117     0       #DD7500       
1525    181     84      0       #B55400       
153     188     109     10      #BC6D0A       
1535    140     68      0       #8C4400       

154     153     89      5       #995905       
1545    76      40      15      #4C280F       
155     244     219     170     #F4DBAA       
1555    249     191     158     #F9BF9E       
156     242     198     140     #F2C68C       
1565    252     165     119     #FCA577       

157     237     160     79      #EDA04F       
1575    252     135     68      #FC8744       
158     232     117     17      #E87511       
1585    249     107     7       #F96B07       
159     198     96      5       #C66005       
1595    209     91      5       #D15B05       

160     158     84      10      #9E540A       
1605    160     79      17      #A04F11       
161     99      58      17      #633A11       
1615    132     63      15      #843F0F       
162     249     198     170     #F9C6AA       
1625    249     165     140     #F9A58C       

163     252     158     112     #FC9E70       
1635    249     142     109     #F98E6D       
164     252     127     63      #FC7F3F       
1645    249     114     66      #F97242       
165     249     99      2       #F96302       
165 2X  234     79      0       #EA4F00       

1655    249     86      2       #F95602       
166     221     89      0       #DD5900       
1665    221     79      5       #DD4F05       
167     188     79      7       #BC4F07       
1675    165     63      15      #A53F0F       
168     109     48      17      #6D3011       

1685    132     53      17      #843511       
169     249     186     170     #F9BAAA       
170     249     137     114     #F98972       
171     249     96      58      #F9603A       
172     247     73      2       #F74902       
173     209     68      20      #D14414       

174     147     51      17      #933311       
175     109     51      33      #6D3321       
176     249     175     173     #F9AFAD       
1765    249     158     163     #F99EA3       
1767    249     178     183     #F9B2B7       
177     249     130     127     #F9827F       

1775    249     132     142     #F9848E       
1777    252     102     117     #FC6675       
178     249     94      89      #F95E59       
1785    252     79      89      #FC4F59       
1787    244     63      79      #F43F4F       
1788    239     43      45      #EF2B2D       

1788 2X 214     33      0       #D62100       
179     226     61      40      #E23D28       
1795    214     40      40      #D62828       
1797    204     45      48      #CC2D30       
180     193     56      40      #C13828       
1805    175     38      38      #AF2626       

1807    160     48      51      #A03033       
181     124     45      35      #7C2D23       
1810    124     33      30      #7C211E       
1817    91      45      40      #5B2D28       
182     249     191     193     #F9BFC1       
183     252     140     153     #FC8C99       

184     252     94      114     #FC5E72       
185     232     17      45      #E8112D       
185 2X  209     22      0       #D11600       
186     206     17      38      #CE1126       
187     175     30      45      #AF1E2D       
188     124     33      40      #7C2128       

189     255     163     178     #FFA3B2       
1895    252     191     201     #FCBFC9       
190     252     117     142     #FC758E       
1905    252     155     178     #FC9BB2       
191     244     71      107     #F4476B       
1915    244     84      124     #F4547C       

192     229     5       58      #E5053A       
1925    224     7       71      #E00747       
193     219     130     140     #DB828C       
1935    193     5       56      #C10538       
194     153     33      53      #992135       
1945    168     12      53      #A80C35       

1955    147     22      56      #931638       
196     244     201     201     #F4C9C9       
197     239     153     163     #EF99A3       
198     119     45      53      #772D35       
199     216     28      63      #D81C3F       
200     196     30      58      #C41E3A       

201     163     38      56      #A32638       
202     140     38      51      #8C2633       
203     242     175     193     #F2AFC1       
204     237     122     158     #ED7A9E       
205     229     76      124     #E54C7C       
206     211     5       71      #D30547       

207     186     170     158     #BAAA9E       
208     142     35      68      #8E2344       
209     117     38      61      #75263D       
210     255     160     191     #FFA0BF       
211     255     119     168     #FF77A8       
212     249     79      142     #F94F8E       

213     234     15      107     #EA0F6B       
214     204     2       86      #CC0256       
215     165     5       68      #A50544 
Topics:
, 
	Web Design Tips

Sites with music are neither quick nor convenient. A few years ago they may have been the rage, but today music or voice playing on a website is somewhat dated.
It won't work, and chances are you will annoy your customers and they will be relaxing with a competitor where things are more peaceful.
Why is noise such a bad idea? We could fill pages, but here are the top three reasons:

1. It will slow down your site. Waiting for your music file to load will add to the daily stress of a website user as opposed to relieve it.

2. It will embarrass and annoy your visitor. Often website users access a website from work. With a normal silent site, one may efficiently and quietly multi-task. But a blast of music (you never know where the volume is set) will alert the guy in the next room or professor in the midst of a lecture that the user is surfing. That's when the user vows never to visit your site again!

3. Chances are the visitor will hate your music. Do you really know what each of your visitors would like to hear at the moment of their visit to your site? Even the Itunes website does not play music.

Adding these kinds of extras to a website really sends the message that you are not thinking about the user's experience. There is no reason that your site can't be just as elegant without music. The form of your website should follow its function. If your function is to give users information about your business or an efficient way to transact business with you, it's hard to justify the kind of tinny, repetitive website music that makes the "off" or "close" button the most used icon on your website.

Thanks to www.spaboomblog.com for this great article

There are a number of important issues that you should consider before you decide to introduce animation to your website, including:

1. Quality Animation is expensive to design and create
2. Animation adds to the page load times
3. Animation often requires additional software and plugins to play
4. Animation is difficult and expensive to maintain and kept up-to-date.
5. Animation makes it difficult if not impossible for search engines to find text content within
6. Animation can serve to distract the user from reading the page content

With these issues in mind we should carefully consider the use of animation on a website and ask, Is it really necessary? Is it a worthwhile investment of time and money? or is there something better that we could invest in to improve the results of our website?

To answer this question we must ask the question what are the primary objectives of our website? and does adding animation really help us to achieve these objectives? How does adding animation to our website help us achieve these objectives?

Some common forms of animation on a website:

1. A logo that moves in some way
2. A slide show of images highlighting products or services
3. Help videos or product information video
4. Animated Banners, advertising important features of the website or third party websites.
5. Interactive and animated navigation systems

These translate into 3 primary objectives

1. Building brand recognition

Using animation to create a memorable user experience and generate positive feelings towards the website and the company.

2. Product / service Information

To help sell more product and generate more revenue using video to convey important information about a product or service that is difficult to do with text and images

3. Advertising

To sell more product and generate more revenue using animation to upsell or crossell product / service offers.

Building Brand Recognition

Animation for enhancing brand, come in many shapes and forms:

from something as simple as a moving logo to a fully animated and Interactive website or movie designed to tell a story, perhaps in the form of a viral marketing campaign designed to create a memorable user experience that encourages the user to bookmark and tell their friends about. Such as www.42below.com or www.coke.com

One must consider the primary objectives of the website. First of all is the primary objective of the website to promote and convey the company brand? If so how will animation on a website achieve this? will it achieve it?

Animated websites come at great cost and the return on your investment is very difficult to measure

.....so one should ask, will the money that I spend creating and incorporating animation in my website really enhance my brand positively and will I get a return on my investment? Or will my expensive animation only serve to frustrate my users...maybe my users will be impressed by the animation the first time but soon realise that the website content is out of date and not be interested in visiting again? Maybe they don't even find my website because the search engine content is hidden within my animation.

If the answer is no and the animation and the negative impacts are justified.

Zeald is possibly not the right company. A website such as this is primarily a branding exercise and possibly less of a website exercise. We would recommend the use of a company that specialises in animated websites and branding / marketing concepts.

Product / service information

Sometimes it is difficult to convey all of the information about a product or service using just images and text. On some occasions video is the best method. For example a company that creates and sells video or animation online. Realestate websites use animated fly throughs to help the user imagine the building and move about it. This is application for animation on a website is much easier to justify.

Here is a great example of a video used to explain how you can stack your truck's load twice as high

Although animation may be justified in these circumstances we recommend that it is used carefully. The animation should be setup to allow the user to choose to "play" the animation, if they have a fast connection or the time. Introduction pages should be created that carefully outline to the user the file type, the file size, where they can download the software required to view it etc.

This type of animation or video is not a specialty of Zeald. We recommend that you speak to a specialist, such as a video production studio, a virtual reality photographer or a 3D animator. Zeald has connections with photographers who specailise in the VR tours especially for Realestate.

Animated Slide show

An animated slideshow displaying examples of your products or services allows you to highlight multiple images on one page without the user having to click or scroll.

It is hard to measure and so determine the effectiveness of this method for highlighting product / service information, but if the animation is kept simple, it can be produced for little cost. It can be designed in a way to allow for a progressive download. IE images display as they load. It can be designed to allow the website administrator to update the images easily and because it contains little or no search engine content, it is of little concern.

Alloy Yachts are a Zeald client who utilise such a feature. This is a plugin product for the Zeald website solution with limited features.
This is a javascript powered animation that maybe setup to display on any page of your website. It allows you to display 5 images at a set size in a set order. The images load progressively and fade in and out from one another on a set timer. the application selects images from a folder which you are able to administer yourself. To learn more about this product please contact the Zeald support team.

Advertising

Using animation as a method to highlight important information may be effective when planned and designed carefully. But again the website objectives must be carefully considered.

1. Banner advertising

A website selling advertising to third party companies may find that animated banner adverts have a higher click through rate and so the client may charge more money. However unless the primary objective for the website is to earn revenue through banner advertising we would not recommend the use of advertising full stop as this is a great way to lose traffic and the revenue may not justify the loss of traffic.

 

2. Animated promotions

Sometimes animation maybe used to advertise or highlight important features or products or services of the clients of your website.
graphic impact use an animated banner for this purpose.

Apart from the issues already stated regarding animation there is also a condition known as "Banner Blindness": which is when a user has seen so many websites with so many banner ads that they soon learn what a banner ad looks like and begin to subconsciously ignore or block out images or animations that resemble this common format.

It is very difficult to determine if animated features such as this really do increase sales or whether they provide a return on investment.

Formats

There are three common formats for producing and displaying animation on the internet that are specifically designed to load quickly. The choice of technology and the cost depends on the requirements and the purpose.

Flash

Users require the flash player, and additional time is required to load the flash application, but usually the quality of the animation is greater and the file size is smaller, especially for illustrative styled animations

Animated GIF

No player required, but often larger file size and noticeably reduced quality, especially for animations with larger dimensions and greater number of frames. Good for animations with small dimensions such as a logo

Pricing

Because there are so many more variables involved in animation it is difficult to quote. An animation is not the design of a single flat graphic but a number of frames. The cost depends on so many variables including: the graphic design, number of frames, the type of technology, the load times, the way it loads (progressively, pre-loaders etc) sound and music, The timing, interactivity, ability for the client to update.

If you choose to have an animation created for you, you may use the Zeald website administration software to position and display the animation on select pages of your website

"WOW factor" is a very abstract and subjective method for describing a website design. It means different things to different people. and it really depends on the persons definition of the term 'wow' and the individual users aesthetic tastes.
To some 'WOW' means something that is unique and different from other websites. To others 'WOW' means something that is quirky and has a fun factor. While to others 'WOW' means something that is very professional, intuitive and easy to use.

The only way that the designer is able to produce a website that has WOW factor in the eyes of the client is to first of all find out exactly what the client means when they say they want a design with the 'WOW' factor.

More often than not the WOW factor that the client may have in mind will conflict with a number of important website design criteria, such as, following web standards, intuitive and easy to use navigation, persuasive conversion pathways and Search engine friendly content; important if you are looking to generate results. - Which is the objective of most commercial websites

Also The website design that the design team produces is very dependent upon the material that they are provided to work with. One of the key factors that influences the quality of the website design is the quality of the photography used within the design. If the team are provided with poor or no imagery then they will look to source stock photography online.

Often the websites that are referred to as exhibiting WOW factor are actually very minimal, very simple and plain. Such a design enhances the quality illustration or photography that the website displays. Imagine the http://www.porsche.co.nz/ website with an average image from a home camera, taken out in the car park on a cloudy day, .....suddenly the WOW factor has gone.

The WOW factor comes primarily from the images, which are a component of the companies visual identity or brand. A companies brand or public image is made up of, logos, illustrations, colours, photos, design elements and text messages.
Good quality branding images are very expensive......Stock images are the cheapest option and range from between $200 and $1000 per image, depending upon the use, the resolution and the period......Custom Illustration or photography could be more, depending upon costs of studios, makeup, models etc......
Read more about the main online suppliers of stock photography, their pro's and con's, pricing etc.

But the image itself is the inexpensive part....I always like to use the Zeald Levitating man as an example, if we added up the hours and resource that it took to find and decide that one image, the money we spent for the royalties seems very insignificant.

While you're at the Porsche site, also imagine how well such a homepage would do with the search engines.....often WOW factor means simple, minimal designs, which means minimal content......remember the search engines rely on the text content of a page to provide a ranking. Something that a large brand such as Porsche have less concern with.

So in summary, when it is WOW factor that you are looking for in your website design, first of all think exactly what do I mean by WOW factor?
To help you determine exactly what WOW factor means to you and for you to best convey this abstract and subjective description to the designer we recommend that you find a website that in your eye conveys WOW factor. You should then check the design of this website and compare it with the objectives of your website. You should also check that the properties of this website that conveys WOW factor do not conflict with the objectives of your website.
Your Zeald consultant or designer can help you determine this.

picozu

is an image drawing and photo retouching application built on Javascript, HTML 5 and CSS3. Make sure you use a modern browser (Firefox 5, Safari 5, Chrome, Opera 10, Internet Explorer 9) if you want to play with it.

---

Aviary

Aviary is a suite of  web-based multi-media applications primarily for image editing and graphic design. The individual tool names are bird-themed, hence the suite name.

Aviary have 2 plans: a free plan and a Pro plan. Only Aviary Pro members can test current alpha releases ahead of time. Pro Members also have the ability to remove the Aviary Watermark, create groups, and view Premium Tutorials as well as unlimited storage.
The great thing about Aviary is that they provide the option to store your images online and host them for you. This is handy for centralising your images and saves cluttering your hard drive.

They also provide a handy addon for your Firefox web browser called Talon which allows you to snap screenshots direct from your browser and open them in the editor with one quick click.

---

PhotoPlus

For a long time, Serif has given away previous versions of their software to entice users to purchase the current version. Currently you can download a completely free, fully-functional version of PhotoPlus.

PhotoPlus 6 is an Offline image editing software that enables you to create, manipulate and enhance photographs or bitmap graphics. You'll find all you need to produce professional looking images for print and the web.