Website Review and Suggestions

**kylendm** · 10-04-2010, 06:09 PM

Hey guys I've been currently making a website for a client.

Here's his current website.

http://baroncustomamps.com

and this is my remodel of it.

http://bcas1.webs.com/index.html

It feels so empty for the main page. Anyone want to shoot me some ideas?

P.S. also I've been using :hover for the products page for the drop down. I realize that doesn't work in IE7. Anyone want to give me a tip so I can make the drop down work for most browsers?

HTML Code

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src="flexcroll.js"></script>
</head>
<body>
<div id="container">
    <div id="header">
<div id="logo">
</div> <!--End of logo-->      
        <div id="navMenu">
            <ul>
                <li>
                    <div id="navimage1"><a href="#"><img src="Images/home.jpg" width="100" height="40" border="0px"/></a>\
                    </div>
                </li>
            </ul> <!-- End of navMenu Image One-->
        
            <ul>
                <li>
                        <div id="navimage2"><a href="#"><img src="Images/about.jpg" width="100" height="40" border="0px"/></a>
                    </div>
                </li>
            </ul> <!-- End of navMenu Image Two-->

            <ul>
                <li>
                    <div id="navimage3"><a href="#"><img src="Images/products.jpg" width="100" height="40" border="0px" /></a>
                       </div>
                          <ul>
                            <li><a href="#"><img src="Images/MII.jpg" width="100" height="40" border="0px"/></a></li>
                            <li><a href="#"><img src="Images/K.jpg" width="100" height="40" border="0px"/></a></li>
                            <li><a href="#"><img src="Images/B.jpg" width="100" height="40" border="0px"/></a></li>
                        </ul>    
                </li>
            </ul> <!-- End of navMenu Image Three-->

            <ul>
                <li>
                        <div id="navimage4"><a href="#"><img src="Images/faq.jpg" width="69" height="40" border="0px"/></a>
                     </div>    
                </li>
            </ul> <!-- End of navMenu Image Four-->

            <ul>
                <li>
                        <div id="navimage5"><a href="#"><img src="Images/gallery.jpg" width="100" height="40" border="0px"/></a>
                       </div>  
                </li>
            </ul> <!-- End of navMenu Image Five-->

            <ul>
                <li>
                       <div id="navimage6"><a href="#"><img src="Images/cont.jpg" width="100" height="40" border="0px"/></a>
                    </div>   
                </li>
            </ul> <!-- End of navMenu Image Six-->
        
    <br class="clearFloat" />
    
    </div> <!-- End of navMenu-->
</div> <!-- End of header-->

