Foo - Can someone critic my 2nd website design??

Hello,

I posted here a while back asking for advice about my website design for my LBS. Keep in mind, I'm doing this for free, so I wont be putting hundreds of hours into the project.

So far, I have redesigned the template because most people said the 1st version was a little bland, so the 2nd version has lots more colours. The top banner is displayed randomly, and is updated as you click on any of the links. The links are also contained inside an iframe, which allows slightly faster reload time.

Here is the link, please tell me what you think. Oh yeah, some of the contents are not yet completed, please only critic the design portion. THanks :D

http://ming.hostopia.com/pieriks/

Ming

Good design, the website's great. I would get rid of the "please choose this" and "please choose that" after you click on the links at the top. Just my opinion.

I would list this in bullets (or something along those lines) to make it more readable:

Tune-Up #1 - Safety Check $34.99 Includes bullet Adjustment of brakes and gears bullet Tightening of headset, handlebar, wheels, pedals bullet Lubrication of drive bullet Wipe down of bike bullet Inflation of tires Tune-Up #2 - Tune-Up $44.99 Includes bullet Adjustment of brakes and gears bullet Tightening of headset, handlebar, wheels, pedals bullet Lubrication of drive bullet Wipe down of bike bullet Inflation of tires bullet Wheel truing Tune-Up #3 - Deluxe Tune-Up $69.99 Includes bullet Adjustment of brakes and gears bullet Tightening of headset, handlebar, wheels, pedals bullet Lubrication of drive bullet Wipe down of bike bullet Inflation of tires bullet Wheel truing bullet Cleaning of the drive Other services available. Prices vary according to job.

It looks clean, but a bit boring. It seems like you used a table with 2 rows and 2 columns for all the options, and that will not keep people enthused enough to continue going through your website. The main color (brown) is not that exciting to me. There is just way too much brown in there. Is there any way you could perhaps make the picture a banner at the top of the page, then put the different links at the top (like the "services", "specials", etc.)? That would give you an entire page to work with, and you could perhaps include extra pictures, like the inside of the shop, the section where the mechanics work, people at the counter making a sale, smiling customers, and maybe even a profile of the employees? Actually, I could think of a few more things, but since you're doing it for free, that would be overkill.

It's not very heavy on info... I would just like to see a bit more in content, more pictures, more info on the shop, etc. That would make it a lot more readable.

When you're creating a website, it's not all about the cut and dry of the business. You have to sell it to me, or I'm going to gloss right over it, decide it doesn't have what I want or decide it's not worth my time to continue reading, and you'll lose the sale.

Still, it's a decent website for your first try. If they just want to go by the KISS principle, it will do.

Good luck with it.

Koffee

Your buttons
http://img143.exs.cx/img143/2599/buttons1.jpg
don't work in Firefox

Your buttons don't work in Firefox

They don't work in anything - there's no links or JS code attached to them yet. They are way too big though. I'd use a nested table with a photo of a headbadge, or a bike, or a logo or something, a small paragraph, and then a link to that manufacturer's page.

I agree with Koffee - lose the brown and the i-Frame. Neither are really neccessary.

Since you seem to still be learning, you might take the opportunity to learn the basics of a scripting language like PHP, CFML or ASP. I know that in CFML, all the code you would need in the content area is <cfinclude template='editable/contact.cfm'> or even better <cfinclude template='editable/#url.showPage#'>. Then all you have to do is change your links to <a href=#cgi.scriptname#?showpage=contact.cfm> and you would be good to go. This would shorten your page loads, because you wouldn't need to add the html, head or body tags in the files in the 'editable' folder.

If you want the brown, keep it only on the right, after your main contact area. Make the text area white or a light beige (perhaps a tint of the brown?) and the text would read a lot better. You could use the brown for the text, too, that would integrate with the background to the right. I'd also add another green table column on the right - it looks weird at larger resoloutions when everything just disappears. (I am assuming that you were designing specifically for 800x600 screens...)

One thing that bugs me is this :
http://ming.hostopia.com/pieriks/pics/bg_top_corner.jpg
The bevel from the top and left columns disappears when it hits there... A little thing, for sure, but you might want to take 30 seconds and fix it. One other thing that I'd suggest is minimizing the copyright info, as well.

For a second site, it looks good. If you are planning on continuing to do this professionally (or even to make side money) remember that every site you do is something for your portfolio, and a chance to learn. I'd also see about putting a link to a site of your own in at the bottom or something. If you make it look good enough and work well enough, maybe you'll get a new bike out of it or something :D

If I were a customer visiting the site, I would say it looks fine. The layout is logical and the colors are appropriate.

The code, however, is a little messy. As Raiyn mentioned, the graphical buttons aren't working in Firefox, and I suspect they won't work in Opera either, which is another browser a few visitors might be using. Use of frames and iframes is normally discouraged for quite a few reasons, which I forget, but could find out if you wanted to know. The recommendation from the world wide web consortium ( W3C (http://w3c.org) ) is to use server side includes in their stead, although I understand your not wanting to spend a lot of time learning new things. Good luck with your project.

I have Windows explorer, and the buttons are not working for me either.

Koffee

Oh yeah, some of the contents are not yet completed, please only critic the design portion.

Like he said - it's not done. The buttons aren't buttons yet. There is no content for them to link to, so they are only static images, no links, no javascript, no rollovers... This stuff should come after he (or she) has the general look and feel of the site down. Otherwise, they might end up with a lot of hours of re-design work to make the buttons fit the rest of the site. (That said, I would have probably stubbed in a generic page for all brands, and coded the links to point at it - clients respond better to that...)

Jeez - give the kid a break. Anyone ever hit view>source? You're all complaining that there aren't links to something that doesn't exist yet. This is a rough layout sketch.

Stuff like this is why I rarely do web design anymore...

It's ok, the blue buttons are a bit amateurish, like you're a little insecure about the graphics. Just make it a list after u click on the links at the top.
Good layout though, puts all the important stuff on the front page.

Thanks for all the advice.

I chose the brown because I spoke to a web designer for about an hour, and he recommanded using more of an earth tone to bring the nature feel to the website. The 1st layout I designed looked pretty good as well, but it was using a whilte/silver layout which was boring, as well as too corporate.

I am a 4th year Software Engineering student who worked a summer as a programmer, so I am quite literate with PHP/MySQL combination. The reason being that I am not using it is because I want to keep this site simple, so the bike shop does not need to change their hosting package, and less dynamic content always means more security.

I feel the random banner at the top is pretty good idea, but no body seems to notice that feature. lol. The iframe is there to keep the load time down because some things on the page are not reloaded. It is really there to keep my life easier, because I won't have to go through 12 pages updating all the links. I know there's shtml to take care of that, but I'm far to lazy to learn it :D

As a programmer, I am not very good at picking colours, and I was thinking about using a lighter colour. I'll redesign the buttons because they dont quite fit in with the site, and keep you posted about the progress. :)

Oh yeah, I'm not gonna get a ne bike out of this deal. They will give me parts at their cost, but as a poor student, I doubt I'll be buying many parts any time soon :D

Cheers

ming

It's ok, the blue buttons are a bit amateurish, like you're a little insecure about the graphics. Just make it a list after u click on the links at the top.
Good layout though, puts all the important stuff on the front page.

Yeah, I'm not very good with graphics yet. Should I just get the logos of the manufacturers instead??

I noticed the changing banner right away and I like it. The big dorky buttons have got to go! Seriously ;)

If the owners want to be able to update the information or have like a current news page then you should use a content management type set up. I am working on a PHP/mysql one right now that is promising. Also a calendar of events is a nice touch too. But like you said I guess it all depends on what environment they are on now. I worked in the private sector for web design company and some of my work looks horrible because ultimatlly you have to give the customer what they want. And if they want brown with pink blinking titles then thats what they get.

Yeah, I'm not very good with graphics yet. Should I just get the logos of the manufacturers instead??

I can help you set up some buttons, I've been using photoshop for almost a decade (oh god I feel old).
Seeing as how it's a small bike shop, I don't see any legal ramifications to using company logos.

i don't mind the brown background at all, but i find the black font is a bit hard to read against it. the no-nonsense frontpage is nice too. 90% of the time i go to an LBS's website to find the phone number and business hours. having that right up front is good.

Just my preferences... I'd lighten the brown a bit to something more of a camel tan, drop the TNR font in favour of Arial.. Always liked sans serif :)

One thing I like is that the store hours and contact info are the first thing you see, I hate having to dig for that info on sites.

i like it. it nice and simple and would work if you program the buttons properly.


screw these other fools!!! take a note from the sheldonbrown.com school of web design! :D


no one cares how it looks as long as it's fast and easy to use.

I think it looks pretty good. Maybe tidy up the specials page a bit that's all.

Thanks for all the advice.

I chose the brown because I spoke to a web designer for about an hour, and he recommanded using more of an earth tone to bring the nature feel to the website. The 1st layout I designed looked pretty good as well, but it was using a whilte/silver layout which was boring, as well as too corporate.

I am a 4th year Software Engineering student who worked a summer as a programmer, so I am quite literate with PHP/MySQL combination. The reason being that I am not using it is because I want to keep this site simple, so the bike shop does not need to change their hosting package, and less dynamic content always means more security.

I feel the random banner at the top is pretty good idea, but no body seems to notice that feature. lol. The iframe is there to keep the load time down because some things on the page are not reloaded. It is really there to keep my life easier, because I won't have to go through 12 pages updating all the links. I know there's shtml to take care of that, but I'm far to lazy to learn it :D

As a programmer, I am not very good at picking colours, and I was thinking about using a lighter colour. I'll redesign the buttons because they dont quite fit in with the site, and keep you posted about the progress. :)

Oh yeah, I'm not gonna get a ne bike out of this deal. They will give me parts at their cost, but as a poor student, I doubt I'll be buying many parts any time soon :D

Cheers

ming

Hey, I noticed the banner... I just wish it took up the entire top part of the webpage, then you could put a little more into the content and let the content take up the page.

A lighter color would be nice, but just keep in mind- it doesn't need to be pink, purple, or turquoise! ;) Seriously, though. That solid color just looks like vomit and didn't sit well with me.

You're a nice person- doing a website for free? My brother said he'd do mine for free, but then again, he's so busy with his own job that I'd rather pay someone!

Back to the drawing board?

Koffee

Like he said - it's not done. The buttons aren't buttons yet. There is no content for them to link to, so they are only static images, no links, no javascript, no rollovers... This stuff should come after he (or she) has the general look and feel of the site down. Otherwise, they might end up with a lot of hours of re-design work to make the buttons fit the rest of the site. (That said, I would have probably stubbed in a generic page for all brands, and coded the links to point at it - clients respond better to that...)

Jeez - give the kid a break. Anyone ever hit view>source? You're all complaining that there aren't links to something that doesn't exist yet. This is a rough layout sketch.

Stuff like this is why I rarely do web design anymore...


Hello... he did ask for comments. I thought everyone had something productive to say, and they all made sense. What's the point of asking if all you're really looking for is a pat on the back? It's not COMPLAINTS, it was FEEDBACK, which he asked for, and he got. Free of charge too. Just like how he's designing this website!

Koffee

You have a pretty nice site started there. Since this is for a single address lbs and not a chain of shops I think that keeping things simple is a good choice. The random banners are attractive. There are a few things I would change.

1. Although I don't dislike the brown, it is awfully hard to read black text against it. So either go with a light brown/tan, or go with a font color that will provide more contrast.

2. Since the contact info is on the home page, there's no need for a link to a contact us page. In this case it would make more sense to have a "home" link on the left than a "contact us" link on the right.

3. I would switch positions of the contact info and the store hours, or better yet, stack them together and shorten the hours portion. Something like this:

840 King Street West, Hamilton,
Ontario, Canada L8S 1K3
Telephone: 1-905-525-8521
Fax: 1-905-525-8579
Electronic mail: info@pierikscycle.com

Business Hours:
Mon - Wed: 9:30am - 5:30 pm
Thur - Sat: 9:30am - 8:00 pm
Closed Sundays

4. I think the green border looks nice with the brown, but I wish it would look the same on the right side of the page as on the left instead of just ending there. The way it is now I'm prompted to keep scrolling to the right, except there's no more right to scroll to.

In my opinion you have improved the site remarkably. if I were to change anything, I'd go with a lighter "tan" background color and make the brand buttons smaller while eliminating the "please choose..." wording.

Re content: Will you include pre-owned rides/equipment in the specials section? Or might you consider a button for that category of potential sales?

the text under "Specials" Should be under "services"
and presented like this:

We fix all makes and models of bicycles.
Tune-Up #1 - Safety Check - $34.99
Includes :
- Adjustment of brakes and gears
- Tightening of headset, handlebar, wheels, pedals
- Lubrication of drive
- Wipe down of bike
- Inflation of tires
Tune-Up #2 - Tune-Up $44.99
Includes:
- Adjustment of brakes and gears
- Tightening of headset, handlebar, wheels, pedals
- Lubrication of drive
- Wipe down of bike
- Inflation of tires
- Wheel truing
Tune-Up #3 - Deluxe Tune-Up $69.99
Includes:
- Adjustment of brakes and gears
- Tightening of headset, handlebar, wheels, pedals
- Lubrication of drive
- Wipe down of bike
- Inflation of tires
- Wheel truing
- Cleaning of the drive

Other services available. Prices vary according to job.

I can help you set up some buttons, I've been using photoshop for almost a decade (oh god I feel old).
Seeing as how it's a small bike shop, I don't see any legal ramifications to using company logos.

I was trying for the Aqua look for those buttons. As you can see, I failed miserably :D Just got a little confused with the blur options and what not. I also start to think blue isn't the best colour for this layout.

So if you could possibly make some buttons that may work for me, it would be great! :)

