website critique

tim_m

tim_m

i'm so nice
Joined
Feb 10, 2003
Messages
5,539
i'm getting really close to finishing up the basic design of the new website for the math/cs department of my college. i'm really happy with it but just wanted any thoughts/opinions/suggestions. i'm proud to say that the layout is completely tableless, that was quite the effort but i can be very proud of that. i'm using the smarty template engine for php. i'm also serving a table based layout for older browsers, via server side browser detection, of course it sucks big time compared to the css version, but it's a small notch above no layout whatsoever. in the latest IE and mozilla, it looks just about the same to me.

btw, in the courses section, it's supposed to make links to the requesite courses but that doesn't work because we need to upgrade to the newer version of php

original: http://mathcs.muhlenberg.edu/

new: http://mathcs.muhlenberg.edu/~tmullin/mathcs/

thanks
-tim
 
A major improvement over the old one. I really like it. Very professional and modern looking; good colors, nice choice of sans-serif text (sans is so good), and a very good layout and use of CSS and such.

Great work.
 
I don't think I need to mention the obvious fact that it's light-years ahead of the old layout... bleh, I guess I just did :( . But anyway, I'm a big fan of simplicity. It does its job, and looks good. Good job.

Only thing I see that might need a change is the logo at the top which is a bit too artifacty.
 
Anarchonixx said:
I don't think I need to mention the obvious fact that it's light-years ahead of the old layout... bleh, I guess I just did :( . But anyway, I'm a big fan of simplicity. It does its job, and looks good. Good job.

Only thing I see that might need a change is the logo at the top which is a bit too artifacty.
Click to expand...
wow, so many replies in about 5 minutes (more like 10 but whatever)...

i can't do too much about the logo unfortunately, at least not quickly or easily (i mean i could email and talk to the webmaster for a source image but that's a lot of work :p). my college has a page of suggested logos/headers to use at the top of department pages and the images are not of terribly great quality. i borrowed from a couple of the suggested headers. one of the originals had that striped background on the right and told you to make a transparant gif with whatever text you wanted. that was an absolute no no for me since images are not supposed to be used for text without a very good reason.

thanks for the support!
 
It is a very nice looking site, the layout is excellent. A few things that I would recommend/consider tweaking in your presentation:

  • line kerning - the spacing between lines is a bit wide for my taste, my eyes tend to focus on the overabundanced of whtie space rather than the content inside the paragraphs
  • font size - consider lowering this a touch, more of a personal preference I suppose
  • menu popup duration - the menu stays up for a touch too long after the mouse has left the area (onMouseOut or whatnot)
  • edit page generation timer - while its neat, and useful for development work.. please don't bog the foot of the screen by telling me how long it took to generate the page! I don't think anyone besides for devs are much interested in this number.

Best of luck! Looks like a nice cozy Math/CS department you have there. Only one course in networks, makes my heart cry.
 
From a designer's pdint of view, its not very graphically appealing, but that may be a good thing. (aka a little too simple for my tastes)

From a programmer's point of view, I agree with pointdexterish that the menu stays up too long and the font size is a little bit big.

Overall, it's pretty good, but I prefer if you had a graphical menu rather than just text.. Definately an improvement over the old one. Congrats :).
 
though i haven't uploaded the changes to the server, i did these locally

reduced the line spacing from 150% to 130%. that was kind of a carry over from a newsletter layout i designed. i wanted the text to be easy to read since there was a lot of it.

i havn't really played with font sizes too much. i browse the web with 'ignore css font sizes' so i want it to look good when i view it. i do look at it every now and then with css font sizes enabled for reference.

for the menu, i was just using the default. i changed it so that it waits 100ms before showing after you mouseover an item and it closes 250ms after you mouseout. the default is 250/1000.

yeah, the generation time and validator links are just for development (you'll also notice there is no hit counter ;)). there's a lot of overhead with the smarty templates, it compiles them each time. that will change when it's live. hopefully i'll be able to figure out smarty's caching too. i tried it but it made the gen time longer.

as far as graphics, i havn't tried using graphics to make it look more interesting yet. the most important thing first is to get a general design going which i think i now have. it should be relatively to add some graphical highlights with css eventually though. i'd appreciate any links with good examples of unobtrusive graphics that just make it look a little better
 
i've crapped out things that looked better than the first one ;)

2nd one is a nice change. much more organized. gj
 
big improvement dont see how anyone can complain
 
Yea, once you ditch the dev footer stuff it will be sweet. One other suggestion would be to have a rollover of some sort over the items in the pop-out menu. Be it a simple text color change or whatever.
 
deuce868 said:
Yea, once you ditch the dev footer stuff it will be sweet. One other suggestion would be to have a rollover of some sort over the items in the pop-out menu. Be it a simple text color change or whatever.
Click to expand...
actually, the links in the pop out menus have the normal links style which are actually #0000cc and hover to #0000ee which is perhaps a little too subtle for the menu, in the rest of the page i think it's ok.
 
deuce868 said:
Yea, once you ditch the dev footer stuff it will be sweet. One other suggestion would be to have a rollover of some sort over the items in the pop-out menu. Be it a simple text color change or whatever.
Click to expand...

That would be my last bit of advice for the time being - match the red mouseover menu background on the submenus. I would keep the standard blue underlined links for the bottom of the page as you have it now.
 
tim said:
actually, the links in the pop out menus have the normal links style which are actually #0000cc and hover to #0000ee which is perhaps a little too subtle for the menu, in the rest of the page i think it's ok.
Click to expand...
yea, I so see it now...very very subtle. :)
 
well i've made some changes and uploaded them. it's amazing what a simple gradiant can do. i also added drop shadows to most of the pictures via http://www.alistapart.com/articles/cssdropshadows

there's just 2 itty bitty things. in IE6, there's a gap to the left of the M image at the top of the page that shows the striped background through it, and naturally there isn't in mozilla. is there anything i can do about that? (noted in cyan in the following picture)

and to the left of the menu there is a one pixel gap. my original way was to give the menu div a margin-right: -1px and that worked fine in mozilla, naturally, but in IE the border didn't show. that was a problem if the menu div had more height than the content div. my solution that worked in both browsers was to give the menu div right: -1px. now i can accept if there is no other work arround, it's better this way than the possibility of not having a border but i'm just wondering (this is illustrated by magenta in the following pic)

menu_gaps.jpg


also, some of the pop out menu links are the main page link blue color instead of black but only in IE (again naturally) and i have no clue as to why. it almost seems to be random which ones are blue

fyi, i fixed the stripes you see in the gradiant image. i took this screen shot and then noticed it when i blew it up.

link so you don't have to scroll back up
http://mathcs.muhlenberg.edu/~tmullin/mathcs
 
Unfortunately, she's right. Unless you're going to pick and choose who gets the right doctype (send application/xhtml+xml for Mozilla/Opera and text/html for IE on the server-side) or just downgrade to XHTML 1.0 Strict and use text/html all around. Chances are, a downgrade to XHTML 1.0 Strict will only require you to change the doctype, but it is still recommended you send XHTML 1.0 Strict as application/xhtml+xml, so if you have the right script for sending a different mimetype, use it.

I realize it seems silly and the page renders pretty much fine across the board, but doing it right is doing it right.
 
ZeroX said:
Unfortunately, she's right. Unless you're going to pick and choose who gets the right doctype (send application/xhtml+xml for Mozilla/Opera and text/html for IE on the server-side) or just downgrade to XHTML 1.0 Strict and use text/html all around. Chances are, a downgrade to XHTML 1.0 Strict will only require you to change the doctype, but it is still recommended you send XHTML 1.0 Strict as application/xhtml+xml, so if you have the right script for sending a different mimetype, use it.

I realize it seems silly and the page renders pretty much fine across the board, but doing it right is doing it right.
Click to expand...
it is xhtml 1.0 strict already, not 1.1

can i simply send a header with php to override whatever apache sends? like
PHP: 
header("Content-Type: application/xhtml+xml");
as opposed to some apache magic. i already use a php based method to detect the browser and version to decide whether to serve the cool css or crappy table template so that shouldn't be too hard to modify.

i wonder if the site will totally crap out in mozilla if i send it as xml
 
Sending the header via PHP works fine.

Mozilla has no problem rendering application/xhtml+xml. :D
 
lessthanjakejohn said:
Get rid of those validation images. No good.

:)
Click to expand...
the links and generation time are only there for development so i can easily check whether they are valid xhtml/css
 
tim said:
the links and generation time are only there for development so i can easily check whether they are valid xhtml/css
Click to expand...


I see, sorry if you already said that... Didn't read entire thread :p
 
Wow, you are right Tim.. that gradient really sets off the page. Nicely done! What do you have planned to round out the page? The drop shadows are also a great, subtle, touch that lend the page that much more of a polished look.
 
@doh, zerox
would making it html 4.01 strict make you happy so i don't have to worry about the application/xhtml+xml?

i tried the browser detection and that worked fine but in mozilla when it was sent as xml it almost looked correct except the menu li's heights were all messed up and the roll out menu didn't work.

i've now set it to html 4.01 strict. it seems easier to do that than wonder about the menus not working as xml.

does this mean i technically have to change everything like <img .... /> to <img ...>, <br /> to <br>?

@pointdexterish
i'm not really sure what else to do. i'm open to suggestions


i managed to remove the one pixel white gap on the left of the menu but at the cost of having no margin to the left of the menu text that would have the gradiant behind it.
 
You know, I actually liked the little bit of space between the menu and the left boundary. I would suggest either moving the entire menu (border and all) over a pixel or two, or pushing the text a bit to the right. As it is, the "M" in "Major/Minor" and every first letter of each menu item only has 1 pixel of space between the left edge. My eye can hardly make the distinction between the menu item and the edge.

Also consider bolding or increasing the font size on the title text of each page - "MathCS Home" on the index page and whatnot. This text is fairly non-descript and does not attract any attention as it is now.
 
put triangles or arrows on the menus that have submenus ..... other than that, its very very clean. easy to nav. i think its perfect for the application
 
tim said:
@doh, zerox
would making it html 4.01 strict make you happy so i don't have to worry about the application/xhtml+xml?
Click to expand...
Of course. HTML 4.01 Strict is a perfectly good standard. Interestingly, you're proving one of Doh's points from this discussion long ago - basically stating that most people who use XHTML don't really need it, and that they should be using HTML 4.01 Strict ANYWAY.
tim said:
does this mean i technically have to change everything like <img .... /> to <img ...>, <br /> to <br>?
Click to expand...
The site still validates. Why worry?
 
The site looks good, huge huge improvement over the old one. The only thing that I might change is the image on the main page needs more padding around it. The text gets so close then your eye is pulled into the image, so at the end of every line I find myself looking at the picture ;)
Just a suggestion, besides that the site is very nice.
 
many changes made, i guess they're mostly relatively small.

so far i havn't been able to figure out how to get an arrow to show up for the menus (trying to avoid changing the html too much as far as mouseover/out events). i think that would look good too.

the spacing problems in the pic i posted seem to have been fixed in IE now that it's html 4.01 instead of xhtml 1.0

link so you don't have to go back to the other page
http://mathcs.muhlenberg.edu/~tmullin/mathcs/

there's still the weird thing about some of the popout menu links being blue in IE (and we all know by now that IE bashing threads aren't particularly helpful)
 
I didn't look to see how you did the gradient in the menu, but on the computer one that is two lines tall the top washes way out due to the extra hieght. You might want to look at changing how you get the gradient in there for that.
 
In addition to the page generation time, remove the "Valid HTML/CSS" buttons. No one cares.

