ABT Redesign

[ober]

http://www.americanbeautytools.com/v2

 

This is a redesign I've been working on.  Origional can be found here: http://www.americanbeautytools.com/ (obviously).  I didn't do the origional design and it's taken me a lot of work to get it fixed up.

 

It's not completely done but is getting very close:

 

Known issues:

1) video doesn't work - I'm swapping video players and having loads of issues doing so.

2) IE bug on some pages forces content down below left menu (I forget the CSS trick to get around that)

3) Quote system is not finished

 

There's probably a few others but I figured I'd head off the big ones.

 

Thoughts?

[tibberous]

I'd either kill or increase the whitespace between the nav bar and the "Video Library". The FLV player your using is all screwed up, the play bar extends into the controls and the hit area is off. I'd recommend using the one I made:

 

http://www.trenttompkins.com/Downloads/Open-Source-FLV-Player-2-RC1.html

 

Plus with mine you can change the foreground and background colors, and mine works in Flash player 8 without fullscreen automatically if you use the code that comes with it. You might have to make the spot for it 200px wide, which wouldn't be a bad idea anyway.

 

Mine also supports real full screen, yours is using javascript, which means it's probably old as shit or supporting old versions - 97% of Flash players are 8 and 9, the other 3% can upgrade.

 

Other than that I'd say it's good, but you should set the selects in the menu to be the same width, it looks weird with them not lining up. Oh, and the video didn't play for me, and the additional videos section seems to show a random amount of videos.

[ober]

I agree with you on the whitespace... I'll probably increase it.

 

I'm trashing that flv player I found ... it's decent but doesn't have volume controls.  The problem with the new one I bought is that it doesn't seem to accept paths to the videos/skins/source files.  You have to have everything in one place.

 

Do you mind if I email/PM you to get more details?  The width thing might be an issue.  As long as you have volume controls (that I can set before startup), I will really consider it.  I'm glad you posted!

 

Good point on the selects... I need to do that.

 

The video should play in the nav bar but not on the full video page.  And the number of videos is dependent on which category you're in.  There are only a few videos in some of the categories.

 

Any other feedback?

[Daniel0]

Overall I think it looks good. Definitely better than the old one.

 

Here are some suggestions for improvement though:

• I'd probably move the "American Beauty Soldering Tools" type of header up next to the "VIDEO LIBRARY".
  
• The blue text in the bulleted text in the "New Product - Soldering Iron Maintenance Kits" box give me an idea that it's links, but they aren't so you might consider another color.
  
• The search box could use a bit more padding and it would look a nicer if the form controls had the same width.
  
• The non-breaking space before the labels in the search box should be removed too.
  
• On pages like this one where there is no #navcontainertop2 there is no space between the side bar and #navcontainertop. I don't know if that's just because the quote system isn't finished yet though.
  
• There is a really big gap on the bottom of the page (tested in FF3 and Opera).
  
• The container shadow stops suddenly after the footer - it looks a bit weird. I'm not sure what you can do about it though (other than making the page full height and move the copyright inside the footer.
  

 

I didn't read what tibberous so I might have repeated something.

[ober]

Good points.

- Not sure what is causing that gap at the top... will look into that.

- Everything in the "new product" section is controlled by the owner of the site.  He enters that through my CMS.  I'll talk to him about changing the color of the non-link items.

- Agreed on the search box padding and will do on the form controls width

- I did remove that at one point and it just didn't look right.  I'll play with it again but I'm inclined to leave it as-is.

- I'm aware that some of those are missing.  I have a few submenu indicators missing in my CMS that I need to clean up.  Actually now that I think about it, I think it's just the structure of a few of the links that point to the quote system.

- I'm completely aware of the gap at the bottom but not sure what to do about it - I think I may just leave it as-is.

- Again, I'm aware of it but not too concerned about it.

 

Thanks for the feedback!

[tibberous]

Sure, PM me or email to TrentTompkins. Thats at gmail, just TrentTompkins, no dots or anything.

 

It sucks you already bought one, my player is free and open source, and it takes the movies as relative paths, but it does need to be 200px wide. It has volume controls in the player and in the embed code, it doesn't have skins, but you can set the foreground and background colors, which then get highlighted / shaded.

 

If you really need the player smaller than 200px, you can edit the flv file. Do something like remove the playback time, and scoot the bar over, then shrink the height of the bar and increase the size of the movie. Be a little bit of a pain in the ass but if you mess with it for a while it isn't bad.

[steviewdr]

Hi Ober,

Here are my thoughts:

 

Looks well put together. There is a lot in it. I like the color scheme. I like the rotating banner in the top.

 

My few suggestions:

- Use more bullet'ed lists, and styled/graphical bullets too. Under the "To Purchase" list, provide a bullet for each item as well as having a a:hover. In your main body text, you have standard * bullets. Change the style to provide a better default li bullet. The left margin also on the <ul> needs to be reduced. Summary: use styled bullet'ed lists.

 

- Your sub navigation needs a slight bit more emphasis IMO. I know you dont want too much emphasis, but currently it does not show up enough as a navigation menu IMO. What would be nice and would tie the main & sub navs together is: When you are on the "Home" tab, its background appears in white. It would be nice if it would appear as a light grey and flow 'continually' down onto the sub-nav. So the red line under the white Home outline would be best removed. (I know this might be very difficult from the way you have it layed out atm. Its just an idea.)

 

