www.webdeveloper.com
Results 1 to 8 of 8

Thread: Critique My First Website

  1. #1
    Join Date
    Jul 2009
    Posts
    184

    Critique My First Website

    Hey Everyone

    I've been picking away at my first website that I've hand coded and uploaded online. It is HTML and CSS with a lil' javascript form and a "php include" for the header navigation menu. So apart from the obvious lack of content, hopefully I can get some basic advice on how I'm doing so far, what I'm doing wrong, what I'm doing right,where to go from here, etc.

    Unfortunately I haven't been able to find anyone with Internet Explorer so that I can spend some time working through "those issues"; if anyone could inform me of some of the types of problems I will face when I do try to make my site work with IE, that would be awesome!

    Any other constructive pointer's, tips, and advice are more than welcome, of course: I am new to creating websites and am very interested in the subject for sure.

    Thank you in advance!

  2. #2
    Join Date
    Jul 2009
    Posts
    184

  3. #3
    Join Date
    Aug 2009
    Posts
    593
    Tested in IE6:

    Front page looks relatively the same as FF, except the bordering around your elements is just black in IE.

    The Contact page has a few problems like the right menu column overlaps the main content area.

    The dropdown menu for your Articles does not show at all.

  4. #4
    Join Date
    Jul 2009
    Posts
    184
    I suppose I can live with black borders because IE6 doesn't support the "border:" property, I don't think?

    Hopefully I fixed the overlap issue by adjusting the CSS width of this side column and the margin for the middle content column: but, I don't know why it would have been only on the contact-me page. If the problem still exists it must be because of the form validation Javascript I put together for this page. I guess I'll read up on hiding Javascript from IE6 or something along those lines if this is the case?

    I'm assuming the drop down articles menu doesn't work because ":hover" doesn't work in IE6. does anyone know if :hover works in IE7 or 8? Another way of achieving a similar effect?
    I don't see a way of making the drop down work for IE6 so I made the articles tab a link to an articles landing page: for this reason.

    Thanks thraddash!

  5. #5
    Join Date
    Aug 2009
    Posts
    593
    You have 2 errors on the contacts page:

    HTML Code:
    <input type="text" size="50" name="name"></text>
    . . .
    <input type="text"size="50" name="email"></text>
    it should be

    HTML Code:
    <input type="text" size="50" name="name">
    . . .
    <input type="text" size="50" name="email">
    Maybe that will help?

  6. #6
    Join Date
    Jul 2009
    Posts
    184
    Whoops, it must have been late when I put those in there and thought it validated

    Thanks again!

  7. #7
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    Hey Ben,
    Look out your window riiiggghhhttttt… NOW! I’m waving to you from across the Strait of Juan de Fuca, over on the Olympic Peninsula…yeah.. that’s me! Grad to see you are getting involved in the Web Developers Forum!
    I salute you for having the ***** to put your site up for review. I’ll do my best to give you an honest and hopefully helpful review.
    My first impression was by the colors. While I really like blue, it doesn’t always work with red and lavender. Have you checked out:
    http://www.webdevelopersnotes.com/de...binations.php3
    some colors are complementary and some are antagonistic.
    The second thing I noticed was that on my 1650 wide monitor I still had a scroll bar at the bottom… What’s up with that?? So I also tested on a 1024 monitor. Humm.. still had that scroll bar on the bottom. Adjusting the scroll I could almost see all the content within the monitor, but not quite.
    So I downloaded you CSS and started to walk thru it.
    Here are a few things I noticed:
    div.container width is 1025. Since about the best you can get on a 1024 monitor is 1000px, I’d suggest narrowing that a bit.
    But that was not the problem causing the bottom scroll bar, it was:
    Code:
    ul.topmenu{
    position: absolute;
    width: 90%;
    So you have a % width, absolutely positioned inside a fixed width…. Mmmm…not good…
    That equals 923 px wide, floated left, positioned at an absolute position of 90 of screen width…
    Now it doesn’t fit inside your container and causes the scroll bar at the bottom.
    My advice… almost never, ever use position: absolute; and especially don’t combine with %.
    Without trying to rewrite too much of the CSS,
    Code:
    ul.topmenu{
    width: 790px;
    fixed the scrollbar.
    I like the idea of your photo on your page. It shows that you take ownership for what you say on the page. Just be sure to use a higher res photo.
    I also like your 3 column design, but research has shown that next to the banner, the most valuable real-estate is the left column. If I were you I would switch your ads to the right hand column and put your personal stuff on the left.
    Wishing you the best on your venture! Give me a hollar if you ever get over this way, ayyy?
    Eye for Video
    www.cidigitalmedia.com

  8. #8
    Join Date
    Jul 2009
    Posts
    184
    Beautiful friday morning here, and Thanks for the warm welcome EFV. It's cool looking across that strait and seeing another country right there eh: well I always thought so anyways. I was recently over in boundary bay filming a skim board competition for a friend of mine, it's amazing how easy it is to just walk right into Washington and then back into BC right there without a hassle

    You've a good eye sir, I put that header background image in after designing the template: and the colors definitely are wrong, aren't they? I'm hoping to edit a similar photo so it looks to be during twilight with more blue and purple shades. I read that link BTW, and thank you, that was a very interesting and helpful reference.

    Nice find! I hated that darn scrolling issue; it has really been bothering me ever since I got the site online, and honestly I had no idea what was causing that to happen so thank you very much for pointing out my err, I'm really very relieved! Ended up with a fixed width and "position: absolute;" for the "ul.topmenu"; this is how I made the articles drop down menu display in front of my content instead of pushing it down below the drop down. I think absolute positioning is also what keeps the menu in place when users increase/decrease their font size a lot, I hope this is now a reasonable way of achieving my goals here.

    The photo definitely needs to be replaced as I took that with the 0.3MP iSight camera in my laptop. very low res indeed, unfortunately I had almost all my film gear stolen awhile ago and haven't been able to replace any of it since: I can't even afford a decent camera. It's too bad, I really enjoyed filming stuff and taking pictures for fun/casual paid work.

    Hehehe I was told before that the right column is more valuable real estate
    and that is why the ads should go there: so they get viewed and hopefully clicked on more. I have to say I really agree with your take a lot more.
    As my site is quite new and lacking in valuable content to attract visitors, I probably should switch my personal stuff to the left so people are more inclined to visit other pages of my site rather than see a bunch of newbie ads and leave eh. Well I can't tackle this one right away, but soon anyways.

    Thank you very much for your friendly, and thoroughly detailed critique: I think it's a rare treat running into folks with such a respectable, positively helpful attitude!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles