Serendipity Forums

Being the fickle person that I am, I've decided to play around with a new theme for my site.

I am looking for any and all input at this point in time. Something I am probably going to change is the font in the logo portion. Other than that I am not quite sure of what should be altered.

This is my first color scheme that has used lighter colors, so I am a little out of my element with it. I am open to all suggestions. If you think it sucks I want to know.

http://test.zacgarrett.com/

Thanks.

chickens wrote:I am looking for any and all input at this point in time. Something I am probably going to change is the font in the logo portion. Other than that I am not quite sure of what should be altered.

Don't take this the wrong way, but it reminds me a little of early 80's computer graphics - C64, "load 8,1" etc. - which is fine if that's what you were going for.

I really like the colors, but the wide borders ... this looks very ... well, "blocky", if you know what I mean. It could definitely use some ... uhm ... "transitions", I guess, like i.e. background gradients or something. Again, if you like it this way, it's fine.

YL

The font is called Atari and no one seems to like it. I decided on the font last night when I should have been sleeping. i am going to change it, just havnt got around to it yet.

The wide borders do not look very good on the lighter colors. I liked them with the dark colors, but it did not port over very well. Still playing around with it, so I am not quite sure what way I will end up taking the borders.

chickens wrote:The font is called Atari and no one seems to like it.

Shoot, I wanted to refer to Atari VCS video consoles in the first place

chickens wrote:The wide borders do not look very good on the lighter colors. I liked them with the dark colors, but it did not port over very well. Still playing around with it, so I am not quite sure what way I will end up taking the borders.

I think something I call "pseudo 3d borders" could work. The idea is to use the same color for all four borders, but to use a lighter shade for left and top border. Something like this: Might not really work with these colors, but you'll get the idea.

YL

This is not an exact science, and everyone's taste's are personal.

However, you should try to avoid the use of pixels in your font sizes. BP deliberately uses ems and percentages. These allow a visitor's broswer to determine the font size and are considered to be the preferred method from an accessibility standpoint.

I've went with rounded corners compared to the borders. It flows much better with lighter colors. Spiffy corners work great if you can figure out where to place the code. I kept placing is before the sidebar div, which totally confused me. After a while of tweaking I figured out the correct location and they are working like a charm.

Hrm, em vs px. I've never really understood em before. Whenever I try to go with em I give up and go back with px as it seems more logical to me. If you have any resources to explain the difference between them in respects to accessibility I would like to take a look. When I've looked in the past I didnt find much of anything on a reason to use it besides its "better".

Next step, play around with the logo...

Understanding em is not really as important as understanding the difference between a fixed font size, and one that varies depending on the visitor's browser. Now that I think about it, I am fairly certain we went with all percentages for fonts, and use a mix of pixels and ems for margins, padding, etc.

Think of a visually impaired viewer... if you specify fonts in pixels, they cannot increase that using their browser... if you define a selector as 10px, that's it. If you define it as, say 100%, they can increase the text size using their browser. Relative font sizing does take a little bit of trial and error to fully understand as the percentages compound. 100% by itself is not universal. If you have an element that is nested within several containers, each container's relative font size ultimately impacts the final size of your relative value.

Google will be your best friend here in terms of understanding it!!

For starters, set your own browser for a "normal" font size, then use a percentage value that looks good. Then test it by increasing the font size a few times to make sure a visitor can still see most/all of what you expect them to.

Like I said, this concept takes a bit of getting used to, and I am by no means an expert. You learn to do things differently... especially with graphical elements. A good example is navbars... when supplying actual graphics, I need to remember to create a navbar graphic that can increase in size relative to the font. You can see this in action on my new s9y site at http://www.optional-necessity.com where the navbar increases in size as the browser font size increases.

The part that I get confused with is the changing of font sizes in a browser. With the current layout if I change the font size it will change just the same as if I use em. I've tested this in all of the major browsers -- ff, ie, opera, safari -- and have yet to see proof in using em over px.

In the past I have searched around trying to find an answer and I've never seen proof in the difference. The conclusion I've found is that em is a standard by W3 that they are trying to push without any real proof to their claim, just theory.

I want to understand the whole em vs px thing, the thing is my site functions exactly the same with em as with px. Em is just much more painful to work with in my opinion.

I finally found a tutorial that explains em vs px in a way that I can understand.
http://www.bigbaer.com/css_tutorials/css_font_size.htm

Yeah.... it might function the same. What browser are you using? You are a tech geek by your own definition, so I doubt it is IE. Firefox??? Firefox is smarter than IE, so it increases font sizes even for pixels. Try IE 6.... which you should do for your template anyway as it has problems in that browser.

I do not claim to have all the answers. I have my own challenges with this stuff too! I am merely point out that when you start to design something like this, you often open "pandora's box".

Anyone who needs help understanding em sizes take a look here and play around. typetester

HTH

Dave

chickens wrote:I've tested this in all of the major browsers -- ff, ie, opera, safari -- and have yet to see proof in using em over px.

I suppose you have done so in the latest versions of these. Plus, ff, opera, and safari are not the problem here - ie is. Try px fonts in an ie6 or even older ...

YL

Chickens - check your PM.