Hold on just one moment… how much does your client know about CSS – and how long is the site content going to retain the look and feel they’re so pleased with if they’re not confident with HTML?

Clients aren’t coders.

Most of them, anyway – most clients know how to use Microsoft Word, but that might well be the extent of their design knowledge. And, if you’ve worked with Content Management Systems, you know that copying text from a Microsoft Word document into the CMS can cause some unexpected design complications, and can result in accessibility issues, including loss of W3C compliance. Inserting plain text into the editor helps, but what happens to the formatting?

Using inline formatting is certainly an option, and many clients will opt for this. It’s quite easy to highlight a segment of text, apply a font size and colour, then set the text alignment. This has the advantage of being truly WYSIWYG, as all changes will show up exactly as the user wants them to in the CMS editor window. There’s just one small problem.

If your client doesn’t know exactly what font sizes, colours and alignments are used in the content you set up for them – not to mention image spacing, table cell padding and other more advanced settings – it will be very difficult for them to replicate this when they upload their own content. An area of text that looks just about right in the content editor might not look like the rest of the page content when it’s saved and viewed on the front end.

But they can apply CSS styles and classes, right?

Of course, you could supply them with a list of the correct inline style codes or even classes to add for each formatted segment of text… it adds another page or two in the user manual, but it would ensure that they could produce new pages that look like the content you uploaded for them.  Some clients are quite happy to click on that little HTML button and enter an instruction like class=”blah” in the correct part of the page for the content they’re uploading.

But many content managers don’t have any web design experience – they’re working with the content editor on the basis of a “Microsoft Word-like” interface. Looking at the HTML version of a page can be daunting. Those <p> and </tr> and <a class=”sausage” style=”margin: 5px; float: left; clear: both;” href=”/overthere.htm”> tags don’t make sense to anyone who doesn’t know that they’re looking at the start of a paragraph, the close of a table row or a styled link to a page.  In that respect, it may not be reasonable to expect your clients to be able to add classes or inline styling.

What’s the solution?

I use a combination of two approaches.

First,  in every CMS user guide that WSI Huddersfield produces, we include any applicable inline styling, particularly where <div> sections have been used to create columns or floating text areas, as standard CMS software doesn’t include an insert-DIV option. This is done by providing a block of code in the user manual with “your text goes here” sections in it.

Secondly, in the site creation process, we use CSS to define the appearance of a number of basic functions on the site, like paragraphs, headings and lists. Once this is done the customer can then use your styles with just a click or two to format their text and retain the same look and feel as the content you have uploaded.

For example, you may need a specific format for a Call-to-Action button. Trying to show a client how to do the Call-to-Action buttons with standard text and inline scripting could be quite problematic, even if you explain to your client exactly where to paste the appropriate styling text. But if you have set up the CSS so that using the Heading 5 option in the CMS will automatically make the text appear as a button with a fixed width, floated right and showing a background image and border, it simplifies things considerably.  A client could then enter their normal text, highlight it, and click “Heading 5″ in the settings.

Style test pages

There is one down side to using the CSS styling in this way – the CMS is no longer quite so WYSIWYG if you’re using external style sheets, which do not show in the editor window. That formatted H5 wouldn’t have the styling applied to it, so it would simply appear as plain bold text in the CMS. This is why creating a Style Test page is important, so that a client can refer to what something looks like on the front end of the site, and click the right option in the CMS. This test page should show:

• Headings 1 –  6
• Standard paragraph text
• Links
• Bullet and numbered lists
• Any other formats applied to standard functions

This way, your client can see what they need to do to replicate the style of pages already on the site. And helping your client to do that will also help you – so that the site you are so pleased about will remain a showcase piece once your clients are maintaining their content themselves.

Five Website Tips for Engaging Consumers Today
The web is not a static medium: as technologies improve, user expectations increase. As they do, meeting customers’ expectations will mean developing your marketing to be more appropriate, timely and relevant to what consumers want.

Here are five steps to develop your website to engage more effectively with your customers:

1. Study Customers’ Online Behaviour
Use your website analytics to learn from your intended audience – your customers – and give them what they want. Identify website hot spots that attract the most attention; understand when your email marketing messages will be best received; discover which social platforms are leading them to you.

