css suggestions?

[freecrm]

I know the overall look has been under critique before, but I am specifically interested in suggestions for improving the css on this site.

www.freecrm.x10hosting.com

It is meant to be clean.. hence a lot of white but somehow, it just doesn't do it for me yet. Maybe its the colour choice?

Please bear in mind that this is meant to be aimed at sales professionals and it has to have a crisp/uncluttered look.

Any comments welcome provided they are constructive. :biggrin:

 

[GrandeMike]

I don't like how everything spills out to the right of the content, like the horizontal rules. I think you need to clearly define a stopping point for the width in your css. If you're using a left-justified setup like you have it, the most common stopping point is where your navigation buttons end.

In my opinion, I definitely think that you could improve by making it a multi-column design (either 2 or 3) and still keep the professional and uncluttered look. This would usually help with the width issue also, and also shorten the length of the page which takes away a lot of the scrolling one has to do. And remember, this is all done with CSS, no tables.

Since we're not looking for full critiques, I'll stop there.
But I may have some free time coming up if you needed any help reworking things. I think you're on the right track, you just need to find a way to make it 'pop' a little more. And I believe you can do that with the color scheme you have +/- a different shade here or there.

 

[freecrm]

I had been contemplating using a 2 column design but this makes horizontal auto-stretch tricky for all browsers.

I think I'll add another column and make the wrapper fixed width with auto margins left and right.

The only reason I hadn't made it multi-column is that the site revolves around data and retrieving it quickly. Adding a column restricts space for embedded tables slightly.

I am planning to do the whole lot in css rather than tables.... usual #wrapper #header #content .leftcolumn .rightcolumn #footer style.

This is going to be tricky because there are multiple pages on this site already and my version of DW hates updating editable regions in page templates!

Any other comments are welcome.

(Sample login in User: "Demo" and Password: "Password")

 

[RRJJMM]

I like the idea of a fixed width. When more narrow that your menu, it looks strange, and you don't seem to take advantage of the extra-space much when the window is wider than your menu. So, a fixed width just wider than the menu would clean things up a bit.

Then. . . auto margins to center the site, and your in buisness.


Good luck,

 

[Sohail]

I would suggest centering the text in the table by removing:

.oneColFixCtr #container {
text-align:left;
}

ftom page.css (line 110). It just looks a bit smarter centered.

 

[freecrm]

Thanks for the feedback - working on it now...

 

[freecrm]

What's the opinion of this concept (attached) vs. the current site????

The width has been set for 1028x768, seeing as that seem to be the most common smallest resolution.

All in div's so I can manipulate the page real easy.

If this is generally seen as an improvement, I'll need to spend some time putting it into all my pages (which are currently in tables! aarrgghhhh)

 

[chitorch]

Looks like a huge coding project.

 

[Matt]

I like 2 column version you posted.

Personally, I like to keep my layouts under 800 pixels wide. I don't like websites that stretch with screen resolution, as they start to seem empty depending on how the page is laid out.

 

[RRJJMM]

What's the opinion of this concept (attached) vs. the current site????

The width has been set for 1028x768, seeing as that seem to be the most common smallest resolution.

All in div's so I can manipulate the page real easy.

If this is generally seen as an improvement, I'll need to spend some time putting it into all my pages (which are currently in tables! aarrgghhhh)

I think the new one would be a big improvement. It's best to leave tables behind, so why not make it sooner rather than later?

 

[freecrm]

Thanks for the feedback guys/gals..

I've played with a couple of other designs but I do like the simplicity of this one.

As you can imagine... still picking my way through the table code...

Personally, I like to keep my layouts under 800 pixels wide. I don't like websites that stretch with screen resolution, as they start to seem empty depending on how the page is laid out.

The reason I went for 1028 width is that only about 5% still use 800x600 and the vast majority use this resolution (info obtained from Google Analytics over a year). But you're right, if they do view in 800, the right column will fall below the left column... messy!

 

[freecrm]

OK - finally - I am getting to grips with this...

The test page is http://www.freecrm.x10hosting.com/css/csstest.php (with viewable css)

I am now going laboriously through the rest of the site, deleting tables, tr's and td's.

I do have a problem though.

If you look at the index, you will see that there are 2 sets of menus... deliberate but awkward.

When not signed in, the menu headers are greyed out and only become live when logged in.

I have to admit, the two rows look nasty, but I need these options..

Any ideas?

 

[freecrm]

OK - majority of the site is done, although I've noticed a massive problem with IE6!! arrrgghhh.

Sorry if its down - the free hosting is going through (another) upgrade!

Comments are very welcome

 

[lair360]

Good background! But, the foreground colours looks very bland....needs a little more taste!!

 

[freecrm]

Good background! But, the foreground colours looks very bland....needs a little more taste!!

Yeah - I thought it needed more contrast to bring out the areas of interest.

I'll see to that when I've got this IE6 issue resolved. I'm also having problems with including css.

For instance, if I have a structure like

<body>
<div id="wrapper">
     <div id="header">
     Header stuff
     </div>
     <div id="content">
     Main content stuff including column divs
     </div>
     <div id="footer">
     Footer stuff
     </div>
</div>
</body>

And I put the main header and footer into an include..

<body>
<?php include(../header.php); ?>
Main content stuff including column divs
<?php include (../footer.php);?>
</body>

With header include..

<div id="wrapper">
     <div id="header">
     Header stuff
     </div>
     <div id="content">

And footer include...

     </div>
     <div id="footer">
     Footer stuff
     </div>
</div>

I get loads of problems!!!!!! Why????

 

[lair360]

There is some conflict with your css table since you might have the same id?
Also, try to add this to your css. However, this is only an example...

#header.sd1
{
position:fixed;
height: 100px;
width: 300px;
min-width: 300px;
}

Notes: the class code is called: ".sd1" and the id code is "#header"
Edit:
Notes: you should wrap all of your codes with a single "body" tag instead of having 3 to 4!

 

[freecrm]

Thanks Lair, although I don't think I have any other "header" conflicts.

I'm still trying to work out what your css does and where it goes?

I'm also trying to understand why I have multiple "body" tags??? :dunno:

I have been working on the css and managed to get rid of the current bugs.

 

[lair360]

having a position:fixed will put the table + borders static, and min-width to stop the table from stretching too wide and ruin the webpage. Also, this is like a hard lock table so that everything doesn't go buggy.

 

[vol7ron]

For the purpose of my response, I am addressing:
www.freecrm.x10hosting.com and not the csstest link you posted later

-----------------------------------------------------------------------------------

I would suggest centering the text in the table by removing:
.oneColFixCtr #container {
text-align:left;
}
ftom page.css (line 110). It just looks a bit smarter centered.

I agree, but I also say you should center everything except the text in the left container:

.colleft{   position: relative;
   display: inline;
   float: left;
   background: #fff url(../images/back_li.gif);
   margin: 0px 10px 10px 0px;
   padding: 10px;
   border: 1px solid #006666;
   width:785px;
[B]   text-align:center;[/B]
}

Also center the table by:

table.datatable {
   border-collapse:collapse;
   empty-cells:show;
   margin:10px [B]auto [/B]0;
}

And finally you're going to need to add:

p {
   margin:5px 0;
[B]   text-align:left;[/B]
}

And change the <p>s around the images to <div>s


-----------------------------------------------------------------------------------

Good background! But, the foreground colours looks very bland....needs a little more taste!!

I really like the tones of greens that you've chosen, it looks really good. Initially I was really impressed and it goes great for your target audience. It is clean and professional. After you view it for a while, though, I initially thought the the colors were too close together, meaning the dark isn't dark enough or the light isn't light enough. -- but really, I like those greens. An alternative to increasing the contrast would be to add another color. Possibly using more grey, but since that is bland you might need a whole other spectrum, given your scheme I would say a maroonish color.

-----------------------------------------------------------------------------------

A final suggestion would be to consider ways to shorten the main page. That is, placing screenshots in the right column under/above the ads. Another thing you could do is chop the table in half and put the two halves side-by-side (a four column layout).


.

 

[freecrm]

having a position:fixed will put the table + borders static, and min-width to stop the table from stretching too wide and ruin the webpage. Also, this is like a hard lock table so that everything doesn't go buggy.

Thanks Lair - I hadn't thought about these ideas.

I agree, but I also say you should center everything except the text in the left container:

Code:
.colleft{ position: relative;
display: inline;
float: left;
background: #fff url(../images/back_li.gif);
margin: 0px 10px 10px 0px;
padding: 10px;
border: 1px solid #006666;
width:785px;
text-align:center;
}

vol7ron, your response is comprehensive and useful, as always!

This section puzzled me though. If everything EXCEPT the colleft should be centered, surely this tag would be the one tag without text-align center!

I like this idea for the colright though - good point.

Centering the table is also a good idea, but I don't want all datatables to be centred so I might create another class, like .presenttable or something so I can distinguish between the two.

I was interested in your class definition for the <p>'s - why the text-align left? - Isn't this the default?

As for the colour scheme, I had been playing with it for ages...

I too like the greens and have added small amounts of a dark orange as a highlight colour (hovers, forms etc) which I think on memory is something like #ff3300. I've done this so that users can instantly see where they can interact with the page... but maybe it needs more? Maroon? I'll try it.

Page length is going to be an issue on lots of pages in this site. As you can imagine, CRM deals with data, and lots of it, some some repeating tables will extend many times below the "fold".

However, for the index, I think you're right - I'll work on it.