Classic Arts Review

[ubik]

Hello,

I have just in my spare time been designing a new site called "Classic Arts" the only reason I've been making it is to familiarize myself with CSS, since i am making the transformation from table design myself. Its a real simple design nothing complex. I wrote a simple javascript function for the onload, it detects screen resolution, default is 1024x768 but if it detects 800x600 it will re-direct to a specific design for 800 (if you have your browser open, then change your resolution you will have to re-start your browser for javascript to correctly detect the resolution). If you try and look at the source code you will find about 50million lines of Angelfire Banner code, lol, making a mess out of my neatly formatted markup. But its only on angelfire to post it here for review so thats only temporary. check it out and please tell me what you think. It is still very much under construction I was going to post much art, poetry and music, but the design layout would still be all the same so its fine for review how it is, I suppose. (there are no banners & no pop-ups) the link is:

http://ubik.pfwh.net

[brett7481]

I think overall you have a very good thing going on. I'm viewing it at a very high resolution, and while it doesn't take up the whole screen, it takes up enough to make me happy.

The only things I would like to see done better are the graphics on the left side. Some of them are just a bit choppy and fuzzy. It almost looks like you may have size some of them up from smaller images, but I could be wrong.

Also I would move your styling from out of the div tags and either place it in the head, or preferrably put it into a seperate CSS document. One of the big purposes of CSS is to seperate structure from presentation. If you move the CSS into a seperate document it will be easier to update, you can have 1 CSS doc for multiple pages, and it will make your code look a bit cleaner to search engines.

You're using an HTML 4.01 doctype, I think once you ditch the angelfire code you could probabky step-up to XHTML 1.0 or even 1.1.

Good job, I look forward to wathcing further developments on the site.

[brett7481]

Hey ubik, I also wanted to let you know that I blogged about your site on my site, (see my sig).

[ubik]

Hey brett, thanks for your input i appreciate you taking the time to visit the page. Yeah i had originally designed for 800x600 but after reading a lot of posts on here about people using resolutions at 1200 and higher i was like whoa, lol my cheap graphics card didnt even allow me to know that these resolutions even existed. so i tried to make a 1024 version of the page i increased the size and sharpened up the images as much as i could. My resolution only goes up to 1024 so thats the best i could do here, for now. Yeah I have an external style sheet i just used the div's inside the body for positioning individual items all using the same class already. I really dont know what xhtml is i tried to validate and modify using it but it wouldn't budge so i went with html 4.01.

[BroChris]

I like the style and the way the images blend together. Looks great.

Regarding the resolution detector. Maybe it's just me, but I don't usually have my browser maximized. My resolution is 1600x1200, but I make my browser only fill have the screen. Therefore, while your resolution detector thinks it should show me the high resolution version, I would actually be able to use your site better if given the low resolution version. I guess what I'm trying to say is it may be better to detect browser width rather than screen width. Of course, I could just be weird.

[ubik]

BroChris,
Thank you for reviewing my page. I appreciate your input. I have added a "switch to 800x600 resolution" button to the main 1024 page underneath the main left image. thanks again for taking the time.

[harbingerOTV]

I think you should lose the javascript resizing on the images personally. On my 1152 resolution they get nasty grainy. You could just as easy (if not easier) leave the left side images the 800x600 size and have the contanet expand out to fit the screen. You might have to do some manipulaing of the header image to make it work right, but that shouldn't be to hard. Then you can lose the 800x600 button all together.

aside from that maybe a little graphical notes. My personal bias so take it for what it's worth ;)


The content text needs a little space from the borders. The top looks good but the left and right siode are right upagainst it. maybe the same treatment you gave to the top would be nice. Give it a little breathing room.

The W3C buttons. I'm not a huge fan of putting them on sites but thats me. If people put them on sites, I would think they would make thier own buttons that match the site a little better. Since they are white and yellow and your site is maroon and black, maybe make your own buttons to make them appear to be part of the site a little more.

And the first-letter class. Give it a little more room as well. on the bottom you'll get different spaces from FF and IE but the right side needs a little more room. the "W" lays right on the text.

[ubik]

harbingerOTV,

Thanks for taking a look at my site. I have removed the javascript and set the site to 1024 resolution default but underneath the left image there is still a buton to view in 800x600 res. I finally got a chance to view the page in a high resolution and i see how it looked blurry and pixelated, it was because the way i designed the graphics, I have since your comment re-designed the graphics on the site hopefully they're not so blurry and grainy anymore. I didnt really wanna do the liquid design cause of the size proportion of objects, i guess its good if you have images that can be textured..

