Desperately need help

[Cathy&Gary]

Hi there everyone, I am new to your forum, came across it while looking for a solution to fix my website. So I am not sure if Im posting this in the correct section - sorry in advance if its in the wrong part!!.

I am a newbie to building websites and I have published a site on our travels, its been up and running for about 10 months now. Its very unprofessional looking etc but Im proud of my first attempt haha and it does seem to be popular.

For for last 5 days I am having huge problems (and from the emails Im getting - so is everyone else) accessing the site. The generic replies from my web hosting company are always "Your site is working fine" I am in Australia, my web host are in USA, so maybe it is working fine for them but from the amount of emails I am receiving, everyone else is having problems.

When you go to my home page it opens fine.
Then move the cursor around on the background and I have no problems until you move it to near top of page. Some of the destination buttons the cursor can go near and operate, no problems. Some you cannot.

As its going to these strange blank pages down bottom left of screen it flashes up the following
"www.analysticcn/in cgi3?"
Then it flashes
"www.google.com.au" (and goes to a blank page)

Open the web page, and then take a big loop around with the cursor to the; site map, Bali, Singapore and home buttons and it works o/k. Put the cursor near the other buttons and it opens a blank page. If you go backwards it re opens the home page.

If you go to the Bali page, you can then go to the Thailand button and open Phuket. Go to Phuket and move the cursor over Thailand and you get the blank page. Go to the list of topics on the Phuket page, and as soon as he cursor comes close you get the blank page.

Same with some of the other buttons, some you can go near, some you cannot.

I have not published any updates over the last couple of weeks and the site was working fine on Saturday, so I feel its not anything I have done its a hosting problem. Could it be some sort of malicious act that is on the host site trying to muck up my pages?

Any help or advice would be soooo much appreciated as I am just about ready to give up as no one seems to be able to help me.
Here is the link to my website
http://www.cathyandgarystravelpages.com
Cathy

[DonaldG]

Hi Cathy & Gary
For a first website it is great. Well done. Excellent first try.

I have not looked at all the pages but it seemed to work OK. so at the moment I cannot comment on the problem you state, but would like to make a couple of constructive comments.

The colour scheme is, to my mind a wee bit 'dazzling' and changes dramatically from one section to another. I suggest muting the background so that it *is* in the background and not overpowering. Keep the same 'style' throughout the site.

Images should be reduced to the viewing size before you upload them to the server and NOT resized by the visitors browser. For example the Merlion photo in the Singapore page renders to a size of 600x457 as specified when you wrote the page. HOWEVER, the image on your server is 2564x1961. This means that the visitor has to wait for the full size image to download and then his browser has to resize the image. Not a good idea - it delays the page to an unacceptable time, especially if they are still on a slow dial-up (I know several places in the WA outback where 28K is seen as high speed - Parryville 70k west of Albany for example})

Picking a standard width for location photos is a good idea - a visitor soon gets the 'feel' of the website. What you need to do is go through *every* photo and resize them in your machine first, then & only then upload them to your server. See the difference:

Resized to 600 pixels wide = 109Kb at jpg level 8 (Photoshop CS3)


Actual size on your server at 2564 px wide = 791Kb (SEVEN times longer to download!)

As you can see, it is huge...



Naming convention for images on web pages is usually all lower case and no spaces.
IE you use: Singapore Merlion framed.jpg - it would be safer to use: singapore_merlion_framed.jpg

Personally I usually add the image size to the name such as singapore_merlion_framed-600.jpg so that if I have thumbnails, finished size and original size, I know which is which at a glance...



Text:
Centralised text is not as easily read as normal justification. Try not to centralise all texts. Headings often look nice in the centre but a load of body text centralised can be off-putting.


I hope that you do not take these comments in the wrong way - I think that your website is a cracker for the first attempt - far better than my first one.

(Side note: My wife & I were having 'blow out' meals in Singapore for S$4 each just round the corner from the Carlton Hotel! We were the only Europeans eating there...)

[Cathy&Gary]

Hi there Donald, thanks heaps for replying to my post.
I have fixed the problems we were having, there was a malicious code put into our remote web site, it was in our xarajs file. (No thanks to our host company - who were no help at all) So now everything is working as it should .

I am so glad you have made some comments on my first attempt website. It can all be very overhelming when you really have no idea what you are doing haha.

So I will definately be making some changes. I agree with the backgrounds, a lot of them are horrible, so as that is the easiest to fix I will start there first!!

Next step will be the text, I never thought about how people would view centralized text and of course you are right, normal would be easier to read.

