Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts

    Ok, time for the firing squad...

    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    <!-- 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.
    Last edited by _Aerospace_Eng_; 05-05-2009 at 09:00 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    I did say your markup was good other than this

    Code:
    <!-- 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.
    Last edited by Rowsdower!; 05-05-2009 at 09:25 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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
    Code:
    <!-- 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!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by Rowsdower! View Post
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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.


    Edit: I am looking into setting up a virtual machine to run several different browsers and I have come across Sun's VirtualBox. 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?
    Last edited by Rowsdower!; 05-07-2009 at 03:33 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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!

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by CyanLight View Post
    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?!?!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    New Coder
    Join Date
    May 2008
    Location
    Orlando, FL
    Posts
    60
    Thanks
    3
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by Rowsdower! View Post
    does anyone have any design suggestions for me?!?!
    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?

  • #11
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by woop View Post
    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!

    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?
    Attached Thumbnails Attached Thumbnails Ok, time for the firing squad...-normal.png   Ok, time for the firing squad...-stripped.png  
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    Last edited by abduraooft; 05-08-2009 at 01:57 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #14
    Senior Coder gnomeontherun's Avatar
    Join Date
    Sep 2007
    Location
    Houston
    Posts
    2,846
    Thanks
    10
    Thanked 238 Times in 229 Posts
    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/galle...bsite-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
    jeremy - gnomeontherun
    Educated questions often get educated answers, and simple questions often get simple answers.

  • #15
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •