http://www.devwebsites.com

Site is

www.devwebsites.com

Rep for useful critiques (I know its a toy)

Nothing works on the site. It's just a basic layout for my pages

Just updated my design.

With your current style, the first look goes to the header, then to the navigation and at last to the content. Isn't it better to get the first impressions on the content instead the navigation at left?

Next, your head navigation have no hover effects. I think, it's better for all links on your site. The footer image have left a round corner, but at the top. It should be left at bottom to complete your layout.

I have a couple of issues with it...

I looked at the page in FF3.0.7 and IE8RC1. If you're using other
browsers YMMV.

In no particular order:

Design:

• What's the point of the line in the background?
• The gradient behind the top corner images doesn't line up with the
  background - either your padding/margins are wrong, or you just need
  to cut out the image(s) again.
• Why does the footer have a top-left corner, but no others?
• I think it looks like the grey boxes are supposed to have corners at
  the top and bottom, but your font-size or padding isn't sufficient -
  the bottom corners are only half visible.
• The text in the second grey box and in the second blog post is
  misaligned - it should sit in the center vertically.
• Same goes for the footer links/text.
• Paragraphs of text that are center-aligned are generally harder
  to read than left-aligned. I would shift the the text in the grey boxes
  and the text in the "Featured Bug" box to the left and have it so
  that the heading was 10 or 15px from the edge and the paragraph
  lined up with it.
• The blue in the post headings is too faded - I could hardly see it
  from certain angles on this monitor. Also, I don't see the need for the
  single rounded corner. Unless you're boxing the posts off with more
  than whitespace, I'd drop it. Whatever you do with the background
  to the heading, I'd shift the text to the left.
• Why the fixed width in the menu? What happens if you have to add
  more items in? I'd just let the widths sort themselves out by putting a
  set amount of padding on the items - I think it'll look nicer if all the
  items were just the width of the text + 20px padding left and right.
• I agree with laborix - that type of menu needs a rollover effect.
• What's with the uneven padding on the left and right of the main
  section? It just looks like things are missing or that the page hasn't
  finished loading. I would shift the main content over to within 15px
  of the left sidebar, and either expand the width of the main section
  so it comes to 15px from the right edge, or shrink the width of the
  post headings so they fit the text and add in a 3rd column where
  you can list stuff like recent posts, categories, etc.
• I'm not loving the turquoise rollovers on the already horrible
  turquoise background in the footer...

Other stuff

• I really don't understand the structure of your page. If I disable styles
  or just look at it text only, it doesn't make any sense. You have
  "mainHeader" followed by "rightHeader" followed by a list of article links
  folowed by the first blog post followed by "randomBug" followed by the
  second blog post...
  
  Is there a reason you did it that way? It seems to me like this should
  be a really simple structure with a .left and a .right div to put all the
  content in...
• You must have some weird CSS in the header, because I had
  trouble actually clicking on the search box. If I click anywhere on the
  top half of either the box or the button, noting happens. I can only
  input text by clicking on the bottom. If I had to guess, it would be
  because of the relative position you give to all the header text. Why
  have you done that? Why not just use margins and padding to place
  the text?
• Should the search box really be that prominent on the site? You're
  using a lot of space for something so small. I'd move it to a section
  in the sidebar and use the space in the header for something more
  interesting: headlines, news links, ads, quotes from your posts, etc.
• Why does the heading say "Eric-Reese.com" and not "DevWebsites"?
  If I visit http://www.eric-reese.com/, I get a DNS error.

There are a lot of things I'd have done differently with the CSS to
achieve the same things, but I guess that's just down to personal
perference. However, if the code you have is throwing bugs, it's
usually a good sign that you should try to do it differently

A little bit of attention to detail will go a long way if you're planning
on a career as a web designer/developer...


--Jon.

Didn't read Jon's critique, so some of this may be duplicate; items are in no specific order.

1. Title should be text only, should contain the title of the site and possibly the section.
2. Background image is weird and not useful.
3. I don't really prefer the rounded corners, they don't really seem to serve much purpose aside from saying "I've got rounded corners".
4. Line height on "EricReese's Featured Bug" is odd.
5. Navigation is in a list, which is quite good.
6. Subsection headers should probably be the same font and should probably expand all the way across.
7. Directory browsing in apache should be disabled, noticed when clicking on articles.
8. It is recommended to turn off extended server status. "Apache/2.2.11 (Unix) mod_ssl/2.2.11 OpenSSL/0.9.8i DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635 Server at www.devwebsites.com Port 80"
9. W3C released an announcement awhile back requesting that the DTD files be hosted locally on your server, rather than http://www.w3.org/TR/html4/loose.dtd

That's all I can think of for now, no offense is meant in any of this, these are just things I could think of off-the-cuff.

Wow great critiques everyone. First off. @Jon. Sorry my rep cycle is down for you at the moment. I'll start off from the first critique.

Thanks for the suggestion on the hover effect. Wasn't sure to include it or not. And about the rounded corners. Yea I noticed it looked bad to have it rounded for the footer and not for the bottom. I'm not a designer

