Category: Website Builder Tips

With the online landscape as crowded as it’s ever been, competition to stand out, get recognised, properly engage an audience and keep them coming back, is stronger than ever. But without the bottomless pockets of mega brands who can afford to continually experiment with the latest web design technologies making their sites able to sing and dance as they wish, are there ways of having a similarly dramatic effect simply by applying some basic psychological principles?

Why adopt psychology-based Design

When designing for the web, considering the psychological drives of a target audience is not commonly a high priority. It can however have surprisingly positive effects on how users will utilise a website, how engaged they will become and how frequently they will respond to calls-to-action.

By paying attention to how visitors will naturally wish to engage with information and providing them with an online environment which appeals to their conscious, and sometimes unconscious, inclinations, they will be happier and far more likely to perform the actions you want them to, whether that’s getting in touch with you, buying your product, or referring their friends. Continue reading »

Here at Webeden I have seen The Good, The Bad and The Ugly of websites. While a large number of customers use Webeden to build personal sites, the majority of our customers use Webeden to build sites for their businesses. If your site is for a business, large or small, there are a number of things you should keep in mind when building your site.

Here is a check list of simple changes you can make to your site with minimum effort but maximum impact. Continue reading »

Your website is often the first and only way potential customers find out about your business. And as website visitors make a decision in the first 6 seconds about whether to stay or leave, it’s vitally important that you present your business in the right way, and give your visitors the information they’re looking for.

Yet so many small businesses make classic mistakes with their site, effectively showing all these customers the door before they’ve even got inside.

So what are the important web design tips you should follow?

1. Make it easy to move around your website

People usually arrive on your website looking for specific information. If they don’t find it quickly they will leave, and have the impression that you’re a disorganized business.

The reason that websites have menus along the top or down the side is because user expect a particular format for websites. Stick to this format, and make the most important information the first thing they see.

Have a think about why people are on your website. Are they looking for your address or contact details? Do they want to know your opening hours? Do the want to know if you stock a particular item? Are they interested in the trade bodies you’re a member of? Answering these questions will help you organise the pages that should be easiest to find.

Here are a few tips

*Try icons. They’re visually appealing and easy to use
*Group related links together, such as ‘your account, support, contact us’ and ‘Ts & Cs, legal, privacy.
*Make it clear to users which page they’re on by using clear headlines

2. Use Clear Calls To Action

What is the aim of your website? Do you want people to buy something? do you want them to get in touch? Do you want them to sign up to your newsletter? The biggest mistake small business websites make is not having a clear call to action that asks there users to commit to something.

Whatever you want your users to do, make it clear by using a call-to-action button that grabs their attention. Here are a few tips:

*Think about the colour, size, shape and position of your call to action. Make it clear, make it stand out, and put it in an obvious place.
*Don’t confuse users by having multiple calls to action. Decide the main thing that you want them to do and stick to it.

3. Pick the right colours

This might seem a little obvious, but choosing the right colours is critical to your website. I’m not just talking about picking those colours that reflect your logo, your brand or your stationary. But it’s about making sure your colours stand out on the page, making it easy for people to read your content.

The right colours can also effective at sorting out the hierarchy of a page. Here’s some ideas:

*Look at how popular websites use colour and contrast to make stuff easy to read and understand.
*Try using size rather than just colour to make important text stand out.
*Test drive a Colour Contrast tool to check your colour choice such as http://snook.ca/technical/colour_contrast/colour.html

4. Organise Your Content

This is where most small businesses make the biggest mistakes. In a desperate urge to show website visitors how much stuff a business does, many put so many words on their site that it becomes impenetrable to readers.

The truth of it is that most website visitors can’t be bothered to read much text, and will avoid doing so unless it’s absolutely necessary. Even those embarking on a page of text will scan and skip to the end.

So when adding content to your site it’s important to get it into the right hierarchy, making it easy for users to jump to the most relevant section.

Here are three tips:

*Make your font big enough to be easy to read.
*Make significant use of white space, to focus the user on your content
*Make use of titles, subtitles, paragraphs, bullets, block quotes and other tricks to break up long passages.

And never make spelling or grammatical mistakes.

5. Reduce Clutter

This point follows on from content. Generally speaking, the more elements on a page, the harder it is to read. Websites with crammed homepages are difficult for visitors to take in and understand.

And website visitors who leave because they are overwhelmed, are not likely to return soon.

Clutter includes images too – they should only be there to capture attention and guide the user.

Here’s how to reduce clutter:

*With every element on a page, ask yourself the question: ‘can visitors understand this page if I took this away’. If the answer is yes, then you probably don’t need it.
*Make your most important content the easiest to find. Don’t let minor items get in the way of major ones.
*Help your users find what they’re looking for – don’t bog them down with other items like advertisements or promotions.

That’s it

These are five of my web design tips to make sure your small business website gets settled on the right course. Got any others? Leave a comment below.

I’ve written quite a bit on this blog about online privacy. When it comes to advertising, last year there was a lot of media attention given to behavioural targeting – where advertisers reach you based on your online behaviour. Advertising firm Phorm was at the centre of that furor, and they exited the UK late last year.

Then of course there was Google Street View, and the fear that it was invading personal privacies (and helping thieves to boot!). Last year we advised you all to add a privacy policy to your website, to make it clear what information you were collecting about visitors.

New Code of Practice

Well now it looks like Websites will have to stick to a new code of practice put in place by the Information Commissioner’s Office (ICO). The whole point is to make sure that your website visitor’s information is kept secure and private.

The Personal Information Online Code of Practice simply firms up the advice we gave with regard to having privacy policy. Websites need to make their privacy settings clear and store data securely. There are 8 principles for looking after personal information, but what it boils down to is that only specific, relevant data can be gathered, if a website doesn’t needs the personal information, then it must not hold onto it longer than necessary.

For example, if a company no longer needs your email address or credit card details, they’re obliged to delete them.

If you have a log in to your site, the privacy settings must be well highlighted.

A representative of the ICO said: “Organisations must be transparent so that consumers can make online privacy choices and see how their information will be used.”

“Individuals can take control by checking their privacy settings and being careful about the amount of personal details they post to social-networking sites and elsewhere online,” he continued.

If websites fail to abide by the code, they could be forced to do so by the ICO.

What about you?

Have you put a privacy policy on your site? Do you think that fears over online privacy are overblown? Leave us a comment below.

“Can I insert a search box on my WebEden site” is a question us guys and gals at WebEden get asked on a regular basis.

And the answer is yes: you can use the Google search bar that is located in the library of your website builder.

Unfortunately there’s a shortcoming: this does search your website, but will only search those pages that have been indexed by Google.

If they haven’t been found and indexed by Google (for example if they are very recent, or are not well linked), then the Google search bar will not yield any results. As our SEO guide will tell you, Google can take up to 3 months to find and crawl your site so it can be a long wait before your website is fully searchable.

We’ve been scratching our heads to find a way around this problem, and we’ve just come up with a solution.

Drum roll…

[Enter Stage Left]: Atomz Site Search. Atomz have created a FREE Premier site search tool that crawls your site the moment you sign up. It grabs the Page Title – Description from your pages and displays them just like Google does.

To put this search facility on your website, you need to sign up on Atomz.com. You get to pick which type of search box you require from standard to advanced dependant on how detailed you would like the user to be able search.  Also you can change the colours of the links so they match the colour of your website.

HTML Snippet

Once you have setup everything with Atomz, grab the HTML code they give you, and paste the code into the WebEden HTML Snippet. In case you didn’t know, the HTML Snippet is located in the Library of your File Manager.

Once you have pasted the code in you will need to make just one change to the code in order for the results to appear properly.

