...

View Full Version : Ok, time for the firing squad...



Rowsdower!
05-05-2009, 08:12 PM
http://rowsdower.freehostia.com/

I've been lurking and posting since October, 2008 brushing up on HTML skills that hadn't been touched in years. Since then I've learned CSS pretty well, I have begun once again to work my way into javascript, and I'm just breaching the surface of PHP now that I have a host whose service supports it.

Along the way I have designed/found and re-worked a few elementary designs, codes, etc. to practice techniques and test out methods and scripts. I am now starting a web repository of all of this junk to use for my own reference as well as to link people to working examples in response to some forum questions. The wording in some pages needs work and there is at least one page with no content -- I am aware of that much.

Before I start actively pushing people to the site though I need some critiques on the design of the site -- and if you really feel like it you can mock/correct my content, I'm sure it's not all air-tight since it's what I did when I tought myself the coding ;).

I'm part color blind and the rest of me has only a poor sense of aesthetics so if something is a real eyesore you'll have to let me know.

I'm also very curious to know if the menu breaks in any browsers apart from IE7/FF2 (I suspect problems in IE6- at the very least). I can test the layout just fine at browsershots, but I can't get a feel of what happens when the hover comes into play.

Anyway, this is the beta version of the site that I have just only gotten working with the PHP I have been working on so I'm not married to the design. All suggestions are welcome. :D

_Aerospace_Eng_
05-05-2009, 08:51 PM
Markup is good.

The header could use some work. Even though it appears to have been done in PS because of the beveling it looks somewhat like it was done in Paint.

The footer at the bottom breaks out of its containing element so its actually on the border.

Your menu works without javascript so that is good.

The colors are a little plain but as you said this may not be what you stick with so fine.

I did say your markup was good other than this

<!-- Open Wrapper -->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
div#logo {background-image:url(/images/rowsdower4.gif);}
</style>
<![endif]-->

You have that within a div element when it should be within your <head> tags.

Oh and you can test your site kind of in IETester. Its pretty accurate aside from the mishandling of hr elements. It allows you to test on IE5.5, IE6, IE7, and IE8. I use this on Windows Vista because I don't feel like having a virtual machine just to run those browsers. It works well for me.
http://www.my-debugbar.com/wiki/IETester/HomePage

And yes your menu is all out of whack in IE6. Use IETester to see what I mean. Your drop downs don't work either. Your menu is kind of broken in IE8 as well. It goes above your main menu links. Looks like it just needs some positioning.

Rowsdower!
05-05-2009, 09:22 PM
I did say your markup was good other than this



<!-- Open Wrapper -->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
div#logo {background-image:url(/images/rowsdower4.gif);}
</style>
<![endif]-->You have that within a div element when it should be within your <head> tags.

Yes, I'm still thinking about how to do this. I'm not sure of any better location when I need it for the logo presentation, which is part of an include for the menu. That's where this ugly little bit of code resides.

I can't think of any good way to update the menu in just one location while still providing a fix for IE6's lack of alpha transparency. While it wouldn't be the end of the world if I forgot to update the header for IE6 I'd still like to only have to remember to change one place for the menu presentation.

I'll crack that nut eventually (or just give up on worrying about IE6 transparency) and I know what you mean - it's the black eye on an otherwise clean-coded site...

Thanks for the input so far. Feel free to post more if you have any interest.

Rowsdower!
05-07-2009, 02:01 PM
Markup is good.

The header could use some work. Even though it appears to have been done in PS because of the beveling it looks somewhat like it was done in Paint.

The footer at the bottom breaks out of its containing element so its actually on the border.

Your menu works without javascript so that is good.

The colors are a little plain but as you said this may not be what you stick with so fine.

I did say your markup was good other than this

<!-- Open Wrapper -->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
div#logo {background-image:url(/images/rowsdower4.gif);}
</style>
<![endif]-->

You have that within a div element when it should be within your <head> tags.

Oh and you can test your site kind of in IETester. Its pretty accurate aside from the mishandling of hr elements. It allows you to test on IE5.5, IE6, IE7, and IE8. I use this on Windows Vista because I don't feel like having a virtual machine just to run those browsers. It works well for me.
http://www.my-debugbar.com/wiki/IETester/HomePage

And yes your menu is all out of whack in IE6. Use IETester to see what I mean. Your drop downs don't work either. Your menu is kind of broken in IE8 as well. It goes above your main menu links. Looks like it just needs some positioning.