Thank you

Ming

Hey everone,

I did quite a bit more work on the site tonight. As of now, I think it is complete!!

Please take another look at it if you guys dont mind ;)

Thanks a bunch!!

Ming

Oh and it's critique..not critic.

Looking much better with the latest round of improvements. You might try messing around with the background color a tiny bit more, although it's looking pretty good right now. I think a little less red tone to make it less orange, but that's just me. Using the manufacturer's logos instead of the blue buttons is a major improvement. The iframes are scrolling on a couple of the pages, which is something I personally find annoying. The bottom left corner of the banner stands out just a little bit, because of the contrast with the rounded corner of the green border stripe. I guess this is just nitpicking. I don't know what the site looked like before this second version, but it seems on par with what most LBS's have.

The owner should consider getting a domain name, to make the site easier for customers to find, although I wouldn't be surprised if the current hostopia package doesn't support that.

If I remember, doing SHTML includes is pretty simple. Do a google search to see what you can find. I don't think there is really anything new to learn.

Looking much better with the latest round of improvements. You might try messing around with the background color a tiny bit more, although it's looking pretty good right now. I think a little less red tone to make it less orange, but that's just me. Using the manufacturer's logos instead of the blue buttons is a major improvement. The iframes are scrolling on a couple of the pages, which is something I personally find annoying. The bottom left corner of the banner stands out just a little bit, because of the contrast with the rounded corner of the green border stripe. I guess this is just nitpicking. I don't know what the site looked like before this second version, but it seems on par with what most LBS's have.