In the line of code that has <form method="get" action="http://search.atomz.com/search/"> you will need to add target="_parent" so it looks like this <form method="get" action="http://search.atomz.com/search/" target="_parent">.

If you do not do this change then the search will open occur within the snippet rather than the whole website.

That’s it.

Have a go adding the Atomz search box and let us know how you get on. Or if you know a better solution then please comment below.

You want to use icons on your website. You have a look at word and see what icons and clip Art came with your computer.

And what do you find? Not much of any use!

You then turn to the web, searching and scouring through the net trying to find the perfect icons for your web site. At best you only find a few icons in each set.

That’s where Icon Finder comes in.

Iconfinder provides high quality icons for web designers and developers in an easy and efficient way.

You can search through 147,174 icons or browse 417 icon sets – which ar constantly expanding.

This is a great place to find FREE icon packs for your website builder. It gives you the ability to search for a particular icon e.g. TWITTER. This will bring up hundreds of Twitter icons.

Once you have found the icon you were searching for you can then view the ICON PACK, this will give you all the icons that are designed in the same way.

So you can see all the icons for facebook, stumbleupon and RSS to name but a few.

This will make your site look more universal rather than having a Twitter logo designed one way and a Facebook logo designed another way.

Some packs do have licences which means you can use them for Personal Use only or you may have to provide a link back to the Author of the icons.

You can even download the .ico version of the image, so if you are using windows you can use them for folder images as alternatives to the standard folder symbol that you get.

Hey if you designed some Icons yourself then why not submit them and share them with the world? You could maybe even ask for a link back to your WebEden website!

Well if you decide to use any of these icons, let us know…

If you have any sites that offer the same or something similar then post a comment and help out your fellow designers.

A couple of months ago we had a guest blog from Alison Cross of Alisoncross4webs that talked about how to put The Gold above the Fold.

Newspaper Talk

This phrase is borrowed from Newspaper publishing. It means that if you have something really important that you want everyone to notice, make sure you put it high up on the page, above the place where people fold  their newspaper.

Website Talk

When this applies to building a website, the ‘fold’ is the lowest part on the page that people can see without scrolling.

As many people do not scroll down web pages, it’s important to put your most important information (your gold) above this point (the fold).

Screen Sizes & Resolutions

That’s all very well, but there is a problem: There are a lot of different sized screens with different resolutions. And some people have toolbars installed too. This means that some users can see more of your website than others. And that means that the fold can fall in many different places.

Finding the Fold

So how do you find out where this fold is? Thanks to a handy little visualisation tool from Google, its now possible to accurately see where the fold is for your website for people using different screens.

The Google Browser Size tool lets you understand how everyone sees your website. For any point on the screen, the tool lets you know what percentage of people can see it without scrolling.

Here’s an image of what it looks like:

The tool isn’t perfect. It assumes that your website is left hand justified rather than centre justified (like most WebEden websites are). Nevertheless, when you’re making a website you can use the tool to make sure the important stuff can be seen by everyone.

Try using the browser size tool on your website and leave us a comment below.

A few months ago we brought you news of a free online tool that gives you feedback on your website design. 5-second test shows your site to volunteers for 5 seconds, and then asks them to write down what they think your website is all about.

You can use those comments to improve your website, and make it easier for users to understand and navigate.

That post has been so popular that we’ve pulled together three more free online tools to help you in your website building.

Paint.net

Paint.net is free tool that lets you create or edit images, and then save them for use on your website. It’s like a ‘photoshop lite’ for those of us with out the cash (or the patience) for the full blown software.

With Paint.net you can build up your images in layers, adding complexity and texture. You can manipulate each individual layer at any time. Once you’re happy with your image you can flatten it, and then save it many different files types.

Zamzar.com

On Zamzar.com you can convert almost any file type to any other file type. Have you got an excel file that you want to turn into a PDF? Or what about a PDF that you want to turn into Word so that you can edit it? Zamzar can do the lot.

