Flexible Web Development

[Jick]

Well as most of you know I have been working on the new design and new aim for my web site for more then a month now. My site used to be aimed at web design but in light of my interests changing I decided to change my company as well. I like doing web development better then design.

I have made the layout and got all the content filled in and I think it's ready to be launched. I validated it through the xhtml, css, and 508 validators and as far as I know it is all valid.

I think it is a great improvement from my last design. I now think it's time for some ratings. I will greatly appreciate any suggestions and/or comments you have for my site.

I think it looks good but then again I'm only one person. So please feel free to have a look and let me know what you think. You will find the link below...

Flexible Web Development (This is my local server so it may be slow or unavailable at times.)

[David Harrison]

Rather that using <span>'s for your underline effects, why not simply use the :first-letter psuedo-class and apply the underline that way (since all of your accesskeys are the same as the first letters).

Also, if you were to have this sort of setup:

<h1><span>Flexible Web Development. When having a flexible web site is crucial.</span></h1>

You could then apply the following styles to it:

h1{
  width:x;
  height:y;
  background:url(bg) no-repeat top left;
}

h1 span{
  position:absolute;
  top:-99999px;
  left:-99999px;
}

That way, you would still have your main logo, but when styles are disabled you would have some main page header text to display (that search engines would also pick up on).

I've not checked your styles, but it seems to me that you could remove your #nav <div> tag and give the ID to the <ul> tag instead, then you'd dump a tag that you don't need, like I say though, I've not looked at the styles.

I notice that you don't have a skip navigation link in there, if you were to add one in users with screen readers could use it to jump past the list of links at the start of every page, rather than having to sit and wait.

Perhaps you could also centre your layout using margin:0 auto; on the #container and text-align:center; on the body tag, currently the layout hangs off the left hand side of the page (where it cannot be scrolled to) on 640x480.

Try and remove all decorative images from the page and add them in as backgrounds. It will make it easier in future to change the images on all pages, and also remove some of the tags from your markup.

[Jick]

Thank you! Those all sound like good things to do. I will get to work on them right away. Thanks for your comments.

[Jick]

Ok, I've implimented all the fixes you suggested except for the Skip Navigation link because I'm getting to tired to do any more tonight. It all looks good now if FireFox but in IE for some reason instead of making the first letter of each nav link underlined it makes it a different color and the hover effect no longer works. When I remove the part in the css about underlining the first char in each nav link the hove thing works again and the color goes back to normal but then there is no underline. I don't know if this is an IE bug or what but I can't figure out how to fix it. I have tried a bunch of different stuff. Other then that I have all the others working except the skip nav link which I will add in tomarrow! Thanks for your help and I hope you might be able to help me with the underline problem. Thanks.

[spufi]

First of all, the design does look nice. The thing that sticks out to me is how you used your markup.

<span class="important2">The Articles...</span><br />

The important2 class being that the text is bold. I guess I would have use a header tag and styled it as needed. There are more instances of seeing a lot of <span> tags, and I'm just wondering how many of them are really needed.

[David Harrison]

You have two <h1> tags now, I think that you should only have 1 really, but don't quote me on that.
I just realised, you could use either #main or #container to display the background image for the header (if they don't have any backgrounds currently set).

You can't have noscript in the head section, the noscript tag contains content should the script tag not be supported. You don't need a <noscript> tag though because you have only used JavaScript to "enhance" the page (target="_blank" yech).

You only have three paragraph tags, but you have loads of text on your page, you could use paragraphs for you text and get rid of a few of those <br />'s by setting the bottom padding on the <p>'s appropriately.

For the underline, I guess you'll just have to do this:

html>body #nav li a:first-letter {
	text-decoration: underline;
}

That'll hide it from IE, but all of the other browsers will display it fine, most people will not know what the underline means though.

[Jick]

Well I have now done most of the fixes that you spoke of while still trying to maintain the same look. Does anybody see anything new or anything I forgot to fix.

Thank you to all, I really appreciate the feedback!

[David Harrison]

For your site map, I think it would be better if you used a definition list:

<dl>
<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>

<dt></dt>
<dd></dd>
</dl>

You can use the <dt>'s to replace your <h3>'s and use the <dd>'s for your text.

I was going to suggest the same for your Announcements, but I think it's better to use a list. I still don't see <p>'s being used to that though.

Edit: Your page is always being read as text/html by the way. You need a little server-side trickery to get it to be read as application/xhtml+xml.

[Jick]

What server-side trickery would that be?

[David Harrison]

It's the third post down in this thread, but the anchor should take you straight there.

[davidbrent]

I really like that site. Well done! It has a nice look about it. The only change aesthetically i would make is the rollover nav colours. I would keep the text colour the same and have a light blue background colour. Well that's just my idea anyway.

Just out of curiosity, how long did it actually take you to have all the content up and ready. And do you use MySQL at anypoint?


Best Wishes,
David

EDIT: i use Abyss web server as well!

[davidbrent]

One more thing before i forget. If it was my site i wouldn't have smileys enabled with your shoutbox as it looks more like a casual chat room rather than a Customer Support Center. Just an idea anyhow.

Best Wishes,
David

[Jick]

Well, those both sound like great ideas! I think I'll do those. Thank you David!

Yeah I use MySQL on almost every page of my site. Almost all of the content on my site is dynamic. I have a extensive control panel which I created to manage the entire site. From the control panel I can add, edit, and delete announcements, faqs, link of the week, view service requests and much more. I made it like that so I could manage my whole site and keep it updated while I'm away and all I would need is a computer with a web browser and not a ftp client and all my files like it would have to be otherwise.

Yeah, Abyss Web Server has been very good to me. Its very simple to use and I have never had any problems with it. It can do just about anything I want to do webmastering wise.

[davidbrent]

I suits the job! The site is great well done. Glad i could help.


Best Wishes,
David

[Jick]

Well I'm glad you like it. I think this is the first site I have ever worked on for over a month. Mostly because the cp took a while to do.

Well does anybody else have any suggestions and/or comments for my site before I let this post go?