The owner should consider getting a domain name, to make the site easier for customers to find, although I wouldn't be surprised if the current hostopia package doesn't support that.

If I remember, doing SHTML includes is pretty simple. Do a google search to see what you can find. I don't think there is really anything new to learn.

THanks for the advice :) I'm hosting the site with my own host right now, and the owners do have their own domain name. I just haven't uploaded the site yet.

I will try to fix the graphics around the corner, but the iframe thing, I think I will let it slide because I've done about as much work as I'm willing to do for free :D

Cheers

Ming

the text under "Specials" Should be under "services"
and presented like this:

We fix all makes and models of bicycles.
Tune-Up #1 - Safety Check - $34.99
Includes :
- Adjustment of brakes and gears
- Tightening of headset, handlebar, wheels, pedals
- Lubrication of drive
- Wipe down of bike
- Inflation of tires
Tune-Up #2 - Tune-Up $44.99
Includes:
- Adjustment of brakes and gears
- Tightening of headset, handlebar, wheels, pedals
- Lubrication of drive
- Wipe down of bike
- Inflation of tires
- Wheel truing
Tune-Up #3 - Deluxe Tune-Up $69.99
Includes:
- Adjustment of brakes and gears
- Tightening of headset, handlebar, wheels, pedals
- Lubrication of drive
- Wipe down of bike
- Inflation of tires
- Wheel truing
- Cleaning of the drive

Other services available. Prices vary according to job.


LOL...nice catch for going through that garble of text I had up before! I didn't get to design the specials back then, and I just copy and pasted something there and called it specialis for filler!

I have the idea of the template up there now, and hopefully it looks all right :D

Ming

Re content: Will you include pre-owned rides/equipment in the specials section? Or might you consider a button for that category of potential sales?

As of now, they dont carry reowned anything, maybe that's a new business avenue though eeemm :rolleyes:

Ming

Hey, I noticed the banner... I just wish it took up the entire top part of the webpage, then you could put a little more into the content and let the content take up the page.


There is a lot of content on the site now. THe top banners are really designed to add some mood to the website, and I'm willing to scarifice some screen estate to get the feel right.




A lighter color would be nice, but just keep in mind- it doesn't need to be pink, purple, or turquoise! ;) Seriously, though. That solid color just looks like vomit and didn't sit well with me.