<div id="box">
    <div id="boxLeft">
        <div id="boxName">
        </div> <!-- boxName-->
            <div class="flexcroll">
                <div id="boxLeftText">             
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sem erat, sed adipiscing diam. Curabitur massa nunc, dapibus vel imperdiet at, pharetra in est. Mauris eleifend ligula sed libero suscipit lacinia. Aenean pulvinar lacus ultrices diam vestibulum mollis. Quisque eu velit sed dolor iaculis euismod non sed lacus. Ut lobortis augue non orci sagittis volutpat. Vivamus lobortis molestie gravida. Fusce ac gravida orci. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec velit diam, porttitor sed ultricies eu, ullamcorper non ipsum. Proin suscipit facilisis consectetur.
<address></address>
Aliquam dignissim enim nec urna bibendum bibendum. Praesent volutpat dictum accumsan. Aliquam sodales metus in neque congue mattis. Fusce sed tempus libero. Morbi convallis turpis eget est convallis vestibulum. Nunc eget metus vel orci scelerisque sollicitudin id vitae massa. Etiam et diam ligula, ac consequat lectus. Curabitur mollis facilisis iaculis. Integer sit amet ligula vel quam aliquam convallis ut et tellus. Praesent tempor neque quis libero porta nec porttitor est commodo. Suspendisse in dictum orci. Donec dolor quam, malesuada quis malesuada sit amet, congue et ipsum. Fusce lobortis metus ac dolor vestibulum in varius velit tincidunt. Nunc auctor bibendum ipsum, a auctor purus ullamcorper id. Morbi varius turpis eget erat posuere vitae tincidunt sapien interdum.
<p>
Aliquam ac eros neque, a facilisis lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla viverra sagittis odio at cursus. Suspendisse potenti. Nunc vitae est ac felis pulvinar interdum. Nulla facilisi. Praesent malesuada ultrices arcu dignissim euismod. Aenean eleifend libero sem, vel condimentum urna. Nunc consequat lacus sit amet nisl bibendum eu condimentum orci aliquam. Nam mattis metus vel sem accumsan sollicitudin. Phasellus rhoncus imperdiet luctus. Cras viverra nisi sed justo vehicula convallis. Curabitur placerat convallis justo tristique volutpat. Curabitur ac suscipit ligula. Mauris commodo commodo ligula sed feugiat. Sed tempus, lacus et tempor viverra, dolor mauris commodo massa, et porttitor eros est et justo. Vivamus feugiat varius quam nec egestas. Aenean nibh nisl, mattis quis consectetur at, tempus quis sem. Duis id nulla urna, congue egestas velit. Fusce fermentum elit in velit luctus nec egestas nunc porttitor.
<p>
Nulla laoreet ante ut lorem rhoncus non porttitor lacus condimentum. Nunc imperdiet venenatis ipsum, eu scelerisque mi elementum nec. Sed bibendum aliquet magna, non condimentum augue consequat in. Morbi convallis sapien ut dui pretium quis hendrerit mauris dignissim. Proin id est nec lectus gravida auctor ut tincidunt felis. Aliquam tincidunt mi ligula, sit amet consequat odio. Etiam ut tortor eu purus dignissim hendrerit. Mauris id erat pretium nulla lobortis egestas sit amet non justo. Nunc fermentum odio neque. Donec ultrices odio sit amet diam malesuada quis luctus arcu malesuada. Duis tincidunt massa pellentesque odio rhoncus ut tincidunt eros iaculis.
<p>
Etiam mattis enim nec mi fringilla sit amet iaculis orci feugiat. Sed porta, tellus non tristique cursus, erat purus auctor lorem, in molestie justo quam nec est. Vestibulum sagittis est quis odio iaculis dictum pulvinar turpis vestibulum. Donec sed arcu lectus. Nulla facilisi. Fusce ultricies metus a sapien tristique convallis. Etiam pellentesque libero ut magna lobortis porta. Phasellus nisi ante, pulvinar posuere tincidunt eget, bibendum nec quam. Cras nisi magna, egestas quis pellentesque eget, interdum at lectus. In eget sem id turpis posuere volutpat eu vitae ante. Nulla tincidunt libero non tellus varius porttitor iaculis massa tincidunt. Nullam gravida nunc ac ante commodo auctor. Sed rutrum, est sit amet ornare aliquet, erat tortor eleifend sem, a condimentum ante enim nec libero. In porttitor venenatis lorem convallis volutpat. In hac habitasse platea dictumst. Aliquam sagittis, felis eget faucibus posuere, orci ante laoreet erat, ut elementum dui felis et est. Phasellus bibendum mollis iaculis. Curabitur vestibulum augue eu mauris fermentum faucibus. Ut dignissim, purus non venenatis congue, nisl erat semper nunc, quis sagittis tellus ante non nisi. Integer tempor orci sed felis aliquam commodo. 
                </div> <!--End of boxLeftText-->
            </div> <!--End of flexcroll-->
        </div> <!--End of boxLeft-->
        
<div id="boxRight">
    <div id="boxNameRight">
    </div> <!--End of boxNameRight-->
        <div id="boxRightText">
<object width="190" height="153"><param name="movie" value="http://www.youtube.com/v/Hr3bcyxvQrw?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value=                "always"></param><embed src="http://www.youtube.com/v/Hr3bcyxvQrw?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="190" height="153"></embed></object>
            <p></p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec sem erat, sed adipiscing diam. Curabitur massa nunc, dapibus vel imperdiet at, pharetra in est. Mauris eleifend ligula sed libero suscipit         lacinia. Aenean pulvinar lacus ultrices diam vestibulum mollis. Quisque eu velit sed dolor iaculis euismod non sed lacus. Ut lobortis augue non orci sagittis volutpat. Vivamus lobortis molestie gravida. Fusce ac gravida orci. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec velit diam, porttitor sed ultricies eu, ullamcorper non ipsum. Proin suscipit facilisis consectetur.
                <p></p>
        </div><!--End of bixRightText-->
    </div><!--End of boxRight-->
</div><!--End of container-->
</body>
</html>

CSS Code

HTML Code:

@charset "utf-8";
/* CSS Document */
#container
{
    margin-top:20px;
    padding:0;
    position:relative
    }
body
{
    background:url(Images/BG.jpg) repeat left;
    margin: auto;
    width:936px;
    padding:0;
}
#header
{
    height:114px;
    margin-left:-5px;
    width:950px;
}
#logo
{
    background-image:url(Images/Logo.jpg);
    background-repeat:no-repeat;
    height:120px;
    width:314px;
    float:left;
}
#seperator
{
    background-image:url(Images/seperator.jpg);
    background-repeat:no-repeat;
    width:1px;
    height:35px;
}
#navimage1
{
    padding-right:-10px;
}
#navimage2
{
    padding-right:15px;
}
#navimage3
{
    padding-right:0px;
}
#navimage4
{
    margin-right:-15px;
}
#navimage5
{
    margin-right:0px;
}
#navimage6
{
    margin-right:10px;
}
#navMenu
{
    padding-top:34px;
    margin-right:10px;
}
#navMenu ul
{
    margin-:0;
    padding:0;
    line-height:26px;
        color:#1e1e1e

}
#navMenu ul ul
{
    position:absolute;
    visibility:hidden;
    top:80px;
    left:430px;
        color:#1e1e1e

}
#navMenu ul li:hover ul
{
    visibility:visible;

}
#navMenu li
{
    margin:0;
    padding:0;
    list-style:none;
    float:left;
        color:#1e1e1e

}
#navMenu ul li a
{
    text-align:center;
    height:40px;
    width:100px;
    display:block;
    color:#1e1e1e
}
#box
{
    width:936px;
    height:750px;
    }