I had no idea about the sizes of the photos, I though they were the same as I was viewing - small, I nearly died when I saw the Singapore one you posted. So I will get onto that as well. What a scary thought as I think I have a couple of thousand photos haha. So when I resize on my computer should I be naming them then the way you mentioned?

Looks like I have a lot to do!! I really appreciate your comments and have taken no offense at all to them, its great that you even looked and commented, how else would people like me learn - so a BIG THANKYOU

I'll be back!!
Cheers Cathy

[Cathy&Gary]

Hi again Donald,
I have been playing around with the Merlion photo on the Singapore page and thought I had it right and published it, but I dont think it is, can you please have a look as Im sure I am doing something wrong with the resizing.
www.cathyandgarystravelpages.com
I am using Paint shop pro 8
Cheers Cathy

[DonaldG]

Wow - I'm so glad that you managed to sort out the problem that you had...

I have just looked at the forum and see that you have added another post while I was writing the ‘book’ below!

Yes - You got it absolutely spot on. Looks great. Paintshop Pro will see you well and will do everything you will want to do.

I took the same photo when I was in Singapore a year ago - in my rendering, I have done some work to correct the leaning verticals sharpened a bit enhanced the colour saturation, cropped and then resized.

You are more than welcome to use my photo if you wish.
500 pixels wide - file name: merlion1-500w.jpg


600 pixels wide - file name: merlion1-600w.jpg


---------------------------------------

You have opened up a subject that many, many books have been written about. So, go make a coffee before reading on!

I must also add that these are my personal thoughts and view points. Others may disagree with some aspects, but you won’t go too far wrong using them as a guide until you get into web design further.

Photography - 2 quick points on resolution.
If for the Web, set at 72 or 96 dpi
If for outputting to a printer, set to 300dpi

Before I make comment on Web Imaging…
First you need to understand the vast variety of monitors and monitor resolutions that are currently in use. A few years ago, no web designer worth his salt would design a web page wider than 640 pixels wide because the majority of monitors were 640x480 - no one likes to do horizontal scrolling. Vertical scrolling is OK. Now-a-days designing to 800 px is the norm. Some designers are working to 1024px - Personally, I don’t want to upset 21% of my visitors by making them scroll horizontally (As you have to on this forum thread!)

The stats from one of my websites may give food for thought:
Screen size of visitors:
1024x768 = 43.11%
1280x1024 = 24.97%
800x600 = 21.%
Other sizes = 6.7%
As you can see, if you design to a max width of 800 px, you will please at least 93% of visitors. (Some of the 'other' will be bigger than 800 wide - mine is a 24" 1920 wide) I guess that in 2 - 3 years it will be the norm to design to 1024 px.

Browsers used:
Internet Explorer = 43.11%
Netscape = 14.87%
Other = 1.4%
(These figures will vary from site to site but will give you the flavour of what it is all about!)
Now that you can see the majority of your audience, it is up to you and your end needs as to what size you use.

A good web designer will never loose sight of one basic aim: The visitor wants to get at the page quickly, be able to navigate and find stuff quickly. It is the designer’s job to satisfy those needs. The basic trick in any website is ALWAYS, without exception, design for the visitor. I have seen so many technically brilliant sites where the designer has lost the plot. He has tried to ‘show off’ his skills, designed the site to satisfy his ego, not to satisfy the needs of the visitors (or his client).

It should also be appreciated that a web browser is an ‘Interpreter’. It interprets (converts) the code (html/java et al) into the end product you see on the screen.

You must also appreciate that not everyone is on broad band and if a page does not render within a few seconds, visitors will not wait and will move on. (And off to the competition?). I do not have figures to hand, but I guess that the vast majority will be on 56K and above.

SO, what does this all mean? Basically, be as prudent as possible with the amount stuff that you put on a single page. Lots of photograph per page = large file size of that page.

If you need to put several images/photographs per page, then keep image sizes down to a size that will still convey the content and detail intended. Alternatively, use thumbnail images that when clicked, show a larger version. It is not often appreciated that image size follows some strange mathematics, known as the inverse square law. Explanation:
If you half the physical size of an image, you quarter its file size (it renders 4 times quicker)
If you half its physical size again its file size will 16 time smaller than the original and will render 16 times quicker.

Image types:
There is a wide variety of image types available. I strongly recommend that you only use two of them.
1) .JPG for photos or graphics that have lots of colours and
2) .GIF for graphics with few colours.

You should have a reasonable image manipulation software that allows you to reduce the physical size of the image and that allows you to save the image in either jpg or gif.

