Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Web site re-design opionions please

Chacala_Nayarit

Chacala_Nayarit

macrumors 6502
Original poster
Oct 6, 2005
315
0
Lakewood, Washington
Hello,

I am re-designing this site, which is my dad's company, and would appreciate critism.

The design is mostly using CSS, a few tables, JavaScript, and XHTML. I need to work on validating the code, however a huge JavaScript on the index page is "giving me a headache". The site works best on Firefox (big shocker there!), IE7 is a bit funky, IE6 is "passable", and IE5 not at all.

I would like to hear from Safari users too.

Thanks :)

edit: a few pages are not finished.
 
Hi,
Please bear in mind that these are the comments of an amateur who does webdesign as a hobby:)

I like the way that you have seperated the content from the design, and even with css disabled the site is still readable. I have viewed in Safari and firefox and it renders fine in both. I also like the fact that the phone number of the company is prominently displayed.

However, I am not too sure about the design of the site. It is very cluttered for what is essentially a small site. The background image (bg.jpg) is too busy, maybe something more plain, simple. I am not too sure about the logo either. maybe a more stylized sketch of Mt. Rainier with a more up to date font for the company name.

I feel that the navigation area of the site is not intuitively easy to use. If it was my site, I would definitley have links to other pages on the site made more prominent, maybe different placing and css rollovers?

I really don't think you need a google site search on a site of this size and the google ads, I think really detract from the content.

The picture of the day is not really a picture of the day as it is just the same pic as in the logo and doesn't change. Your javascript slideshow is your actual picture of the day, but it just looks a bit random plonked in the middle of the page. I also think that the code for your javascript slideshow is huge to be on the index page. Have you ever thought about unobtrusive javascript. Same principle as embedded style sheets, just for behaviour. Jeremy Keith has a very good article about it on a list apart.

Furthermore, I really don't think that in this day and age there should be visible counters on the index page of a site, very 90's, they went out with animated gifs.

Generally speaking I think that you could make the design of this site a lot simpler while at the same time getting the message of the company across a lot more powerfully.

I hope that you take these comments in the spirit that they are intended.

Good luck.
 
it's a big improvement over what was there before, so well done on that count.

In the words of Henry David Thoreau however, ... Simplify, simplify, simplify.

The logo is fugly. If redesigning it is not an option, at least get rid of the web address in the mountain pic, which will help clean it up a little. Move the tag-line "The Home of Quality Electric Supplies!" up and under the name

Get rid of the photo of the day - it serves no purpose and just complicates the site unnecessarily. There seem to be many elements like this on the site that you've included just because you could, rather than because the site needed them.
Concentrate on the basics - why have the business' customers come to the site, what do they want to know? Answer these questions first, and don't put things on the site that make it more difficult for them to find what they came there for (however nice they might seem as friendly "extras").

Not sure why you have sponsors on a commercial site.. more confusion. Google ads are passable, but the big Firefox logo is intrusive. Visitors don't need or want to be told what browser to use. It's up to you to build the site for whatever they want to use. If it doesn't work, it should be your problem, not theirs.

Lose the counter. Doesn't work with the design, is of no interest to your customers and if the numbers are low, can only serve as an embarrassment. If you need stats, get them from the server logs. Counters are a bad guide to visit numbers in any case.

Don't have a news pane unless there is regular news, and don't talk about what failed on the site (the forum) or what's coming up until you're ready to implement it.

Save your product Photo gallery pics for the product page and lose the gallery page altogether (esp. the flying beer!)

Include the About Us and Home links in with the rest of the nav pane. Two navigation sets is confusing (i didn't even see it first time through). The About Us page could include the store pictures from the gallery

Contact us could include the map and driving directions pages rather than them being separate, or they could be made into a separate Visit our Store page.

Lose the Links page - if it's meant to be a site map it should be called that, but the site isn't big enough, and shouldn't be complicated enough to need one.

The product line page has a totally different layout to the other pages..
Try and build one template page for the header, nav and footer, and keep that consistent across the site.

I hope all this is not overly harsh... like I said, you've improved it a great deal over the original, a bit more work and it will be even better.

(and I hope you're out of the shelter now :) )
 
The previous poster had it right on. I pointed out thing that hit me and added a few comments I had. Remember why you are making this site. You are selling electrical and lighting supplies...not entertaining. A visitor is already looking for those supplies and they want you to give them a reason to buy from you.

frankblundt said:
simplify, simplify.
Click to expand...
SIMPLIFY! This can be said about so many pages out there. If the feature has no application to the business...it shouldn't be there. A cluttered page will confuse those who are reluctant to technology already and they may click away. Why have photos of the day, news, and stuff that does not matter?
The logo
Click to expand...
The backgrond in the logo graphic does not page the page background. Thats a simple fix that can make a big difference.
Visitors don't need or want to be told what browser to use. It's up to you to build the site for whatever they want to use. If it doesn't work, it should be your problem, not theirs.
Click to expand...
Imagine telling a Mac user Windows is better than OS X or vice versa. Not a good idea.
Lose the counter.
Click to expand...
I feel that counters are for those looking to show off. The only person that needs to be concerned about any counting is you and the business...not the public.

Lose the Links page - if it's meant to be a site map it should be called that, but the site isn't big enough, and shouldn't be complicated enough to need one.
Click to expand...
You are the business. You want them to stay around. Unless you are selling product on the site, your duty is to get them to the physical store and convert visitors to sales. Your visitors landed at your feet, dont give them ways to get elsewhere. No Links...NO GOOGLE SEARCH TOOL! If a visitor uses that search tool that you were so kind to provide..it means you just lost a sale. I would also not use google ads because they base advertising on your page content...in other words...suggest other places to buy the very thing you are trying to sell. If that was intended as a site map... Your menu already has all the pages listed...why be redundant?

Don't let our critiques get you down, its a learning experience.
 
Hmm, some things I would do:

  • Lose the picture of the Day.
  • Lose the FireFox thing.
  • Lose the google thing.
  • Lose the news. Replace it with a news page, but only if there is actually news to give, as in, actually important to people patronizing your store.
  • Lose the patterned background. Solid colors!
  • The logo on the web site should, you know, match the logo on the physical store.
  • Chose one or two fonts, and use only those fonts on everything.
  • De-bold what appears to be the main content in the middle of the page.
  • Take the location address, make it smaller, and put it on the bottom, near the copyright.
  • Lose the counter.
  • Now that I look at the copyright, center that.
  • Its FAQ, not FaQ

Just what I would do...
 
Thanks for the replies! I wanted harsh critism, as this is my only commercial design I have designed.

They want the links page to the customers, city, state, sites and stuff. It will be a sitemap for Google bot to oggle over. :)

The ads are making us a few dollars a day, but I was told not to include them on the index or products pages. Firefox logo makes a dollar per click and install for Windows users, and has brought us, sometimes, twenty dollars a day.

They want the photo gallery. Yeah some pics on the products page is a good idea.

I tried to get pictures of the staff, but they are not willing to pose, oh well. :rolleyes:

Can the slideshow JavaScript be external? The company and vistors love the slides. In IE it fades into the next picture.

Yeah the background sucks. I am using GIMP 2.2 for image software, and it is kind of limiting compared to PhotoShop, but gets the job done.

I offered to open an online store, but they are not willing to do that.

Question: Does anybody know Google API JavaScript programing for the Map page? I am trying to make it interactive, and zero in on the store location.

Thank you to all again!
 
frankblundt said:
it's a big improvement over what was there before, so well done on that count.

In the words of Henry David Thoreau however, ... Simplify, simplify, simplify.

The logo is fugly. If redesigning it is not an option, at least get rid of the web address in the mountain pic, which will help clean it up a little. Move the tag-line "The Home of Quality Electric Supplies!" up and under the name

Get rid of the photo of the day - it serves no purpose and just complicates the site unnecessarily. There seem to be many elements like this on the site that you've included just because you could, rather than because the site needed them.
Concentrate on the basics - why have the business' customers come to the site, what do they want to know? Answer these questions first, and don't put things on the site that make it more difficult for them to find what they came there for (however nice they might seem as friendly "extras").

Not sure why you have sponsors on a commercial site.. more confusion. Google ads are passable, but the big Firefox logo is intrusive. Visitors don't need or want to be told what browser to use. It's up to you to build the site for whatever they want to use. If it doesn't work, it should be your problem, not theirs.

Lose the counter. Doesn't work with the design, is of no interest to your customers and if the numbers are low, can only serve as an embarrassment. If you need stats, get them from the server logs. Counters are a bad guide to visit numbers in any case.

Don't have a news pane unless there is regular news, and don't talk about what failed on the site (the forum) or what's coming up until you're ready to implement it.

Save your product Photo gallery pics for the product page and lose the gallery page altogether (esp. the flying beer!)

Include the About Us and Home links in with the rest of the nav pane. Two navigation sets is confusing (i didn't even see it first time through). The About Us page could include the store pictures from the gallery

Contact us could include the map and driving directions pages rather than them being separate, or they could be made into a separate Visit our Store page.

Lose the Links page - if it's meant to be a site map it should be called that, but the site isn't big enough, and shouldn't be complicated enough to need one.

The product line page has a totally different layout to the other pages..
Try and build one template page for the header, nav and footer, and keep that consistent across the site.

I hope all this is not overly harsh... like I said, you've improved it a great deal over the original, a bit more work and it will be even better.

(and I hope you're out of the shelter now :) )
Click to expand...
mmzplanet said:
The previous poster had it right on. I pointed out thing that hit me and added a few comments I had. Remember why you are making this site. You are selling electrical and lighting supplies...not entertaining. A visitor is already looking for those supplies and they want you to give them a reason to buy from you.


SIMPLIFY! This can be said about so many pages out there. If the feature has no application to the business...it shouldn't be there. A cluttered page will confuse those who are reluctant to technology already and they may click away. Why have photos of the day, news, and stuff that does not matter?

The backgrond in the logo graphic does not page the page background. Thats a simple fix that can make a big difference.

Imagine telling a Mac user Windows is better than OS X or vice versa. Not a good idea.

I feel that counters are for those looking to show off. The only person that needs to be concerned about any counting is you and the business...not the public.


You are the business. You want them to stay around. Unless you are selling product on the site, your duty is to get them to the physical store and convert visitors to sales. Your visitors landed at your feet, dont give them ways to get elsewhere. No Links...NO GOOGLE SEARCH TOOL! If a visitor uses that search tool that you were so kind to provide..it means you just lost a sale. I would also not use google ads because they base advertising on your page content...in other words...suggest other places to buy the very thing you are trying to sell. If that was intended as a site map... Your menu already has all the pages listed...why be redundant?

Don't let our critiques get you down, its a learning experience.
Click to expand...
dpaanlka said:
Hmm, some things I would do:

  • Lose the picture of the Day.
  • Lose the FireFox thing.
  • Lose the google thing.
  • Lose the news. Replace it with a news page, but only if there is actually news to give, as in, actually important to people patronizing your store.
  • Lose the patterned background. Solid colors!
  • The logo on the web site should, you know, match the logo on the physical store.
  • Chose one or two fonts, and use only those fonts on everything.
  • De-bold what appears to be the main content in the middle of the page.
  • Take the location address, make it smaller, and put it on the bottom, near the copyright.
  • Lose the counter.
  • Now that I look at the copyright, center that.
  • Its FAQ, not FaQ

Just what I would do...
Click to expand...
Listen to these people. These suggestions will make your site far better than it currently is. Implement as much of this as possible. As the designer, sometimes you'll have to struggle with the client... but it's your job to design the site, not theirs. That's what they hired you for. Try talking to them and offering some reasons as to why these suggestions are worth implementing.
 
Okay,

Counter is gone, the background is now a solid color, FaQ is now FAQ, I am making a sperate stylesheet for the product page (looking similiar to the other, but two column), the copyright is centered.

The Google stuff is staying. They want it. :rolleyes:
 
I don't know if anyone mentioned this but there is a typo in the word "sponser" . I think it should be "sponsor"
 
There is another error under the advertisers section:

advertise of this site!

Should be:

advertise on this site!
 
slowly, slowly getting there.

How about losing the background colour altogether, it's really not adding anything and to my mind is an unnecessary distraction (esp. the way it makes the logo look like its cut into the page, just leave it white.

Much better now that the site logo is their actual logo, but man is it fugly. They need help. And it looks suspiciously like you cut it out of the photo and tweaked it a bit to get rid of the background. Does it really have to be on that blue background? (I'm not a fan of that blue in case you hadn't guessed :p ) And trapped in an airless box?

You still have two navigation sections... that now duplicate pages :confused: )

Put "Phone:" in front of the Phone number (and do they have a free-phone number?) and maybe on it's own line.

You realise your central column goes to hell when its bunched up in a small window? (mainly the address line and the picture)

Ideally the page should have a minimum width of 750-800 pixels (and work well at that size) given that's what at least some of your customers will have their screens set at - i'm assuming that people who want electrical supplies are not necessarily also likely to have the latest video cards and monitors. There aren't too many people still on 640x480 these days, but still a reasonable number on 800x600.

Better yet, make the page size minimum larger so that the browser cuts off the sponsor section.. or at least make that column narrower (please)

And your style sheet is butting the type right up against the left and right hand margins (on the FAQ page), give it some room to breathe.
 
frankblundt said:
slowly, slowly getting there.

How about losing the background colour altogether, it's really not adding anything and to my mind is an unnecessary distraction (esp. the way it makes the logo look like its cut into the page, just leave it white.

Much better now that the site logo is their actual logo, but man is it fugly. They need help. And it looks suspiciously like you cut it out of the photo and tweaked it a bit to get rid of the background. Does it really have to be on that blue background? (I'm not a fan of that blue in case you hadn't guessed :p ) And trapped in an airless box?

You still have two navigation sections... that now duplicate pages :confused: )

Put "Phone:" in front of the Phone number (and do they have a free-phone number?) and maybe on it's own line.

You realise your central column goes to hell when its bunched up in a small window? (mainly the address line and the picture)

Ideally the page should have a minimum width of 750-800 pixels (and work well at that size) given that's what at least some of your customers will have their screens set at - i'm assuming that people who want electrical supplies are not necessarily also likely to have the latest video cards and monitors. There aren't too many people still on 640x480 these days, but still a reasonable number on 800x600.

Better yet, make the page size minimum larger so that the browser cuts off the sponsor section.. or at least make that column narrower (please)

And your style sheet is butting the type right up against the left and right hand margins (on the FAQ page), give it some room to breathe.
Click to expand...


Yeah their logo is fugly, but that's on them. I asked them who designed their logo, and nobody knows. :rolleyes:
Yeah I cut it from a jpg I took of their sign, however they like it. The background is being changed to #ffffff.
We are having a party at the store as I write and design their page. i am drinking Mike's Hard Lemonade. :D

Thank you to all whom have pointed out the typos.
 
maybe white is just too harsh. how about the fawn background instead - that would get rid of at least one of the box borders on the page.

The photos up the top are a nice touch, but the logo is getting lost in the busyness now. If the logo could be either a little bigger, or without the blue background and with a little more "air" around it, it would stand out more. The tagline in the logo looks like a pretty basic font and shouldn't be hard to recreate as a cleaner, better kerned version that would also stand out more.

rainer.jpg

see what i mean about the squash problem?
 
frankblundt said:
maybe white is just too harsh. how about the fawn background instead - that would get rid of at least one of the box borders on the page.

The photos up the top are a nice touch, but the logo is getting lost in the busyness now. If the logo could be either a little bigger, or without the blue background and with a little more "air" around it, it would stand out more. The tagline in the logo looks like a pretty basic font and shouldn't be hard to recreate as a cleaner, better kerned version that would also stand out more.



see what i mean about the squash problem?
Click to expand...
Is the squash in Safari Browser? It looks fine in Firefox and IE as long as the resolution is 1024 X 786 or more. In 800 X 600 it looks like the photo.
 
That's my point - it shouldn't look like that at 800x600. Many people are still browsing using PCs that are limited to that as a screen size, or don't want the browser taking up the whole screen, and I suspect that electrical supplies customers are among them.
 
frankblundt said:
That's my point - it shouldn't look like that at 800x600. Many people are still browsing using PCs that are limited to that as a screen size, or don't want the browser taking up the whole screen, and I suspect that electrical supplies customers are among them.
Click to expand...

I am redoing the site CSS to 800px and two column. Works fine at 800 X 600, except it fills the screen - oh well.
 
Chacala_Nayarit said:
I am redoing the site CSS to 800px and two column. Works fine at 800 X 600, except it fills the screen - oh well.
Click to expand...

I usually do my pages at a width slightly less than 800. Because an open browser window on 800 x 600, even at full screen, is still slightly less than 800 pixels wide. I usually go for 750 or 775.
 
Wait! Stop!

You've gone too far Cap'n!

The current view of http://www.rainiersupply.com is attached to this post. You've changed it to so minimalistic, that it doesn't read as a professional business anymore.

This site, and the one discussed previously are two separate animals... It's like the feedback has to start all over again. Is this site your new version, or is there some glitch?
 

Attachments

  • Ranier.JPG
    Ranier.JPG
    96.9 KB · Views: 94
the three column was fine, and changing it has screwed up all the other pages! Just make sure that the central column will hold your content at that size and make the nav and advertising columns thinner. If the nav is going to stay up the top, at least spread it out and separate the links with | characters.

One of the advantages of using tables over div blocks and css for layout is the ability to fix minimum and maximum column widths for three column layouts, so that on smaller screens, the right hand column gets pushed off the page.

not that I'm recommending it per se, but until IE catches up with CSS there's no point being a W3C purist if it's going to screw up your design and you can achieve a better, more stable layout using deprecated techniques. Not such a problem with two columns.

I didn't mind your old page, and like mrj says, this current version is perhaps a little too simple. Or maybe just not simple enough. You might get away with it if the page background and the content background matched so that it's less obvious that the content is trapped in a box.

Most people on 800x600 screens will have the browser at full screen anyway so that's not such a big deal - only as dpaanlka said, the actual screen view they'll get, once you take out IE's ridiculous menu bars and the OS menu bars, the actual browser content window will be much smaller - 750x450 or so.

And fix that bloody logo, please!

And i hope you kept a screen shot of what the original looked like before you started.
 
With any page element, but especially structural ones like borders, boundaries and lines, ask yourself what they're achieving. Do they serve a purpose or just a distraction? Where they are needed, try and make them as unobtrusive as possible. If you feel you need the baseline, make it thinner or lighter (like the one dividing the columns).

You realise that Google is advertising what are presumably in some way your firm's competitors on your site? You're asking people to go somewhere else on your front page... You might be making money from click throughs, but if they're clicking through to buy something from somewhere else, you're actually losing money. If it really has to stay, at least make that column thinner and less relevant. (and it still says "Sponsers")

The Validation images mean something to me, and make me feel good about the site, to the site's real customers however i suspect they're entirely irrelevant.

For a business like this I suspect looking slick is less important than being clear, helpful and functional.
 
I added a java applet for the slideshow. They do not have a digital image of their logo, and they no record of who designed it originally. I took a picture of the sign and photoshoped it a bit.
 
Start from Scratch (IMHO)

Personally, I think that form follows function. You really need to think about the audience you want to reach, your business goals and then develop objectives for the site that will help you achieve the goals. That will drive the design of the site ultimately. Good design is a lot more than ornamentation and slick Javascript doo-hickeys.

You don't want to make visitors work too hard when they get to your site. Frankly, when I see a long, wordy paragraph filled with sentences like "the purpose of this web page is to enhance the support services we provide to our customers," my eyes start to glaze over.

What makes your business different from your competitors? For one thing, it sounds like you are the LARGEST SUPPLIER OF SURPLUS ELECTRIC SUPPLIES SOUTH OF SEATTLE. Why is this hidden in the middle of your paragraph? This is what you should be emphasizing.

You have "Serving the Northwest" in bold red letters...well big deal! McDonalds serves the northwest. It doesn't tell me anything or make me want to read or explore your site any further.

Of course, the best thing would be to have an interactive database showing the current inventory of your products so prospective customers could find things they need, but maybe that is a bit much for this business. Even a static list though of your products (which you have done) is a good thing to have.

Another idea: ask your father what are the most common questions they get calls on through the telephone and the store. Maybe these would provide some material for your FAQ, which really needs to be more than just how to contact the business, and browser troubleshooting.

Even if you decide in the end that you don't want a monster site and really just want something more of an electronic "business card," you really need to focus in on what your business brings to the party and create some compelling reasons for potential customers to contact you.

Sorry if this sounds harsh. This COULD be a great site...just needs some more thought and planning...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back