Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts

    Please Review Site

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

    http://www.ashleywalters.net/templat...sp/default.asp
    This is the CSS file

    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:


    Code:
    <%@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">
    
     <!--#include file="common/head.asp" -->  
     
    <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>
     
    <!--#include file="common/footer.asp" -->
     
    </div>
    
    </body>
    </html>

    Thank you all!

  • #2
    New Coder
    Join Date
    Nov 2006
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Need help with your tennis game visit the Chattennis.com tennis forums, tennis chat, and tennis articles.

  • #3
    Rockstar Coder
    Join Date
    Jun 2002
    Location
    USA
    Posts
    9,074
    Thanks
    1
    Thanked 328 Times in 324 Posts
    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.
    OracleGuy

  • #4
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts
    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.

  • #5
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    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!
    Last edited by zro@rtv; 07-27-2007 at 08:52 AM. Reason: this is my 404th post so I reallly want to type error, file not found somewhere...
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #6
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    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.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #7
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think it is a very attractive layout and design for customers.
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #8
    Regular Coder zro@rtv's Avatar
    Join Date
    Feb 2005
    Location
    on the network
    Posts
    433
    Thanks
    0
    Thanked 1 Time in 1 Post
    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:
    1. one image with multiple states that changes its attachment on rollover,
    2. 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.)
    ._-zro
    zro@redtv
    zro.redtv.org

    "If HTML and the Web made all the online documents look like one huge book, RDF, schema, and inference languages will make all the data in the world look like one huge database"
    -Tim Berners-Lee, Weaving the Web, 1999

  • #9
    New Coder
    Join Date
    Jun 2007
    Location
    Hampshire Uk
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Jonno

  • #10
    New Coder
    Join Date
    Jul 2007
    Location
    USA
    Posts
    83
    Thanks
    6
    Thanked 7 Times in 7 Posts
    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.


  •  

    Posting Permissions

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