Variables, nested selectors, abstractions from vendor-specific properties etc. etc. etc. Good stuff!

Installation and usage couldn’t be simpler! (Really. I don’t see how it could!)
You place the library folder in whatever folder holds you CSS-files. Then you copy-paste the .htaccess-file that redirects every request for your CSS-files to the library. Scaffold then reads through your CSS and interprets whatever tricks you’ve written and serves up nicely formatted (or minifed, if you prefer) W3C-compliant CSS.

”What’s this good for?”, you say?

Well. Consider this piece of regular CSS:

form#searchbox #arrival_date,
form#searchbox #departure_date,
form#searchbox #persons,
form#searchbox #location
{
font-size: 18px;
color: white;
margin-bottom: 20px;
}
form#searchbox #arrival_date label,
form#searchbox #departure_date label,
form#searchbox #persons label,
form#searchbox #location label
{
width: 100px;
display: inline-block;
}
form#searchbox #arrival_date input,
form#searchbox #departure_date input,
form#searchbox #persons input,
form#searchbox #location input
{
font-size: 18px;
width: 180px;
height: 40px;
padding-left: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
behavior: url("boxsizing.htc");
}
form#searchbox #arrival_date .popupcalendar_icon,
form#searchbox  #departure_date .popupcalendar_icon,
form#searchbox  #persons .popupcalendar_icon,
form#searchbox  #location .popupcalendar_icon
{
background: url(./graphics/images/sprites.png) no-repeat 0 0;
height: 295px;
width: 314px;
display: block;
text-indent: -9999px;
overflow: hidden;
background-position: -271px -20px;
height: 39px;
width: 31px;
zoom: 1;
display: inline;
display: -moz-inline-box;
display: inline-block;
vertical-align: top;
margin: 3px 0px 0px 10px;
}

Even though it’s nicely ordered and very readable, this code is still quite hard to understand at first look. You can’t just read what’s going on. What’s related to what? You need to look back and forth a few times to see this.
This makes it bad code!
Good code is always easy to read and understand.

Now look at the same code in Scaffold syntax:

@constants {
   labelTextColor: white;
   gutter: 10px;
}
 
form#searchbox {
 
   #arrival_date, #departure_date, #persons, #location  {
      font-size: 18px;
      color: !labelTextColor;
      margin-bottom: #[2 * !gutter]px;
 
      label {
         width: #[10 * !gutter]px;
         +inline-block();
      }
 
      input {
         font-size: 18px;
         width: 180px;
         height: #[4 * !gutter]px;
         padding-left: #[1 * !gutter]px;
         +border-box();
      }
 
      .popupcalendar_icon {
         image-replace: url('./graphics/images/sprites.png');
         background-position: -271px -20px;
         height:39px;
         width: 31px;
         +inline-block();
         margin: 3px 0px 0px 10px;
      }
   }
}

The nesting immedietaly makes the code easy to read!
The selectors come in a logical order. The code is scannable, and in my opinion this is quite a revolution as far as CSS goes!

And it gets even better!

As you may have noticed, my second code example is full of non-CSS properties.
These are Scaffold-specific functions, constants and ”mixins”.

For example: A standard gutter width of 10px is defined as a constant, then used throughout the style declarations by reference.
No more search-and-replace for simple color changes!
This feature alone will save me countless hours.

Then there’s stuff like ”+inline-block();” or ”+border-box();”. These are ”mixins” that basically call a set of CSS properties that take care of crossbrowser compatibility. Scaffold serves up vendor-specific properties and even a selection of IE-behaviors, filters and expressions to get the desired effect working all around. Now we have a one line trick that’ll fix box model-quirks or get inline-blocks behave like expected. (Or rotation, shadows and other CSS3-goodies for that matter). This means more time for coffee, which is nice!

Finally we have functions like ”image-replace: url(‘./graphics/images/sprites.png’);”
This line takes care of everything regarding CSS image replacement. It even automatically sets the correct height and width fitting the specified image file.

The library has tons of useful features and some pretty advanced ones too. Everything is cached, so it’s just as fast as regular CSS.

So if you’re lucky enough to have your CSS-files served from an Apache server with PHP enabled, then by all means, do not miss out on Scaffold CSS!

Today’s library is:
SLIR

SLIR – or ”Smart Lencioni Image Resizer” – was developed by Joe Lencioni. It’s purpose is on-the-fly scaling and cropping of images.

SLIR works by scaling the image on request, rather than on import.
The benefit is that you can change your image sizes on the fly. If your page layout changes, you can just request images with a size that fits.

It’s basically a clever PHP script that “acts” as like image, combined with a .htaccess-file, that disguises the PHP-file as an actual image file.

This means you activate the resizer just by putting a url into your img-tags.
The url holds the resize parameters and the path to the original image file.

Example:

Original image:

<img src="http://www.jakobloekkemadsen.com/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" />

Scaled to fit 100px width:

<img src="http://www.jakobloekkemadsen.com/slir/w100/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" />

Scaled to fit 25px width and cropped to square:

<img src="http://www.jakobloekkemadsen.com/slir/w25-c1:1/wp-content/uploads/2010/02/DSC_1225_maj-30-2009.jpg" />

”What about performance?”, I hear you ask. “Won’t the server choke on having to process all image requests?”

No, it won’t. (-:
SLIR caches the image the first time it’s requested, so all subsequent requests are served just as fast as any other image file on the server. The redirect is handled by an alias to the cachefile. Only if no matching cache file exists, or if it’s too old, or if the original has changed, then SLIR is invoked and a new image is generated and cached.

”Ok. But what about security, then?”

In theory this script enables a hacker to flood your server with files just by changing the url and requesting all imaginable combinations of width and height. This issue has been discussed in the comments on http://shiftingpixel.com/2008/03/03/smart-image-resizer/ and the current version of the script can be made to restrict access to any other combinations than the ones you specify.

Personally I haven’t found an easier, more futureproof and flexible solution for handling image scaling.
And it’s free!

Simply put: I love this script!

Stay tuned for part two of “Useful PHP libraries”. Coming soon …

It’s from 1503 and the title of the painting is ”Das große Rasenstück” or ”The Large Turf”.

Das große Rasenstück

I decided that I wanted a real painting for the background, so I browsed around the web, came across this one and loved it instantly. It has amazing details in both color and perspective. And the colors made a nice palette for the rest of my design.

Considering the paintings’ year of origin, it’s incredibly modern looking!

It does have this special pre-renaissance or late medieval feel about it, though (those who read Foucault – ”The order of things” will probaby know what I mean). There’s something about the way the whole setting is illuminated that gives it a magical edge.

Here are some more pictures by Dürer:

“Porträt Albrecht Dürer der Ältere” (1490) is your typical 15th century portrait.

Porträt Albrecht Dürer der Ältere

Not too interesting. Rembrandt is the place to look for interesting portraits.

“Weiher im Walde” (1495) is more interesting:

Weiher im Walde

It looks almost like chimneys to the left sending agressive black smoke into the forrest to the right.

I love it when old works of art suddenly ressemble something that wasn’t around when they were made:

Or how about “Feldhase” (1502) – this could be an illustration in a modern encyclopedia. Very impressive and realistic! I could be fooled if someone told me it was 20th century:

Feldhase

“Melancholia I” (1514)  is much less naturalistic, but instead it has this almost Picasso-like avant garde quality about the composition – with its interwoven shapes and the twisted perspective. Quite impressive, I think:

Melancholia I

And here’s my personal favourite: “Rhinocerus” (1515).

I think the rhinos’ facual expression is priceless! (-:

Rhinocerus

“Wrap it up, dude! Nature calls …”

More about Albrecht Dürer:

• http://en.wikipedia.org/wiki/Albrecht_Dürer
• http://www.ibiblio.org/wm/paint/auth/durer/
• http://www.artchive.com/artchive/D/durer.html

Recently I was asked by an e-commerce client if I could create a banner on his website that would let visitors know whether the phone hotline of the store is currently open or closed based on store opening hours.

In a PHP-based CMS the only task involved would have been writing a function outputting some HTML for use in the banner. So this should have been a no-brainer, had it not been for the fact that my client’s website is run in a proprietary, hosted (and heavily outdated) CMS with no server-side access what so ever!

My first thought was then to make a solution entirely in Javascript. This would be very possible in theory, but since Javascript is a client-side language, it can only know the time and date from the client’s local settings.

This fact rendered the client-side solution very impractical. What about time-zone differences? What if the clients clock is set wrong? How about daylight savings time? In reality, the client-side solution was not an option.

So what to do?

The solution

The only way to go about this problem was then to write a server-side script, run it on a different domain accessing one single source of time and date information (ie. this server’s own clock) and then inject the output into the client’s website using the front-end methods available to me.

That way, the information posted would appear correctly across all visitors regardless of their settings and time zone.

Using AJAX was not an option because of the Same Origin Policy preventing me to use something like jQuery’s load()-function. Also, the fact that the server running the client’s CMS itself was inaccessible to me ment that no proxy-script could be set up to circumvent the restriction.

What struck me, then, was that I had missed the most obvious solution, which was really lo-tech and simple. Embarrasingly simple, actually – as I had already spent so much time scratching my head and searching the web for a workaround to get this fancy AJAX-thing working …

First, here’s the PHP-script to generate the HTML string telling the visitor whether the hotline is open or closed:

<?php
 
header( "Content-type: application/x-javascript; charset=UTF-8" );
 
//Name of variable to output:
$nameOfVariable = "hotline_status";
 
//Strings to output:
$open = "<p class='$nameOfVariable'>The hotline is open!</p>";
$closed = "<p class='$nameOfVariable'>The hotline is closed!</p>";
 
//Opening hours (in 24-hour clock):
$weekday = array(
 'open' => 10,
 'close' => 17
);
 
$saturday = array(
 'open' => 10,
 'close' => 14
);
 
//Time zone adjustment. (If the server is in a different time zone than the hours configured above refer to):
$timeZoneAdjust = 1;
 
//Don't change these:
$now = time();
$daylightSavingsTime = date("I",$now);
$minutes = $now/60;
$minuteOfDay = $minutes % 1440;
$hourOfDay = abs(($minuteOfDay / 60)+$timeZoneAdjust) + $daylightSavingsTime;
$dayOfWeek = date("D",$now);
 
//Make the string:
echo "var $nameOfVariable = \"";
 
if ($dayOfWeek == "Sun") {
 //Sunday is hardcoded.
 echo $closed;
} elseif ($dayOfWeek == "Sat") {
 echo (($hourOfDay <= $saturday['open'] or $hourOfDay >= $saturday['close']) ? $closed : $open);
} else {
 echo (($hourOfDay <= $weekday['open'] or $hourOfDay >= $weekday['close']) ? $closed : $open);
}
 
echo "\";";
?>

Did you catch the trick?

The trick is to specify a php header like this:

header( "Content-type: application/x-javascript; charset=UTF-8" );

That way the script returns a javascript file.
This file contains a single variable holding the string that I want to inject into the DOM of my client’s website.

The result

On a normal weekday within hotline opening hours the output of the PHP file will look like this:

var hotline_status = "<p class='hotline_status'>The hotline is open!</p>";

I can then reference the PHP-file somewhere in the HTML of my client’s website (preferebly near the bottom for load speed reasons) like this:

<script type="text/javascript" src="http://path/to/php/file/"></script>;

Then I inject the content of the variable in the right place using jQuery:

$("div#hotline_status").append(hotline_status)

Voila!

Visitors now see if the hotline is open at the time of visiting the site.

(-:

Possibilities

And this is only a simple script.

You can use this method to apply all the bells and wistles of PHP (or your server-side language of choice) to your client’s ancient and closed source website – including database access, file reads, curls, etc.

Want to feed variables to your PHP script to condition an SQL-call?
No problem! Just append your variables to the filename of the referenced script (like scriptname.php?key=value) and use $_GET['key'] in the script to access them.

I guess you could even inject the script-tag itself on an event rather than on load, thus making user input possible, for instance on submitting a form. I haven’t tried this yet, though.

Of course, all of this wouldn’t be necessary at all in a perfect world where all clients have an open mind and understand the benefits of using non-proprietary, open-source CMS and e-commerce platforms.

But until that happens (which is never), little hacks like this are sometimes necessary to get the job done.

Hope you find it useful!

We’ve all seen bad signage with obscure wording or unclear use of symbols.
The kind that makes it necessary for you to stop and wonder what it means or why it’s even there.

But sometimes it’s not just lack of meaning or motivation that makes a sign bad.

Some signs convey angriness in their tone of wording thus bloating the message and risking to make recipients feel like they’re being told off. As if the sender of the message has another agenda that doesn’t really belong on a sign.
Often this can be because they’ve gotten anoyed with something that people keep doing in the particular location and finally resorted to put up a sign to make it stop!

It’s likely that this leaves us as recipients with a feeling of being treated unjustly, since we are probably not personally responsible for whatever irritation may lie behind the decision to put out such a message in a public space.

Also, as any child psychologist will agree, telling people off is not an efficient way to make them do what you want.
Sometimes it will even have the opposite effect. Especially when the badmouthing is unfair and you don’t get to defend yourself against the abuse.

Of course, as a usability professional, I regard this as really bad communication. Sometimes I would even call it “negative signage” because it attacks the issue backwards. Instead of guiding people in the right direction, helping them avoid the disapproved behaviour by their own means, this type of negative communication readily bashes anyone for their potential misdemeanor.
It’s the basic schism between the carrot and the stick, really.

My family and I encountered one such piece of negative communication while staying at the lovely island of Samsø last summer.
At the southern point of the island lies the pittoresque and windy Beacon of Vesborg.

As we walked from the parking lot up towards the beacon, we were greeted by the following sequence of signs:

“Bikes prohibited”, “Bringing food prohibited”

“the area is open in the time frame between 11.00 – 18.00″

“Bringing food and bicycles NO THANKS! Picnic & bicycles PROHIBITED”

“Cafe Fruen Ved Fyret (≈ Café the Misses By the Beacon) FOOD – ICE CREAM – CAKE – COFFEE”

“OPEN, SOFT ICE”

What a nice welcome!

First we’re given a couple of little rants that are not even relevant to us since we didn’t arrive by bike and thus did not put any bikes where it’s not allowed. Then we’re being forbidden to eat our packed lunch by the beacon.

At this point we were already beginning to think about leaving again soon, since we were already hungry and had actually planed to enjoy our packed lunch here that we had brought because we weren’t sure if they were selling anything to eat here.

Vesborg is quite far away from anything else on the island, and it would have been at least irresponsible to bring a 3-year old kid here without eatable backup.

It wasn’t until we were all the way up by the beacon side-house that we could see that they actually did sell food – or that is, on the sign it said “Café”. No menu in sight.

What was visible instead was a pile of colorful plastic junk that was also for sale there.

To us this ment: Distract the kid and keep walking! No time to stop and look for a menu sign.

The result: We hurried past the house, up the stairs to view the beacon and the scenery and then back to the parking lot to eat our packed lunch. Apparently just like most of the other visitors. The café was seemingly empty, and the parking lot was filled with families eating lunch by their cars.

What they should have done

Because of the way this area is laid out with a parking lot (entrance), a path up past the café (point of sale) and on to the beacon (the attraction) this struck me as very nice prototype of how any efficient sales generating lead is structured.

If the owners of the place had just chosen a different signage strategy, they would have probably sold tons of food and beverages – and maybe even some of the plastic toys and souvenirs they sported.

Regarding the bikes: In order for a restriction to have authority, it most make sense. There was plenty of room for bikes to stand here. Also, there was no real alternative. There was no area where it was visibly allowed to put bikes. So what else should people do, than put them where there’s room for it.

In this context, the only meaningful message coming from this sign was something like “I’m in charge, do what I say, because I say so” or maybe even “I hate cyclists”.

My guess is, that the only reason most bikers don’t just turn around and leave at once, is that they’re tired from the long ride to get there. Not a good start.

And, as I mentioned, this sign also has an impact on the mood of people not riding bikes. It’s the general first impression for all visitors.

Further on, the sheer number of signs give the impression that the owners don’t have much faith in their visitors’ ability to behave nicely on their own. Wording such as “The area is open between 11.00 and 18.00″ comes across as unnecessarily harsh or even slightly bureaucratic. If it really is the entire “area” that becomes restricted outside opening hours, maybe it would be better to just put up a small fence and a gate and let them do the work. No need to distract visitors within opening hours by telling them what they can’t do at another time.

What I suspect, though, is that this sign is just a clumsy attempt to let people know what the café opening hours are, in which case it would have been better just sticking to a conventional “Opening hours: 11.00 – 18.00″.

Ok, maybe this is not a major issue, but the devil’s in the detail, and all the impressions add up when a visitor tries to make sense of a new place.

Finally, if by prohibiting people to eat their own lunch, they hope to boost sales in the café, they obviously failed.

Instead, the owners should asses the behaviour of their visitors and build on what looked like a very healthy customer potential.

If they had put up a clear menu sign instead of the restriction sign – you know with a nice layout and readable prices – and put together a selection of sandwiches, soft drinks and coffee to make people want to throw away their own boring packed lunch, then we at least would have settled down and enjoyed a beautiful, windy summer afternoon by the beacon. Just like the casual and rustic tables and benches where ment to invite to.

So, owners of Vesborg, if you read this: Lighten up! Don’t yell in advance at your potential customers. Use your energy to spread the message to all island visitors: “Come and enjoy the beautiful and historic Beacon of Vesborg. The view is fantastic in almost all weather. And don’t worry! You can buy lunch here.”