How To Provide Content For Your Website

This page covers the formatting needed for providing content to be used at your website. Content covers such things as text, images, videos, audio, downloadable files etc.

FIRST STEPS

I will create a shared Dropbox folder for your content and will invite you to join it. Once you do so, the shared folder will appear on your PC and you can either save your content to it, or drag it onto the folder. It will then arrive at my PC.

You should create separate folders for each planned page of the site, and put the content relevant to each page in its own folder.

CONTENT

  1. Text

The text for any page should be written in a Word document and laid out as you would like it to look - i.e. text that needs to be bold should be bold in the document, and paragraphs should be separated as you would want them. Text should be checked for spelling mistakes, typos etc.

You can also put a text or image file with overall site information, any design ideas, navigation information etc. in the Dropbox folder too.

2. Videos

Videos should be uploaded to YouTube. They could alternatively be uploaded to Vimeo, but YouTube is less prone to problems.

Once a video is uploaded to YouTube, you should copy its address, which will look something like this:  https://www.youtube.com/watch?v=BxuY9FET9Y4, into a text document, and also click on Share below the video at YouTube, and then click on Embed and copy and paste the code that it gives you.

3. Images

You should provide only the actual images that you want to use at the site, and put them into the folders for their pages, i.e. home page images go into the Home Page folder.

Provide them in as close to the dimensions that you want to see them on your page. If there are going to be a series of images in a section, make sure they are all the exact same dimensions before submitting. 

Images are the most important to prepare properly because a typical photo from a camera is so big that just one of them can cause a site to take 15 seconds to load, instead of the more acceptable 1-2 seconds. There are two factors involved in an image's size: 1) its dimensions measured in pixels and 2) the size of the file in kilobytes or megabytes (1,000 kilobytes).

 

An image on a website is typically  around 500 x 400 pixels or less (or it could be square), and a typical header image on a website might be around 1400 x 300 pixels, whereas a photo from a camera can be closer to 5300 x 3000 pixels.

Image file sizes for the web are typically between 20 and 200 kilobytes whereas photos from cameras can be between 2 and 6 megabytes. So images need to be hugely reduced both in dimensions and in file size before being uploaded to the website.

If the original images are very large (such as those created by cameras), those images should be re-sized to be close to the final dimensions that you want them to be on the web page. They should be cropped as you want them to look, and if they need to be a specific orientation - e.g. landscape for a slider, for example, they need to be provided in that orientation, and at as close to the correct dimensions as you can. There is a great free tool below that enables you to do all this easily.

Images that are photographs should be in .jpg format, images that are more like clip art should be in .gif format, and images that need a transparent background, such as logos, should be in transparent .png format.

A very good free software for cropping, re-sizing dimensions and converting to other formats is IrfanViewhttp://www.irfanview.com/ - if when installing it asks you if you want to install anything else, say no. But do download and install the plugins for it from the same site.

This image shows the recommended settings for resizing image dimensions (your new size percentage will vary and may be as little as 10-25% for a camera photo), and the "Apply sharpen after Resample" is very important to prevent the image blurring.

IrfanView also has a batch mode that allows you to resize and sharpen all the files in a folder in one go.

And for re-sizing image file sizes, this is a great free tool that you can download - http://luci.criosweb.ro/riot/

And you can also use RIOT as an IrfanView plug-in, which enables you to access RIOT from within IrfanView by selecting File->Save for web. So you have total image control all within the one program.

Here is a video that shows how to crop, re-size and enhance images in IrfanView:
https://www.youtube.com/watch?v=Uh4DJOE7Oo0

There's also a free online service where you can drop up to 20 files and they will reduce the size of the image file - it's at http://optimizilla.com/ - ignore the big green Download buttons, and just drop or upload your files below them. It's good but not as effective as RIOT.

If you're not comfortable resizing images yourself, you could probably find an overseas graphics person at Fiverr.com who could do it inexpensively.

4. Audio

Audio should be in mp3 format at 320 kbps (kilobytes per second) for music and 192 kbps for speech. If your files are already in mp3 format but at a lower kbps, don't try to change them to a higher kbps mp3 format.

Just put them in the Dropbox folder as they are. The reason is that if you have a music file at 128 kbps and you try to change it to 320 kbps, it won't increase the quality, because the quality wasn't there to begin with. There are many free audio conversion services online in case your audio is in a different format.

5. Files for download

Files that you want your users to download should be in .zip format.