Get it All
Together

I’m working on redesigning the front page of this website a bit with a new theme. The new look will be based on the current design, but more flexible, a bit flashier and like my political blog’s front page, more of a representation of the website as a whole, rather than this one blog.

As I’m working along with the new design, I’ve hatched a scheme to create an interesting sidebar which reflects some different thinking than most that I’ve seen. But I’d like this sidebar to – if possible – stretch the entire height of the page. While searching for answers, a Twitter friend suggested this:

Equal height boxes with CSS | Lab | 456 Berea Street.

Great! What a perfect solution, right? Well, not quite. Internet Explorer once again lags behind the rest of the pack with CSS adoption and this CSS table design thing is not available to any browser below IE 8. Currently, IE 8 adoption is happening at a snail’s pace. Three times as many IE users are using 6 and 7 as are using 8.

Give it a few months, and this will be a non-issue. In the meanwhile, I’m thinking I’ll need to work out a CSS hack to provide an acceptable alternative to older browsers while still maintaining the option for FF and IE8 users.

If you’re like me, you design web pages because you have a passion for data and display, both. But that may not necessarily mean – and in my case, it most certainly does not mean – that you have a natural ability for dealing with color. Primary colors are one thing, but getting the subtlety and nuance of really rich, vibrant colors is something altogether different. In fact, there are people in interior decorating, graphic design and other industries whose sole job it is to select colors.

In the past, the limitations of browsers and operating systems gave us a great excuse: we *had* to stick to Web Safe RGB, so exotic colors simply were not possible. Well, that excuse is long-past expired. So, what’s your excuse now?

Finding new and interesting colors can be a challenge. Even for artists, finding the colors they love in the real world available to them in the digital world is a daunting task. But with all those experts out there, certainly there must ways to find color combinations besides your own personal brain power? I decided to make a list of some outside-the-box options for your edification. Your comments and suggestions are heartily encouraged.

5. Why Not Ask Sherwin Williams?

The Sherwin Williams website is an excellent resource for color matching palettes of all kinds. Of particular interest to me is the historical palettes section of their website. Here you will find sample selections of the color schemes which provided the inspiration for interior decorating throughout various eras. Look to this resource to find some interesting background colors or text area colors and match them elsewhere.

“But wait!” you may be saying, “how can I use these color options when they’re only images? How do I get the hexs for them?”

The answer is your eye dropper tool in Photoshop. Save the image you want to sample and open it up in Photoshop. Then just use the eye dropper tool to get the sample. Double-click the color in the Color-Selection Box. In the window that opens, you will find the hexidecimal value for the color you’ve selected.

4. Photoshop Swatch Palettes

Another great resource for interesting colors is Photoshop’s swatch palettes. The prepackaged color palettes include Renaissance themed colors and Art-Deco stuff, plus lots more. Once again, you can select the color and then double-click the Color-Selection Box to get the hex. Of course, as a pro tip, you’ll want to eventually save the colors you select for your theme as your own custom palette. You’ll probably want to create a custom palette for every website you work on, if you’re planning on ever coming back to it.

3. Old House Colors

Here’s an interesting website. OldHouseColors.com is really meant for house painters and owners who want their houses to have the classic look that their homes were meant to have. But information on the web is free, and that means its freely used! There’s lots of color possibilities here that you may not find, exactly, anywhere else.

2. What about Macy’s?

Yes. Macy’s. Or Overstock.com, if you like. But clothing is some of the most color-rich stuff most of us ever touch. Why not use some of the swatches they have on their sites for inspiration? You can make an entire WordPress theme and base it around a Polo Ralph Lauren suit! The point is to find colors you can:

  1. Easily sample and use
  2. Dig enough to use in the first place!

1. Color Scheme Designer 3

Beyond a doubt, the best resource for coming up with balanced themes, the Color Scheme Designer uses the science of color to come up with companion colors for whatever favourite color you’ve discovered. The best part of this resource is that it provides you six different palette options for your chosen color, based on their relationship to one another on the color wheel. I am sure that color professionals can explain how all this works. What I can say is that it works beautifully. And it provides you color combinations which, when viewed, make perfect sense yet seem – to me, anyway – totally surprising.

If you’re like me, you like to have a fair amount of control in the way your websites look to the user. As you know, this is not always easy based on the way browers were meant to behave. Browsers were meant to allow differently-sized monitors and windows show the same content, and thus allow for a lot of proportional widths, with the page stretching and scaling to adjust to the different readers. But in these modern days, we can anticipate certain screen resolutions and many pages conform to a rigid width.

Keeping this width is actually quite important from design, usability and branding perspectives, as a matter of fact: my keeping pages a consistent width, we increase the chances that people recognize our pages as something unique (branding), we allow our users to be accustomed to the locations of key navigational components (usability) and we decrease the chances that something unexpected on the page will break the overall design (design).

However, there are very real problems with fixed-width pages that many novices encounter, making fixed width pages a real bear to deal with. I thought I’d take the time to discuss the reasons that – even in a fixed-width page – using proportional sizes has benefits to the designer.

Continue reading →

This is just a “public service announcement” for those web designers looking for a fast way to get a nice, even hanging indentation on their pages. That’s when the top line goes all the way to the margin and the text below it is what is indented. You might use them for a non-bulleted list such as those in the typical WordPress sidebar. It is a very simple fix, but I’ve been surprised by the lack of adequate answers in Google and figure someone out there might be looking for an answer would appreciate it.

So, the fix is: create a left margin of Xpx, then use text-indent with a -Xpx value. Ho! Is that easy, or what? And it works with IE and Firefox, both:
[code lang=”css”]
#blogwire ul {
margin-left: 15px;
}
#blogwire ul li {
text-indent: -15px;
}[/code]