1-    If it is an e-commerce website, make sure it looks like one, display credit card signs, show a basket

2-    Display your main offers and products on the home page, don’t clutter the home page with your life story or mission statement.

3-    Don’t waste valuable space and prime search engine optimisation with “Welcome to Our Site”

4-    Always have a phone number clearly displayed so that people can contact you, don’t hide it on the contact page or in teh footer

5-    Ensure that prices and offers and taxes are clear

6-    Do not require registration to checkout, this is a big turn off

7-    Make Delivery Policy and Charges Transparent

8-    Use Goody Badges e.g. trade associations and secure signs to add comfort to the customer

9-    Do not clutter checkout pages, keep them clear of distractions, too many choices can cause confusion or inertia

10-  Make terms and conditions clear, you have to offer a 7 day money back guarantee by law (some exceptions)

11-   Make sure that it is Search Engine Friendly, teh website can be beautiful, but if you’re never found, your investment is wasted

12-   Make sure that you have web analytics installed so that you can measure what is happening on site and so that you can measure and improve your marketing campaigns

Of course this is not a full checklist, but it is amazing how often websites miss the obvious and focus on themselves or their history.

It is vital to put yourself in the mind of the customer, make it easy ofr them, minimise clicks to buy, engender trust with openness and no surprises and carefully and thoughtfully signpost the site with good navigation. Most of all keep it brief. No one reads long sentences and paragraphs, until after they have made a buying decision or are actively looking for more information.

Checkout Some Of Our White Paper Resources

Downloads Available from our White Paper Resources Page

The New Ways To Be Found Online

Landing Pages

Conversion Architecture

Email Marketing

Web Analytics

Your Guide To Paid Search

Social Media

Trends Report 09

Trends Report 09 – E-Commerce

Trends Report 09 – Internet Usage

Trends Report 09 – Social Media

Make Sure Your Company is Visible on Google with SEO

We are a Digital Marketing Agency and Internet Consultancy based in Huddersfield West Yorkshire. We pride ourselves in delivering , top performing e-commerce websites to our customer base around Huddersfield, Leeds and West Yorkshire. Our websites will always be built Search Engine Friendly.

Although Microsoft is working to patch this,  the governments of Germany and France have recommended that users switch to an alternative browser and at the minimum to ensure that they are using the most up-to-date version of the browser possible.

Have you updated your browser recently?

Oddly enough, I stopped using Internet Explorer as my primary browser a couple of months back. As a web content manager, I found that it has been more reliable testing website code and layouts using Google Chrome or Firefox – if the style syntax isn’t quite right, those two browsers will show me that it’s wrong. They also have handy tools to check the sections of code and see what styles are being applied to each part of the page.

In my experience, Internet Explorer will let a designer “fudge” the code a bit – and although a site might look fine in that version of Internet Explorer, the presentation in older versions and in other browsers can be completely different.

So, although I do take the security risks that have been revealed in Internet Explorer seriously – and would recommend that all browsers are upgraded to the most recent versions, if you don’t want to try a different browser – my reason for making the switch is simpler.

I want to make sure I’m producing standards-compliant code, and alternate browsers make it much easier to do that.

Using CSS 2 there are ways you can mimic the look and feel of some of the new functionalities in CSS 3, so that even older browsers can see your content presented in similar ways. This particular article will discuss one of the new CSS 3 functions and how to fake it using CSS 2.

Multi-Column Layouts

There are two ways to create a multi-column layout using CSS 2. However, each of them has advantages and disadvantages. Depending on the content to display, you may find that one technique will do what you need better than the other.

Using Multiple DIVs for Column Layout

This can be an elegant solution, providing the ability to display columns of fixed width and height containing freely entered text. From a content management point of view,  it does require a little bit of knowledge of HTML.  This method can result in a lot of content-editor tweaking to ensure that the content required does display neatly within the given columnar DIV.

I would use this technique in places where it is essential to present content in separate paragraphs, or where images might be part of the column contents.

The example CSS code might be something as simple as this:

.column {width: 250px; height: 400px; padding: 10px; float: left; margin: 10px;}

And in the content editor:

<div class=”column”>Content</div><div class=”column”>Content column 2</div>

Using Lists for Column Layout

This solution works well for people uploading content who aren’t as familiar with HTML. If I were working on a project with a keen client who wishes to update and maintain their own website, this might be the choice I’d use for a columnar layout – because it can be done without having to edit HTML at all, as long as the default list style is set to display in columns.  Of course, this would involve knowing the client’s content and whether they are likely to need bulleted / numbered lists in their content as well.

The code I might use to display a list as a series of columns is as follows:

ol { list-style : none;  width: 410px;  height: 400px;  padding: 0px; margin: 10px; }

This creates an ordered list of a fixed width and height, with no “bullet”  number at the start of it.

ol li{ margin-left: 10px; padding-left:  0px;  padding-bottom :  10px;  width :  150px;  float :  left; }

This creates fixed-width ordered list lines, and hitting “enter” will create a new column.  Of course, this might require the use of <br /><br /> (shift-enter in most content editors) to imitate a paragraph break within a single column.

Both of these methods are not without their drawbacks,  particularly in terms of  the height of each section  - it can be difficult to break in the middle of a line and present columns of equal height – but until browsers catch up with CSS 3, this may be an acceptable work-around.  If you have alternative methods to creating columns in CSS 2 please do feel free to share in the comments below.

The idea behind CSS is that it separates the presentational code from the content, so that HTML documents can remain clean and simple with multiple documents all pulling their styles from a single CSS file. This allows pages to be built quicker, with less repetition, and makes any future maintenance or design changes much easier.

The current standard is CSS 2.1 which has mostly been in use since 2004, but a big update is around the corner in the form of CSS 3. It’s going to be a while before browser adoption catches up but this post is going to cover some of the exciting new tools that designers will be able to take advantage of, some of which can even be used today.

Multi-Column Layouts

Placing your text into multiple columns is technically possible today using multiple DIVs but CSS 3 will make this much easier allowing you full control over the number of columns, their widths and the spacing between them.

#content-main{

text-align: left;

width: 920px;

font-size: 1.2em;

-webkit-column-count : 3;

-webkit-column-gap : 50px;

}

Multiple Background Images

Again, giving an area multiple background images is possible today but it means cluttering up your page with unnecessary DIVs. With CSS 3 you’ll be able to assign more than one image to an element, in the example above I created a single DIV with two separate background images:

1.       The main blue graphic locked to the top right hand corner.

2.       The white WSI logo (as a transparent PNG) locked to the bottom left.

The logos would stay in their assigned corners no matter what the size of the DIV, giving designers a lot of flexibility when working with dynamic content.

#multibg{

width: 500px;

height: 200px;

background: url(../images/bg2.png) bottom left no-repeat,

url(../images/bg1.jpg) top right no-repeat;

}

Rounded Corners

CSS 3 allows you to place rounded corners on any element without having to use images or JavaScript to fake it. You have full control over which corners are affected and the amount of rounding.

#outer{

width: 475px;

height: 100px;

padding: 50px;

background: url(../images/bg1.jpg) bottom left no-repeat;

-webkit-border-radius: 10px;

}

Drop Shadows

Drop shadows could easily be used badly and ruin a site but in the hands of a good designer could also add that something to make it stand out. It’s another effect that can be faked at the moment using images or JavaScript but CSS 3 will streamline your code with shadows natively rendered by the browser.

#dropshadow{

width: 450px;

height: 170px;

background: url(../images/bg1.jpg) bottom left no-repeat;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-webkit-box-shadow: 0 0 5px #111;

}

h1{

font-size: 2.5em;

font-weight: bold;

margin-bottom: 15px;

color: #003767;

text-shadow: #ccc 4px 4px 2px;

}

Element Opacity

The opacity controls in CSS 3 are flexible enough that you can control the exact value for any single element as well as deciding whether the opacity of child elements is effected.

#opacity{

width: 450px;

height: 150px;

padding: 25px;

background: rgba(255, 255, 255, .40);

}

@Font-Face

The @font-face attribute allows you to embed a custom font, hosted somewhere online allowing you to venture out of the safety of traditional web fonts. A slightly less useful version has been available in Internet Explorer for years but it’s now starting to gain support from both browser developers and font foundries. We discussed @font-face in more details in a previous post.

So can I start using these right away?

Unfortunately the answer is yes and no. The last 6 months has seen a huge improvement in CSS 3 support from most of the major browsers but you’ll still have to use browser specific attributes (“-moz-“ or “-webkit-“ before the attribute name, as in some of the examples above) to get many of these new techniques working right now. The latest versions of Opera, Safari and Chrome all have excellent CSS 3 support right now with Firefox close behind. As usual though, Internet Explorer is dragging its heels with almost no support even in IE8. This is hopefully set to change whenever IE9 launches according to a recent discussion with Microsoft developers.

There are many site designs and blogs already taking advantage of these new techniques and there’s nothing to stop you from experimenting too. Browser support is going to improve over time and as long as the design doesn’t look broken in IE, those visitors would never even realise anything was different for them. There are a lot of designers pushing the idea that a website doesn’t have to look identical in every browser. It’s important to make sure that everyone receives a good browsing experience but why deprive the modern browsers of those more advanced features?

This is obviously something that needs to be discussed at the beginning of a project but if you’re lucky enough to be working with a forward thinking, tech savvy client, why not suggest that they join you leading the charge into the next stage of web design?

Microsoft has been slowly losing the web browser war to newer, more user-friendly web-browser programs such as Firefox,  Safari, the new Google Chrome and more. A few months ago, in an effort to improve its position, Microsoft launched the latest version of Internet Explorer.<!–more–>

The new, improved Internet Explorer 8
The introduction of tabbed browsing in Version 7 was a huge step forward from Internet Explorer 6, (although it was a long time after Firefox had tabbed browsing as standard). In Version 8 Microsoft seeks to build on this with some other useful features. These include:

1. An in-Private Browsing mode, which conceals the user’s online activities.
2. Search suggestions being made as you type, with images where relevant.
3. Session saving, to allow you to pick up where you left off.
4. Crash recovery, so you don’t lose your open tabs if the program (or your PC) crashes.
5. An improved screen filter for protecting surfers against malicious websites.
6. Additional right click options for highlighted content.

Microsoft is calling Internet Explorer 8 its fastest browser, but in tests against its main competitors, Firefox and Chrome came out quicker.

What about the Competition?
If you haven’t used any of Internet Explorer’s competitors’ browsers, you may be denying yourself of a richer web-browsing experience. Here’s a round up of the top alternative browsers, together with some of their key features.

Firefox 3 – Mozilla’s Firefox web browser has the second-biggest market share after Explorer. The open- source browser’s main strength is the number of add-ons available to enhance your browsing experience. If you have ever thought of a nice function missing in your browser, you will probably find a Firefox add-on for it.

Opera 9 – The Opera browser doesn’t get as much publicity as some of its rivals, but it has been a reliable and innovative option for a long time. Some key features include an integrated email client and news reader, excellent file download tools, wide-screen monitor support and the ability to synchronise your favourites over the web. Coming soon, Opera Turbo is anticipated to take surfing speeds to a higher level.

Google Chrome – The Google browser has made huge inroads into the web-browsing arena. Chrome has a sleek, minimalist design, which maximises the viewing window. It’s early days for this browser, so we can expect more features to be added with updated versions. The lack of tools in comparison to its rivals is not all bad though, as the flip side means it opens and renders web pages quicker.

Safari – The Safari web browser is the default web browser on Apple Macs. Recently, Apple extended the browser’s reach by making a PC version available. As you would expect from Apple, the browser is fast, looks great, and adopts the now familiar iPod thumbnail image Cover Flow view.

Other browsers include Flock, Lunascape, Maxthon, Songbird and more, each sporting unique features and tools that appeal to surfers’ niche interests and business processes.

What it Means for Your Website
An increasing number of web-browser options is good for end-users (no one likes a monopoly), but be sure to check that your website presents correctly in each rendering engine.