13 replies [Last post]
antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

I'm finishing a site redesign for a client and would like your opinions on it before showing them this first iteration. Currently, I have only the homepage done. Everything validates as well.

One thing...if the site looks messed up in Mozilla/Firebird, please let me know. I was having problems with some nested positioning rules and just implemented some changes. I haven't had a chance to see if these changes fixed things in those browsers yet because my university refuses to install Mozilla in the main labs. Bastards.

http://www.dustyroaddesigns.com/testing/abc/

Thanks everyone,

Andrew

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Strict and Needy

You'll be happy to know that it seems fine in FF, slight shame that you've used a table but I guess it's just to center the layout .

Personally not to keen on the blue body background would prefer something not so primary but that is personal taste and would ideally like to see some sort of subtle effect to lift the wrapper block from he page slightly.
But looks good for a first iteration
As for your IT admin send him on over to here and we'll put him straight as regards Mozi/FF Oups

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Strict and Needy

Looks good, Andrew

I'm afraid it falls about a bit in Opera, see attached image, if you are bothered about Opera.

I agree with the venerable Hugo's comment about the mid-blue background. It's OK at 800x600 but at higher resolutions 'tis a bit of an assault on the old eye-balls Shock

I guess you're stuck with corporate colours here. If not, that orange background is one of the most difficult colours to achieve contrast standards with. It fails the contrast tests with text colour #fdfdfd and if that's not enough it also fails with text colours #fff and #000.

If you're interested, I've found a new colour contrast analyser toy at:
http://www.nils.org.au/ais/web/resources/contrast%5Fanalyser/

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Strict and Needy

Hugo,

Thanks for the input. I added a rough page for the Services section. I'm worried about it because of the scrolling factor. I know Mozilla/Firefox has no overflow-x property, so the rule I set:

overflow-x: hidden

won't work in those browsers. How bad is it on this page? Tell me slowly please.

http://www.dustyroaddesigns.com/testing/abc/services/

Is there a way around this? Here's my CSS:

http://www.dustyroaddesigns.com/testing/abc/c/main.css

The other issue I'm having is with the active states on the nav links. I have them set like this in the css:

ul#nav li a.active { color: #666; text-decoration: none; }

Then, in the xhtml...

<li><a class="active" href="/">home</a></li>
<li><a href="/company/">company</a></li>
<li><a href="services/">services</a></li>
<li><a href="contact/">contact</a></li>

It seems the active style is working when it wants to. Sometimes when I'm editing locally, it works. Sometimes not. Ditto while online. This behavior occurs only in IE6 btw.

Thanks again,

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Strict and Needy

Why did I hit f5? Why? Well, I'll have you know that I just lost a great post. Grr...

Anyway,

Lorraine,

Simply put, you rock. I went hog wild on the colors because I had no boundaries and lost control of my senses. The original site is pretty rough (abcez.com) and I exploded into the redesign like a box of flaming crayons. I'll have a look at your new color toy.

As for Opera...yes, I care about it. I'll have a look at it when I get home. I'm having more trouble getting things to look the way I want in Strict mode. I usually design in Transitional so it makes sense that I'm a bit addled these days.

Also, if you know any single plants, I'm still looking...(preferable to busty Marigolds)

Thanks,

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Strict and Needy

A couple of points on active in the nav lists:
IE doesn't understand a: active. The work around is:
* html ul#nav li a.active { color: #666; text-decoration: none; }

Having said that the code in the html actually offers the visitors a blank link for the page they are on, which could be a bit confusing for some - 'cos if the cursor changes to show a link, they will click :? Think about trying something like this:

css
ul#nav li.currentPage {color: #666}

html

<ul id="nav">
          <li class="currentPage">home</li>
          <li><a href="/company/">company</a></li>
          <li><a href="services/">services</a></li>
          <li><a href="contact/">contact</a></li>
          <li class="last"></li>
        </ul>

There's a lot to be said for marigolds Wink

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 16 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Strict and Needy

Got a good start...
Don't know if it is the color, the font, the size, or a combination of them all, (or maybe it's just me)
but your main navigation is REAL tough for me to make out.

As far as your a:active current page discussion... I've got a couple of posts floating about the forum regarding using a body id to do what you are doing. It's less confusing and eliminates having to put the class="currentpage" on every page... if you are interested in something like that and can't find the posts let me know and I'll dig em up for ya.

Personally I don't think the site needs that overflow or scrolling thing on the left hand side... but I guess the client wants it?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Strict and Needy

I was going to suggest what Lorraine said to remove the link altogether for the current page it's better that there is no link to click on and rmfred has mentioned that he has discussed in other posts a simple method of unlinking , also a little known fact but IE has a problem with obeying link pseudo classes when the hash sign is used in a link, it tends to ignore the rules, although this is probably not an issue here.

With the scrolling div it's working ok in FF but you have a horizontal scroll bar you might try reducing the right padding on the #top div in the #content div set at 100px at present although at a glance and with a fading brain I'm not sure why it's there removing it makes no change as you have the width set all the padding does is push the div out wide but reducing it does loose the scroll bar.

I have to admit I'm with rmfred as I'm never sure I really like scrolling divs I always want to try and use them and nearly always decide that they just look ugly, the scroll bars just tend to get in the way and look cumbersome but if the client wants them great Smile

Shame about the contrast problems with orange and it fails tests with #000 Shock wouldn't have thought so.

Do like orange something to do with my venerable status eh Lorraine Wink

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

Strict and Needy

Again, I am very pleased with the great feedback from all of you. I'm struggling with the color scheme, though. Any ideas would be welcome here. And Lorraine, that picture! There isn't an emoticon that can express my emotions towards it. Not here, anyway.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 27 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Strict and Needy

Here's another personal opinion for you on the overall look and feel of the site...

If blue and orange are a 'must' then use a darker, duskier blue like the colour of the sky in your truck picture; and a stronger, darker orange or peach. The tool that Lorraine has found looks great but I'm just giving you my thoughts based on taste. You may then find that the orange will be too overpowering for the amount you use, which then means that you'll have to change the design a bit to restore the visual balance.

You should not size your fonts in pixels as IE users cannot re-size them if needed. Anyway, the sizes you use are too small for me on my hi-res monitor.

Placing the company's trading identifier to the top right is different I'll grant you that, but the gap it leaves on the left looks odd when so many sites do things the other way round. Given that the company is not selling itself on qualities of doing things differently (e.g. like Apple), I would personally move the logotype to the left (and turn it into a link to the home page to meet the expectations of the average user).

Overall the design as it stands is a little tame and weak. That's okay for a florists, but for a trucking and storage company you need to communicate strength and security through bold use of colour and/or shapes. Also, your client's customers will probably be predominantly male so aim your design at men.

HTH Smile

Life's a b*tch and then you die!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Strict and Needy

Quote:
Do like orange something to do with my venerable status eh Lorraine

No sir - that is, not unless you're actually called: Robert Hugo Kilroy, David Hugo D*ckinson or... uumh... Hugo Tango Laughing out loud

Would you believe they beeped *beep* inson?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 15 years 23 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Strict and Needy

Andrew, very good color schemer here:

http://wellstyled.com/tools/colorscheme2/index-en.html
There is a down-drop list at bottom right that lets you check the schemes for the way they look to people with various forms of color-blindness. Might be very useful for this particular site.

If you're targetting the site at men, howzabout?
Macho man - black, white and red. Bold and stark but can be stunning.
Patriotic man - red white and blue. Pick the colours from the truck picture.
Working man - gray monochrome or a palette around the brown area - a touch of dusty roads header.
All men - you gotta have a piccy of Marigold somewhere :roll:

The views expressed above are not necessarily those of the author Wink

capmexbiz
Offline
Regular
Last seen: 17 years 17 weeks ago
Joined: 2004-09-29
Posts: 14
Points: 0

Strict and Needy

The main navigation links look small and contracted. For the background color, black could work very well with your design. And for the lighter blue inner background. You could try something like #F4DBAA (just an example).

Hope this helps

Webmaster Resources for Business Websites

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 13 years 3 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

recitation is cancelled (leaky diaper)

The problem with color (for me) is that I can't ever decide on one thing. I have a commitment problem I guess. I like that colo[u]rs you threw at me capmexbiz (#F4DBAA) but I also like Lorraine's idea to use the patriotic testosterone look.

The problem I have with the red white and blue look is the background color. Should this be white? If so, do you think some sort of faded background white would look best?

I do intend to change the nav text size as it is awkward looking right now. I'm also going to try to play around with the neat links people have sent and fool with some "tough" schemes. I'm going to come back to this section and bowl everyone over with my new, brutish, domestically violent, monster-truck-a-thon look. So, look out!

I feel like a cracked wafer under a bootlegged moon.