Sutherland's Bicycle beta...

[Jalenack]

Hey this is my first draft of this site...

I'm updating this (http://sutherlandsbicycle.com) old website ...

Here's the new version:
Sutherland's Bicycle (http://lenblauphoto.com/suther/)

Yes...I know its not completely valid XHTML because !@$@#% Yahoo hosting inserts invalid code into your document (arrg) as its stat checker...i know, its stupid. If I could, I wouldn't be using yahoo hosting at all..but its not my problem.

The title image is just text I know but the font is special to the company...
It resizes pretty well. I'm just worried about backwards compatibility. The client base for this company are bicycle shops, and they usually aren't on the cutting edge of computer technology.

You'll notice the navigation is straight out of Alistapart.com ...
Well anything you might have to suggest would be lovely..thanx!

-Jalenack

[rmedek]

It looks good (to say it works) in all of my browsers (IE Mac, FF Mac, Safari). And the code certainly looks clean and semantic enough.

My only opinion is the look of the site. It's kind of plain, and boring. I like the look of the older site more; even though it looks outdated, it's got a certain kind of "bicycle shop" charm to it, and for some reason it's easier for me to navigate.

Overall, though, good job...

[Jalenack]

any idea how I might make it more navigable?
I know what you mean by plain...the company logo with the wheels and stuff will be on there soon..i just have to figure out how to implement it. Does it just need more color or more flashiness or what?

edit - random idea: try it with wheels as background HERE (http://lenblauphoto.com/suther/index1.html)

edit 2 - i could also make the entire content box like the brushed metal..dunno if I want to though...any thoughts?

[rmedek]

Well, here's the thing...

On your site, it's actually easier to find something specific. For example, if I needed a specialty tool, there it is on the menu. On the old site, I have to read through the forms description, click to see all products, read through the product description, then I see the link for specialty tools.

But in practice, for some weird reason, I think the older one is easier to navigate. Probably because there's no big field of gray to read through, or the descriptions are well written, or the layout seems to invite me to the next section. Who knows? :) It's some weird, intangible thing, but I think you get the idea.

As far as making it less plain, I'd use more color, a less sterile menu, a little more white space, and shrink that menu a bit (on my monitor it takes up a third of the available screen space). Just some ideas...

[mindlessLemming]

The contrast of the navigation text vs. its background is very low, making the navigation difficult to read. Also concerning navigation, as a user and customer, I couldn't care less what's a 'Type R' or 'Type S' or 'Type G' product. I certainly don't want to have to read that text every time. If you must have that text in the link, putting it in the title attribute would make the navigation easier to read.
As for comparing the navigation of the two sites -- one has a list with un-marked (no arrows or other indication) pop-out menus and the other is three big buttons. Three big button will always appear more simple ;)

[Jalenack]

added a bit of color to the menu...

