General

HTML might seem like a simple language for web documents, and to an extent, it is that’s what it was intended to be. If you know what you’re doing, though, you can do a lot more with HTML than you might think. This article should give you a few ideas on how to take HMTL further.

Inserting Multimedia Content.

Plain text and graphics are all well and good, but sooner or later you’re going to want to insert some multimedia content, such as a Flash movie, or an audio or video file. Unfortunately, browsers don’t handle these things themselves they use plugins, and you have to know the code to activate these plugins. While this should be simple, it isnt, for various historical reasons.

To begin with, there are two ways entirely different ways of calling a plugin. Newer browsers use the object tag, like this:

That one’s for Flash. To insert things like Quicktime or Windows Media players, you just need to find out their classid and codebase URL, as well as which parameters (param tags) they require. Most browsers now support the object tag, but some still use the embed tag instead:

For most cases, you should include both it’s best to place the embed tag inside the object tag, as this will cause browsers that understand object to ignore your embed. As an extra fallback, you might want to insert a plugin not found message, with a link to allow users to download the plugin, but in most cases browsers should now do this for you automatically.

For Internet Explorer only, you can extend object tags to call plugins that are on your server instead of on your computer this is known as ActiveX. Its most common use is to let users install web-based programs such as instant messengers without having to download and run a standalone install program.

However, you have to realise that many users will see ActiveX as dodgy, because it is an often-used way of installing undesirable software, and people who arent using Internet Explorer just wont see anything at all. If youre designing a site for a limited set of users, however (such as an intranet), ActiveX can be a very powerful capability.

Tables.

Even though tables are rarely used for layout any more, they’re still used for what they were originally intended for actual tables of information! You’ll probably need one at some point, but they’re still as complicated as ever, so it’s good to take a while to learn about how they work.

Basically, to create a table, you have to create the rows and columns individually: each table tag contains row (tr) tags, and each tr tag contains column (td) tags. A typical table looks like this:

month sales
January 200
February 300

This can be a difficult way to work, especially if your data is organised in columns, not rows. You just need to remember that the data you put in the tds will line up depending on their order in the tr: so, for example, ’sales’, ‘200′ and ‘300′ will line up in a column, because they are all in the second td tag of each tr. You might find it easier to use tabs instead of spaces to separate the tds, so the table appears lined up in the HTML the same way it will on the page.

Once you see how that works, you pretty much understand tables wasn’t so hard, was it? The only thing left to realise is that you can make one td fill more than one column using the ‘colspan’ tag. In the example table, for example, you could add text that fills two columns by adding this row:

text

Experiment a little, and you should be alright. Good luck.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Once you’ve built your HTML pages, you might need them to do something a little more interactive on the client-side (that is, in the visitor’s web browser). How can you do that? Javascript is the answer.

How Does Javascript Work?

To add Javascript to your HTML, you simply insert it between tags (or refer to the .js file that contains it, also using script tags). Overall, Javascript is quite a C-like language, but manages to be relatively simple in spite of it.

The Javascript you write should have functions that are tied to events on the page, meaning that when the visitor does something with your page, the Javascript executes.

Here are some events that you can use to trigger Javascript functions:

onload. Runs the code when the page loads.

onclick. Runs when the mouse is clicked. You can also use ondblclick for a double-click.

onmouseover. Runs when the mouse pointer is over a certain part of the page.

onkeypress. Runs when you press a specific key on the keyboard.

onchange. Runs when the contents of part of a form changes.

onblur. Runs when you press the tab key to switch between part of a form.

onsubmit. Runs when the form’s submit button is pressed.

What are these events useful for? All sorts of things. The onmouseover function, for example, can be used to rewrite parts of the page’s code when the user hovers over something useful for providing pop-up help ‘tooltips’. Onkeypress lets you give the user keyboard shortcuts to do things on your web page. Onblur and onsubmit can be used very effectively to spot errors in a user’s form input, and let the user know how to correct them before they’re ever even sent back to the server.