I don’t know your budget. If cost is a factor, I have heard the ‘Gimp’ is a reasonable free package that can do the business, but have never used it. I suggest that ‘Adobe Photoshop Elements’ or ‘Paintshop Pro’ as the best lower cost but ‘prosumer’ options - If you have lots of loot in the bank and can justify the spend, then Adobe Photoshop CS3 is the tops, however it costs several hundreds of A$... . Whatever you decide on, you MUST have imaging software.

Jpg will give the full range of colours; ideal for photos and you should always save them with some form of compression. Jpg is a ‘lossy’ system that quality and detail is removed when you save the image. The amount of compression governs the amount of loss. In the most part you will not notice the loss if done with a little care. The only way to understand it is by experimenting with a good quality image and saving it at varying degrees of compression and seeing the degradation for yourself. On highly compressed images you will notice a breakup of edge detail. This is referred to as ‘jpg artifacts’

Some points to remember:
1) Always, without exception, work from a COPY of an image thereby preserving the original in its original state that you can go back to in the event of a disaster!
2) When working on images and you have to save them before you have finished, always save them in a ‘lossless’ format such as .psp or .tif or .psd. If you save them as .jpg each time, you will loose detail which is incremental each time. Only save the finished item as a jpg.

File naming
Let’s look at a scenario: I will use the ‘Merlion’ image as an example and look at the various names it could have:

Image direct from the camera: usually a combination of letters and figures like: img1333.jpg. This conveys nothing other than an image id. If the taken with an 8mb camera the image size will be in the order of 2544x1696 at 2Mb

Rename it to merlion.jpg. Now it has a meaning. If you have several shots of Merlion, rename them sequentially such as merlion1.jpg, merlion2.jpg etc. Do the renaming with FILE explorer. Do not open in imaging software and saving under a new name because of the losses.

Lets assume that you have made a copy of merlion.jpg into a different ‘work in progress’ (wip) directory, and you work on it several times to correct the colours, brightness, cropping and sharpening etc, AND that you save it as a .TIFF as wip.
Do not resize to the final size until last. Same with sharpening.
You should have say:
merlion1.jpg
merlion1.tiff
These will be at full size and indeed the tiff will be a huge file size (12Mb or bigger). When you have completed work on the image, resize and save to the finished product. In this scenario let’s say 500 px wide. Also add the actual size to the file name (Sometimes I add ‘h’ or ‘w’ top denote vertical or horizontal) such as:
merlion1-500.jpg or merlion1-500w.jpg with compression for good quality (Photoshop level 8)

Now you will have several names for the same image, each name will still be meaningful in six months time when you have forgotten what you did:
img1333.jpg (2Mb)
img1333copy.jpg (2Mb)
merlion1.jpg (2Mb)
merlion1.tiff (12Mb)
merlion1-500w.jpg (108Kb)
merlion1-600w.jpg (128 kb)
Note the convention of file naming for the web. It should always be in lower case and without spaces. If you need the clarity of a space in the name, then use a ‘_’ or a ‘-’ such as merlion-singapore1x350w

The same naming convention should be applied to all web files, including html etc
singapore-transit.html
siggapore-hotels.html
singapore-eats.html etc etc

Well - I have rabbited on...

Good luck with the rework.

Next task is to study tables and css

[DonaldG]

Hi Cathy, I see you are on line - I have another snippet to send you - I'll be back in 5 mins with it...

[DonaldG]

A couple of useful gagets for your work on the web:
A pixel ruler. see MioFactory freebee at:

http://www.mioplanet.com/products/pixelruler/index.htm

Colour schemer:
http://www.colorschemer.com/online.html

That will aid you no end when decidinng on complimetary colours etc

Cheers

[Cathy&Gary]

Donald, I am just starting to read the "Bible" haha.

Are you saying the new photo of the Merlion is ok (size wise that is) Its no comparision to your photo - that is fantastic. If I put your photo up it would make all mine look shocking!!

Anyway back to the bible.
Cathy

[DonaldG]

Singapore page looks a lot neater. Without the centralised text justification. Much easier to read.

The only comment is that some images have a frame border and others not. The frame, to my mind is a wee too wide and detracts from the image. I suggest a much narrower border - experiment with the border width and look at them all and see which is pleasing to your eye.

try to be as consitant as possible throughout the site...

I'm off for a coffee right now!

[DonaldG]

Originally Posted by Cathy&Gary

Are you saying the new photo of the Merlion is ok (size wise that is)
Cathy

Absolutely perfect. I ported it into Photoshop and checked the size.. The size on your server is the same as the size being rendered in the browser which is what you needed. Well done.

[Cathy&Gary]

Donald, Yay - Finally I get it right - (sad thing is I forgot how I did it haha)
Thankyou sooo much, so much information, its all a bit overwhelming at the moment, so I will read it all again in the morning (its bedtime now)

