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.
Ideally you would create separate folders for each planned page of the site, and put the content relevant to each page in its own folder. This shared folder should only be used for the exact files that will be used at or for the site.
CONTENT
- 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 and/or image file with overall site information, any design ideas, navigation information etc. in the Dropbox folder too.
2. Videos
Videos should be in .mp4 format and uploaded to YouTube or Vimeo.
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, or https://youtu.be/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 or slideshow, make sure they are all the exact same dimensions before submitting. Also, ensure they are optimized as to physical file size, as detailed below.
Note: If you're not comfortable resizing images yourself, you can easily find a graphics person at Fiverr.com who could do it very inexpensively, and you can ignore the instructions, explanations and tools below.
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 IrfanView - https://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 - https://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 https://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.
This page has Mac alternatives for IrfanView: https://alternativeto.net/software/irfanview/?platform=mac
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 .pdf format, or .zip format for multiple files.