Ok, the footer has been patched up (I believe) and I implemented a PHP solution for the conditional CSS that used to be in the body. It now resides only in the head, and only when the browser is reported as IE.

I also re-tooled the menu layout a bit to help it work better across browsers, including IE8 (again, I believe -- I don't have IE8 at home or at work plus browsershots has had a 2+ hour wait time every time I have tried them this week and my shots keep timing out :(). I still expect the menu to be wrecked for IE6 so until I update the menu generation to use a table structure for users browsing on IE6 I won't have much to do with that.

My header is still cheesy and my colors are still bland.

Can anyone else see anything that they like/dislike or that is functionally broken with the layout? Suggestions for spicing up the colors and logo are also very welcome!

_Aerospace_Eng_
05-07-2009, 03:09 PM
Ok, the footer has been patched up (I believe) and I implemented a PHP solution for the conditional CSS that used to be in the body. It now resides only in the head, and only when the browser is reported as IE.

I also re-tooled the menu layout a bit to help it work better across browsers, including IE8 (again, I believe -- I don't have IE8 at home or at work plus browsershots has had a 2+ hour wait time every time I have tried them this week and my shots keep timing out :(). I still expect the menu to be wrecked for IE6 so until I update the menu generation to use a table structure for users browsing on IE6 I won't have much to do with that.

My header is still cheesy and my colors are still bland.

Can anyone else see anything that they like/dislike or that is functionally broken with the layout? Suggestions for spicing up the colors and logo are also very welcome!
Menu is still jacked up in IE8. Why aren't you using IETester? Again as I've already stated it allows you to test your site in 4 different versions of IE including IE8 starting at IE5.5

The footer is fixed in Firefox which is good. The menu in IE6 is now vertical rather than horizontal.

Rowsdower!
05-07-2009, 03:20 PM
Menu is still jacked up in IE8. Why aren't you using IETester? Again as I've already stated it allows you to test your site in 4 different versions of IE including IE8 starting at IE5.5

The footer is fixed in Firefox which is good. The menu in IE6 is now vertical rather than horizontal.

My work PC has some proprietary software that relies on a clean version of IE7 and it's not worth the risk to compromise it for part-time web development testing. :(


I am looking into setting up a virtual machine to run several different browsers and I have come across Sun's VirtualBox (http://www.virtualbox.org/). I'm assuming I can set up IE8 there as well as FF3 for testing. Does anyone have any experience with this? Is it difficult to do?

_Aerospace_Eng_
05-07-2009, 03:37 PM
IETester doesn't effect any of the other installed IE browsers but that is your choice. You can use virtualbox yes but you will need a valid copy of windows xp or windows vista.

Apostropartheid
05-07-2009, 05:35 PM
Even better, have a virtual hard disk (you can use Virtual PC, which I like for MS OSs, or VirtualBox or VMWare for this) with IETester, some Firefox standalones and the two Safaris for Windows stuck on it. There's your all-in-one web design VHD!

Rowsdower!
05-07-2009, 10:43 PM
Even better, have a virtual hard disk (you can use Virtual PC, which I like for MS OSs, or VirtualBox or VMWare for this) with IETester, some Firefox standalones and the two Safaris for Windows stuck on it. There's your all-in-one web design VHD!

Yep, that's pretty much exactly what I'm thinking about right now. I have absolutely no experience with virtual machines though so this will be a nice little learning project for me...

But enough about that, does anyone have any design suggestions for me?!?! :D

woop
05-08-2009, 01:05 AM
does anyone have any design suggestions for me?!?! :DMy opinions from top to bottom:
I'm personally not a fan of the 1px solid #000 border treatment.
The large logo is the only thing in contrast with the light color scheme. I would try to modify your color scheme so the website is a little more aesthetically appealing. It looks like you wanted to have a light color scheme by personal preference, but I believe most people will not be interested in those colors, which reminds me of aging beige plastic appliances and old folks' homes.
The top logo large to me. I'd say it looks like you were messing around with a clipart sun in Paint and then brought it into Photoshop to add beveled text; the sun is aliased and the rest isn't. You've got to be careful when using the bevel and drop shadow tools to avoid creating an outdated appearance.
The menu is pretty annoying to me, at least. To navigate, I have to pause a brief moment on the menu option, move the cursor directly down slowly, and then move carefully all the way to the left. Any other action makes the menu selection collapse.
"Rowsdower!" What's that doing there?
Your type sizes are large most noticeably H1 and H2. Also, the width of your single column of text is much more than people are used to seeing across the web. I'd personally want to narrow that space.
Rowsdower - it's what's for dinner?

Rowsdower!
05-08-2009, 01:37 PM
My opinions from top to bottom:
I'm personally not a fan of the 1px solid #000 border treatment.
The large logo is the only thing in contrast with the light color scheme. I would try to modify your color scheme so the website is a little more aesthetically appealing. It looks like you wanted to have a light color scheme by personal preference, but I believe most people will not be interested in those colors, which reminds me of aging beige plastic appliances and old folks' homes.
The top logo large to me. I'd say it looks like you were messing around with a clipart sun in Paint and then brought it into Photoshop to add beveled text; the sun is aliased and the rest isn't. You've got to be careful when using the bevel and drop shadow tools to avoid creating an outdated appearance.
The menu is pretty annoying to me, at least. To navigate, I have to pause a brief moment on the menu option, move the cursor directly down slowly, and then move carefully all the way to the left. Any other action makes the menu selection collapse.
"Rowsdower!" What's that doing there?
Your type sizes are large most noticeably H1 and H2. Also, the width of your single column of text is much more than people are used to seeing across the web. I'd personally want to narrow that space.
Rowsdower - it's what's for dinner?


Thanks for the feedback. I'll just clear up the controversy over the header image once and for all. I was goofing around in photoshop playing with custom shapes. I found that weird paint blob-ish thing and slapped it down, popped another custom shape in the middle as a color dodge, then I tossed my CF username up there as text (since that's the freehostia site subdomain anyway) and voila, a temporary, cheesy (and completely non-MSPaint) logo was born. It takes real talent to make photoshop look like MSPaint! :D

You're right about me preferring light colors. I used to have the entire background just plain white for everything but I thought that was way too sterile. I don't want dark backgrounds (such as dark grays, black, etc.) and I recognize that my current colors are beyond dull, but I'm open to some vivid color in small doses. Any suggestions for that? I played around with it for a couple of days before I ever posted the site for review and anything I tried just ended up looking worse - if you can imagine.

As for the menu collapsing, this isn't an issue for me at all in IE7 or FF2. What browser were you using? What's your screen resolution? There is no javascript running the menu so I can't think of any good reason there would be a delay for the submenu to appear and if the layout isn't broken (extra space between menu and submenu) then I can't figure why the menu would disappear. Does the menu appear like the image attached below? Both are taken from FF2, one at normal viewing and one with the submenu section set to transparent background. Notice in the transparent version that the bottom of the main menu link dips below the top of the submenu area. You can see the bottom border dipping just below. I did that specifically to avoid this kind of collapsing error when moving between main navigation and the submenu. Is the "normal view" below not how you are seeing it?

I definitely don't want broken navigation so you're freaking me out a bit...

Anyway, if the menu didn't collapse on you, would you still dislike the way it is constructed?

I think you're dead right about the font size. I am also interested in changing the font face but I'm not good with typography yet. Any suggestions?

abduraooft
05-08-2009, 01:54 PM
The menu is pretty annoying – to me, at least. To navigate, I have to pause a brief moment on the menu option, move the cursor directly down slowly, and then move carefully all the way to the left. Any other action makes the menu selection collapse. I think woop is talking about the need to move the cursor to the far left of the layout, to access the sub menu items (for the 4th,5th and 6th items)

Also, since you call that image as a "logo", I believe it should be placed as an <img> tag instead of as a background of a <div>, to make it semantic.

Rowsdower!
05-08-2009, 02:03 PM
Maybe, but the parts about having to move slowly to avoid menu collapse seem like either gaps in the menu or else an error with the way hover is being handled.

I also know for sure that in IE7 (but not in FF2) if you hover over the "Rowsdower!" text that I so lovingly plopped into the bottom right corner of the submenu's background then the submenu you are on goes away because IE decides that you are actually hovering over an item that is behind the submenu. That could be what woop is talking about too, but I don't want to discount it as anything simple until I'm sure. I'm a worrier. ;)

