New Design -- Need Opinions

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
chickens
Regular
Posts: 192
Joined: Wed Dec 06, 2006 12:15 am
Location: Vegas
Contact:

New Design -- Need Opinions

Post by chickens » Tue Nov 13, 2007 9:30 pm

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.

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: New Design -- Need Opinions

Post by yellowled » Tue Nov 13, 2007 9:56 pm

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
amazon Wishlist - Serendipity-Podcast (German only, sorry)

chickens
Regular
Posts: 192
Joined: Wed Dec 06, 2006 12:15 am
Location: Vegas
Contact:

Post by chickens » Tue Nov 13, 2007 10:06 pm

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.

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled » Tue Nov 13, 2007 10:16 pm

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

:lol: 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:

Code: Select all

#content {
    border: 1px solid #aaa;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
}

Might not really work with these colors, but you'll get the idea.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Tue Nov 13, 2007 11:03 pm

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.

chickens
Regular
Posts: 192
Joined: Wed Dec 06, 2006 12:15 am
Location: Vegas
Contact:

Post by chickens » Wed Nov 14, 2007 12:03 am

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... :D

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed Nov 14, 2007 12:40 am

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!! :lol:

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.

chickens
Regular
Posts: 192
Joined: Wed Dec 06, 2006 12:15 am
Location: Vegas
Contact:

Post by chickens » Wed Nov 14, 2007 1:23 am

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.

chickens
Regular
Posts: 192
Joined: Wed Dec 06, 2006 12:15 am
Location: Vegas
Contact:

Post by chickens » Wed Nov 14, 2007 1:28 am

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

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Wed Nov 14, 2007 1:33 am

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".

d_cee
Regular
Posts: 603
Joined: Wed Jan 18, 2006 6:32 pm
Location: UK
Contact:

Post by d_cee » Wed Nov 14, 2007 10:41 am

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

HTH

Dave

User avatar
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Post by yellowled » Wed Nov 14, 2007 10:54 am

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
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3638
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers » Thu Nov 15, 2007 3:24 am

Chickens - check your PM.

Post Reply