How to prepare content for a website | Problems with Solutions

We now have clarity and vision. Our mind-map is the blueprint to our website – there isn’t any design yet, that will come later. We are going to concentrate on the body of the website - the content. Essentially we `separate’ the content from the design which makes sense when you think about it. You wouldn’t choose a graphic designer to write your articles any more than you’d choose a writer to produce your design. So, we first gather all the information, sort it – then, we make it look pretty.

Each heading listed in the mind-map is going to form a page, a section or a product on our website. So let’s look at the first item we have, `news’.

News has three articles within it, `M-Wallet in the press’, `Latest Releases’ and `Special Offers’. JP is lucky in this case, as these are news articles they have already been written for him. He doesn’t however have them in electronic form so they are going to need to be re-typed. It’s time to pull out the trusty word processor.

Give me a few days and I’ll have the files you need for this tutorial in a handy zip!

How the page should look for the news releases

This is how the following document should look

Click here to View

These are the steps needed to prepare a document with content needed for the website, as shown in the document above.

Create a folder to keep all your files in – this one is called MWallet
Create a new document in your word processor and save it as mwalletContent
Type the heading News. Next, create a sub heading `M-Wallet in the press – Times Newspaper 6thFeb08’ and below that type the article. We do this for all three articles. See a pattern forming? We are going to end up with 1 big document with all the pages nicely laid out 1 after the other
A very quick and easy way to show where images should appear in the document is to include the name of the image in the text like this [mwallet-mini.jpg]. Then make sure that the picture `mwallet-mini.jpg’ is saved in the `MWallet’ folder
Follow the same process for rest of the articles

Next we need to enter the information that will form the basis of our shop.

OK, carrying directly on from where we left of we will create a new heading called SHOP.

Below this we will input each product as a series headings as listed above. We will also include a page divide between each product type’ to make it easier to navigate the document.

This is how the following document should look

Click here to View

These are the steps needed to prepare a document with content needed for the shop, as depicted in the article above

Create the following titles for each product
- Product name – Simple one this – the name of your product
- Product Price – Again, no prizes for guessing what this is either
- Product Image – We don’t have to have an image, but it does help to sell!
- Short description – Rather than get bogged down in detail, it’s good to provide a short description of the product with an option for the punters to read more, should they be interested
- Long description – This is the full description of the product and can include any amount of detail that you like.
Fill the relevant information in next to each title (use the image name next to `Product Image’ then make sure the image is saved in the same folder as this document)
When we get to the items labelled `Wallet Types’ in the mind-map we fill in the titles as normal but put a + £ in the `Product Price’ line because depending on the material people pick we will add this difference onto the price.

These are really the most basic parameters necessary for a shop, we could of course go into far greater detail with things such as dimensions, weight, material and so on but for this tutorial we are keeping it simple.

Pat yourself on the back, we are almost there! We have just the contact page to put together and the forum. The contact page will contain the basic details of how to contact you. For this exercise we are going to keep things to the absolute basics, so we shall only include some text, an address and contact numbers. The forum is basically like a giant message board, you can post a message on the board for everyone to read and people can also post replies to the message. It’s a great way of building a community around your product and of keeping people coming back to your site. A web forum actually has hundreds of great benefits it can bring your website, so on that note lets take a bit more of a peek at this mysterious beast.

Web Forum

Don’t worry about how this will all technically work, we’ll get to that later. For now we will just concentrate on the concept, what we want to achieve and how to do it.

One of the great benefits a forum can provide is that it’s users can provide a great level of support to each-other. Chances are if one person is experiencing a problem with something then someone else is too. There is also then a very high chance that someone within that forum will probably have already solved that problem, thereby saving you a support call – fantastic! Another benefit a forum provides is as a marketing tool. People love to chat and discuss things while technical people love to tweak and customise things. Give people the tools and the environment in which to do this and the chance for your website and products to flourish is greatly increased. So, lets take a look at the needs and wants of our users and how we can satisfy them.

The first thing we need to do is create a room for general chit-chat. Here people can talk freely without being confined by a set subject. We’ll call this section or `room’, `General Discussion’. OK, no rocket science so far. Next we will create a room called `Help and Support’, hopefully over time any problems our customers may have will have been answered in this area. Next we’ll build a room to cater for our technical lot. Like it or not, if your product is computerised and if it is good, it will probably get hacked and modded by the geeks. As this is an inevitability, and as these are the people who are generally breathing fresh life into our hardware, we may as well support them. We will create a room for this purpose called `M-Wallet Hacks’. Lastly, we will create a room called `M-Wallet Customisation’, this room will be for people that want to chat about personalising there M-Wallet. Personalisation will build a very strong bond between the person and our product/brand, so we want to encourage this. There are many other rooms we could create and this should hopefully get you thinking, but for the sake of this demo we’ll leave it at 4 rooms.

So we are going to have 4 areas or `rooms’ for people to post messages in labelled;

General Discussion
Help and Support
M-Wallet Hacks
M-Wallet Customisation

We need a small bit of text to introduce people to each area and to specify the `rules of talk’ within that area.

This is how the following page for the forum should be laid out

Click here to View

OK, back to our growing document. We need a new heading called `Forum’. Under that heading type ` General Discussion’, and under that type the intro text. Do the same for all the other three headings. Great, that’s the forum taken care of!

Finally we need the content for the contact page. As this is going to be the most basic of contact pages I shan’t bother with any drawn out explanations. All we need is an address, telephone, fax and email. Like before, create a heading `Contact’ and jot these down below it.

And that’s it – ALL DONE!

You now have a working document with all your information easily accessible and in one place. Not only that you could confidently hand it to any web designer and be assured of a thousand thanks. The unstructured bit’s and pieces that are usually offloaded upon designers are sometimes enough to make them wish they’d refused the project in the first place - really! But that’s not what we are setting out to achieve. No, we are going to turn you into a self fulfilling prophecy, and by the end of this you will have the skills and the knowledge to manage your own e-commerce website!