Old site needs a little updating

M

mrnicks

New Member
First off hello to all. This is my first post to this site. I was an active member of another web dev site and it slowly died out. But, anyways I have this site that needs a little updating. Check it out and I'd appreciate all the insight you guys can give.

www.pace-equipment.com
 
M

mrnicks

New Member
Wow, thanks for all the input. I really appreciate it. I can now really work on getting the site improved. Thanks for steering me in the right direction.
 
JMCDesigner

JMCDesigner

Member
Your navigation isn't very SEO friendly, and as soon as javascript is disabled the whole thing isnt going to work properly. You can achieve the same effect by using css and no javascript whatsoever. and it will be SEO friendly. Put all your stylings in an external css stylesheet. Get a book on Graphic Design. There is a lot of wasted space on your homepage (at the bottom). Your sitemap is overly spammed with keywords, you could be penalised by search engines for this, and your ranking will go way down. Try using fonts that all browsers will be able to display by default (verdana, arial, times new roman). You have used a non standard font i.e engravers MT on your homepage.
 
B

Blue Archer

New Member
Get rid of the white space on the bottom of the home page. Add more content to the home page. Change the navigational images from jpeg to png to get rid of compression. Fix the formatting of your site map so it is more SEO friendly.
 
M

mrnicks

New Member
Thanks a lot, that's the criticism I was looking for. What exactly do you mean by "white space" on the home page? Just too much blank space? Should I just shorten the height to remove the "white space"? As for the sitmap, I used a program to create it "site map pro". I take that it sucks and isn't formatting the file properly? On my google webmasters account it shows accepted. As for the keywords, are there too many? I was in the process of tweaking them "per page". We want to be found by as many of those words as possible, is not a good thing? And the navigation is definitely going to be changed, I've been brainstorming on that. I was thinking about either creating a flash nav bar or creating a sliced image nav bar. What is more SE friendly? I have to say I did not build this site and I already changed it quite a bit since I've had my hands on it. I cut the load time down on every page drastically, the images were massive. There were like 1000x whatever and scaled which sucked. The nav buttons were huge gifs that I changed to 1/16 of the file size with jpgs. It was originally built in frontpage and had a bunch of cgi that was entirely unnecessary.
 
M

mrnicks

New Member
Do I really want to change my jpgs to png's? It'll get rid of compression but also increase file size.


I'm not quite sure how my sitemap is spammed with keywords, all I see is links and titles. Am I missing something?

I really appreciate the help.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Switching your images to png shouldn't increase file size. Using CSS is an excellent idea, and I would look into image sprites for the navigation. This way you have one png image that will contain all the buttons. One single file is better than 5 or 6.

I also suggest using the Firefox browser. Arguable the best browser available today...you can install a plugin that is called "Yslow". This gives you performance stats on any web page and, more specific to the image issue, it comes with a tool called "Smush It". Smush It will take all the images on a given page and compress them. Then it will provide you with a link where you can download these optimized images. Best part its all free!
 
M

mrnicks

New Member
I use photoshop to edit my images and "save for web" to save. I look at all the different formats and choose the one that looks the best and has the fastest load time. Jpg was the fastest for those nav buttons. They were poorly sized huge gif's. But like I said before that's going bye bye in place of one sliced up image. Is using the save for web function a bad way to calculate load time and file size? Also, I'm still kinda confused about the sitemap issue.

As for Firefox I've actually been using it since I think version 0.6 when it had a little red dinosaur in the corner and came with a ftp client and built in html editor! The olden days. I think it was also called firebird or something like that I swear the first version was a different name. But anyway thanks for the plug-ins.


I probably should add I do have a pretty strong computer science background. Being a CCNP, MCSE, A+, Network+, and soon to be Linux+. I would really like to get my W3C cert. too. The only problem is not enough time at the moment to study, I just moved into a new house.

I really appreciate all the insight you guys are giving.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
When the images are saved individually they might be larger in size (especially if you are choosing 24 bit png). I mentioned image sprites because you can have one image that you just position around inside the tabs. This image will contain the static and rollover effect for every tab. Plus if you go with all image navigation, it is still a good idea to have anchor text in the links (even if it is not visible) Here is an example of css image sprites for you nav:

HTML
HTML: 
<ul id="navbar">
    <li id="home"><a href="#">Home</a></li>
    <li id="about"><a href="#">About PACE</a></li>
    <li id="products"><a href="#">Standard Products</a></li>
    <li id="options"><a href="#">Options / Accessories</a></li>
    <li id="projects"><a href="#">Custom Projects</a></li>
    <li id="contact"><a href="#">Contact PACE</a></li>
</ul>

CSS
Code: 
ul#navbar {
position:relative;
background:url(nav_sprite.png) 0 0 no-repeat;
width:606px;
height:58px;
}
ul#navbar li {
list-style-type:none;
}
ul#navbar li a:link, ul#navbar li a:visited {
position:absolute;
top:0;
text-indent:-3000px;
overflow:hidden;
height:58px;
width:90px;
}
ul#navbar li a:focus {
outline:0;
}
ul#navbar li#home a:link, ul#navbar li#home a:visited {
left:33px;
width:90px;
}
ul#navbar li#home a:hover, ul#navbar li#home a:focus {
background:url(nav_sprite.png) -33px -61px no-repeat;
}
ul#navbar li#about a:link, ul#navbar li#about a:visited {
left:123px;
}
ul#navbar li#about a:hover, ul#navbar li#about a:focus {
background:url(nav_sprite.png) -123px -61px no-repeat;
}
ul#navbar li#products a:link, ul#navbar li#products a:visited {
left:213px;
}
ul#navbar li#products a:hover, ul#navbar li#products a:focus {
background:url(nav_sprite.png) -213px -61px no-repeat;
}
ul#navbar li#options a:link, ul#navbar li#options a:visited {
left:303px;
}
ul#navbar li#options a:hover, ul#navbar li#options a:focus {
background:url(nav_sprite.png) -303px -61px no-repeat;
}
ul#navbar li#projects a:link, ul#navbar li#projects a:visited {
left:393px;
}
ul#navbar li#projects a:hover, ul#navbar li#projects a:focus {
background:url(nav_sprite.png) -393px -61px no-repeat;
}
ul#navbar li#contact a:link, ul#navbar li#contact a:visited {
left:483px;
}
ul#navbar li#contact a:hover, ul#navbar li#contact a:focus {
background:url(nav_sprite.png) -483px -61px no-repeat;
}
 
M

mrnicks

New Member
Thanks for the sprite code. It helped me understand a lot. I'm redesigning the graphics at the moment then I'm going to use you method of css. How do you feel about image slicing?
 
You must log in or register to reply here.
Top