Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Site critique

Started by lil_cat_luver , Oct 30 2005 08:29 PM

Please log in to reply

#1
lil_cat_luver

Posted 30 October 2005 - 08:29 PM

Member

Member
296 posts

Hi everyone, here's a graphics site I started: http://etcetera-grap...com/index.shtml

Please tell me your honest opinions on these things

1. Loading time
2. Coding
3. Usability
4. How it looks in different screen resolutions? I know the background is acting strange in 800x600, that probably has something to do with my CSS?
5. General design and content

To save you some time, here are the pages that work
1. index
2. graphics - div layers
3. tutorials - first 5 pages

Thanks in advance :tazz:

#2
The Infinite

Posted 31 October 2005 - 02:36 AM

Member

Member
51 posts

Well personally, the loading time is a bit too much (for me)... It looks like you changed the cursor to become a cross-thingy when it moves over a link...cool :tazz:

Is that CSS? I liked the layout, it was nice...
I didn't really like the part where I had to scroll to the right---? Maybe you could center everything or make it left-aligned? And the bar on the left (the green one) that moves with you as you scroll? It's a bit distracting...
I hope this is all positive criticism lol
But it's just my opinion. Hope everything's cool.

Oh, and I didn't like the pop-ups... They had some weird thingy whatever.

Edited by The Infinite, 31 October 2005 - 02:37 AM.

#3
Tyger

Posted 31 October 2005 - 09:05 AM

Member 2k

Member
2,896 posts

Well, I'm on 800x600 now, so I can see there is a problem. I took a quick look at the source but don't know what to say there. I agree that moving things to the left would be better. The main graphic loaded very quickly, so I don't know why the rest of the Index took so long to fill out. Maybe the page isn't fully specified in the code.

#4
Allsortgroup

Posted 31 October 2005 - 03:11 PM

I SPAMMED Too Much!

Banned
905 posts

When i go on it, it loaded for about a minute and then said, page cannot be displayed?

#5
lil_cat_luver

Posted 31 October 2005 - 06:09 PM

Member

Topic Starter
Member
296 posts

WOW, the server picked a really great time to be down

And I'm sorry about the popups, but this is the only free host I could find that had reasonable amounts of disk space and bandwidth, and supports SSI and PHP.

The scrolling background probably has something to do with this bit:
background-image: url(images/graphics_bg.jpg);
background-attachment: fixed;
But I'm not sure what to change it to...

For moving things to the left, I don't really understand that :tazz:

the top graphic is aligned at 0,0 it can't be moved any more left than it already is.

The main graphic loaded very quickly, so I don't know why the rest of the Index took so long to fill out

Here's the actual code for the index page, I really can't find any reason why the page loaded slower than the image. It could be the javascript that my host adds onto the pages...anyways, maybe you could find something

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Etcetera Graphics</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Etcetera Graphics has tons of free premade layouts, wallpapers, tutorials, and more" />
<meta name="keywords" content="etcetera, etcetera.pixelfx.org, free, layouts, wallpapers, photoshop tutorials, PS tutorials, html tutorials" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<!--#include file="header.shtml" -->

<h1 align="right">Welcome</h1>
<p align="justify">Welcome to Etcetera Graphics. Here, you'll find lots of layouts, wallpapers, and tutorials among others. The only thing I ask is that you read and follow the <a href="rules.shtml">rules</a>. Please use the text above to navigate, and enjoy your stay.
</p>

<h1 align="right">Updates</h1>
<h2 align="right">Sunday, Oct. 30, 2005</h2>
<p align="justify">
Filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text filler text
</p>
<!--#include file="footer.shtml" -->

Thanks for all the help everyone

#6
Tyger

Posted 31 October 2005 - 08:32 PM

Member 2k

Member
2,896 posts

When I'm talking about moving stuff to the left, I mean the text, having it on the right means you have to scroll to see it if you're on 800x600, and when you scroll things get out of alignment. One thing that is interesting is that you have a .css file but a lot of things are specified on the page itself.

#7
lil_cat_luver

Posted 31 October 2005 - 09:09 PM

Member

Topic Starter
Member
296 posts

Yes, I know the layout doesn't fit in 800x600, I have tested it myself and found it doesn't fit

but I think it would at least work if that weird background problem was solved. I'm also working on having two sizes of the same layout (one fitting 800x600 one fitting larger screen resolutions) through PHP skinning, but that's quite time consuming and hard to understand for a PHP newbie like me, so in other words, I haven't got to it yet :tazz:

Oh, I see what you mean by moving it left. Most of the text is not aligned to the right (only the headings). The main text are justified, so that's pretty much just aligning to the left, except neater

IMO that is.

As for the CSS, how I can reduce the amount of "specified things" on the page?

#8
Allsortgroup

Posted 01 November 2005 - 02:03 PM

I SPAMMED Too Much!

Banned
905 posts

Ohh! Ive just managed to get on your site! Preatty good!

Did you make the graphic at the top?

And what software did you use?

#9
Neil Jones

Posted 01 November 2005 - 06:27 PM

Member 5k

Member
8,476 posts

Instead of typing "filler text", you should really simulate real text.

Do this by using Lorem Ipsum. http://www.lipsum.com/ - a good explantion on that page why you shoudl use it. It's basically dummy text to simulate "the real web world" if you like.

Anyway, site wise:

1) Please don't change the mouse cursor on hovering over a link to something non-standard, it really confuses some people who think their browser is broke.

2) This site looks lop-sided in higher resolutions. I suggest you centre it in the browser window.

3) Why is there a stray green column down the right hand side in higher resolutions?

#10
lil_cat_luver

Posted 01 November 2005 - 10:49 PM

Member

Topic Starter
Member
296 posts

Allsortshop,

The original photo is from Stock Exchange link here: http://sxc.hu/browse...=view&id=135333. It was done with photoshop 7

Neil,

Thanks for your sugestion of Lorem Ipsum, I've seen those somewhere before, but never knew why they were used, and now I do.

The mouse cursor change is considered pretty standard in the personal graphic sites sort of community, but I think I'll follow your advice, it makes sense :tazz:

The green column is actually the background repeating, since it's only about 1020px in width, I'll fix that asap.

#11
Tyger

Posted 05 November 2005 - 05:25 PM

Member 2k

Member
2,896 posts

I've thought about your problem, I'm more awake than when I first saw it, 5:00 AM isn't a good time for me, anyway I think it is a problem of specification. Everything needs to be specified in the same units, since the page size is specified in pixels, everything else should be too. No percentages at all. Also for your border bakground you can use a single pixel .gif, or better yet .png and specify the size that it is stretched to, to make all the borders. That will improve the speed of loading. Specifying everything you can on the page will speed it up too, the page can fill out in form much more quickly since the client and server don't have to calculate where things have to be.

#12
lil_cat_luver

Posted 06 November 2005 - 07:34 PM

Member

Topic Starter
Member
296 posts

Everything needs to be specified in the same units, since the page size is specified in pixels, everything else should be too. No percentages at all.

I don't recall seeing this rule...but anyways, I'm not using any percentage units on the page.

I'm not using a single pixel background, but it's something close...probably around 5px, so I don't think that's affecting the loading problem. The only reason I can think of is the problems with the server a few days ago, because I just cleared my cookies and internet files, went to the page and it loaded pretty quickly, probably around 3 seconds.

Specifying everything you can on the page will speed it up too, the page can fill out in form much more quickly since the client and server don't have to calculate where things have to be.

Could you specify what you mean by specifying everything? Is it the positioning of the text? Their positions are defined in header.shtml

Thanks for all the input so far

#13
Major Payne

Posted 11 November 2005 - 07:39 PM

Retired Staff

Retired Staff
5,307 posts

WOW. Been a long time since I've seen a site pass 100% on CSS and XTHML validation checks. The other four validation checks only brought up some minor corrections that could be made if you wanted to comply totally with that type.

The speed check results if your interested :

Analysis and Recommendations

* TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.
* TOTAL_OBJECTS - Warning! The total number of objects on this page is 14 - consider reducing this to a more reasonable number. Combine, refine, and optimize your external objects. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
* TOTAL_IMAGES - Warning! The total number of images on this page is 11 , consider reducing this to a more reasonable number. Combine, refine, and optimize your graphics. Replace graphic rollovers with CSS rollovers to speed display and minimize HTTP requests.
* TOTAL_CSS - Congratulations, the total number of external CSS files on this page is 1 . Because external CSS files must be in the HEAD of your HTML document, they must load first before any BODY content displays. Although they are cached, CSS files slow down the initial display of your page.
* TOTAL_SIZE - Caution. The total size of this page is 69404 bytes, which will load in over 8 seconds on a 56Kbps modem - or 14.03 seconds. Consider reducing total page size to less than 30K to achieve sub eight second response times on 56K connections. Be sure to provide feedback for pages over 30K by layering your design to display useful content within the first two seconds. Consider optimizing your site with Speed Up Your Site or contacting us about our optimization services.
* TOTAL_SCRIPT - Congratulations, the total number of external script files on this page is 1 . External scripts are less reliably cached than CSS files so consider combining scripts into one, or even embedding them into high-traffic pages.
* HTML_SIZE - Congratulations, the total size of this HTML file is 4082 bytes, which less than 20K. Assuming that you specify the HEIGHT and WIDTH of your images, this size allows your page to display content in well under 8 seconds, the average time users are willing to wait for a page to display without feedback.
* IMAGES_SIZE - Warning! The total size of your images is 62765 bytes, which is over 30K. Consider optimizing your images for size, combining them, and replacing graphic rollovers with CSS.
* SCRIPT_SIZE - Congratulations, the total size of all your external scripts is 1315 bytes, which is less than 4080 bytes. This will fit into three higher-speed TCP-IP packets.
* CSS_SIZE - Congratulations, the total size of your external CSS is 1242 bytes, which is less than 4080 bytes. This will fit into three higher-speed TCP-IP packets.
* MULTIM_SIZE - Congratulations, the total size of all your external multimedia files is 0 bytes, which is less than 4K.

Not bad. Well done and in XHTML at that.

Ron

#14
Allsortgroup

Posted 12 November 2005 - 02:47 AM

I SPAMMED Too Much!

Banned
905 posts

Preatty good!

You have added loads more things to it since i last looked!

:tazz:

#15
lil_cat_luver

Posted 12 November 2005 - 03:56 PM

Member

Topic Starter
Member
296 posts

I can't really do anything about the image size, I don't want to lose the image quality, so I guess I'll just leave it at that.

* TOTAL_HTML - Congratulations, the total number of HTML files on this page (including the main HTML file) is 1 which most browsers can multithread. Minimizing HTTP requests is key for web site optimization.

I really have no idea what that meant :tazz:

Allsortshop, I actually haven't added anything...to my knowledge