If used well, your web analytics are a key component in understanding and fulfilling your customers’ expectations.

2. Consider Your Content Presentation
The first step in engaging customers is not only the quality of your content, but also the ease with which it can be read and its user-friendliness. A professional web design and carefully thought out content arrangement will help you make a great first impression – and draw your website visitors in.

3. Creative Content Formats
The web is no longer a text-based medium, and hasn’t been for a while. Even the less frequent web user will be used to animated imagery and video content. Be creative with your content to engage your visitors’ senses and get your message across dynamically, but ensure the technology doesn’t distract visitors from your pitch.

4. Emphasise Social Media Connections
Make it easy to share your content across multiple social networks, such as Digg, StumbleUpon, Twitter, Reddit, Facebook and many more. Including an easy-to-use ‘Share’ widget with your content makes content sharing a breeze and demonstrates your intention to be engaging.

5. Make it Easy to Correspond – No Jumping Through Hoops
If you want to encourage correspondence, show it. Make it a simple process for site visitors to leave comments or get in touch to take ‘social conversation’ to the next level. Streamline your forms and have multiple points of contact through which visitors can leave comments.

Finally, with all the above, adapt your marketing mix to incorporate a coordinated, consistent approach. Developing a coherent online marketing campaign can be done very effectively at a fraction of the cost of traditional promotional activities.

The number of times I found a site within Google saying that they had a sale on boots, only to click on the site and land on a completely irrelevant page which only made be close the page and continue looking for another site that would actually land me on a page showing Climbing Boots.

With this in mind here are some tips on the best practices for landing pages, which should engage the user and be able to show higher ROI.

• Unify the aim – Landing pages perform best when the content is promotion-based. The content should be concise and focused on one message.

• Engage the Visitor – Tell a story or sell a product using impactful imagery.

• Focus Visitor Experience – Landing pages should be used as a teaser to easily point the customer to the desired action.

• Direct Headline – Make a good first impression. A clear and direct headline should be the first thing the user sees when viewing the page.

• Leave Plenty of Space — Visitors tend to scan the page rather than read bulky text. Good use of space allows visitors to scan and understand the key messages.

• Call to Action Buttons – Attracting attention is what the main action buttons are all about. Make the button is above the fold on the page. Also, don’t skimp on button size.

• Convey Trust and Security – Branding, trust/security icons can provide credibility and give confidence to the visitor.

• Provide a Compelling Message — Think of your landing page as your online salesperson. Make sure you have one compelling message directly above the call to action.

Understanding what visitors want and how the interact with your site is essential to get the best ROI, continually monitor your analytics and modify your pages. Just some minor tweaks could really reduce your bounce rate and increase visitor interaction and stop people like me leaving your site within 3 seconds of arriving on it!

But there are things any e-commerce website should do to give its customers the best possible online experience, especially when you’re talking about busy shopping times.

Positive Online Shopping Experiences -
How to Get Customers To Come Back

For me, the biggest concern when I’m shopping online for the holidays is “Will my gifts get to me on time?”

The best of the websites I’ve used this year have done the following things to increase my confidence in shopping with them:

• Delivery times clearly stated on the website, and not just when I’m checking out. Dynamic delivery times specific to each product and/or supplier are even better.
• Named delivery services – and the choice of courier type. I’m one of those people who, if next working day delivery is available and not too expensive, will go for that instead of a standard Royal Mail service.
• E-mailed confirmation of my order including an expected delivery date.
• Tracking numbers – when possible – also provided through e-mail or by logging in to a customer account on the website.
• Contact details – including a real-world physical address and telephone number – are clearly displayed on the website and in the order confirmation e-mails.

Negative Online Shopping Experiences -
How to Scare Your Customers

Unfortunately, not all of the shops I’ve used have been quite so helpful this year. Shopping online can be a bit stressful if a customer doesn’t have enough information.

If you’re an e-commerce site and you want to scare off a potential customer:

• Don’t talk about your delivery policies –  your customers don’t need to know how you deliver their goods or when they’re going to get them, do they?
• Don’t confirm your company details in order confirmation e-mails – send a list of the products the customer bought, but don’t include any contact details if things go wrong.
• Don’t show your company registration or VAT information anywhere on the website.  Speaking of the Electronic Commerce Regulations 2002 … surely they don’t mean your company is legally required to include that information?
• Make the customer register before they can place an order with you – but make sure that registration is a white elephant, of no practical use in future. Customers don’t really want to know if their order has shipped yet, even if they’re logging in to check.  In addition, your registration system should be awkward, intrusive and impossible for your customer to avoid.

And a minor issue, which might not apply to all e-commerce sites…

If you have a physical shop as well as an online presence, keep in mind that your customers may see a product in your shop that they like… but not the right size or colour. Do you stock the same products in your online shop?

Making it easy to shop online – and making sure you show what your customers need to know –  will get your customers to come back, and to recommend your site to others, too.

Although it’s a big leap in what many designers are used to, it is something that all designers must accept will happen in the future. So why not learn the ins and outs of mark up such as HTML 5? Knowing something of this kind will not hinder your progress as a designer, simply give you the upper hand when “d day “ does come around and XHTML is something of the past.

Things like jQuery plugins, formatting techniques and design trends change all the time across the web. We accept that what we learn in this area today will change tomorrow. If this is the case with other coding techniques then why should we not accept this with the mark up we use everyday? Well, people become very comfortable with the techniques they learn in XHTML, the little tricks and tips that speed their design to build ratio. But from what I will describe in this blog HTML 5 may be worth the change over, if it’s time and tidiness we require. Transitioning from one syntax to another can be complicated or even make you feel that what you have learnt before was a waste, hopefully this blog can ease that change.

The Basics

The first main change is the doc type which every web site has the doc type code is

<!DOCTYPE html>

TO say the least this is not what we expected from a new syntax, but apparently…

<!DOCTYPE html5>

Triggers various problems in, yes you’ve guessed it IE6, but we must take backwards compatibility into consideration in most cases.

With HTML 5 this is as long as the new doc type gets, it’s small, its meaningful and for once in any designers working life including myself we might just remember this one, I feel that this improvement will banish the need for us to open up previous XHTML builds and copy and paste the doc type forever.

New Elements to get to grips with

Straight away new elements strike your retinas and in many ways make the sense of designing seem easier. In many ways the WC3 community has opened its ears and listened to what it is designers need. New elements that style the structure such as <header> and <footer> are now apparent along with <canvas> and <audio>. These simple looking structural elements seem to tap into an already powerful API - which in the long run allows us to create user friendly applications. We can now sleep at night knowing that our site’s audio doesn’t need to rely on copious amounts of flash work to seemingly stream an audio file. So let’s get to grips with the elements.

The new Structural elements

• <header>
  The header element contains introductory information to a section or page. This can involve anything from our normal document’s headers (branding information) to an entire table of contents.
• <nav>
  The nav element is reserved for a section of a document that contains links to other pages or links to sections of the same page. Not all link groups need to be contained within the <nav> element, just primary navigation.
• <section>
  The section element represents a generic document or application section. It acts much the same way a <div> does by separating off a portion of the document.
• <article>
  The article element represents a portion of a page which can stand alone such as: a blog post, a forum entry, user submitted comments or any independent item of content.
• <aside>
  Aside, represents content related to the main area of the document. This is usually expressed in sidebars that contain elements like related posts, tag clouds, etc. They can also be used for pull quotes.
• <footer>
  The footer element is for marking up the footer of, not only the current page, but each section contained in the page. So, it’s very likely that you’ll be using the <footer> element multiple times within one page.

With one glance at these elements we can see no need for “div id=”mydiv”></div>, it would appear that the gold old div id is being forced into retirement. Much more than this elements like <header> or <footer> can be used multiple times on one page, something that was unheard of with div IDs. In this example the elements act more like classes and normal HTML that can be exhausted while style retaining a semantic structure.

One thing is apparent while looking at the elements in HTML5 and that is its ease and simplicity in creating a final goal. Like with any industry this is apparent, aerodynamics experts have one goal - to create something that reacts in a streamlined fashion to its environment. This also relates to design, if we can create something that overall reacts resourcefully to the net then why can’t we do it in far shorter steps than XHTML? HTML5 can do the above in a far more streamlined fashion than that of XHTML. When I look at the new mark up, I think faster, cleaner.

Easing the transition from good old XHTML

We can see that HTML, XHTML and HTML5 are similar in syntax, some small differences however can slip into your code and we can be faced with that dreaded “Document does not validate” in the official “failure red” colour. But on the plus side HTML 5 has some built in slack to let designers off a little bit, for example when marking up a form in HTML 5

For example , when marking up in HTML5 the proper syntax would be..

<input type="text" id="name">

But this is also accepted as valid code in an attempt to ease the pain for avid XHTML coders who in many cases are used to the “/”> elements. So even though we are using HTML5 we can still self close our elements like so.

<input type="text" id="name"/>

These rules will apply to <meta> <b> and <i>, these elements being left in makes the change far more easier to come around to.

What are some of the benefits?

People do not upgrade anything unless it has something to offer or at least one new feature. If your old code works just as well if not better than the new syntax mark up then why do you need to change over? Well, with HTML 5 a lot of new features are making their way onto the scene and changing the way we handle our online presence. Below are a number of new features..

Offline data Storage – With anything that’s web related that can be followed by offline storage we suddenly prick our ears up and listen. In this case HTML 5’s offline capabilities are amazing. Programs like Thunderbird, Outlook allow you to browse your data while offline, with HTML 5 you can have this feature function in the same manner but simply in your browser, some say this could be the first serious step in connecting both the desktop and web.

Video and Audio- The audio & video APIs are massive upgrades in media embedding. Although support is limited right now, something like video embedding has never been easier:

<video width="400" height="360" src="vid.mp4">

We can see from all of the above that HTML 5 is not at first glance evil but rather pleasing to use for a designer, for years we have complained about time management, and ease of coding. Here we are faced with a syntax that allows us to speed up our production and add elements that previously would have given us a headache. Further more we can see that is being kind to us who are XHTML savvy, by allowing us to ease into this new step in our design careers.

To Conclude

HTML 5 wants to help us, it wants to simplify the way we code in a way that can benefit both clients and the designer. But in most cases one thing is standing firmly in the way of evolution in the web arena and this is the foundations set up around XHTML, communities are rife with support for this syntax and this does not look to burn out anytime soon. But hopefully with HTML5 the expectations are being set up with strong intentions to become a very powerful mark up language, could this sway the masses?

With so many great features from new elements to API’s with enough power to change the way we view the net. We can make data available offline, easily combine technologies and create intricate animations all within a familiar landscape. We must as designers embrace the future, in doing so we can build stronger and richer web apps that do the internet justice.

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?

You might not always know whether a specific section should be a hard-hitting sales pitch – or simple and direct, something to help your reader navigate through your site. Knowing how to use headlines and body text – and when to ease up on the sales speech – can help you create much more helpful product text.

Not all website text should be aimed at sales. Navigation should be simple, making it easy for your viewers to find what they want, instead of trying to sell them on something they don’t know they need yet. Content areas that are designed as “signposts” to find further information elsewhere on the site should be summarised. Don’t overwhelm the viewer with too much information if what you really want them to do is click the link to your product page, for example. Of course, your product and service pages should make use of the best practices to write text that sells.

Headings and Headlines

A good headline will tempt the reader and make them want to read more. Keep in mind the following principles of great headlines:

• People like “How To…“  and if you can promise them simple instructions, they’re likely to read more.
• Give a quotation or testimonial from a real, trustworthy person.
• Do you have a guarantee? Shout about it!
• Provide fast facts about your product or service.
• Tell them what they need – and how you can provide that.
• Ask a question your reader wants the answer to.
• Use the Three P’s – Product, Price and where to Purchase.
• Are you running a current special offer or sale?

Below the Headlines

Once you’ve worked out your headlines, look over the body text for the product or service.

• Simplify your text – make sure you aren’t creating large blocks that can’t be scanned.
• Get to the point – don’t hide your offers or use jargon to hide what you really mean.
• Important info goes above the fold – although you can make creative use of graphics that are stretching beyond the fold to draw your viewer’s eyes down the page, make sure the critical sales points are visible at the top of the page without scrolling.
• Speak to your reader – try to edit the copy so that it addresses your target audience.