(On my website, I use SSI magic to generate autovalidation links when I am viewing my pages locally, and for no one else).

JavaScript menus: Mlar.
 
[stl]
> In addition to the page generation time, remove the "Valid HTML/CSS" buttons. No one cares.

someone obviously didn't read the first page

> (On my website, I use SSI magic to generate autovalidation links when I am viewing my pages locally, and for no one else).

i bet i could figure that out but i don't ever view it locally. that is, i develope it on my computer and have apache running locally but not exposed to the internet so i can't just click the referrer link. i could upload the source to the validator or whatever, but too much trouble. i've been validating it after i upload to my webspace on the actual server. though once i get the admin section going, i can use cookies i bet.....

the page gen and validator links are only for development

> JavaScript menus: Mlar.

keep in mind that the site is totally functional without them. they are there merely for conveinance. i don't think conveinances are mlar.

[deuce868]
> I didn't look to see how you did the gradient in the menu, but on the computer one that is two lines tall the top washes way out due to the extra hieght. You might want to look at changing how you get the gradient in there for that.

basically the gradiants are "background: url("path/grad.jpg") repeat-x left bottom;" (or whatever the correct syntax is) so that they line with the bottom. i am aware of the computers and technology link. that is simply generated from my link dummy data. hopefully the real data will all be one line, if not, i guess i'll change the gradiant somehow.
 
Ack, something is fubar with either my IE (6.recent) or your JavaScript code.

When clicking on two menu topics within a short period of time (for instance, clicking on "Activities" and then "Faculty/Staff" I get the following error:

tuhwhat.png


Which then forwards me to a "This page cannot be displayed" error.
 
pointdexterish said:
Ack, something is fubar with either my IE (6.recent) or your JavaScript code.

When clicking on two menu topics within a short period of time (for instance, clicking on "Activities" and then "Faculty/Staff" I get the following error: snip snip
Click to expand...

Wow, you must've been really into testing the site. I could replicate the error on both IE and Firefox, but only after trying for a while. No idea what would cause it, though. I know not of scripting languages =/
 
pointdexterish said:
Ack, something is fubar with either my IE (6.recent) or your JavaScript code.

When clicking on two menu topics within a short period of time (for instance, clicking on "Activities" and then "Faculty/Staff" I get the following error:
...
Click to expand...
you know, that error actually showed up a couple times for me (not recently actually). i thought it was just some fluke on my box.

i'm using washington.edu's flyout menus
http://www.washington.edu/webinfo/case/flyout/
which i would think are stable, lots of testing presumably. i chose that one since that's the one on the [H] main page.

hopefully the circumstances necessary to cause this are such that the probability of it happening is remote. i hate to sound that way though.

i can't recall if when this happened to me if i was looking at the version on the real server, mathcs.muhlenberg.edu, or previewing it on localhost. perhaps it's an apache problem on the server and not IE/javascript.

do some of the links in the pop out menus show as blue in IE or am i just going crazy, on several computers in my house i might add.
 
tim said:
do some of the links in the pop out menus show as blue in IE or am i just going crazy, on several computers in my house i might add.
Click to expand...
Yeah, only specific ones, though, and only in IE. Mathematics, Dr. G. Benjamin, and Pi Mu Epsilon
 
Anarchonixx said:
Yeah, only specific ones, though, and only in IE. Mathematics, Dr. G. Benjamin, and Pi Mu Epsilon
Click to expand...
hmm. for me they seem to be changing. not every refresh but if i were to close ie/restart my pc, last time for me, the majority were blue. this is really pissing me off
 
Odd. On my patched laptop I can easily replicate the issue with the JavaScript menus, but on my patched desktop I can not.

At any rate, here are the links that show up in blue instead of black with IE 6.recent:

Major/Minor : *Mathematics
Faculty/Staff: *Dr. G. Cicconetti *Dr. W. Dunham *Dr. E. Rykken

Hope this helps.
 
You must log in or register to reply here.
Back
Top