HTML Colors and the Shadows of Gray

Do you remember of the old monochromatic times?

In another recently experienced situation, I feel like in a "back to the past" movie.

Let me show you how that feeling arises:

Working for the Enterprise, there is always a chosen hardware and of course a chosen development environment. I have already posted about customer's decision around being IE6 the standard browser to be considered when developing applications in the previous post.

Considering the hardware, I have recently involved in a situation where the chosen hardware simply didn't support the chosen software options.

We have basically two models of PCs coming from a big enterprise supplier. One of them have an on board video controller (let's call it the X320 model), and the other an off board more specialized video controller (this one could be the X330 model).

Our principal customer site consists mainly of shades of red and gray, but the problem appears more easily with a variety of different tones of gray.

The question is: using the customer's standard CSS plenty of gray tones, many of those tones are simply ignored by X320's video controller, but appear fine when using the X330's one.

This situation brings me back to the old "safe web color" time, and proves me that in the "safe way"; there are no many safe gray options.

If you have any question or need more information, I have compiled information about HTML Colors in general and specifically about gray scale here.

The final word is "Be careful about Gray Shades".

Who cares about Javascript, Jquery and Prototype?

Well, I care about them all of course.

But I have recently experienced a situation where if I was in a more up to date development environment, none of them will surpass simple HTML and CSS.

Let me show how that application should work:

• First of all, unfortunately, we need to use tables in these apps.
• We have a set of images in a Thumbnail.
• When one of the Thumbnail images is clicked a corresponding centered larger image will be displayed at the bottom of the page.
• I have defined a fixed width of this larger image in 750px.
• I was counting with the height being automatically and proportionally set considering that width.

Everything works fine in all browsers, except when images are narrow then that preset limit.

In that case the centered larger image becomes distorted. The narrow the image compared with the preset width the more obvious becomes the distortion.

You can see an example of how it not properly works here.

On the other hand the solution to that was amazingly simple. Simple as 2 lines of CSS code!

You can see that working option here.

But there is a problem… As always that simple amazing solution doesn’t work on IE6 (in fact it doesn’t work in IE at all). If you are testing the above example in IE, try the last image and see what happens.

Believe it or not, many customers around (at least here in Brazil) are using that infamous browser as the “official” one, and developers should base their web applications on it.

That is only one of the many situations where you should care about Javascript, Jquery and Prototype. They will help you a lot.

Since this is not so complicated, Jquery and Prototype are not necessary. Just a couple of Javascript functions have solved the problem.

Here is a working solution tested against IE6, IE8 and some real modern Browsers like Firefox, Safari, Opera and Chrome.

I would like to see some Jquery and Prototype alternatives to get the same, on an even simpler solution.

Diving into HTML5

I have chosen XHTML since I will apply some effort on Web development stuff.

Last Year W3C have decided to stop the XHTML development.

So, it is time to give XHTML a break, and start learning HTML 5 and CSS 3.

Of course we have many other HTML5 references on web; here is my first attempt into HTML5.

First things first: the Doc Type declaration.

Compared with my previous one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It couldn’t be more appropriate, simple and easy:

<!DOCTYPE html>

What we have been doing using the div tag, could now be done more semantically with, article, section, header, footer, nav and aside tags.

A few phrasing elements can help when including complementary information like: time meter and progress tags.

And a lot of new resources to be explored in the near future, like: video, audio, data attributes, microdata, native drag and drop, canvas, DOM storage, Client side SQL, new form controls, and some more.

At this point I need to do something practical, so, why not turning my own personal page into HTML5. Good chance to change its outdated design and a few concepts.

Hands on!

Here are the steps I have followed:

First, take the former page and a few ideas on what to change.

And here is the altered page:

It was an intermediary version, a cleaner one, but still using XHTML.

The tool I have used most in this phase was the ColorZilla Firefox Plug-in.

Since I was trying to keep the color scheme close to the one I have used in the previous version, this plug-in really helps.

Now, the big change!

I was looking for a different approach. My web page would show a more intimist profile, giving me a chance to explore HTML5 basics.

And here it is:

I have made a self-explaining layout from this new version of my page, where each new tag could be easily found.

I have also provided a full HTML5 page wireframe, so anyone could start working on it right now.

What to do next? I think a little work using the canvas tag will be.