gnomeontherun
05-08-2009, 02:11 PM
Dear lurker and poke arounder,

Typography: switch the serif and sans-serif motif you have now. I would suggest something like verdana for the body text and something like Georgia for the headers. I generally follow that pattern, one font for all spells boring. I personally like larger text, because too many sites have blasted 10px Helvetica in the body, which is unreadable on my computers. You've got the space, use it.

Menu: I would have the sub menu persist on roll over until a person rolls over the next main tab, so if they go anywhere else in the page its still in the last sub menu. It seems to be a bit 'wireframe', so a little care on the styling would be good.

Colors: Something needs to stand out, and right now its your header. Usually a logo should be strong, but this isn't a logo per se. Consider how to remove some of the paleness from the color scheme and get at least one bolder color in there.

Header: Just look at this for some inspiration: http://vandelaydesign.com/blog/galleries/website-headers/ I can't say what to do exactly, just that you can look at other websites for inspiration to find concepts you like to bring into it.

Overall CSS: Most of the CSS just seems unfinished, such as things like font choices and partial backgrounds and borders. I think it just needs more time and attention, again looking at other sites can provide you with inspiration, but can also drive you nuts if you are looking at sites that aren't really similar.

Its a good basis, just needs that flair :)

Apostropartheid
05-08-2009, 04:16 PM
Actually, after experimentation, I would recommend the all-georgia treatment here. It fits perfectly; its large, slabby serifs when emboldened makes the headings look different, whilst its openness and size in the body gives it a nice, airy, comfortable feel. Sanserifs didn't look right to me.

Rowsdower!
05-08-2009, 05:29 PM
I think woop is talking about the need to move the cursor to the far left of the layout, to access the sub menu items (for the 4th,5th and 6th items)

Also, since you call that image as a "logo", I believe it should be placed as an <img> tag instead of as a background of a <div>, to make it semantic.

I had some difficulty getting it to play nicely as an image. Hover on the menu items got buggy when I tried it that way but I'm going to give it another go as an image if I can make it work.

Rowsdower!
05-08-2009, 07:11 PM
Actually, after experimentation, I would recommend the all-georgia treatment here. It fits perfectly; its large, slabby serifs when emboldened makes the headings look different, whilst its openness and size in the body gives it a nice, airy, comfortable feel. Sanserifs didn't look right to me.

I gave this a try. I also reduced the overall font size as suggested by woop. So far I think both changes are improvements.

I also gave it a second try to put the logo in as an image instead of a div background but still no luck. Z-index isn't working there and I don't know why so for now I have just replaced the div as it used to be. Does anyone know why the z-index would be ignored in this context? I just ran across a result that said I need to use either position:absolute; or position:relative; for z-index to work so I'll try that a little later (I wasn't using position:relative on the image)...

Anyway, I'm going to be playing with colors on and off over the weekend (and maybe some new, cheesy logo work) so please keep the comments and suggestions rolling!

woop
05-09-2009, 01:23 AM
Hey there. You've already made some good changes. Looks like my little critique helped (good!). I was afraid it wouldn't be received well, but I can see you're a positive person. ;)

The color scheme is much better. There's more contrast now, and of course the blue naturally goes well with the light yellow.

I'm sorry to make you worry about the navigation. My wording made it out to be a bigger issue than it really is. I can still navigate your website on Safari as I tend to use, but I wonder if there may have been a margin under the parent menu options before today. Anyway, don't sweat it, because it is working fine today. I think the more pronounced child menu background color helps distinguish the area that the mouse needs to stay in lest we lose the mouseover selection. Of course, if you accidentally move your mouse onto an an adjacent 1st level menu option, you will lose your child menu selection, and I would just recommend shifting the child menus to where they are centered under the parent selection. #1 example is moving over "Other" and having to move the mouse over to the opposite side, risking touching one of the other menu options. It's like playing a wire loop game like Operation, even though of course it's easier and it isn't as fun!

I still don't understand the purpose of "Rowsdower!" text in the submenu.

I think you're headed in the right direction, and good work!

bazz
05-09-2009, 01:30 AM
who am I to give a design critique :rolleyes:

Anyway, there are a few things which stike me as improvable.

1. the globe logo needs some padding tope and left. It's too pushed into the corner.

2. I would recommend the chnage of the color of the header text and the menu background to tone better with the background. Not to blend in and to lose contrast but to be a similar color 'theme' as if a faded or stronger shade of the background color.

3. I would suggest you think of the nav menu issue raised a few times. It works almost perfectly from my point of view but you could make the flyout parts appear beneath the first link instead of left alignment. By all means, feel free to keep them inline but it would be easier not to lose the flown-out link if we didn't have to mouseover all the way to the left as with the flyout from 'layouts' and 'other'

hth

_Aerospace_Eng_
05-09-2009, 06:13 AM
Your menu seems to be working better in IE8. Its not broken like it was before. Now however the blue background seen in Firefox does not appear in IE8 but it does function the same in FF 3.0.10.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum