9 replies [Last post]
Nalif
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2007-05-21
Posts: 17
Points: 0

I've only been able to check this site in IE 6/7 and FF, and it displays correctly in those browsers. If your able to check the site in other browsers, please let me know how it displays. The text is mostly filler text. It won't be filled in with relevant text until the client gives me what he wants displayed. Other than that, the site is finished.

I'm also looking for critiques on the graphical design of the website. This is my first CSS site, so I'm sure it's far from perfect.

http://www.gadgephile.com/ABHQ

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

The diagonal grey bars on

The diagonal grey bars on your main text are distracting and make an otherwise reasonably sized font rather hard for old eyes to read. Either lose them or make the background contrast much lower, unless of course you really intend to drive old folks away.

Color scheme seems to work but the size of the actual content area is very small on a larger monitor. Why not make it flexible so it scales with viewpoint size? These teensy tiny content boxes strike me as being unprofessional and saying that the designer can't design to suit the medium, which is flexible by nature.

The hover effect with the bottom picture changing adds nothing to the site and just distracts the eye for no good reason other than looking cool.

Just one person's opinion, since you asked...

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Nalif
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2007-05-21
Posts: 17
Points: 0

You're right about the

You're right about the diagonal bars, and I've eased up on the contrast. I'd like to leave them in, so let me know if you still find it to be bothering.

The hover effect with the bottom picture was a client request.

As for the content area - I designed it to fit on an 800x600 display. I have no qualms about making it a flexible design, but this does make things much more difficult on the graphical end of things. For instance, right now the left and the right side graphics are just two graphics. To make the design flexible, I'd have to cut these up into top left, top right, bottom left, and bottom right graphics, and then find suitable hook points for each graphic. The difficult part, however, would be allowing the menu on the left and the right hand graphic bar to increase in size vertically without looking broken - ultimately, that's why I decided to make it fixed in size.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Nalif wrote:You're right

Nalif wrote:
You're right about the diagonal bars, and I've eased up on the contrast. I'd like to leave them in, so let me know if you still find it to be bothering.

It is improved, but I still think the whole background should be less distracting. Surely it's the text that's important, not the background. So I'd still take the contrast down and the background color closer to a grey.

Quote:

The hover effect with the bottom picture was a client request.

Well, maybe you should show it to him so he knows you can do it, then explain why it's not a great idea - maybe he'll listen.
Quote:

As for the content area - I designed it to fit on an 800x600 display. I have no qualms about making it a flexible design, but this does make things much more difficult on the graphical end of things.

Well yes, it would be more difficult I suppose, but aren't you selling your services as a pro? Yet you seem to be saying, "well I'd like to do it that way but it's too hard". Forgive me if I'm being too blunt, but is that really a good professional attitude?

Quote:

For instance, right now the left and the right side graphics are just two graphics. To make the design flexible, I'd have to cut these up into top left, top right, bottom left, and bottom right graphics, and then find suitable hook points for each graphic.

You would? I'm not sure I see why that would be necessary, but if that's what it takes for a better user experience on the page, why not do that?

Quote:
The difficult part, however, would be allowing the menu on the left and the right hand graphic bar to increase in size vertically without looking broken

Really? I don't see why. You could have the left and right sides fixed in width and still expand and contract the center with viewport size fairly easily. All you have to do is give a width to your left and right columns, and no width to the center column, just margins for it to avoid the columns. A block element naturally expands to take up all the available width so there's nothing you have to do to it to make it do that.

Quote:
ultimately, that's why I decided to make it fixed in size.

So you didn't do it for a design reason or a usability reason, but because you found it too hard? Is that really a good reason? You could always ask how to do it here.

.. but I could be wrong.

Ed Seedhouse

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Nalif
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2007-05-21
Posts: 17
Points: 0

I misunderstood when you

I misunderstood when you said fluid - after re-reading your post, from the sounds of it, you mean horizontally and not vertically. Vertically would break my graphics, as shown in mockup2.jpg - I'm fully aware of how to make fluid designs, but felt that because of the minimal content this site will use for each section, making the site resize to fit the screen would make the site feel empty.

If you check the site again, you'll see that I've made it fluid horizontally up until 1024px, as a sort of compromise - this way the site won't feel too "empty" and hopefully won't look too small on larger displays.. IE6 and below does not understand max/min-width, and there's no way around this, correct? If that's the case, it would be safest for me to keep the original size to allow users with 800x600 resolution to easily view it, correct?

In doing this, I've found a bug I'm not familiar with. If you view the site in IE6 ( and below I assume ) there is a 3px gap on either side of the center column, leaving a slight gap between the left and right columns of the site. If this were simply a cosmetic issue, I wouldn't mind to terribly much - however, it shortens the center column enough to cause the gallery to only display two rows of images as opposed to three. Are you familiar with what would cause this, and if so, could you point me towards some documentation dealing with it?

AttachmentSize
mockup2.jpg 78.45 KB
Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 19 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Take a look at the "A List

Take a look at the "A List Apart" IE6 known bugs site.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

asimpleart
asimpleart's picture
Offline
Enthusiast
Last seen: 11 years 19 weeks ago
Timezone: GMT-5
Joined: 2007-01-31
Posts: 94
Points: 4

Interesting Design

This is an interesting design. I like the grunge applied to it, as it probably fits your clients style. The detail is there too, you took your time and focused on the little things.

Here are a few suggestions.
1. I don't think the background helps your site design much, it looks alright, but i think you could think of something more fitting.
2. Where is the logo on the homepage? How are people going to know what company's website they are looking at?
3. You spent a lot of time on the look and feel of the site, but then forgot about the content styling. Make it interesting! Use bolts and stuff for headers, and style up the font a little bit.

Those are my main points, but I think your headed in the right direction!

Good luck!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 51 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I'm with asimpleart, I see

I'm with asimpleart,

I see the logo on the right, but I can't read it and I had to LOOK for it.

Also, when I click on Products it takes me to the cubecart and locks me there, how are your users supposed to get back to the content?

And in the cubecart you use a good easy to read logo that you dont have to find.

Have you tried turning CSS off on your site?
No h1 tags, no way for anyone to be able to access your site without CSS enabled and no way for a search engine spider to see your site.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

amadika
amadika's picture
Offline
Enthusiast
Texas
Last seen: 12 years 19 weeks ago
Texas
Timezone: GMT-6
Joined: 2007-04-16
Posts: 206
Points: 4

I agree with asimpleart in

I agree with asimpleart in that the background really doesn't do much for the design... And your content areas could use some work (especially the contact page) Have you considered doing lightboxing or some other simple image viewer for the gallery? Check out http://www.huddletogether.com/projects/lightbox2/
It's a bit overused these days, but it still beats seeing the images in the plain white background, and not having a way to navigate back other than the back button.

Perhaps you could substitute the Menu pic for the site's actual logo?

@}->-- Amanda

Nalif
Offline
Regular
Last seen: 15 years 2 weeks ago
Joined: 2007-05-21
Posts: 17
Points: 0

asimpleart wrote:This is an

asimpleart wrote:
This is an interesting design. I like the grunge applied to it, as it probably fits your clients style. The detail is there too, you took your time and focused on the little things.

Thanks!

asimpleart wrote:

Here are a few suggestions.
1. I don't think the background helps your site design much, it looks alright, but i think you could think of something more fitting.

My client is very happy with the color scheme. I'm open to suggestions, however, but I myself can't think of anything that would necessarily compliment it better. The way it currently is, both graphics that make up the background are very small and load very quickly. Early on, I played around with some concrete images to further carry the grunge feel, but neither I nor the client were really liking the overall "feel" of it. Once I changed the background to the current one, he was very happy with it. Do you have some suggestions as to what would fit better?

asimpleart wrote:

2. Where is the logo on the homepage? How are people going to know what company's website they are looking at?

Currently, Airbrush Headquarters is displayed vertically on the right hand graphic. I'm playing around with displaying his logo under the left hand menu (below the buttons) as well as possibly re-doing the top menu graphic to display his logo as opposed to the "Menu" LCD graphic.

Deuce wrote:

Also, when I click on Products it takes me to the cubecart and locks me there, how are your users supposed to get back to the content?

Thanks for pointing this out! Completely missed that. I'll add a button that returns the user to the homepage.

Deuce wrote:

Have you tried turning CSS off on your site?
No h1 tags, no way for anyone to be able to access your site without CSS enabled and no way for a search engine spider to see your site.

No way for a search engine spider to see my site? I don't understand. What's missing that would allow a search engine spider to see my site? h1 tags? I'm new to this concept.

amadika wrote:

Have you considered doing lightboxing or some other simple image viewer for the gallery? Check out http://www.huddletogether.com/projects/lightbox2/
It's a bit overused these days, but it still beats seeing the images in the plain white background, and not having a way to navigate back other than the back button.

Thanks! I used to have the images open in a new window, until I learned the evils of it. I didn't like the way the images showed up in the same window and felt it looked tacky, but it was the only thing I could find at the time, short of just using java script to re-tag rel="external" to target="blank", which seemed just as evil to me anyways. lightbox installed very easy, and works perfectly. Looks great, too. Thanks!

I'm still having the 3px margin border on the center column when viewed in IE6 ( and possibly below). I checked http://www.positioniseverything.net/explorer.html, but couldn't find a bug matching my description there :? It displays fine in FF as well as IE7.