beta 2 (http://www.lenblauphoto.com/suther/index1.html)

ill look for some good arrow type things for the product list...client wants more specific links than those 3 buttons...but i definitely get what you're saying

[tsguitar2004]

I just had a (slightly drunk) thought:

Remove the gray background from the left sidebar. That would lighten the whole thing up. That brushed metal feels more like a machine shop than bike shop. Consider something to replace that texture; I don't think it says bike shop and I've been in enough bike shops to get that sense, as you have too.

If you can, put a wheel background on that side bar; not the whole wheel, though. Have it off the left side of the screen, sort of like the layout on the 7th Edition book image you have there. In fact, what if the whole layout imitated that design? Something to think about...

Give the entire site a little margin-right or something. The right side of the site really hugs the right side of the screen in IE6/pc. It's fine in Opera and NS (both pc). Also, the alignment of the contact information (both 800 numbers) is off in IE6/pc.

In terms of navigation across the top of the content area, I think that Home, Products, and Contact should be enough. Samples and Rush Orders would be under the Procuts area or text links in the Home content area if really important, I would assume. As far as the left sidebar content, those two tools menus can combine into one Tool menu item. As for the other menu items, I'm not sure what they are so I can't suggest anything.

Would that left content be on the home page? Is this a secondary page design you're showing us and not the home page design? With the label "Products" on the left, I feel like this is what I'd see if I'd clicked on Products, not what I'd see on the home page.
-ts

[AaronW]

Were it my job to design the site, I'd probably ditch the metallic look altogether. Now I'm still sort of effed-up on dentist drugs, so please excuse any weird typos or trailings-off into space...

Ok, so the site sells forms for use in bike repair shops, right? My design would probably implement sketches of bicycle geometry and stuff, maybe some scans of semi-filled out forms or something? Or just make it really really clean and match the colour scheme to that of your forms (sort of bluey green and white).

The way it is now, the design doesn't really reflect the product. It's tied to bikes, but the focus is paperwork I think.

G'luck ;)

[Jalenack]

wow..never thought of using wheels or forms in the design implementation..great ideas guys! One problem, pretty dumb - The original designer of this site is also the designer of the forms that the company sells. The company uses the forms, but the designer owns the rights to all the forms and she's the only one who can make changes...buying the rights to these forms would cost about $20,000 ... definately something to avoid. So basically we are stuck with either using scans of printed forms, just using the old site, or bootlegging the images (the site that we have the complete rights to) and loading them into the new site. The old images are very pixelated/crappy so I don't know I might try scanning them and seeing how good they look.

Sidenote - the company also sells forms to vaccuum cleaner/sewing shops...this was a recent venture and it has its own website which was made recently by another designer....link HERE (http://sutherlandsvacsew.com)

Basically this company sells products to AID in the smoothness of running bicycle shops..they sell handbooks, forms, filing racks, even a computer program on OS 9 (not really for sale, some of the companies oldest users still run it though), so anyway this isn't just for bike forms, although its the main source of steady income. I could make the layout very similar to one of the forms...infact that might look pretty cool. I agree with scrapping the brushed metal stuff...while it looks fairly good, it doesn't have much to do with bicycle shops

[tsguitar2004]

You got the idea. I see it happening on your index2 page. I'm glad you are pursuing that angle.

Since the site should be promoting what the company can give to bike shops, your wording and design should reflect that. I didn't get that you only sell things to help other bike shops. I thought your site was for an actual bike shop.
-ts

[Jalenack]

Thanx for all the great suggestions

I ran some of them over with my client he liked some of them and didn't others

-he didn't like adding wheels to the design (complementing the Book cover design) because he thought that his customers would be tired of seeing wheels and stuff (hehe)

-he did like the idea of making the navigation look like some of his forms

Ok so here are all the versions:

Beta 2 (http://lenblauphoto.com/suther/index1.html)
Added Wheels (http://homepage.mac.com/hsuth/suther/index5.html) (not really complete or good - just the idea)
Current (http://homepage.mac.com/hsuth/suther/index.html) (which i think is the best)

the background for the navigation stuff isn't perfect because I had to bootleg this
image (http://sutherlandsbicycle.com/images/webjump_ad_top.jpg) to create it and could only get a small portion of it -I will be getting the full image later. You may also notice the background of the title image is just the last pixel of the overlaying image...does that look a little sketchy to you?

Anyway - comments on the new look would be great! thanx so much guys

[tsguitar2004]

The new header image is so much better! That's looking good.

I still really don't like the textured background on the top and side navigation. Can you make that area a shade of blue that we see in the header? Or even the color of the clouds? Maybe the helmet from the header nav as a background to the side nav? Something other than the texture that's there.

Reconsider the "list-style-type: none" on bottomnav. That's causing it all to display on one line and it doesn't look good in IE/pc.. Also, the top nav doesn't work in IE/pc. It's not high enough to hold the nav elements; the bottom rounded corners are in the middle of the nav box, not at the bottom of it. Why not keep that top nav white and move it closer to the header?

And I still feel like this is a secondary page, not the home page. This looks like it's the "products" page. Would the home page not have that side nav?
-ts

[Jalenack]

thanx ts, you've been a great help this entire time

Beta 4 (http://homepage.mac.com/hsuth/suther/4/)

what i fixed this time:


deleted the seat near the posterior of the biker (who just happens to be the owner of the company/my client :-)
Added list-style-images to both parts of the navigation.
changed the background color of the sidenav bar


I'm still worried about the navigation - it seems a little complex/not inviting.
I was thinking of doing wheels for the list style images but couldn't get them satisfactory...btw i didn't change the top navigation background - just sorta for comparison. I'm not wild about this solid color background - what do you guys think? (and ts what did you mean by making the helmet the background)

ts its hard to picture what you're saying for the bugs in IE/Win - and seeing as im running OS X i can't try it out - could you post a screenshot or something? thanx a million

[tsguitar2004]

Just as you have the image of the handbook on that page, just put an image of the helmet on the far left, faded back behind the nav elements. Just an idea.
http://www.toddseal.com/tests/suth_test1.jpg

And list style images? Where? Can't see 'em in IE/pc, but they show up fine in NS. And the color blue you have for the side nav doesn't contrast with the gray enough. It's hard to read the nav elements that light.

Yeah, I'm not crazy about that color for the nav background, either. I still think it'll work better for you than the texture. Just try to lighten that color up a bit. It's too dark to tell if it'll work yet.

Try a light gray (#c0c0c0) or something, maybe even a gray with a touch of blue (#c3ccda-grabbed it real quick from Photoshop). You could always just go with a white background to make it simple. That may come off looking the best. But what you've done in that header image is good and needs to be continued in the rest of the site (in regard to color scheme).

Crappy quality screen grab, but here are the troubles in IE/pc:
http://www.toddseal.com/tests/sutherland.jpg

[Jalenack]

hmm ok that's annoying in IE 6 - it renders beautifully on all my mac browsers...why aren't my list-style-images working??

Beta 4.1 (http://homepage.mac.com/hsuth/suther/4-1/)

Is there something wrong with

ul#navigation{
font-size: 1.1em;
list-style-image: url(list_style.jpg);}


i like the color you suggested - it works much better than the one did before
and with the main links - im complety lost ... i wanna get a cheap *** windows comp just to debug my sites :)
also i noticed there was a blue border on under the title image on your screenshot - above the black border that I set and under the title image...any reason you can think of? argg why does IE suck so bad

btw this is my 49th post...one more and im a regular !! yay :-p

[tsguitar2004]

Oh! I actually *just* noticed that was an IE bug! I rather like the two colored bars under the header.

For bullet images, I always (read as: did it once when I needed to) use:

#content ul li
{
padding: 0px 40px 5px 25px;
line-height: 1em;
font-style: italic;
background: url(../images/bullet_image.gif) no-repeat 0px 1px;
}


Also, do you know that you're getting an error on the page? Is there something amiss with your drop_down.js file? Maybe something with your BBEdit META tag? IE says the error is line 7.

You like the color, eh? Glad to read it. Still, the link color on that background is too light I think.
-ts

[Jalenack]

still a bit befuddled - why aren't my list-style-images showing in IE/PC?

I deleted the BBedit meta tag - it wasn't important at all and if its causing some abstract error i'd rather just not deal with it...

I'll work on the link colors later - is anything fixed in IE or is it still all crappy? sorry to be troubling u so much for this - but i don't have access to IE/pc and its driving me crazy...lol

[tsguitar2004]

My mistake. I think it's a problem with your external JS file. Try removing that line to see if the error goes away. You don't need that file right now, do you??

And it's still the same way it was in IE. I can look into it tomorrow (I think). Try creating a page with *only* the nav elements until you get those fixed. Then slowly add one bit of the page back at a time. There may be some weird IE conflict with something somewhere. It's a bear to work with, but we do it anyway...
-ts

[Jalenack]

ok i did a workaround to get my list-style-images to work in all my mac browsers and i assume they'll work in IE/6


#navigation li {
background: url(list_style1.jpg) no-repeat 0px 3px;
margin-left: -20px;
padding-left: 20px;
list-style-type: none;}


i also added display: block to the sidenavbar ULs in hopes of that making the inline crap on IE 6 work better....now the last thing that bothered me with that screen shot was the corners not going to the right place and having it look fairly broken - i added 0 margins and vertical align: center in hopes of fixing that...

[tsguitar2004]

Um, the list item images appear now, but those lists are still displaying inline on IE/pc so it looks bad. Looks fine on NS.

I'm not a huge fan of those images, though. If those are going to be images, and you're going to take the time to make them, make them something unique to this site. They look like some tertiary default bullet. I'm working on a real estate site right now and the logo uses some line drawn buildings. The bullets on the site are a version of the logo. What about using a smaller image of those wheels for the bullets? Also, they look like they could be saved at higher quality; they're looking a little fuzzy.

I'll look around for a code snippet for that top menu. I did something *very* similar for another site that never launched. But I remember that problem was solved somehow. BTW, you're having a similar issue with the side nav now. The bottom right rounded corner doesn't cover all of the background color (as if it's positioned at the top of it's element rather than at the bottom).
-ts

[tsguitar2004]

In the example I've attached, there is obviously a ton of extra markup to make those rounded corners. I was playing with an imageless idea I saw online. You can still use your images in place of this, but I was having the same problem you are having with your top nav. That problem is solved in this code. Have a look and see if it helps you out. If it does, post back the problem and the solution (if nothing else, it'll help me the next time I run into this!). If not, toss it!
-ts

[Jalenack]

ok ts i tried that out a bit but i thought my transparent rounded gifs are a lot easier to work with...i assume everything is still the same - i posted some of these questions on the HTML / CSS forum so you wouldn't be the only one helping me out :) cheers

[tsguitar2004]

No sweat. I was just hoping you'd see something in the CSS that rang a bell for you. I can't put my finger on what made that go away for me. Let's see what the other folk have to say. I'll take a closer look at those list items later. I'm stepping away from the computer now, nice and slow, so no one gets hurt. Easy. Easy...
-ts

[Jalenack]

I fixed it! yay it was some dumb code that was the last line on my CSS that was there for the product nav (that isn't even being using anymore)...which I deleted and that made everything work out fine in IE6/PC - thanx for all the suggestions (especially ts) I'm still not loving the sidebar backgrounds and stuff ..im thinking of making a cooler navigation bar - one that might involve more than one color...

[tsguitar2004]

Layout is looking good! I'm still not crazy about that bullet image, though. What if you used the triple wheel logo for the bullet? Just take that image and shrink it down. The current image is not detailed enough and looks simple.

Can you bring the blue from the company name into the mix? That dark blue could look better for the color of the nav items.

Can't wait to see the next rev!
-ts

[Jalenack]

sure ill post the next version in a few minutes - but about those bullets...i can't see how i would fit 3 detailed wheels into 15x15 px - maybe you could show me? :) ill work in that color...

OK heres the link: Sutherlands.. (http://homepage.mac.com/hsuth/suther/4-1/)

[AaronW]

Hasn't been brought up yet, but I think you ought to match the radius of the navigation's border to that of the OTHER navigation (looks like radius is 8 maybe?)

The header image looks better, but I think the sky is far too desaturated, especially with the obviously super-imposed yellow dude. Try another sky image, perhaps? The blue smudging to grey is sort of depressing, I think.

'Tis definitely improving though :)

Edit: Oh, and if you just drew a box for each element on the page, you'd notice the header isn't actually aligned to any of them. Should either just left-align the header, or center it over the content column. Or, make it wide enough that it spans both columns.

[Jalenack]

its funny that you say he's superimposed...cuz he actually isnt :) i see what you mean though, he definitely could be - ill manipulate the colors a little more

Also I'll see how the curves look if they're all the same...
And I'm not sure what you mean by the alignment of the header..you mean the main links right? well thats aligned (at least it is in my browsers) to the content below
Thanx for the help

[AaronW]

If he's part of the original, why's he have a dropshadow on his face? Heh.

About the header, I mean the logo and whatnot. As a collection of objects, it isn't really aligned to anything. I'd maybe try centering the logo from the first "S" to the last "s" so it's directly centered over the content column. Or just over the horizontal menu.

[Jalenack]

hmm how did that dropshadow get there? could be from his movement (he's riding a bike....or it could be a bad job of bringing out colors in photoshop...either one :)

ill fiddle around with the alignment...its designed to be semi-fluid i may have to add width to the title image to move the text over...ill check with client and see what he think..

[Venom989]

Ummm.... I wasn't able to view your site. Is it down ? It gave me a timeout error.

[Jalenack]

geez...you just went down the whole forum and reviewed everyones..well the link that was originally posted is probably down but if you had read all the way down the reading...the last few posts have a new URL that has the new versions, so heres the link - http://homepage.mac.com/suther/hsuth/4-1/