Discuss http://www.devwebsites.com in the Website Critiques forum on Dev Shed. http://www.devwebsites.com Website Critiques forum discussing your website. Get recommendations on areas of improvement by design and development experts. Discover your site's weak spots. You must be a member for at least 30 days and have at least 30 posts to list your site.
Posts: 2,215
Time spent in forums: 3 Weeks 3 Days 6 h 32 m 28 sec
Reputation Power: 2178
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
__________________
"Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue
"so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
- marnixR
Posts: 21
Time spent in forums: 3 h 14 m 37 sec
Reputation Power: 0
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.
Location: I used to live at home, now I stay at the house
Posts: 10,180
Time spent in forums: 3 Months 3 Weeks 5 Days 19 h 54 m 23 sec
Reputation Power: 2037
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...
Posts: 2,273
Time spent in forums: 1 Week 2 Days 22 h 10 m
Reputation Power: 337
Didn't read Jon's critique, so some of this may be duplicate; items are in no specific order.
Title should be text only, should contain the title of the site and possibly the section.
Background image is weird and not useful.
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".
Line height on "EricReese's Featured Bug" is odd.
Navigation is in a list, which is quite good.
Subsection headers should probably be the same font and should probably expand all the way across.
Directory browsing in apache should be disabled, noticed when clicking on articles.
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"
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.
__________________
I am so smart, I am so smart, S.M.R.T ... I mean S.M.A.R.T.
Posts: 2,215
Time spent in forums: 3 Weeks 3 Days 6 h 32 m 28 sec
Reputation Power: 2178
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
Location: I used to live at home, now I stay at the house
Posts: 10,180
Time spent in forums: 3 Months 3 Weeks 5 Days 19 h 54 m 23 sec
Reputation Power: 2037
Quote:
Originally Posted by EricReese
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
I'm not sure how inline elements would help you, but there's nothing
wrong with putting <span>s in <h#>s.
Quote:
Originally Posted by EricReese
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.
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...]
Quote:
Originally Posted by EricReese
Maybe no rollover effect at all?
Are you talking about the footer? I'd probly just keep the links white
and get rid of the underline on hover.
Quote:
Originally Posted by EricReese
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.
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.
Quote:
Originally Posted by EricReese
Actually that code is what I needed jon. If you look, my site displays perfectly in Opera, Firefox, IE8, IE7, Chrome, and Safari.
It looks the same, but the issue I was referring to is present in all
the browsers I have...
Quote:
Originally Posted by EricReese
How do you do that? I am no .htaccess pro.
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.
Quote:
Originally Posted by EricReese
I don't use a loose doctype do I?
Quote:
Originally Posted by your site
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
Posts: 2,215
Time spent in forums: 3 Weeks 3 Days 6 h 32 m 28 sec
Reputation Power: 2178
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.
Posts: 51
Time spent in forums: 21 h 7 m 46 sec
Reputation Power: 34
Re: Site
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.
Posts: 2,215
Time spent in forums: 3 Weeks 3 Days 6 h 32 m 28 sec
Reputation Power: 2178
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.
Location: I used to live at home, now I stay at the house
Posts: 10,180
Time spent in forums: 3 Months 3 Weeks 5 Days 19 h 54 m 23 sec
Reputation Power: 2037
Quote:
Originally Posted by EricReese
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.