In this lesson we're going to look at some Good Housekeeping aspects of web design. These are issues that aren't immediately going to affect your success as an affiliate, but will help you further down the line as your site grows.
Websites have a habit of getting very large, very fast. If you've done something wrong on fifty pages, fixing it can take up a lot of your precious time, so it's important to utilize these concepts from the outset.
When you're creating files for using on the web, there are a number of conventions you should observe:
Always use lowercase
- Wrong: Photo.JPG
- Right: photo.jpg
The reason for this is that file names are very often case-sensitive on the web - in other words, photo.jpg and Photo.JPG are NOT the same file. Instead of spending hours trying to figure out why your images or files aren't displaying, it's best to just write everything in lower case from the outset and avoid this situation altogether.
Eliminate spaces between words
- Bad: background image.gif
- Good: background_image.gif
- Better: background-image.gif
- Bad: contact us.html
- Good: contact_us.html
- Better: contact-us.html
The first reason for this is that spaces are "unsafe" in web addresses. They can get lost, confused, misinterpreted, mistranslated - you name it. If you have a file or a URL with a space in it, that space will get converted to a '%20'.
The best way to write file names is with a hyphen between words. This has the added benefit that search engines see words separated by hyphens as separate words, unlike words separated by underscores which are seen as being the same word, so if you're looking for a file-naming convention that could help your SEO you want hyphens all the way!
HTML or HTM?
When you're creating HTML pages, you can use either .html or .htm - they both do the same thing. However, pie.htm and pie.html are NOT the same file, so it's a good idea to pick one of these and stick with it.
Using other people's images
If you're using images on your website (with permission, of course), make sure you save them to your computer and upload them to your own website. Don't just link to the image where it resides on someone else's site - this is called "hotlinking" and it's a bad idea for a number of reasons:
- It's bad manners - you're using someone else's bandwidth to display images on your site.
- If their website disappears or is running slowly, it's going to affect your site - the images won't appear, or it will dramatically slow down the loading of your page. You don't want to be reliant on anyone else's site like this.
- You'll frequently want the image to be a different size than the original. It's not a good idea just to resize the image in your web editor, or by changing the "height" and "width" attributes, since these don't actually affect the size of the file. Your visitor will still have to download the whole image, and if it's a very big file that you've shrunk to have small dimensions, it will become a huge waste of time and bandwidth for your poor visitors.
- Lastly, you're using an image that you don't have control over. Many sites take offense to this behavior and may alter the image to display an advertisement for their site, display something rude, or show something equally embarrassing to register their disapproval. Funny for them, but not so good for you.
The exception to this is when affiliate programs offer you snippets of code for pasting banners into your site. A lot of affiliate sites do this because it allows them to change the banners when they need to (without having to contact all affiliates to tell them their banners are out of date) and it also allows them to track the popularity of certain banners over others. In this case, it's fine to use the image without first saving it and uploading it to your own site.
When you decide what fonts you want to use for your text, have a think about whether your visitors will actually be able to see it.
Your friendly handwriting-type font that you use for your header will only display on a computer that has that same friendly handwriting-type font installed on it. For everyone else (and this will be the majority of people viewing your site) what they'll see instead is the default font. This might be something like Arial or Times New Roman - not so exciting.
Here are some system fonts that almost everyone has (if each of these look different, you have all these fonts installed!):
Arial, Arial Black, Courier New, Comic Sans, Impact, Georgia, Verdana, Times New Roman, Trebuchet MS
There are other fonts that are very common that you can also try. One good thing you can do is choose a group of fonts and list them in order of preference. If your visitor has the first font in the list installed on his/her computer, the browser will display that font, otherwise, it will move on to the next font in the list until it encounters one that it actually has.
For instance: Futura, Arial, Helvetica, Verdana, Sans-serif
In this example, Futura is reasonably common but, just in case your visitor doesn't have it, the browser's next choice is Arial, followed by Helvetica, followed by Verdana; finally, in the worst case scenario, any old sans-serif font will do.
If you want something a little more special for a header, you'll typically have to turn it into an image and then insert that image into your page where the heading would be. (For instance, the Affilorama logo at the top of this page is an image. The normal headings are a mixture of Georgia and Arial.)
Structuring your site
When you first start creating websites, if you're anything like hundreds of other affiliates we've seen, you start out by uploading all your files into the one place. All your images, all your HTML pages and all your CSS files will all end up in the same directory on your web server. Here's what it looks like:
This is great for one reason and one reason only - it makes referencing images and things in your HTML really easy, and when you're just starting out as an affiliate, easy is something you're usually pretty keen on!
What you should really be doing, however, is keeping things nicely organized. Keep your images in an images directory, your CSS in a CSS directory, your articles in an appropriately named directory, and so on. Your web server should look more like this:
Keeping things in directories serves a couple of purposes:
- It keeps things organized.
- It makes your URLs (web addresses) simpler. It's much easier to remember (and write) www.yoursite.com/blog/ than it is to write (and remember) www.yoursite.com/blogindex.html.
Take a look at this bunch of files in our example pie recipe site - the has one page in the 'root' directory (the one you reach by typing 'www.example.com'). Also in the root directory are our "images" and "css" folders, containing our images and css. All the rest of our files are neatly tucked away into folders.
The other beautiful thing about using folders is that you can insert your keywords into your folder names, which makes them part of your URL. Having your keywords in your URL seems to make your page appear more relevant to the search engines, e.g. http://www.example.com/recipes/pie/apple/best-apple-pie-recipe.html
In this lesson we took a look at some of the things you can do to keep your website functioning properly including:
- Naming files in lowercase, without spaces
- Storing all images on your own server
- Using appropriate common fonts
- Structuring files into different locations