Once you know which event you want to tie some Javascript to, you have to say so in your code. You can do this in one of two ways. The first way is to directly attach it to the HTML element in question, like this:

This works well, but has the disadvantage of polluting your HTML with Javascript function names. The second, better, way, is to do it like this in the Javascript itself:

onload = function() { }

This creates a function directly from an event (in this case, the onload event), without ever touching the HTML itself.

Javascript Commands.

Here’s a quick reference to the most useful commands in Javascript.

alert. Pops up a dialog box giving the user a message. Useful, but sometimes considered annoying it might be better to put the message on the page instead.

confirm. Gives the user an alert box, but with buttons for Yes and No. Useful for asking ‘are you sure?’

document.write. Writes things into the current HTML document. Often-used, but not the best way of doing things.

getElementByID. Allows you to get an HTML element (that is, a tag) using its ID and manipulate it. Very useful for changing the text contained within tags, or their background colours, but can be used to do just about anything.

Math.random. Produces a random numb

navigator.userAg. Returns the name of the web browser. Useful to check if a certain browser is being used, although it’s often better to check for functions instead of browsers and decide which code to run that way.

parseInt. Looks through some text and gives you only the numbers from it.

window.location. Allows you to change the current URL that the web browser is at, as if the user had clicked a link.

var. Defines variables.

For more on Javascript, take a look at www.javascriptkit.com.

Javascript’s Problems.

The biggest problem Javascript has is that it just doesn’t work on all browsers: if you thought HTML support was erratic between them, wait until you start using Javascript. This will often put you in the position of having to check whether a function is available on the browser the code is running in (using an if statement), and then running some alternative code as a workaround if it doesn’t. In most cases, this isn’t as big a problem as it might seem, but it still requires you to have some knowledge of each browser’s limits, and do more testing than you would otherwise need to do.

Javascript is also, unfortunately, a pain to test and debug, as most browsers don’t give you any sort of reason why your code didn’t run if it’s wrong, they just ignore it.

If you enjoyed this post, make sure you subscribe to my RSS feed!

If you feel like you know quite a bit about web design now, but youd really like to explore the details a bit more, then this is the article for you. As web designers are, by their nature, very likely to be web users and website owners, theres a wealth of information and discussion forums on the web, all free to read or participate in. Im going to give you a few websites that are my first port of call when I have a problem or Im curious about something, in the hope that theyll be useful to you too.

W3Schools (www.w3schools.com). A great resource, with free tutorials on everything from HTML to CSS to ASP. It offers a try it yourself editor that lets you edit example code and see the results straightaway, as well as comprehensive language references. I go to W3Schools first when I forget the name of an obscure CSS property or wonder if theres an HTML tag suitable for a certain purpose theyre all there.

A List Apart (www.alistapart.com). A web magazine for web designers, its very good for how to articles covering more complicated subjects, especially when it comes to CSS. The writers at A List Apart are very good at working around CSS shortcomings and offering practical workarounds and solutions that you can take and use on your own website.

Digital Web Magazine (www.digital-web.com). Weekly pieces on issues relevant to web designers, with a focus on web design and accessibility. It tends to be especially good for reviews of the latest web design books, and analysis of current trends.

The Web Style Guide (www.webstyleguide.com). If youre a writer, you need to read The Elements of Style, and if youre a web designer you need to read the Web Style Guide. It is, essentially, an online book, giving best practices for many different aspects of web design. If youre looking for general strategies, its a very good read.

Webmaster World (www.webmasterworld.com). An excellent place to watch for the latest news relevant to webmasters if something is going on with a search engine, or theres a new advertising service out, then Webmaster World will have the news, as well as lots of comment and analysis from people who run big, successful websites. Well worth checking daily.

About Web Design (webdesign.about.com). A resource that mostly sticks to the basics, but covers all of them, and covers them well. If youre trying to do something that seems like it should be quite simple and youd like a step-by-step guide, About Web Design is a good place to go.