I added the paddings of the paragraphs, thanks for that note. I had a real hard time getting that first letter class looking satisfactory in both firefox and Internet Explorer but i guess it came out ok? I also added some graphical notes if thats what you meant by that? Anyway I am starting to get a little more serious about this website, perhaps i will actually finish this one and put it up for the public.

Thank you for your comments and input, I appreciate you taking the time.

[bpeh]

sup,

I think you have good color combo and fonts. rock. The only think I would like to comment is the quality of the graphics. also, taking the navigation further, when you build the subpages, will the left graphic change? If yes, will it be heavy? If no, will it be boring?

nice site.

[ubik]

bpeh,

Hey whats up. I appreciate your review, thanks for visiting my page. The custom left image for each menu object is a very good idea indeed, I think I'll take you up on that, hopefully it will be very lively. I tried to fix the quality of the images by re-designing them once again. If it still looks pixelated I'm just going to go with a whole new design but same concept. thanks again.

[Green Beast]

It's a nice looking design.

I think the nav buttons need some dressing, though.

Another suggestion would be to use a better font, try 'Trebuchet MS' especially for the type of site... you want the site to look classy. Right? Also add letter-spacing and line-height. And to step it up a notch, use typographer's quotes and such.

I am very surprised this hasn't been mentioned, but the whole JS re-sixing thing is not a good thing to do. To many flaws and unplanned variables. Why not control the width of the site with your CSS. Say, width: 98% or something. That'd we so much more flexible and not dependant on scripting, especially client-side.

Re icons: Yuk. Why don't you go find/make some nice looking icons, or simply add some text validation links. I'd make the CSS link a referrer link like the markup validation. But, that said, since the site is far from valid, comment them out until the thing passes.

You're right about all that Anglefire crap. How tacky.

I hope this helps.
Mike

[ubik]

Green Beast,

Thanks for taking a look at my site and for your comments. I have made an attempt at making some graphical buttons but still with a bit of CSS underlying it, incase NoImages is set on the user's browser. I have considered using Times, Serif, Trebuchet MS, but the problem is that between Firefox and Internet Explorer these fonts are not correctly represented equally regarding size so it throws my whole position absolute off for some certain things. I have however, taken your advice and used some line spacing and letter spacing and I must say, I like the way that looks! I do not know the ALT codes? for typographers quotes or the benefits from it as well, but ill make sure to look into it. About the JavaScript resizing.. I did take that off after the first mention of it being in the way. I have since then put a button under the left image pointing to a 1024x768 design. Also, I have moved the site to another webhost so there is no more thousand line banner code in the source anymore.. I will however leave the validation buttons out because I added 2 opacity images in the design. But overall I like your suggestions. Thanks again.

the new address is:
http://ubik.pfwh.net

[Green Beast]

Green Beast,

Thanks for taking a look at my site and for your comments. I have made an attempt at making some graphical buttons but still with a bit of CSS underlying it, incase NoImages is set on the user's browser. I have considered using Times, Serif, Trebuchet MS, but the problem is that between Firefox and Internet Explorer these fonts are not correctly represented equally regarding size so it throws my whole position absolute off for some certain things. I have however, taken your advice and used some line spacing and letter spacing and I must say, I like the way that looks! I do not know the ALT codes? for typographers quotes or the benefits from it as well, but ill make sure to look into it. About the JavaScript resizing.. I did take that off after the first mention of it being in the way. I have since then put a button under the left image pointing to a 1024x768 design. Also, I have moved the site to another webhost so there is no more thousand line banner code in the source anymore.. I will however leave the validation buttons out because I added 2 opacity images in the design. But overall I like your suggestions. Thanks again.

the new address is:
http://ubik.pfwh.net

For no images, just use alt text, one for html, one for CSS. That's the best solution in this case. <a href="http:vaildator..."><img src="icon.png" width="??" height="??" alt="Validate HTML"></a>

Regarding fonts, if you do use a serif font, use Georgia as it is a true web font (and looks and reads 1000x better than Times/Times New Roman). For consistent sizing across browers try this:

On body put font-size 100.1% (the .1 one is to correct the rounding errors that cause the differences), then on your main wrapper, set the font size to .9em. Doing so will provide better results because you are working from a baseline that you create.

For typographer's characters use these. (remove space between & and #)
& #8220; (left quote “), & #8221; (right quote ”), & #8217; (trailing apostrophe ’), & #8216; (leading apostrophe ‘), & #8212; (m-dash —), & #8230; (non-breaking elipsis …)

Mike