Web Colors and Icons Explained

I am frequently asked to explain my job as a professional Front-End Software Engineer/UI/UX Developer/Designer. If my listeners are still with me and are extremely polite, they request “Everything You Always Wanted to Know About Web Design (But Were Afraid to Ask Because it Might Be Boring) [the Mobile Edition, in 2 minutes or less].” Below is a distillation of two crucial topics, Colors and Icons.

Colors

Have you ever wondered why so many websites use the same colors? The consortium for web standards Colors Committee defines acceptable colors by working closely with browser makers, popular frameworks, and sports drink manufacturers. Just like other technologies and fashions, a color can get discontinued and become unsupported. Once that happens, the color becomes invisible in all browsers.

It’s important to please everyone. One user abhors amber; another loathes lilac. This brings most sites quite logically to the mathematical middle-of-the-road. At Yodlr we engineered the background color to appear Gray within the USA but Grey elsewhere.

I used the colors and shapes of Yodlr’s existing logo as a base. I was able to convince management to shell out the extra money needed for purple, a particularly expensive license because it uses both red and blue and is associated with royalty.

Icons

Creating icons for uncommon buttons is difficult. At Yodlr we needed new icons to show when participants were viewing a presentation and for our “Raise your Hand” feature. Some of the more challenging icons I have created in the past were for “Deodorant”, “Existentialism”, “Hot Pastrami” and “Cold Pastrami”.

A common but little talked about problem with shapes and icons is the dreaded “It Reminds Me Of”, or its acronym IRMO, which I just made up. IRMO occurs when you show someone your work and they say

“It reminds me of

  • a skunk,”
  • “our competitor’s logo,” or
  • an icon already in use that means something completely different.

You can’t argue with IRMO. (No, it looks nothing like a chandelier!) Sometimes you’re looking at your work and realize it resembles private body part/s. Experts agree that Body-part IRMO is more widely-spread than previously thought but generally goes unreported because of the stigma. If you experience Body-part IRMO, experts advise, hide your work and go back to the drawing board.

AngularJS Fixed Header Directive and Demo

Here’s the directive Lance Finney and Steve Molitor created in github:  https://github.com/objectcomputing/FixedHeader.

Here’s the demo:
http://objectcomputing.github.io/FixedHeader/demo/index.html.

Steve says, “The demo is ugly on purpose because we wanted it to focus on the essential markup and css necessary to use the directive.”

Yours truly is credited in the README notes.

Scrollbar Width Hack

Have you ever wanted to line something up with the right side of the content of an element with a scrollbar, but were frustrated because scrollbar widths vary by browser (including mobile ones where they might not be visible)? Yeah, me too. I just made a demo page of a hack for that. It creates an invisible element with a scrollbar on it for positioning.  This seems to do what I need right now.  What would be the best, but I don’t have an answer for, is a way to do something like this only taking into account whether the visible element with the scrollbar has a scrollbar or not.  My solution is to make sure it always does.  Doing the same thing when it might not is the next question.  I can think of a couple of ways to do this with JavaScript, but I wanted to do it with CSS.

Fade-Container – Text Truncation in Tables, Multiple Lines, and no Calculation

See the test page.

The CSS ellipsis is great and now pretty well supported; however, there are times one can’t use it. It doesn’t work in table cells of variable width, and won’t work if you want your text to wrap to a second or third line and then truncate. I came up with a technique which will work in those situations. I call it the “fade-container”. It works especially well when you want the table rows to be a uniform height and you want to truncate text that is too long to fit without calculating anything. This technique also works with IE6.

First, a quick explanation of the challenges-
The CSS ellipsis can only be one line (not wrapped to multiple lines) because it needs “white-space: nowrap;”.
The CSS ellipsis is measured by the browser as the width of the available space. You can do this test, create a fixed width container. Inside put 2 spans with text in them. The first give a short bit of text that fits easily inside the container. The second span give a long rambling novel that will need truncation. Style both of them with the ellipsis rules.

span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

If you test the width of these with JavaScript you will see that the browser considers them both the width of their container, even the one that’s shorter.

A table calculates the width of columns by calculating the the contents first, and then calculating the columns second. Putting long non-breaking content into a table, which is what happens when one sets the content to nowrap, usually looks bad and often breaks the table.

There are good reasons why you wouldn’t want to use JavaScript to calculate the contents of each cell. The fade-container method means you don’t have to calculate anything. The markup is

div class="fade-container" title="content goes here"
     content goes here
     div class="fade"

but see the test page for the whole thing.

The way this works is that the text goes inside a div which hides the overflowed text. An image is positioned in the div. The image goes from transparent to opaque, matching the background color of the table cell. If text is long it will flow under the image looking like it’s faded out. If the text is short it will end before the image, which will be invisible, since the colored part matches the background under it.

This can be adjusted to wrap to one or more lines with the CSS. The fade-container has a title with the full content in it in case the user wants to see it by hovering.

The fade div has a gradient which goes from transparent to the container’s background color. This can be done with CSS gradients or with a png for older browsers. If your table row has a different background for hover or selected or has zebra stripes, you will need additional fade styles to match.

The hyphens, word-wrap and word break is to reduce the amount of white-space at the end of the line before the text wraps. If the wrapping word is long, it looks better to hyphenate it instead of showing a gap, which won’t give a visual indicator that there is a fade. For one line I use “word-break: break-all;” because it will show that there’s more text to come, but for multiple lines I won’t use that because it chops a word indiscriminately and that will show on the top lines.

You will need new images and different positioning for non left-to-right languages. You will also need additional colored fades if you have zebra striped tables or the table row backgrounds change color on hover.

My Warped Sense of Humor

Image

I get bored of right angles and since this is my blog, and I can do what I want with it, I’ve made some changes to the mobile design.  The base theme is Carrington-mobile-1.2. I added some of my own CSS to it to change the colors and to make it  more, well, me.  I used CSS3 to rotate some stuff.  Perhaps it’s a bit subtle.  I think someone is going to be holding his or her phone and twisting it around trying to make the lines straighten out, then wondering what’s wrong.  That might be really bad design, but it’s also funny.  I hadn’t intended to annoy anyone, just to do something a bit different and have some fun.