Using these principles when you are writing copy for products and services – or editing the copy for a client – will help create eye-catching content that stands out.

In this post I’m going to discuss some of the popular techniques used to allow more flexibility with online fonts as well as newer solutions that could be on the horizon

Web-safe fonts

For reasons both technical and legal, web browsers have really only been able to make use of fonts already installed on a visitor’s computer. That means that for the most part we’re left with the following list of fonts which are common to both Windows and Mac machines (or at least have a close Mac equivalent):

• Arial
• Courier New
• Georgia
• Impact
• Lucida Sans Unicode (or Lucida Grande on the Mac)
• Tahoma (or Geneva on the Mac)
• Times New Roman (or Times on the Mac)
• Trebuchet MS (or Helvetica on the Mac)
• Verdana

Font Stacks

When CSS became the standard for styling your website it brought with it greatly improved tools for defining and transforming text. One of these tools was Font Stacks, a prioritised list of fonts to be used by a particular part of your site. To list multiple fonts in this way you use the “font-family” property, for example:

p
{
font-family:”Times New Roman”,Times,Serif;
}

This would instruct all of the text in your paragraph tags to use Times New Roman, if that font isn’t available on a user’s machine it would check for Times (the Mac equivalent) and if it can’t find either it would fall back to whatever generic “serif” font was available. This also means that designers can be a little more adventurous, for example adding a relatively rare font at the front of the queue, there’s always a fall back option that everyone else could use. The downside to this being that the majority of your visitors will be seeing a different version of the site, something that a lot of clients may not be happy with.

Font Replacement Techniques

If you’re familiar with the web-safe fonts listed above you may be thinking they all look a little tame. They’ve generally been selected because they are easy to read on screen and so work well as the font for your main body text, but what if you’d like to try something a little more adventurous for your headings? Headings are usually going to be just a few words and rendered in a larger font size which means readability becomes less of an issue, they can be the perfect place to inject a bit of creative flare and give some personality to your design. Over the last few years several options have been developed:

sIFR (Scalable Inman Flash Replacement)

sIFR uses Javascript and Flash to convert your plain text into any font you would like. It was first developed in 2005 and has been open sourced so anybody can use it free of charge. You can find out more about it here – http://www.mikeindustries.com/blog/sifr/

Because the switch is made by the Javascript after the page has loaded, you don’t have to make any sacrifices in terms of search engine optimisation or accessibility. The downsides to sIFR are that it requires that both Javascript and Flash being installed, the text may not show up if the visitor is using ad-blocking software and some browsers can have problems with selecting/deselecting sIFR text.

Cufón

Cufón is an alternative to sIFR which doesn’t involve Flash. It uses a specially created font generator which converts standard fonts into the necessary format, then Javascript to render the finished font on the page. You can find out more here – http://cufon.shoqolate.com/generate/

It has the same benefits as sIFR but doesn’t need Flash which means more people will see the results and the page should load slightly quicker. On the other hand there can be more work involved in getting it set up and it doesn’t have complete browser support, there are still problems stopping it from working in some versions of Firefox and Chrome. It also has show-stopping problems in some screen readers which would make your site almost useless to visually impaired visitors.

Typekit

So while there are options out there for swapping more adventurous fonts into your websites, they all come with their own drawbacks which is why they’ve not achieved mainstream success. Typekit is a new service which was announced earlier this year and promised to change the way type is handled on the web. It uses a previously available but underutilised CSS property called @font-face which is starting to be implemented by more browsers.

The Typekit founders have made deals with various typographic foundries to offer hundreds of custom fonts specifically for use on the web. The service launched this week allowing website owners to sign up for one of various payment plans. I’ve been testing the service myself with mixed results, you can take a look here although depending on your browser you may or may not see the results – http://www.wsi-ebizsolutions.biz/typekit/

A comparison of my Typekit test between two modern browsers.

The Typekit founders claim the service works in Internet Explorer and recent versions of Firefox and Safari although I’ve not been able to get it to work under IE. There is no support for Chrome or Opera until those browser manufacturers include support for the @font-face property, however for now these browsers will simply fall back to the next font in the stack.