I will start from the beginning tomorrow at my index page and go on from there, so I will be annoying you heaps!!
Your a champ!!
Cathy

Hope the weather is nice for you there, was 41 degrees here today and expecting 43 tomorrow, way to hot.

[DonaldG]

You're welcome Cathy - I wish you well with your endeavours...

Temp here is a wonderful warm 6c! & damp - Wish I was back in Oz again

Lunch time now... Cheers

[Cathy&Gary]

Donald,
I discovered that Paint Shop Pro 8 has a jpeg optimizer etc, amazing what you find when you look!! so have created WIP folders for my photos as you suggested above, played around with the photo on the index page and used the optimizer to compress.

But not sure if its ok as its a bigger file size than the Merlion, please can you have a look and if its ok I will use the same setting for all the other hundreds of photos haha.

Downloaded the pixel ruler, how good is that, love it. (Our temp made it to 43 today, what a scorcher)
Have a Happy New Year
Cathy

[DonaldG]

The front page pic looks great - Looks like you got the optimiser sorted.

However before you start to zap hundreds of pics through the optimiser, you should do one or two tests/experiments with the 'optimiser'. I am running from (a poor) memory 'cos I haven’t used Paintshop Pro for some time. But if I remember correctly, when you save an unsaved jpg, or 'Save As' a saved jpg, there is a popup where you can alter the filename/filetype etc...In that popup, I seem to remember an 'Options' button if saving as a jpg.

Select that Options and you will see a quality/compression slider. Experiment with that slider with a test image (I suggest copy of the merlion because it has some nice edge detail against the sky). In a separate temporary directory, 'Save As' merlion-10.jpg, merlion-20.jpg etc with the compression increased to represent 10, 20, etc.

Once you have done that, have a close (magnified) look at the edge of the buildings against the sky, and you will see the JPG artefacts. Also note the file sizes. The clever bit is deciding on a balance of quality and file size. These days, you can err on the side of quality. In Photoshop a compression setting of '8' is a good all-round choice. If I remember correctly, in Paintshop Pro (PSP), that would correlate to a setting of '20'

Do not be perturbed that you do not get the same file size setting for images of the same physical size because one of the factors governing the file size is the content of the image... EG: a 500 x 500 px image of a street scene with buildings, cars pedestrians, hoardings etc will be a larger file size than say a 500 x 500 image of a calm sea with plain blue sky and a small sail boat on the horizon.

Now, once you have an understanding of the importance of correct optimised jpg settings, you are almost ready to get to work on re-working the hundreds of images... I say ALMOST for a reason...

Two other things before you get started:
1) As in most decent software, Jasc have included in PSP, a wonderful HELP section. I strongly recommend that you search Help for more information on jpg compression settings...
2) It is possible to AUTOMATE the rework of ALL your images using a Batch process.

With the Batch process you can tell PSP resize all images to whatever you want. You can convert all from one format to another. (Search Help for BATCH or AUTOMATE)

Caution: Because it will need a couple of attempts to get the settings right if you have never done batching before, I strongly recommend that you place a copy of all of the images to be processed in a separate directory called something like 'batch-start-images'. You should also make a directory called something like 'batch-complete-500px. During the set up section of Batching, you will be able to select the source directory and the target directory. Basically, you are telling PSP to take each image from 'Batch-start-images directory, resize to whatever (in this example 500px) and save the resizing image in the 'batch-complete-500px' directory...

Having separate directories and working from copies will preserve the originals in event of getting it wrong.

Now you can go for it!

A very happy new year to you both… Cheers.

[Cathy&Gary]

Thanks again Donald for being so patient with me.

Hey and believe it or not I already know about the batch process haha. Thats how I resized all my photos for the website (of course not realizing about compressing etc)

I have been playing around with another program as well comparing the resizing parts & compressing of PSP 8 and another one called Jpeg Sizer 6. On the Singapore page (its changed again haha) I edited the photos (crop, color etc) with PSP then used the other one to resize and compress. (Got rid of the big frames as well) Comparing the 2, the Jpeg sizer is so easy (for me) to use and I think the photos are working out ok.

Anyway I need now to get away from that page and start on the hundreds of pages that are finished and get them sorted out.

Cheers Cathy

[DonaldG]

Ok Cathy

Glad you are enjoying the learning curve - quite sharp, but in no time, you will get the hang of things.

Use the software that works for you and that you feel comfortable with. Quite honestly, I think that you have achieved quite alot in your first website. A darn site better than most 'first attempts'.

There comes a time when most website need/get a rework. Welcome to the treadmill

If you need more help or assistance, I suggest that you start an new thread, unless ofcourse, it is related to above.

Bye for now...