#boxLeft
{
    background-image:url(Images/leftbody.jpg);
    background-repeat:no-repeat;
    color:#FFF;
    float:left;
    width:684px;
    height:750px;
    }
#boxLeftText
{
    width:605px;
    height:900px;
    margin-left:59px;
    margin-right:20px;
    }
#boxRight
{
    margin-top:1px;
    background-image:url(Images/rightbody.jpg);
    background-repeat:no-repeat;
    width:252px;
    color:#FFF;
    float:right;
    height:750px;

    }
#boxRightText
{
margin-left:14px;
margin-top:8px;;
    margin-right:46px;

    }
    #boxRightTextText
{
margin-left:14px;
margin-top:8px;;
    margin-right:46px;
    height:200px;
    width:200px;

    }
#boxName
{
    margin-top:20px;
    margin-left:300px;
    background-image:url(Images/welcome.jpg);
    background-repeat:no-repeat;
    widows:140px;
    height:40px;
    }
    #boxNameRight
{
    background-image:url(Images/news.jpg);
    background-repeat:no-repeat;
    height:35px;
    widows:93px;
    margin-left:57px;
    margin-top:23px;
}
.clearFloat
{
    clear:both;
    margin:0;
    padding:0;
}
/*Scroll options */
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 10px;
height:300px !important;
margin-top:130px;
background-color: white;
}
.vscrollerbar {
width: 10px;
background-color: #1e1e1e;
}
.hscrollerbase {
height: 10px;
background-color: white;
}
.hscrollerbar {
height: 10px;
background-color: black;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}
.flexcroll
{
    height:600px;
    margin-right:-1px;
}
address
{
    margin-left:40px;
    margin-right:40px;
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted
}

**mlovet1** · 10-04-2010, 06:30 PM

Definitely need some better graphics happening on the home page (specifically, flashy photos of the actual amps) to catch some attention quick/generate legitimate interest. But I gotta say, much better improvement to the original design.

**kylendm** · 10-04-2010, 09:30 PM

Hey, thanks for the advice. I've been pretty stuck as far as ideas go.

I updated it a bit. What do you think?

I think it feels too crowded in some areas now and not enough in others.

**asylum119** · 06:51 AM

A lot less clutter now
Visually their is a lot of text on the main page, could you maybe put like a bullet line between each product but instead of a bullet maybe a thin pic of the different products ?

I am using safari and i have to scroll down for the main page text

**davemies** · 10-05-2010, 07:25 AM

yeah put one or two images on the left so the text flows round it.

your first-line of each paragraph indent is only needed if you have no vertical margins between paragraphs. you should take those out.

i don't like that text scroller either - it's clunky.why not just let the divs expand?

the you tube vid is nice but a downloadable good quality mp3 might be a nice addition so you can get a better idea of what the amp sounds like (nice guitar playing!)

wish that i could play guitar

**kylendm** · 10-05-2010, 10:35 AM

Quote:

Originally Posted by asylum119

A lot less clutter now
Visually their is a lot of text on the main page, could you maybe put like a bullet line between each product but instead of a bullet maybe a thin pic of the different products ?

I am using safari and i have to scroll down for the main page text

Well the welcome page is mainly just information on what he does. I wanted to use the information on main page of his welcome site but there isn't much info there.

So do you mean a bullet line after each paragraph?

Quote:

Originally Posted by davemies

yeah put one or two images on the left so the text flows round it.

your first-line of each paragraph indent is only needed if you have no vertical margins between paragraphs. you should take those out.

i don't like that text scroller either - it's clunky.why not just let the divs expand?

the you tube vid is nice but a downloadable good quality mp3 might be a nice addition so you can get a better idea of what the amp sounds like (nice guitar playing!)

wish that i could play guitar

I see what you mean about the images. I'll try that tonight, thanks.

Yeah indents are gonna go. I decided that this morning actually haha.

The reason I didn't want to let the divs expand is because I wanted the site to be similar in every page. I might do that though because his products have a lot of details.

Thanks for the help guys, I'll work on it a little more and see what you guys think!

**kylendm** · 10-05-2010, 12:20 PM

Alright I was able to do most of the things you guys said and I think a lot of it worked very well. Check it out.

**FloodFixer** · 10-05-2010, 03:28 PM

It's looking good, but I think I would add a multi-gradient for the background - a little abstract or what not - something to bring out some color for the site

Also your box corners should be graphics - it will add more depth, and you can even add a little light source reflection, shadow, emboss etc. to give your box a better 3d feel.

And lastly, I would suggest a different font for the main body text - especially the title "Welcome" should be in the same font you use for the menu

**kylendm** · 10-05-2010, 05:38 PM

Yeah, I changed the welcome and news back to graphics as I did that earlier but I didn't think it fit. I'll work on background and overall structure tonight.