Please Review Site

lithriel

07-27-2007, 02:06 AM

I am making a template as a personal portfolio piece and I'd appreciate reviews.

http://www.ashleywalters.net/templates/business/businessasp/default.asp
This is the CSS file (http://www.ashleywalters.net/templates/business/businessasp/css/style.css)

Up for Review:

Design
Code
CSS
Accessibility
Usability

This site template is obviously targeted for an online business. I designed the site in Photoshop myself, the banner picture is mine, but the keyboard picture is a stock filler until I can take some more photos.

As you may notice, I am using ASP for the server-side technology. The code actually uses include files. The original ASP code is here:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Business Inc.</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />

</head>
<body>

<div id="wrapper">



<div id="content">
<div id="column">
<img src="images/computer.jpg" alt="Image of a man typing" />
<br />
<h3>Example Header</h3>
<ul>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
<li><a href="#">Example Link</a></li>
</ul>
</div>

<h1>Welcome to Business Inc.</h1>
<p> Lorem ipsum dolor sit amet, consectetuer <a href="#">adipiscing elit</a>. Nam id dui eget arcu volutpat suscipit. Ut mi nisl, mattis sit amet, iaculis laoreet, consequat at, mi. Integer congue. Phasellus nonummy mauris vel arcu. </p>

<p>Praesent congue sollicitudin neque. Mauris nec lorem sed orci tempus interdum. Mauris non ante.</p>

<h2>Quality Customer Service</h2>

<p>Etiam non nisi. Sed viverra leo vel quam. Ut mauris nisl, semper nec, consequat sit amet, commodo non, felis. Vivamus nibh. Sed sodales rutrum nunc. Phasellus non augue in metus mollis sagittis. </p>

</div>



</div>

</body>
</html>

Thank you all! :)

phpnewb

07-27-2007, 02:39 AM

Great design. I like the overall look of the page very simple, yet elegant. If you are worried about the code, see if the w3c validator picks anything up.

oracleguy

07-27-2007, 03:31 AM

Your links at the bottom could be done more semantically with an unordered list.

There is also about an inch of space after the bottom drop shadow, is that what you intended? If so, I'd cut it down to like 50 to 75% of what it is now.

lithriel

07-27-2007, 05:06 AM

K, fixed the links at the bottom, good catch oracleguy. I also toned down my spacing and fixed a bug in the process so thanks again oracle.

I spotted a problem while viewing the site with smaller font sizes in IE. A gap was occurring between the content div and the footer. The problem was the floating right column, which pushed the footer down, but the content background image stopped before the column reached the footer. This is of course due to floating. To get the effect of the image continuing around all content, I put the background image on the wrapper instead. Now all is well.

This obviously would have created a problem in IE any time the column had more content than the main content area beside it, which could very well happen if someone put lots of links there.

zro@rtv

07-27-2007, 08:50 AM

lookin good.
If I was going to nit pick:

design:
I'm not in love with the alignment in the secondary column (#column).
If it was me I would align the content (image and headline, if not the list as well) so they line up on either the left or right (preferably the left, I suppose).

Code:
markup:

I would think that the #bar links would work better as a ul as well.
I notice what I would refer to as the 'secondary' column (#column) comes semantically first in the markup, depending on actual content I would probably place it second.

asp:
...bah. I hate microsoft. (open and free standards forever!)

css:

I notice the links in #bar have blank images in the markup and then the images are placed in as BG with CSS. Is there a reason for this, I am not familiar with? If you are going as far as to use CSS to addd the images (which is probably what I would do anyway), why not use text in the anchor and and text-indent? ('Phark Image Replacement', I believe is the 'name')?
Also, using @import in your html doc or even in style.css would prevent older browsers with lame css support from attempting and failing to apply the css.

But ya, aside from my crazy esoteric, scraping for criticism, it looks good!
Hope my comments aren't silly, overly nit-picking, or mis-informed, and are perhaps helpful!

ahallicks

07-27-2007, 09:16 AM

I'd also consider preloading your rollovers as they all flashed for me before displaying the images. Adds to the 'professional' feel of a site. Otherwise, looks good, does the job, me likes.

sdcomputerz

07-27-2007, 09:22 AM

I think it is a very attractive layout and design for customers.

zro@rtv

07-27-2007, 09:39 AM

I forgot access ability.

You might consider adding accesskey attributes to at least primary navigation.

and on the note of 'preloading' mentioned earlier...
don't use JS for that, if you do.

there are multiple methods for avoiding JS for that including:

one image with multiple states that changes its attachment on rollover,
or using multiple images (normal state as bg of top element (li), hover state as bg of bottom element (ul), and li goes transparent on hover.)

Jonno

07-27-2007, 03:16 PM

Very smart but not sure about the grey background, its slightly depressing but it does go well with the rest of the layout, apart from that, looks really good. :thumbsup:

Jonno

lithriel

07-27-2007, 05:48 PM

zro@rtv, I like the idea of using multiple images to avoid the flicker on rollover. Thanks for the input! You are right, it is a little annoying the way I have it.

Also, I will add the link to jump to the content of the page. I did make an accessibility div with display:none to do that, but then haven't put anything in the page yet. I also am going to make a template page for a sitemap (without the secondary column) and provide print and handheld CSS files for better accessibility.

I will also look into making the icons into a list and line the elements in the secondary column up on the left.

Thank you all for your suggestions.