@Jon
Line in the background is bad photoshop by a friend
Thank you for the gradient issue. I need to have him fix it
Again with footer, bad photoshop
Nope, the gray boxes aren't. Its only supposed to be for that corner only.
Yes about the alignment. I don't want to use an inline-element such as a span because I am using block level elements such as <h2> for SEO purposes. I will get to that ASAP
Thanks for the tip on the paragraph alignment
The point of the slightl blue is that it barely gets peoples attention. So they look at it and see what its about and go to look. About the rounded corner, again, I did not make these images.
The fixed width is indeed an issue. I had to have one for the container because of the poor way the image was sent to me. He didn't give me rounded corner images, but instead one big image.
Thanks for the footer rollover tip. I couldn't decide a color. Maybe no rollover effect at all?
Yes I need to restructure my html and clean up my css. I whipped this up in a day in a rush. I want screenreaders to get to content first.
Yes My css is weird I am still trying to figure out what style I am coding at such a young age
Thanks for the suggestion on the search box. I actually uploaded this thread without it and then realized I had not added one. Thanks!
About the website..I am using this domain to code then hosting the other one so I am not wasting money. Kravvitz asked the same thing.
Actually that code is what I needed jon. If you look, my site displays perfectly in Opera, Firefox, IE8, IE7, Chrome, and Safari. IE6 throws some double float margin bugs around but for the most part most of that code was necessary. I am going to clean it up asap thought

@vb

I thought it would be nice to display what the sites about underneath. Maybe I should just stick that to the about me section
I like the background
I like rounded corners
Ok I'll fix that line height. I was just testing out a little
Thanks for the list complimenet...
Ok thanks about the subsections
How do you do that? I am no .htaccess pro.
Same with #8.
I don't use a loose doctype do I?



@everyone

Wow such amazing critiques. I shall follow all with great care. As soon as I clean up my code I shall post back with my new improved code and layout. I really appreciate it everyone

I'm not sure how inline elements would help you, but there's nothing
wrong with putting <span>s in <h#>s.

My point was that it didn't do that - I didn't even notice it was there!
I'd just ditch the bg colour and have the headings in big dark blue
text [same colour as you site bg...]

Are you talking about the footer? I'd probly just keep the links white
and get rid of the underline on hover.

You should be able to do that using 2 divs - put the right div first
with your content in, set the width and float it right, then float the
other one left.

It looks the same, but the issue I was referring to is present in all
the browsers I have...


If you have access to the main config for apache [the httpd.conf]
then you should do this there. If you don't, then you can still do it
in the htaccess. "Options -Indexes" is the rule you need - google
that for more info.

Oh mother of God. I thought I had a strict in there. Wow

Ok I have updated my site. While Ido not have photoshop so I can't edit the rounded image *hint hint* I have done a paint job and fixed the rounded corners on most of the images

I will google. Thanks

I haven't got around to vertical aligning most of my stuff. I am having some css issues on the footer

www.devwebsites.com

I am going to post a thread in CSS because on the top right hand of page you can see a little bit of the rounded image in the top part of the page and that shouldnt be there. I can't figure out what it is. Updated my site btw.

No. I have not got around to fixing my code yet..

Hey there,

I'll add a couple suggestions too -- sorry if this just repeats what has been said )

Overall, I like that you've taken the time to develop a color scheme. The grey, green and blue go nicely together, and provide attractive contrast to the muted scheme.

The combination of horizontal and vertical navigation is also helpful. With respect to vertical navigation, if I were you, I'd make the vertical less visible (lighter) than the horizontal nav.

As someone else mentioned, it's important to consider what you want a site user to see first, next, and last. The boldness of the elements plays a large part in that.

In order to differentiate the elements, I might also place more space between the blog posts, and the top navigation - 10 to 20 px should be fine - and either center, or left-align, the text in the blue bar -- but then center the text vertically in the div, so there's blue both above and below, rather than just below (the text lacks a visual ground). I'd standardize the font used in blog titles, as well.

Finally, I really like that you've taken the time to place nav at the bottom, as well - the oft-forgotten sitemap is especially helpful.

All in all, great work!
--Dave

Thanks. All I have to do left is center the blog posts, create more space, and turn the latest css articles list into links.

Oh yea and edit the image to have the same hex code as the bg color.

I may create more space. This is a personal site remember. This isn't about pleasing the users.

Behave. What's the point of it then? :/

Behave..?

The point of it is for showing off my portfolio, having a css reference of all properties and which browsers they work in, plus CSS3 and more on my site.

The only browser my site fails in is IE6 and thats just a bunch of double float margin bugs.

@Chief

How do you like my site now? Anything I missed?

And all of that is for who's benefit?

Me, and my employers who want to see my portfolio...

And maybe anyone who I post a link to my site here on the forums in reference to helping them out.

Do you not see the irony in making a website to show off your work
if you don't care if the site looks/feels/works well?