My Blog Layout stinks

I know it. But it does one thing that your blog probably doesn't do. It actually scales to your screen.

For Christmas, I purchased a 22" WXGA monitor,with a native resolution of 1600x1050. It's fun. Except when I StumbleUpon the websites that insist on having a single column for content fixed at under 800 pixels wide. Please, for the love of Pete, please consider that we large screen users can deal with both fixed width panel columns and variable width content columns!

Sigh.

From a picture, choose a color scheme.

The idea: Based upon a picture, get colors for your site.

This much has been done: http://www.degraeve.com/color-palette/

Augment: Make it automatically change your css Style.
Start with:

Hey Developers:
Want to automate color palette queries? Try out the new color palette generator web service BETA. Get an XML response to requests sent to:
http://www.degraeve.org/cgi-bin/color-palette.cgi?url=http://url.to.your.image

Which converts to .XML as (example)...

<colorpalette>

<imageurl>http://www.degraeve.com/images/beach.jpg</imageurl>

<status>success</status>

<message>color palette created successfully</message>

<dullcolors>

<color>304035</color>
<color>6B9FA3</color>
<color>90AEAD</color>
<color>B1C5CB</color>
<color
>43729C</color>

</dullcolors>

<vibrantcolors>


<color>285135</color>
<color>40C2CC</color>
<color>8EDAD6</color>
<color>BEEEFE</color>
<color>005AC3</color>
</vibrantcolors>

</colorpalette>

Augment: Choose some colors that will be working for text (Contrast-Wise). Hey, I get it that you shouldn’t force colors on your visitors. OTOH, this is a really cool effect.

Hmm... searching ... http://snook.ca/technical/colour_contrast/colour.html has an interactive Contrast checker. The nitty gritty:

function updateColours(){
 var brightnessThreshold = 125;
 var colorThreshold = 500;

 var bY=((br.getValue() * 299) + (bg.getValue() * 587) + (bb.getValue() * 114)) / 1000;
 var fY=((fr.getValue() * 299) + (fg.getValue() * 587) + (fb.getValue() * 114)) / 1000;
 var brightnessDifference = Math.abs(bY-fY);

    var colorDifference = (Math.max (fr.getValue(), br.getValue()) - Math.min (fr.getValue(), br.getValue())) +
                          (Math.max (fg.getValue(), bg.getValue()) - Math.min (fg.getValue(), bg.getValue())) +
                          (Math.max (fb.getValue(), bb.getValue()) - Math.min (fb.getValue(), bb.getValue()));

 document.getElementById("bDiff").value = brightnessDifference;
 document.getElementById("cDiff").value = colorDifference;

 if ((brightnessDifference >= brightnessThreshold) && (colorDifference >= colorThreshold)) {
     document.getElementById("cResult").value = "YES!"; // compliant
 }else if ((brightnessDifference >= brightnessThreshold) || (colorDifference >= colorThreshold)){
  document.getElementById("cResult").value = "sort of..."; // sort of compliant
 }else{
  document.getElementById("cResult").value = "NO!"; // not compliant "Poor visibility between text and background colors."
 }
}

Juicy Studio has code to check on the fly. http://juicystudio.com/article/javascript-contrast-class.php

Augment: Mash it all together based upon one picture... from a gallery or based upon an image for a review for a blog/CMS.

I shall come back to this. Essentially, I’d want, based upon the main picture on a page, to be able to change the look for the page based upon that picture, and yet the text be still readable. I’m sure there’s a reason *not* to do this, but until that time, just think of it as a way to change your CMS design on a whim. You don’t even have to show the picture that the color scheme is based upon. All you’d need is an idea... "OOH, I like that picture’s scheme. Will it look good on my site?

I should probably point myself to http://xmljs.sourceforge.net/index.html to parse the xml if I come back to this.