- New Product. Will there be other or perhaps random "New Products" featured on the home page there? I know its a bit out there, but a "NEW" with a nice image ( http://ryanler.wordpress.com/2007/08/08/156/ ) would draw much more attention. Perhaps have the "NEW" image appear over the top right corner of the New Product div etc. (might be a bit ott).

 

- The Video Library on the index page. It would be nice if this was a random video which would appear. ( I know your only in dev stages.) Also the "More Videos" a:hover is a little large. A simple text link would suffice IMO.

 

- The left vertical grey 1px line between the left and right column. It looks a little off (only in my opinion). I would instead, put a 10px margin on the left to push in (towards the right) the entire left column. This would match the 10px margin on the right of the content div. I know that still doesnt leave the vertical grey line right....hmmm.

 

- The shadow at the bottom of the main div. It is possible, but requires 3 extra images. 1 left corner shadow, 1 right corner shadow and 1 bottom shadow to tile across. E.g: http://www.burkesys.com/~sburke/EducationalResources/es/  Its a bit much work alright. Its ok as is, however the blank spacing at the bottom of the page is too much. It doesnt matter really, it just seems out of sorts having all that scrolling down.

 

- A common method of highlighting text within the site would also be an idea. Its bold dark red on the index page and bold black on the "Repair Service" page. You can style either the strong or b tags.

 

- As its a sales website etc. it would be nice to have pretty urls for the search engines. This can be done at the end of course.

 

Finally - I would be very interested to see/hear about the admin backend for this. How much functionality does the client have to edit things? Did you roll your own backend/cms? There are a nice lot of pages to keep track of! Im sure there is some amount of coding gone on behind the scenes!

 

-steve

 

 

 

[ober]

Thanks for the feedback:

 

1) I agree with you.  I'll play around with the styling on bullets.  

2) I completely agree... just wasn't sure where to go with it.  I have a bug in my sub-nav right now that was supposed to highlight the background of the subnav in white as well, but I haven't fixed that.  I'm not sure what you mean about the red line.  Can you clarify?

3) The new product is a single product that the owner changes through the CMS.  I could add a small graphic in the corner like you say... I'll run it by him.

4) That will have a random video... I disabled some of that while I was testing.  Agreed on the simple link.  I'll change that.

5) I'm inclined to leave that as-is unless the client says otherwise.

6) I was going to play with that when I fixed all the other stuff... it's on my list

7) Agreed.  Most of the content is a carry-over from the old site and I haven't gotten around to cleaning that up yet.

Agreed and I will do that if Godaddy's site allows it.

9) I wrote the CMS from scratch.  If you want to check it out, you can find it here: http://www.whproductions.com/daedalus/ demo/demo is the username/password.  That version doesn't tie to any sites, so you can play with it as much as you want.  I've been tinkering with it for a while now and there may still be bugs, but that's the basics of what I have so far.  I'm still developing modules for it, but that one is my "development" version.

[jcombs_31]

I'll post a couple things that stand out right away for me design wise.  I don't like the white bar in the middle of the header.  I would consider making it semi transparent if this is really how you want it.  It seems to be in the way of the graphic and is a distraction.

 

I don't like the 2 tier horizontal menu always being shown.  I think this is a good place to throw in a little javascript to make the bottom menu only appear when hovering the top option.

 

The left column looks like it really needs some padding.

 

I'm not a huge fan of the red color you are using.

 

Agreed bullets need some style.  A few icons go a long way in making things look more professional. 

 

I'm not sure I like the way the new product is displayed.  It really should be the main focus and my eyes are not drawn to it. It is also another spot I think you need some padding and the grey box background isn't really necessary.

[steviewdr]

The ajax route seems to have worked very well in your CMS.

 

It looks really well put together and coded very well - kudos.

 

Thanks for giving us a look at it. Im always on the look out for a nice simple CMS. For me, the html editor is the limiting factor in preventing the user from editing pages and putting nice content in. I do have to create a lot of special divs for content such as left/right aligned images.

 

-steve

[ober]

steviewdr,

 

Thanks for the feedback on the CMS.  Like I said, it's a work in progress.

 

When you say that the html editor is the limiting factor, do you mean you'd rather not have it in there?  I've considered having the option to turn it off and use a regular text area, but I haven't gone that far yet.  Most of my users are pretty basic and would rather have the editor than not.  For those who would rather edit the HTML, that editor does give you the option.  And I don't know if you played with the editor, but it does allow you to do some of that stuff through the interface.

 

jcombs,

 

I agree on the header and I've contacted you about that.  It needs some help.

 

I'm torn between the idea of the "only open on hover" effect.  I based it off of the Dell site that has the "sub menu" open all the time.  That site is done a little nicer than mine, but I'm also using it as a "here is where you are" type of thing.  Almost like a dumbed down bread-crumb navigation.

 

The color is maroon... do you have a better suggestion?

 

Grey box background... you mean around the header portion of the "new product"?  That's consistent throughout the website and I'm liking it the way it is.

[tibberous]

Great looking FLV player, lol.

 

I haven't even published it on my website yet, but here is version 2.3 stable: http://www.trenttompkins.com/downloads/player_2.3.zip

 

This release merges the PHP AddOn pack, fixes a bug with mute, and allows the video area to be clickable (adds clickurl and clicktarget params).

[steviewdr]

When you say that the html editor is the limiting factor, do you mean you'd rather not have it in there?  I've considered having the option to turn it off and use a regular text area, but I haven't gone that far yet.  Most of my users are pretty basic and would rather have the editor than not.  For those who would rather edit the HTML, that editor does give you the option.  And I don't know if you played with the editor, but it does allow you to do some of that stuff through the interface.

I find that it is hard to insert images neatly within the text. I know that most editors have a html/textarea and I find myself having to go in there and add a simple float and clear to get text flowing around images nicely.

I suppose its a case of allowing users to choose the layout of a particular <div main> on a particular page. I.e. they might like a two column layout for the main text area etc. Typically tables have to be inserted then to try and get a nice layout with images in appropriate positions.

BTW: this applies to most HTML editors I have used and not just yours.

</rant>

 

-steve