css suggestions?

[vol7ron]

I looked at how you had things coded and you were primarily using paragraphs around everything. So my suggestions were the fastest way to get the effect without changing your design or CSS that much. Ideally, you want to use the combination of text-align:center in the parent DIV and margin:0 auto, to have a cross-browser centered effect.

I realize my remarks might sound confusing, but if you do it step-by-step, you'll see it's right. The text-align:center, centers everything in it. It includes the images and text - I think everything except for that table, if I remember. At this point, the text is centered, but since the text is all in paragraphs, all you have to do is text-align:left the paragraph.

The text in the paragraphs actually inherit the center from the text-align:center on the colleft div. So by adding the text-align:left, you're going to reset that text back to the left side.

Some of your images, though, are in paragraph blocks as well. This means that they are also going to be left aligned. So to get them centered again, you can take them out of that paragraph block, put them in something else like a div, or create an id/class for them and just put p.image {text-align:center};

I thought you'd be using less code and keeping cleaner css/html if you just remove the paragraph blocks, or replace them with DIVs. But I don't know what your intent was for them anyhow. Technically, since there is no paragraph around them, you shouldn't be using them.




The maroon color that might work for you is: #732929 and lighter (I also tried #663333). Mind you, I'm just coming up with these colors off the top of my head and not using a program or anything, so I don't know how accurate they'd be. Back to the color.... you see how the google ad has that light green background, make it a light red #cc9999 (#c99).

To be honest, I like the green and I'm not sure any color will go with it, maybe black, possibly orange. Though, I think red is the best complementary color according to the color wheel. If I can remember back to 4th grade art, almost 15 years ago.

To really make it nice, have a little bit more text. I took away the circular images and your site looked 5x better just from that. But I know you want them, so think about 1) resizing them 2) reshaping them 3) placing them in another location. They could be one of those things that you put in the header image, or the header container over the background image, right aligned and indented in a little from the right. Just something to think about.





FYI, I'm just using color placeholders as skins for my site... i'm going to ask someone from here to skin something for me. Some images and what not. I have photoshop and have a good idea of what I want... but I'm lacking one thing: time. Also, I'm still building everything from scratch.

Building the CMS, login, you name it. The one thing I will probably hold off on building is the forum software. I made a nice looking one in ASP.NET when I was learning it, but it just took so much time. The current project I'm working on uses nothing but Perl/Javascript and some good ol' fashioned sweat.

 

[freecrm]

Thanks vol7ron

I now understand your text-align:center point with the p's.

Just to let you know, I use a combination of DW CS3 and notepad to do post work on stuff that DW can't handle.

Hence the proliferation of <p>'s as this is a defualt insert.

Your point about image divs is very valid and I'll work on that shortly.

Regarding colors, I have now tried a variety of color combinations, including numerous reds and purples, but the best one seems to be orange.

As a result, I have now color coded all items where the user will interact with the site, including buttons. I think this now looks quite well structured.

Your point about additional text is an interesting one. In earlier posts, it was recommended that more images were included - so I did. There's obviously a balance to be reached and I 'aint got there yet.

I like your idea of changing the circular images. In all fairness, they were broughtin from the last design and now don't really suit the new one - I will shove these through photoshop in a bit.

I too am tight on time... All of this site (with the exception of the forums: phpBB3) has been built from scratch and I'm still laboriously de-bugging and adding/improving new functionality.

I will obviously help you in any way I can if I get some time.

Rich

 

[vol7ron]

Right, so it's not so much having more, but seemingly more. Trick the eye, not the reader.

I think one proponent of this is to use a little larger font size. It looks like you're using 11px.

First off, before I address that, let me tackle the first problem. 11px (keywordixel) is a size that factors on the screen resolution and not user settings. A pixel is not scalable, you can use more or less of them, but the user has no control. So what I try to do is make all my sizes on the page relative. You can do this two ways: 1) set size as a percentage (ex 90%) or 2) (preferable method) use a relative font-size like em. Em -- standing for the letter 'm' is the width of the letter m.

What this means is that if a user zooms in on your page (for instance holding ctrl and scrolling up on the scroll wheel, or ctrl+'+ key'), then the page will stay in relation to eachother. If you define something in pixels, it technically should stay that size, no matter what. This is troublesome for the blind and the hard of seeing. Fortunately for you, I don't think text is effected by this. I think that is mainly for borders/lines and that sort of thing.

So to get back to the topic, 11px is still too small for the font in the body, if you want to take my suggestion, try and use 1.25em, or if you want to stick with the pixel sizing, use 12px.

You can also remove the font-size in the tabe {} CSS, since it's using the same font-size as the page. In the future may want your table font to be a different size, but it's not necessary at this point.

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

That was a lot said for "use a bigger font size."

The next thing: You have "CRM, The free solution is a free, fully functioning...", you might want to think about the wording.
You've already designated it as free, so need to repeat yourself, you're just taking away from the underlying message. There is also syntax issues with what follows the CRM, actually I'm not sure what the CRM is doing there. Without creating a new sentence, I would change this line to something like:
The free solution is a fully functioning and unlimited multi-user customer relation management (CRM) system. -- notice how the first time you use an acronym, it goes in the parentheses, not the definition.

You might want to say include something like, "To try it, read on below." So going back to the text point above. You want to maintain small paragraphs about 2-3 lins. 1 Line looks bare, like you're offering nothing, anything more than 4 forces user disinterest at first glance. I said at first glance, because obviously if you're interested in something you'll read paragraphs at a time (like you're doing here with my response)

Another point is the # of paragraphs used. Take my response as an example, it uses a lot of small paragraphs. That is actually the wrong thing to do things. If you're going to write a lengthy response, do it in around 3 paragraphs. That's because much like multiple lines can discourage a reader, so can multiple paragraphs. People are innately lazy, and reading online is not leisure, it is "work." Especially for customers. That is why attractive pictures are good, minimal text is good, but you need a certain amount of text to establish some report and sort of convince the user you are a viable business.

 

[freecrm]

OK - been working on some of your points this evening (UK time).. and now pretty tired.

Firstly, I would like to say that I really appreciate your educated and constructive comments. It is rare these days to find a forumite that can extend an entry beyond "cool site "

1) Font-size.... done, although I had site-wide issues with em values so I have reverted to 12px as suggested. I must admit, the change gives a better impression and fits well with the design.

2) Table font-size: done, but I have reserved a datatable.td class for smaller text if required.

3) My main time has been spent on the index page and first impressions (although this should have been done a long time ago!). The circular images are now a thing of the past and I have indeed embedded them into the header as the message is key to the success of the site. The additional usage of contrasting color spectrum here looks impressive and ties in with the remainder of the page.

Wording has been completely re-thought: with the generation of structured, informative paragraphs carrying the main KPI's. I have tried to keep these to a minimum and have broken up the remainder of the page with the imagery.

I still need to update the screen-shots as these are now horrendously out-of-date.

Overall I am aware that new visitors only spend a few seconds on a new index page and the key messages need to stand out in a fraction of that. This I believe I have now achieved without making it appear "tacky".

I'm still working on the more mundane areas, like image div's etc.

 

[vol7ron]

I am really impressed with the changes you've made. I know I suggested it, but I really like. Then again, I'm just one user and everyone's got their opinion.

I am not sure about the red/orange yet. I'm thinking a little less contrast in the header, but it does stand out, which is the point. The question is where's the balance between standing out in a good way and standing out too much that it looks disassociated.

I'm curious if maybe a shade of yellow would also work. This time I used Firebug to assist for the color, so it might be a little closer: #F3F08F. I'm just trying to visualize how that'd look in the header instead of the orange/red. I'm not sure it'd work, but it sort of compliments well. I'd probably use photoshop and see what works best. I'm sure it's not the best shade of yellow either. Obviously, the glow would have to be tweaked and the text would have to be darker, probably a dark green that matches the menubar.

As for the help, it's always easier finding ways to help/improve someone else's work. It's harder taking what you know and doing it to your own site. I think the reason is, you get your site to that 90% mark and you hit a wall. I for one am going to need help. What I'm doing is getting the backend working first (the login and settings), my front end will just be pretty much gradient placeholders until i can give some x10 points away for someone developing a decent scheme for me So don't go too far when everything's up and running, I'll probably need your input.

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

One suggestion on the text: "Need to trial it?" trial->try


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

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

 

[frankfriend]

Hi Rich,

The matthew james taylor site below may interest you. It deals with the 3 column holy grail layout!

It does work, but the math gets complex when you adjust the sizes - needs a good bit of trial & error.

http://matthewjamestaylor.com/blog/perfect-3-column.htm

I suggest that you view your results [esp with 3 col layouts] on multiple machines, with smeller dimensions as well, and different browsers. IE seems particularly prone to going wrong.

I like blue green sites, but I think your have too little contrast, the lettering and the margins all in the same/ similare greens are low on contrast. Try experimenting with dark bles` for the text or even black. No t s okeen on orange contrasting with green.

The images on the front page seem blurred, it may be the shadowed lettering [which I find just confuses the eye, or the colours. There is an effect as if there is a fine gauze over them.

Why do you have such broad left & right borders? they are popular on prefabricated templates & sites like wordpress blogs. But they use up a high % of your scrren 'real estate', which you could use to make the columns larger, and the text bigger.

Best regards

 

[freecrm]

vol7ron... I too am pretty happy with it but also felt that the orange was perhaps a little too caustic.

I've been playing with numerous colors all night and attach a few combinations. However, as you suggested (again), the pale yellow, or cream works well in the header, but I'm not so sure about a contrast. Maybe if this were to work alongside one of the other more opposing colors...? Hmm - I'm not sure I want to add a fourth dimension to this as I'll be in danger of losing cohesion.

What you say about you being 1 individual with one set of tastes is true but it seems that your view on a "clean, tasteful" look is similar to mine and the majority of your suggestions make sense.

I too had reached the 90% mark and I'm glad of the input.

Frankfriend, thanks too for your views. I had a good look at the site you recommended and there are some good valid arguments here: but... I have gone down this fixed width route for good reason... IE6!!!

The original site was auto expanding, but control over the different elements was too uncontrolled depending on the viewers resolution. I did try different ways to have two fixed columns with an auto-expanding central column (cssplay.co.uk was brilliant in this help) but I was getting too many cross browser bugs.

As pointed out earlier in this post, the reason for the wide borders is.. you have a particularly wide resolution! The vast majority of browsers are not as fortunate as you... or me.

I have 4 browsers.. IE6, IE7 (on a different machine), FF and Chrome. I think Opera will be next but I don't want to make my life any harder yet!

The blurred text (I'm assuming on the graphic) is down to anti-aliasing in PS, and, in all fairness, I probably used a font that was too small.

I'll see if I can work on it a bit more tomorrow.

vol.. I'll be glad to offer my humble opinion when you get to the front-end look.

 

[vol7ron]

While i do like those greens, your site is more of a teal and less of a primary color. That means you're going to find it's a little harder to find nice contrasting colors that are easy on the eyes - this is something graphic artists do very well.

For some reason I'm pulled back to that maroon. What I'd like to see is this: A decently thick maroon outline (about 4px) around a white background with large, bold, italic black text. It's going to have to be a different font from what the rest of your header is, something crisp and smooth; maybe a Verdana or Arial, or something downloaded.

You know, I really like that #D3F.. color too. You might want to try doing a white->#D3F754 gradient (top->bottom) and seeing how that looks.

Lotus is down right now, so I'm just trying to visualize based on what I remember, pardon my opinion if it seems out there.

Additionally, you may want to make the image a much smaller one that opens in a new page when a user clicks on it. What would be nice is to have an about page or something similar to put information like that. Make about 3 of those schematic-like data flow images, align them vertically and have a few paragraphs of text next to them, that'll get viewer attention. What I'm thinking, when compared to the Speedtest image in my signature, they should be about 3/4 the width and maybe 20-30px larger in height.

 

[vol7ron]

still don't like the orange/red for some reason. i am also unsure of the colored text/links throughout the page. just don't feel like it meshes well. takes away from the professionalism you had. see post above for suggestions. i might try that maroon out for links with a possible hover over effect.

 

[freecrm]

I'm not ignoring this, I just wanted to step back for a bit to try to look at it with fresh eyes.

After doing this, I have to admit that a pale cream (F3F03F) would be better and more complemetary.

I do however, still need a contrasting colour to highlight certain areas - to go with the cream and existing colours.

I'll work on this in the next few days hopefully.

 

[vol7ron]

I think a maroon or black. You could get away with a blue or orange. If the contrasting color stands out, it must be used sparingly though.

 

[freecrm]

Right - made some changes.

After playing with the cream, and changing all the images to match, the whole page looked a bit... well, drab! Very professional but a bit dull and lifeless.

I then started playing with the others again and found that the pale lime green looks good! I was as amazed as others might be when you propose putting jade with lime green.

But it does work well as an accent colour and I have included it where there are areas of interactivity.

I did try the burgundy/maroon, and orange but these all look wrong now. I think the simplicity of the single accent color works OK..

Need time to adapt all my images now!

 

[vol7ron]

I like that color. Try not to use too much of it. That's why I was saying gradient it from white to it. You might not want to make the Google ad that color. Also if you're going to have a glow on your header images, you're going to want a stroke between the green and it. Right now it just looks blurry, put like a thin black (or dark) stroke around the green, or do away with the glow.

I like it better than the orange, but I'm thinking you're going to need someone other than me to really help you choose the best color I can recognize what I like and don't like, but I also recognize when I don't know how to make something into what I like.

I still think the few changes you have made thus far is 100% better. If you go back to looking how the index page used to look, you'll see what I mean.

 

[freecrm]

Thanks for staying with it vol7ron.

I tried your suggestion and it works well - tones down the gaudiness of the lime. In addition, rather than a glow, I've put a very slim emboss outside it which just brings it to the foreground a bit more.

I did try putting a grad on the form text fields as well, but the text areas gave me a problem as it replicated through the Y axis... any ideas?

I think I'll just go through some de-bugging now to tidy it up (boring) and then see what others think of it before attacking it again.

Everyone probably gets to this point where it is pretty much there but there is always the temptation to alter and change until it's perfect.

This is no where near perfect but, as you've commented, it's a huge improvement.

Thanks again to all who helped.

 

[vol7ron]

I'm a pretty big fan of what you did with the emboss - I would have probably left it at just having a stroke, but this brought it out more, as you said.

As for "I did try putting a grad on the form text fields as well.." I'm not exactly sure what you're referring to. The login form? The registration form?

I'm guessing you mean for any input box. All you have to do is make a gradient image and set it to the background of the input box. You want the background color to be the bottom color of the gradient (incase different browsers render the input box taller than the image) and you want to turn the repeat-y off (by only selecting repeat-x).

Example:

input {
   background: #D3F754 url(./images/gradient.png) repeat-x 0 0;
}

Just so you know, although I like that D3F color, you should use it sparingly. Just for things to pop. For the input boxes, I would use a gradient that fades into your body's background color (#91C4C5).

 

[freecrm]

OK

I've come back to this and have made the chang you suggested Vol7ron - with good results!

I have also changed the menu colouration to suit.

After coming back to it from a break... I really like it!

The only thing that was bugging me is that if you're not logged in, the viewer does get any idea of the range of functions the system offers.

Only when you log in do you get a further menu... or at least that was the case.

I now have a secondary menu under the main one, giving a suggestion of functionality but greyed out and with a "#" link.

Is it obvious that this is not available until you log in or does it look like a styling error??

 

[Coonz]

Looks good.
One suggestion, try hiding the menu bar contain "My Tools", "Administration" etc.. - Show it when someone is logged in

Another small thing that caught my eye is the Login bar that floats in top right. It seems to be off by a pixel maybe.

 

[freecrm]

Thanks

The menu bar that is greyed out previously wasn't showing until someone was logged in.... BUT.. they couldn't get a good idea of how comprehensive the system is - hence the greyed out menu bar - at least this shows a visitor what is available even if they can't access it without logging in.

When you log in, the grey bar simply becomes active.

The login (or status) bar top right has css that is fixed with a margin that locks it to top and right, so that it always appears top right on the viewers screen (except IE6!). If you are viewing in 1024x768, it may look as if it was linked to the main layout - which it isn't!

 

[Coonz]

Ok, i understand.

 

[vol7ron]

Nice work, but I think you missed my discretion: you don't want to use that shade of yellow/green throughout your site. It should only be used in your header to attract the eye.

I'll just copy the statement I made before, because it was jumbled with my signature:

Just so you know, although I like that D3F color, you should use it sparingly. Just for things to pop. For the input boxes, I would use a gradient that fades into your body's background color (#91C4C5).

I would suggest the same for the menubar. This is because that color doesn't really blend with your site, but it does grab attention. It's a similar spectrum, so you can use it, but it's not so similar you can use it frequently. Your site is mainly a green/blue, whereas that color is a green/yellow --- both ends of the green spectrum, that don't really integrate well.

That being said, I do very much like the effect and the combination. Most people don't realize how difficult it sometimes is to make a gradient effect. It takes a second, but in photoshop, you may try multiple times to get your starting spot and ending spot in the right location, as well as the right shade and such. It looks good, I just think the color would be more effective with a different color scheme theme.