Web Design Bits (www.webdesignbits.com). Web design tutorials with a focus on those big, difficult to use programs, like Flash and Photoshop. Especially good if youre trying to achieve advanced effects in Photoshop without having to learn it inside out. The tutorials linked to are off-site, making it a good way to find other useful web design websites.

Web Design Forums (www.webdesignforums.net). A pretty comprehensive set of forums about web design, and a very good place to go if youre having a problem that you havent been able to solve for yourself. As long as you take the time to find the right forum to post your question in, you should find the people there helpful and knowledgeable.

The Site Wizard (www.thesitewizard.com). This site has a sprawling, categorised set of web design articles if you want an article about something, you can probably find it here. It tends to be especially good if youre looking for a guide for how to do something with a specific program.

SitePoint (www.sitepoint.com). Although it can feel advertising-heavy, SitePoint is a good resource for articles about web design. The articles tend to be slanted towards online business and other ways of making money online, although there are plenty of design tricks there that would be useful to anyway. They also have a very active and useful set of forums.

The W3C (www.w3c.org). Finally, its worth giving a mention to the webs official standards body, the W3C. They have the authoritative copies of the specifications for open web languages like HTML and CSS. You can also take a look at the working groups, who are working on the future of the web right now.

If you enjoyed this post, make sure you subscribe to my RSS feed!

When you’re developing a website, you need to see it in action on a real server, to see how it will work. While you could upload your pages to your web host every time you make a change, this quickly gets time-consuming and tiresome. Wouldn’t it be great if you could have a little test server of your own? Well, the server is nothing but a piece of software so you can! Please note that, for the purposes of this article, I will assume you’re using Windows as your operating system.

Installing an IIS Test Server.

While using IIS isn’t recommended, a test server is very easy to install. All you need to do is open ‘Add or Remove Programs’ in Windows’ control panel. All you need to do is click Internet Information Services (IIS), click OK, and you’re done.

Of course, there are downsides to this. Many versions of Windows don’t come with IIS, and there’s no way to install it on them Windows XP Professional, for example, comes with IIS, but Windows XP Home does not. You might also want to consider that installing IIS on your computer will often make it less secure.

Installing an Apache Test Server.

Compared to installing IIS, installing Apache is hard Linux distributions all have relatively easy ways of doing it, but Windows wasn’t designed for it. To get Apache installed, then, you’re going to need to have a little fight with the system.

Note: If you want to skip all the following steps, you might consider using an ‘easy installer’ version of Apache, such as XAMPP (for Windows), which you can get at www.apachefriends.org/en/xampp-windows.html. The downside to this approach is that you will be relying on them to provide new releases, instead of being able to update things yourself.

First of all, download Apache from http://httpd.apache.org/download.cgi. Make sure you download the Windows Installer (MSI) version. You’ll find it easiest to make the server run as a service, as this will make it run automatically Apache will appear in your system tray (in the bottom-right corner of your screen).

Now, you need to find your Apache configuration file. In the folder where you installed Apache, look for another folder named ‘conf’, and then a file named ‘httpd.conf’. Open this file and look for a setting called DocumentRoot. You should change this to point to a folder on your hard drive, such as ‘c:/html’.

Now, you’ve got Apache, but that’s not usually much good on its own. The chances are that you’ll want to install PHP and MySQL as well, so here’s how:

Download PHP from http://www.php.net/downloads.php. Again, go for the installer. Once you’ve installed PHP, find its folder, and rename the php.ini-dist file there to php.ini. Find the ‘doc_root’ setting there, and set it to the same thing you set Apache’s to.

Back in Apache’s httpd.conf, you should add these lines:

LoadModule php5_module “c:/php/php5apache2.dll”
AddType application/x-httpd-php .php
PHPIniDir “c:/php”

If you didn’t install PHP in c:\php, change the lines above to reflect where you put it.