The service itself is easy to use and the collection of fonts available is impressive. I’d have to recommend against using it on client sites until the browser support improves but it’s definitely a technology to keep your eye on.

There’s definitely a bright future for typography on the web, there are many other companies working on similar products and the amount of buzz around Typekit shows just how much demand is out there for better fonts! Once the bugs are worked out and the browsers catch, up I’d be very surprised if custom typefaces don’t become commonplace on the web.

When building your site and writing your copy, be aware of the following time scales:

Writing for Skimming Readers

The majority of readers online spend less than half a second looking at any single element on the page. Eyetracking studies have revealed that a user will look at most webpage elements for approximately 0.1 seconds. Graphics and headlines should be clear and easy to read in one brief glance.

Use of headings and emphasis will make text easier to scan – and has the bonus effect of creating optimised content for search engines as well. Highlight critical information - but don’t be tempted to emphasise the whole of your text. Your goal is to create text that can be scanned for key phrases.

Download Times and User Control

Your site navigation also needs to react quickly, particularly if you have expanding menu items – site users want to feel as though they are in control of their actions and causing something to happen on the screen.  Optimise your menus to react within half a second to retain your user’s sense of control. However, if you’re creating menus that react on a “hover” of the mouse, don’t make things happen too quickly – flickering menus can disorient your users, and if the menu disappears before your user can click on the option they want, they are not likely to try again.

Be aware of page sizes and dynamic elements, too – your pages should load content within one second whenever possible.

Bounce Rates – the Ten Second Rule

The longer a visitor has to wait for a page to load, the less likely they are to stay on the page. The majority of users will leave a site that takes more than 10 seconds to load. Using tables for layout can slow down your page loading times – replace tables with CSS elements when possible to ensure that page text will load as quickly as possible.

How Long Does It Take?

Simplify the basic tasks on your site. If it takes a new user longer than a minute to complete a straightforward task, they are unlikely to finish it. Registering for a new user account, watching an instructional video or completing an enquiry form should be quick and painless for your customers. Don’t overcomplicate forms – make sure they only ask for what you really need, and that processing that form provides feedback confirming the successful enquiry immediately.

Keep the user time scales in mind when writing copy and building forms – it will benefit the search engines as well as your customers!

Make detailed descriptions and specifications easy.

People shopping online can’t physically pick up the products listed to read the label, or ask a shop attendant for help. It’s up to the website to provide the information that would normally be on product packaging to the customer – and in a way that makes it easy for the customer to find the information that is most useful to them.  Customers often skim rather than reading long blocks of text – highlight important information by using headings, bold emphasis and lists rather than concealing it in a long paragraph.

This, of course, requires a product management system that makes it easy to create formatted content - especially when site owners would like to be able to add and update products themselves. Although rich text and WYSIWYG editors are commonplace on standard pages, some off-the-shelf e-commerce packages fail to provide the same functionality in the product manager.  Add a WYSIWYG editor to the product management page to make it much easier to create detailed descriptions geared towards the scanning behaviour of website customers.

Editors we’d recommend include:

• TinyMCE (and there’s a useful add-on for this, TinyBrowser, which extends the toolkit available)
• CKeditor

Pictures speak a thousand words.

Be aware of what the pictures say about the products.

A tiny and distorted product thumbnail is unlikely to convince a customer to click through to a product page. When uploading pictures, it’s always helpful if the product management software can resize images gracefully to create clear, sharp thumbnail images - or allows the site owner to upload a separate, smaller image for the thumbnail.

Adding multiple images – and the ability to view much larger detail images - to the main product page will help customers get a better idea of what your product is – the virtual equivalent of picking it up to check out the label.

Product pages that get it right…

The Writers Bureau makes it easy on each of their writing course pages to find out crucial information about their guarantee for each individual course. This is an often-overlooked piece of description that increases customer confidence in a product.

Farmer Copleys has product detail pages that make use of clean resized thumbnails, medium product images and click-throughs to larger images, which display their farm produce to best advantage. In addition, the product description does not omit details like weight and number of servings  – important for a customer who is shopping online.

Making it easy to maintain the products on an e-commerce site can help keep a site’s content fresh and help with search engine optimisation, too – so don’t forget the descriptions and the people adding them!