|
|||
|
|
|
|
|
|
|
|
This page has been kept seperate to decrease overall site loading times.
About the Design
For furthur information, and excellent tutorials relating to any of the processes discussed herein consult [About.com's] HTML help section.
Some information for those of you who are interested about how this site is put together. I really wanted everything on one page for this site, but given that this document was always going to be rather long it was important to cut loading times where possible (resulting in the somewhat minimalist look) :-).
The first stage was to slice the image at the top of the page. Slicing an image into several smaller components is generally reckoned to make a page seem to be loading faster, as the diferent sections are revealed progressively (with a short wait between each one) rather than as a whole with one big wait. It should however be noted that whilst slicing an image may have this effect, it may also increase actual loading times. Slicing an image also allows different areas of the image to be optimized individually for maximum effeciency. For example, in the image above the areas contianing the photo of Kryten were saved as JPEG files with a compression factor of 15. They can be seen bellow:
This gave the high colour depth required for the photo, and good file compresseion in return for a slight loss of definition. The grey text and lines across the bottom of the image were saved as Compuserve GIF files.
Unlike JPEG files, a GIF file does not have quality loss due to compression; this is important to maintain readability when dealing with text. A GIF file's main drawback is that it can only contain 256 colours, but the ability to work with colour palettes can in cases like this prove to be of benefit. In this exaple noly a few shades of grey were required. I therefore reduced the nuber of colours saved in the file to 15, making the file much smaller than if a palette of 256 colours had been saved, but also maintaining overall quality. As a general rule of thumb try, where possible to reduce image file size to 12kb or below. The entire top right portion of the title image is blank, which brings me to the third benefit of image slicing. If the image had been included as a single file, almost one third of the image (and hence 1/3 of the loading time) would be taken up by loading the blank white pixels in the top right corner. By slicing this image, I was able to leave the top right corner out all together, drastically reducing loading times.
This site also reduces loading times by using cascading style sheets (CSS). CSS define all of the page formatting before a document is loaded, rather than at the beggining of each HTML tag. On a long page such as this, that can make the difference between reading hundreds of formatting parameters and just a handfull. Bellow is the stylesheet information for this page.
<style>
<!--
H1 { font-family: Verdana, Arial; font-size: 12; color: rgb(256,0,0); font-weight: bold; font-style: normal; font-variant: normal; text-transform: none; text-decoration: none; padding-left: 10 }
H2 { font-family: Verdana, Arial; font-size: 12; color: rgb(128,128,128); font-weight: bold; font-style: italic; padding-left: 13 }
H3{ font-family: Verdana, Arial; font-size: 12; color: rgb(255,0,0); font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; text-decoration: none; padding-left: 15 }
P { font-family: Verdana, Arial; font-size: 12; color: rgb(128,128,128); padding-left: 15 }
a:hover{color:#ff0000;}
body {
scrollbar-base-color: #999999; }
-->
</style>This for example defines that each time heading number 2 (H2) is used, the browser should use the Verdana font, with a size of 12, a colour of 128,128,128, etc. This stylesheet also defines the colour of a link whn the cursor is pointed at it, and the colour of the scrollbar:
a:hover{color:#ff0000;} body { scrollbar-base-color: #999999; }
On long pages such as the quotes page, which has repeated changes of text format, using CSS can drastically decrease loading times. CSS also has three other benefits. Firstly it can help to maintain design consistency across a site by ensuring that text formatting obays the same rules throughout. It can also save a lot of time. Rather than formatting each paragraph individually you can define the style in a style-sheet and then simply specify whether each paragraph should be Header 1 (H1), Header 2 (H2), Body Text (P) etc. Time saving can apply across several pages too. Simply build all of the CSS information into a seperate standalone file and have each page referecne the data from that single document, this way you will only need to define formatting data once for your whole site! Finally it can give you more control over how your visitors view your page. One example of this is by defining a secondary font, should the reader not have the preffered typeface:
font-family: Verdana, Arial;
Remeber that a good way of reducing loading times is through the effective use of HTML components. Many sites have monstrous loading times because they use images where not really neccessay. The first component of a web designers repetoir is, of course, text which can be used to enliven a site by varying style and colour. Tables can also be used to create interesting layouts, and blocks of colour. The bog standard Horizontal line can also come in useful for breaking up page content into more manageable sections. All of these components load much faster than big images.
Meta tags are an extremely important part of marketing a modern website, but sadly many ameteur web site designers like myself overlook their benefits, or simply don't know they exist. Meta tags contain information about your site which is not displayed, and their most important function is to get your site as near to the top of a search engine's list as possible. Bellow are the important meta tags from this site:
<meta name="description"content="A load of smegging Red Dwarf quotes from each episode of the seminal BBC television show."
><meta name="keywords" content="red dwarf quotes kryten lister rimmer cast kochanski holly comedy sci-fi bbc british english">
The first is the description meta tag, which provides a short description of your site. As well as helping a search enging rank your site, this also provides a good description to the reader of the Search engine results page, rather than just displaying the first few lines of text. Thats the differecne between the search engine showing:[ADD THIS SITE TO 'MY FAVORITES'] Select an Episode: Series 1 [The End] [Future Echoes] [Balance of Power] [Waiting For God] [Confidence and paranoia] [Me2]
and
A load of smegging Red Dwarf quotes from each episode of the seminal BBC television show.
It can also, of course, be the difference between a reader visiting your site, and that same reader passing it by. The other tag is the keywords meta tag. This single line of code can have an imeasurable effect on your pages ranking. Normally a search for 'Red Dwarf' would have the search engine read the content of your page for any mention of Red and Dwarf, and the more these terms are used, the higher the page's ranking. However, if a page has a keywords meta tag the system is changed somewhat. Special priority is assigned to words contained within the meta tag. If, then, your page has the terms 'Red' and 'Dwarf' in the meta keywords tag it will instantly be propelled up in the ranking above most of those sites without meta tags. This can have a dramatic impact on hits recieved; just think about it, how often do you visit the first couple of results in a search engin's results list, and how many times do you visit the results on page 13?
A couple of notes about meta tags:
'If I have a meta keyowrd tag it helps my search engine ranking, so can't I put every word in the English dictionary into my keywords tag to get to the top of every search?' - Search engines have allowed for this, and if your keywords list is too long it will be considered to be spamming and ignored all together, so try not be too generous with the keywords. Also note that whlst eta keywords are very important, the most important keywords are those in your page's title. A search engine classes every word in your title as an importan Keyword, so try to keep your title on topic. And Finally, be patient; search engines are under a massive strain of demand to list sites, and must give priority to paying businesses. As such it may be several weeks before yur site is even listed in a search engine.