Yeah, I wasn't sure if I want a solid colour as a background. I usually go with either black or white; no annoying repeating patterns for me either. It's just the web designer I spoke to recommanded an earthtone, and depending on your monitor, the colour may not come out as I intended (ie...It looks reddish on my laptop)



You're a nice person- doing a website for free? My brother said he'd do mine for free, but then again, he's so busy with his own job that I'd rather pay someone!

Back to the drawing board?

Koffee

Lol....you've helped me out quite a bit before, so if you want, I can probabaly setup a quick template for your site, and then you can just fill in the content. Kinda like what I'm doing for this shop ;)

Cheers

Ming

the "about us" section really tells me about the people at the bike shop [/sarcasm]

From a past experience with a lawsuit, I have learned not to use words like "perfect," "experts," "qualified," "all necessary adjustments" unless you are able to prove their accuracy in a court of law. The first thing the attorney is going to do is to review your ads to see if they make any possibly unsupportable claims about your service, and if the attorney feels they do, he/she will sue under the Consumer Protection Acts for fraud, which in our state triples damages.

For example, someone may claim injury (such as a damaged knee) from a bike because of an improper fit.

You wrote:

"With the help of our experts, finding the perfect blend of comfort and performance is not complicated using our tools and the Juteau-Cantin System."

Possible rewrite

"With the help of our staff, finding your desired blend of comfort and performance is not complicated using our tools and the Juteau-Cantin System."


You wrote:

"the fitting by one of our qualified staff who will make all necessary adjustments based on several factors."

Possible rewrite:

"the fitting by one of our staff who will make adjustments based on several factors."

You need to ask yourself questions such as, "What is an 'expert?" How could I prove that someone is an expert. What are "ALL necessary adjustments."

Otherwise, it is a great improvement.

Could the picture at the top (banner) have a bicycle in it?

Thats much better now. I think the bike store should be happy with that for free. Just curious why the use of the IFRAME? Also under the specials maybe it would be better to target the iframe to view the full sized picture instead of opening a new window. You can incorporate some sort of back button feature too. The problem with the current set up is that a user feels as thought they have left the site. Also on dial up those large images will be frustrating for a user. If you do chose to target a new browser a good way used to be to use JS to size the window i.e. pop up window to show the picture. Now that people have pop up blockers it may not be best.

There is a lot of JPEG compression on most of the images - consider using PNG or GIF to further reduce file sizes for low-color images, and increase quality.

The load times aren't super for dial-up users, but we get used to that.

Would it be an option to photograph the bikes in front of a white/solid color backdrop, and then remove the backdrop in Photoshop?
I think some more detailed information on the bikes in the Specials page would be nice..
That page apears to be filler content atm, so maybe your plan was to have more info anyway.
Also, I'm not a fan of displaying the same URL in the address field on each of the pages.
I do like the different photos on the banner, nice touch.

Thats much better now. I think the bike store should be happy with that for free. Just curious why the use of the IFRAME? Also under the specials maybe it would be better to target the iframe to view the full sized picture instead of opening a new window. You can incorporate some sort of back button feature too. The problem with the current set up is that a user feels as thought they have left the site. Also on dial up those large images will be frustrating for a user. If you do chose to target a new browser a good way used to be to use JS to size the window i.e. pop up window to show the picture. Now that people have pop up blockers it may not be best.

I totally forgot about using JS to control the window size. I will incoporate that into the site soon. Most popup blockers will not block those new windows because they are user initiated.

I chose to use iframes to save myself some work. This way, most of the page does not reload when the user clicks on one link, and I only have to edit the links once. :D

I could use js to automatically adjust the size of the iframe, but since this is for free, I did not want to spend an excess amount of time on making everything perfect.

THanks

Ming

There is a lot of JPEG compression on most of the images - consider using PNG or GIF to further reduce file sizes for low-color images, and increase quality.

The load times aren't super for dial-up users, but we get used to that.

Would it be an option to photograph the bikes in front of a white/solid color backdrop, and then remove the backdrop in Photoshop?
I think some more detailed information on the bikes in the Specials page would be nice..
That page apears to be filler content atm, so maybe your plan was to have more info anyway.
Also, I'm not a fan of displaying the same URL in the address field on each of the pages.
I do like the different photos on the banner, nice touch.

Most of the pictures will be replaced before the site is uploaded. I just used my own pictures as fillers until the shop actually takes the initialitive to photograph the bikes they want :)

Thanks for the graphics advice, I will do that from now on :D

Ming

Dood, looks so much better and more professional. Congrats!

Koffee