Zamzar can also convert a wide rang of music, video, image and compressed files.

Here’s just a few of the extensions that Zamzar can deal with: .ods; .odt; .ppt; .pptx; .ps; .pub; .rtf; .docx; .doc; .xls; .xlsx; .cvs; .odp;  .wpd; .wps… the list goes on.

Zamzar can also convert iTunes files to mp3.

The other cool thing about Zamzar is that you can add a button to your browser toolbar that lets you click on Youtube videos, convert and save them.

Imagemerger.net

One side effect in the digital-camera-megapixel-race is that the files that modern digital cameras produce are now pretty massive. Do you ever have large photos that take an age to download? Ones that you could blow up to the size of a poster? Would be useful to cut them down to size, possibly for use on your website?

With Imagemerger.net/resize.php you can do just that. You can specify the % reduction you want to apply to your image.

Imagemerer.net also has some other cool image manipulation tools – one which blends two photos together.

ColorZilla

Colorzilla is a free extension for the Firefox browser that can help you to choose the right colour for all the elements of your website.

You can download Colorzilla from the Firefox website. It has a colour picker that sits in the bottom left hand corner of your browser window. If you want to know what the RGB colour of anything on the web, simply click the colour picker and then click on the website that you want to know the colour of.

Colorzilla then displays the RGB and Hex values of that colour.

Check these free tools out and let us know what you think.

Do you know any free online tools that you can share?

Here at WebEden we often get asked to have a look at customer websites and give our feedback on how they’re looking. We usually make comments on images, menus, fonts and layouts.

But often we find that business websites are lacking some of the essentials that every single one needs.

There are some basic questions that every business owner needs to ask themselves when putting their website together. These are questions like:

Why do I need a website?
What information do visitors need to know?
What will website visitors look for?
How can my website make a good impression, and make it easy for people to buy from me?

Here’s our checklist of essentials that we reckon every business website should include.

1. Contact details
The most important essential, but so often overlooked. Website visitors will often try to find your website so they can find your phone number or your physical address.

At a minimum you need address, phone number and email address. Make these details easy to find – think about making the ‘contact us’ page one of the most obvious. Put your phone number big and bold on every page – top right hand corner is most common.

2. Map
Having a map of where you are:
*adds a reassurance to your website visitors that you actually exist.
*makes it easy for them to find you.

Here’s a tutorial on how to add a Google map to your website.

3. A ‘contact us’ lead capture form
Many website visitors want to know more about your products and services, but won’t feel like giving you a call. This might be because it’s out of hours, they’re busy doing something else, or they don’t want direct contact. This means that you need a lead capture form.

Having a lead capture form also allows you to give them more information when it’s convenient for you,

4. Photos of you
This is great way to add reassurance about who your website visitors are dealing with. Having a photo jump-starts a personal relationship between you and your website visitors, and boosts the likelihood that the visitor will want to get in touch.

5. Newsletter Sign up
Many website visitors are in a ‘research’ phase of the buying cycle. They’re not ready to phone you or start buying just yet, but still want more information.

A newsletter allows you to start warming up your relationship before they’re ready to buy. Website visitors get the chance to ‘taste’ your service before they actually commit to buying.

As a consequence, a weekly or monthly newsletter can be the biggest source of new leads for your website.

6. Blog
A blog is a half way house between your website and a newsletter. It lets you add personality to your website, and starts an open conversation with your visitors. You can use it to showcase your knowledge & products.

Another real advantage of a blog is that it lets you add fresh content to your website, something that Google really likes to see.  This can help boost you up the search engine results pages for searches that are relevant to you. For further advice with SEO read our Search Engine Optimisation Guide.

7. Customer reviews and testimonials
One of the most convincing ways to sell your products is by having other customers recommend them. As we’ve mentioned in our Social Media Strategy posts, good customer reviews are an important way to boost sales.

I know that you’re hardly likely to publish reviews and testimonials that show you in a poor light. But if you can get some genuine comments from a real people, and they don’t mind you publishing their contact details, then those comments go a long way to reassure others that it’s a good idea to buy from you.

8. Email to a friend
One of the very first ‘social media’ applications, ‘email to a friend’ is now often overlooked

The best way to convince someone to buy from you is by having someone else recommend your products. An ‘email to a friend’ links on your website does just this.

Here’s a video tutorial on how to add the ‘email to a friend’ application.

9. Social book marking buttons
A more modern social media service, bookmarking buttons often run on the bottom or side of web pages accompanied with a message like ‘share this’, or ‘add this’.

Social bookmarks are public web pages where you list all the links to all your favourite websites. They are a way of saying ‘I like these websites’ to anyone who is interested. They are a great way for customers to endorse you. Popular social book marking services are called Digg, Stumbleupon, Delicious, and Furl.

Here’s a video tutorial on how to add social bookmarking buttons.

10. Twitter & Twitter feed
Twitter lets you have a public conversation with your customers or website visitors. It helps to add a human element to your website, and gives your website personality. Here’s a video tutorial on how to integrate your WebEden website with Facebook and Twitter.

Summary
Whilst is important to be concerned with design, colours, fonts, menus and layout, when building a website make sure you include these 10 essentials too.

Anything else you think is a ‘essential’ for your website? Leave us a comment below.

We consistently discuss how to get more visitors to your website. We talk about using search engines, social networks, and of course there’s even offline advertising.

But all the website visitors in the world are pretty pointless if no-one buys anything (or takes any other desired action) once they get to your website.

Whilst there are hundreds of different design factors that can influence whether or not someone buys from you, an often overlooked factor is how and where and what type of ‘buy now’ buttons you use.

A ‘buy now’ or call-to-action button should act like a magnet, drawing the visitor’s eye. It should be clear, easy to find, and stand out even on a busy page. Varying how you use these on the page will hugely influence your website conversion rate. Here are a few things to think about when it comes to buttons:

1. Try different colours

There’s an easy rule to follow here: Use strong colours on important buttons, neutral colours on those less so.

One thing to be wary of though, don’t use too many different coloured buttons. You still need to keep to your brand colours otherwise your website can end up looking like carnival poster.

2. Try Varying the Size

Another very simple rule. Use a big button for important actions, small buttons for less important ones.

3. Try varying the shape

You can use shape to change the emphasis of the button, and also hint at its function:
Triangular buttons often contain links to more information.
Circular buttons, especially when small, usually perform a basic function such as closing a document or application.
Rectangular buttons are most commonly used for a call-to-action. Due to this consistency across web design, make sure your important buttons are rectangular. Use other shapes elsewhere.

4. Try to varying the Style

Although you want to stick to your website colours and style guidelines, you should still have enough flexibility to make quite big style changes.

A good and easy way to distinguish a call-to-action button is to make it a block of colour with the text in white. In the example below, both bits of text are the same size. You’re left in little doubt which is the call to action button.

Alternatively, you might like to try placing a symbol or an arrow next to your call to action button. This is what we do on the WebEden homepage to encourage people to start building a website

Last of all, don’t make your call-to-action buttons just text links without a highlighted background. Text links are almost always used to just offer more information.

5. Try to vary the placement

Where your button appears on the page will hugely influence how likely it is to be clicked.

In a page with lots of products make sure the buy now button is immediately next to the product that it is associated with. It should also be on the right, at the bottom corner of the product.

If you have a general page that with a general call to action, make sure that the button is on the right hand side, usually lower down the page.

If users have to scroll down the page, make sure you have a visible buy now button on the right hand side that they can see without scrolling. If you need to, repeat the button lower down the page too.

And that’s it

Varying the way your buttons look and how they appear on the page can hugely influence whether or not your website visitors will click on them. The only way to find out what works best for your website is to try out some different combinations.

Any comments or experiences about buttons you’d like to share? Leave us a comment below.