Now, installing MySQL isn’t as difficult, because it runs independently of your Apache configuration. Download MySQL from dev.mysql.com/downloads. Again, get the Windows installer version. This installer has a lot of settings, but you’ll be fine if you just click Next through them to accept all the defaults.

The only remaining step is to enable MySQL support in PHP. Copy libmysql.dll file from c:\php to your Windows\System32 folder, and then open the php.ini file you created before. Remove the semicolon from the start of the line that says ‘;extension=php_mysql.dll’, and save the file.

Shut down Apache and restart it, and you’re done!

Visiting Your Server.

When they’ve installed a server on their computer, many people wonder how they can access the server they just installed as if they were visiting it over the web. The answer is simple: just open your web browser, and go to this URL: http://localhost (you can also use http://127.0.0.1). This special address means ‘the server on this computer’.

You’ll know if you installed Apache successfully because you’ll see a page congratulating you. When you change your web pages, just use your browser’s Refresh button to see the effect.

If you enjoyed this post, make sure you subscribe to my RSS feed!

If you want people to come to your website more than once then you need to remind them, from time to time, that you exist and give them the latest news about what’s changed and what’s been updated. One of the best ways to do this is to collect email addresses and use them to create a mailing list. But how do you collect these email addresses and how do you send out emails to so many people all at once?

Collecting the Email Addresses.

Collecting email addresses is easier than you might think. People on the web are used to typing their email addresses in a lot, and usually have an email address to use for this purpose. In most cases, if you ask for an email address as a condition of accessing something interesting sounding people won’t really mind giving it to you.

One way of doing this is to simply include a box on each page unobtrusive and not really calling attention to itself that gives your visitors the option to sign up to your newsletter. Somewhat counter-intuitively, it is often better to make mailing list sign-up entirely voluntary, as this means you will get a smaller list but it will only have the most enthusiastic people on it.

Basically, it’s a trade-off between forcing as many people as possible to sign up or just marketing to the most eager people. Your strategy should usually be decided by how many people you plan to send out emails to and what kind of response rate you seem to be getting.

What to Write in Your Mailing List Emails.

If you want people to read the emails you send to them then they can’t just be the latest dull news about your technical website features that no-one even cares about. You need to provide information and updates that are useful and relevant to the person who’s going to be opening that email.

If you just write in corporate speak and don’t say anything that’s going to be useful to real people then your email is going to be going straight into their junk mail. You should take some time over your emails. Make them something that their recipients are going to want to keep and refer to more than once often-updated, time-sensitive information is best, if you have access to it.

Apart from that, make sure to include links to the latest things on your website, as well as a few older things that are still popular. If you sell anything, you should work in a link, but don’t be too obvious about it a good way of doing things is to include a tip or two with potential uses for a certain product (making them look like they are intended for people who already own the product), sparking the reader’s curiosity enough to click through and consider buying it.

The Technical Side.

Once you’ve got a mailing list and you’ve written the first email you want to send to it, the next step is to set up the technical side of things. Just how do you think those emails are going to get sent out? Surprisingly enough, you can just use a normal email program like Outlook, if you paste all the email addresses into it. If you do this, though, you need to make sure that you use the Bcc (blind carbon copy) field for the addresses, to avoid sending out a copy of the mailing list to everyone on it.

Alternatively, there are specialist programs you can get that are devoted to bulk mail. Because spam is such a big industry, companies producing such programs tend to be shady stay away from anything that advertises itself on the basis of how many emails it can send in a minute but if you look around, you should be able to find something that meets your needs.

There are even web-based solutions that avoid you having to install any programs or send any email from your computer, avoiding the risk that you might get blacklisted somehow for sending out too many emails in too short a time. If you can find a reasonably-priced one, then they’re often the ideal solution, allowing you to manage your lists directly and send out emails easily. Make sure to do a few trial runs with smaller numbers of people before you commit yourself to anything, though.

If you enjoyed this post, make sure you subscribe to my RSS feed!

One of the best ways to collect information about your visitors and let them interact with your website is to register them that is, give them a password they can identify themselves with next time they visit. Unfortunately, people are sick of going through registrations, and won’t do it unless they have a very good reason to. Presenting a screen at an online shopping site that says something like ‘register now to buy your items!’ is a sure way to lose sales. So what can you do? You’ve got to be a bit more stealthy about it.

The Difference Language Makes.

It’s entirely possible to present someone with the exact same form that they would usually have to fill in, but stop it from feeling like registering by describing it differently. On your shopping site, for example, you can give the form the title ‘Payment Details’ instead of ‘Register’. Don’t ask the customer to create a password until the end of the process, and say that it’s to save their details for next time but make it optional. People like to feel like the website remembers their details to help them, not because you really want to add their details to your database.

Why is Registration Important?

Registering your users lets you remember information about them on all their subsequent visits, making it much quicker and easier for them to do whatever they do on your website it removes the barrier created by them having to type in their details over and over again. It also gives you an advantage over your competition: it’s easier to use your website, since they’re already registered with your website and they’re not with the other.

Learning from Amazon.

Amazon has an interesting way of asking people whether they want to register or log in, and it works very well. Most sites have a two-sided form, with username and password boxes and then a ‘Not Registered? Register Now!’ prompt. Amazon asks instead for the user’s email address, and then asks if they’ve shopped at Amazon before.

New customers are taken forward to enter their details, while existing ones are prompted for a password. Not only does this approach avoid calling it registration, but it also avoids making them choose a username one of the biggest sticking points. If possible, it’s always good to give users the option of logging in with either an email address or a username, in case they forget one or the other.

What is Registration, Anyway?

You’ve got to lose any fixed ideas you’ve got about how registration works, and realise that if you’ve got someone’s details and their email address, and they’ve got a password, then they’re effectively registered there’s no need to do these things all on the same form, or even all on the same day. Registration can be a gradual, step by step process: one day you’re taking their email address to send them a newsletter, the next their postal code to customise the website for their area.

It’s useful to realise that few users ever delete their cookies: your site should be able to remember them for a decent length of time without them ever needing to create a password. That gives you plenty of opportunity to only attach it to certain functions where it seems to make more sense to require one, instead of forcing the user to have a password for everything.

Streamlining the Process.

Any time someone’s filling in a form for you anyway, that’s a great time to get them registered. Let the user get as close as possible to the end of the process without having to do anything that seems like registering, and then in the very last step ask them for a password. There are dating sites, for example, that let you get as far as writing a message to a member and hitting ’send’, and only ask you to do basic registration at that point. Hopefully by then the visitor has invested enough of their time in the thing that they’re not just going to hit ‘back’ and go somewhere else.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Thanks to the nature of open source, almost anyone can write a programming language and get a significant number of people to use it: and plenty of people have. Two of the newest and fastest-growing players when it comes to open source web languages are Python and Ruby. Neither of them were web languages originally they were normal programming languages but more and more people are starting to use them to power their websites. So what are they, and how do they work? Let’s take a look.

Python.

The Python philosophy demands that code should be simple, explicit, and readable. Where Perl wants there to be “more than one way to do it”, Python wants there to be only one way of doing each thing and it wants that way to be obvious. This makes Python code easy to work with, whether it was written by you or by someone else.

The downside to Python, though, is that it can be slow not as slow as Java, but still much slower than most languages. It is also very picky about indentation (the number of spaces or tabs at the start of each line of code), as part of its effort to make code more readable.

So does anyone use Python? It might surprise you to learn that Google uses a lot of Python code, and the popular BitTorrent file-sharing system is written in Python.

Unfortunately, when it comes to actual web programming, Python isn’t quite up to scratch in many ways: it still shows its roots as a programming language for programs instead of one for the web. It’s for this reason that Python on the web is still quite rare but they’re working on it.

Ruby.

Ruby is a relatively new programming language from Japan, and it has a lot of evangelists who simply love it. Why? Well, it lets you do complicated things quickly, easily and readably with very little code: in some ways. It’s powerful but simple. Here’s some sample code, taken from one of the best Ruby books, Why’s Poignant Guide to Ruby (www.poignantguide.net):

[’toast’, ‘cheese’, ‘wine’].each { |food| print( food.capitalize ) }

What does that do? Well, first, it creates an array with the words ‘toast’, ‘cheese’, and ‘wine’. It then launches into a function, which prints out the name of each food in capital letters. All that with one line of code. It might not seem like much, but just wait until it comes time to connect to a database, retrieve records, format them the way you want and put them on the screen, all in one easy-to-read line of code.

Now, Ruby is becoming more popular on the web thanks to a web framework that makes developing websites quicker than it’s ever been: Ruby on Rails. Rails is only one year old, but it’s already got lots of support, thanks to its big feature it handles the database end of things automatically. Rails is growing at a crazy speed, because programmers love it it stops you from having to write database code over and over again, leaving you free to worry about how your web page works instead of writing SQL.

Rails works using the principle of “convention over configuration”: you do things in a standard way instead of spending time setting it up for the way you’ve decided to do things. Using Rails’ scaffolding function, you can be up and running with a simple database page within minutes then all you have left to do is build the interface.

Watch Out for Web Host Support.

One of the biggest disadvantages of using a minority programming language is that you might find trouble finding a web host that has it installed on their server. You’ll pretty much be forced to go with a smaller host: searching for ‘ruby host’ or ‘python host’ will turn up plenty of offers, but they won’t be from anyone you’ve heard of, and they’re likely to be more expensive than you’d expect. That’s the price you pay for using the latest and greatest languages.

If you enjoyed this post, make sure you subscribe to my RSS feed!

There’s something you have to realise about the way users interact with articles. To put it simply, they don’t just want to read them: they also want to print them out, and send them on to their friends, family and colleagues. If you can make it easier for them to do this, then your site will be a hit. But how? Well, read on.

The Print and Send Links.

At either the top or the bottom of your article, you should offer clear ‘print this article’ and ’send this article to a friend’ links. It’s up to you how you present them, but a generally good place is underneath the byline and date, like this:

Article Headline
by Bob Smith
January 1, 2010
Print this article
Send this article to a friend

If that looks messy, though, try moving the links to the end of the article. You might even link to have the ‘print’ link at the top of the page and the send to a friend link at the bottom.

You should also note that there are standard ‘icons’ (small pictures) to represent printing and sending. Printing is a picture of a printer (the same one used in word processors), while sending is a picture of an envelope. Using these icons will make it much easier for people to see what the different functions of your website are. In many cases, you can even leave out the text and just have the icons, or only have the text appear when the user hovers over the icons this saves on space without sacrificing usability.

CSS for Printing.

It’s an unfortunate fact of the web that many web pages look simply terrible if you print them as they are. No-one wants ads on their print-outs, or blue-underlined links, or navigation, or many of the other elements of a web page. For your visitors who want to print, then, it’s good to be able to remove these things from your page when they press that ‘print’ button, before you tell the browser to start printing.

How can you do this easily? Well, luckily, CSS has a built-in mechanism for it. It lets you specify different styles depending on media, with the default being media:screen for printing, you can use media:print, and add or take away different parts of the style quickly and easily.

It’s not difficult to switch between the screen and print CSS stylesheets when that print button is pressed all you need to do is add a second stylesheet underneath your first one. That means that your stylesheet declaration (in your HTML head) needs to look like this:

The mystyle-print.css contains all the CSS that will be applied to the document when it prints: nothing from mystyle.css will be applied. Browsers should then apply this stylesheet automatically when your document is printed all that remains is to link to javascript:self.print() for your ‘print this page’ link.

Sending Pages.

The best way to handle the sending of pages is to provide three input boxes for the person doing the sending: one asking for their name or email address, one asking for the recipient’s email address, and an extra box for any customised message you might want to send.

All you need to do then is create an email from this information: in PHP, for example, this is as simple as using the mail() function. Include the information entered by the sender in the message’s ‘from’ field, instead of the name of your website, and keep your own words to a minimum if the sender wrote a custom message: it’s much better for a message to look like this:

Thought you might like this! http://www.example.com/article/101

than like this:

You’ve been sent an article from example.com! The sender said: “Thought you might like this!” http://www.example.com/article/101

Basically, emphasise the fact that it’s from their friend, not from your website, and you’ll get far more people clicking the link. It’s also worth including the title and even the intro, as well as just a link to the article, so the person involved is more tempted to click it after all, if their friend thought they’d be interested, they probably will be.

If you enjoyed this post, make sure you subscribe to my RSS feed!

If you have products to sell, then your number one reason for starting a website is likely to be promoting them. Have you considered, though, that you could sell your products directly, online? This is e-commerce basically like a much better version of mail order, where the descriptions can be any length and your customers can communicate with you as much as they like before they buy. To start up an e-commerce ‘web shop’, however, you need to take a look at e-commerce software.

The Free and the Expensive.

E-commerce software, more than any other kind of web software, varies massively in price. There are e-commerce solutions out there that cost thousands of dollars, but at the same time there is open source software like osCommerce that you can download for nothing. What’s the difference? In my experience, very little.

If you want to make a good profit from your website, then, you should really be looking at the free e-commerce solutions, or alternatively writing your own. It’s madness to pay thousands for e-commerce software when you can get software custom-built for your website for a few hundred or, of course, for free, if you’re a programmer yourself.

Integration and Templates.

One of the most important things about an e-commerce shop is that it shouldn’t appear separate from the rest of your website: you should make sure to keep its design consistent with your site’s overall look and feel. In most e-commerce software, the way to change the design is with templates: you should look into how difficult it will be to turn your site’s design into a template, or get a template version of it made for you. In some cases, you might even find it easier to come up with a whole system of your own instead of producing templates, if you have a lot of unique information about your products that you want customers to be able to see.

Hosted Solutions.

The idea of going to all that trouble and setting up e-commerce on their site only to make a grand total of zero sales is what puts a lot of people off. In this case, you might appreciate hosted solutions such as Yahoo Stores (smallbusiness.yahoo.com) that offer you a ready-made e-commerce store to drop your products into and link to from your website. The monthly fees and setup fees can be a little high, but it at least gives you an opportunity to dip your toe in the water without getting too burned if it all goes wrong. If you really want to try things on the cheap, take a look at eBay Stores (stores.ebay.com), which lets you list products for roughly the same price as listing them in eBay’s auctions section.

Things to Do and Avoid.

When you’re opening an e-commerce store, there are some things that you should always remember to do, and some things that you really shouldn’t do. Here’s a little advice.

Describe products well. You’re not limited by space here: put in every detail that you can think of about every product you sell. If you don’t take the time to put in all the information you can get your hands on, don’t be surprised when nothing sells.

Make searches work. Any e-commerce site needs to be easily searchable at an absolute minimum, someone should be able to type in the name of any product and have the product’s page appear. You should never, ever say ‘no results found’: display a selection of your most popular items instead, with a message saying “we couldn’t find that item… maybe you were looking for one of these?”

Sort results by most popular first (that is, best selling first). Whatever you do, don’t sort by price unless the customer asks for it: sorting by lowest price first makes your customers look at the cheapest items before the rest, while highest price first make you look like you’re trying to fleece them.

Have pictures. It’s commercial suicide not to attach a picture to every single item description, and preferably more than one. Make them small, but make sure users can click them to display a bigger version, if they want to this saves on both screen space and bandwidth.

If you enjoyed this post, make sure you subscribe to my RSS feed!