We love Pixies!

On an obscure night in 2008 whilst creating a design using pixel buttons (which also go by the names of pixel badges, and antipixel, etc)  I thought “Wouldn’t it be a great idea if no pixels were used? Instead the button (or badge) is composed entirely by Cascading Style Sheet (CSS) code!”

Yeah, fantastic! My web fortune is upon me and I can retire in the lap of luxury!

In the sober light of day however, I find the idea is sooo fantastic it had been thought of  years ago (going back as far as 2002 I discovered). So I kept the day job.

Even so,  I’ve not yet come across CSS badges (pixeless buttons) that mimic the style of their pixel counterparts. This may be because no one has tried it, or more likely because my browser doesn’t  get about much. So I set about constructing a demo of a CSS badge (pixeless pixel button) that would look like a pixel button.

The CSS has ‘scope for refinement’ – which is a kinder way of saying it was a quick kludge.

/*CSS code */
table.badge {
border-style:solid;
border-width: 1px;
border-color: #666;
font-size: 8px;
font-family: sans-serif;
color: #fff;
line-height: 6px;
background-color: #fff;
}
table.badge tr {
background-color: #888;
text-align: center;
text-transform:uppercase;
margin: 0px;
padding: 0px;
}
table.badge td.main {
background-color:#f60;
}

<!– html code –>
<table cellspacing=1 cellpadding=0 class=”badge” width=”88px” height=”15px”">
<tr><td class=”main”>px</td><td>free</td></tr>
</table>

Some examples I made earlier can be found here.

I refer to these pixeless pixel buttons as “Pixies” because it sounds cute, and is less likely to leave your tongue in a knot when saying it.

Other related sites:

www.pixelbutton.com – the pixel button website where you can create pixel graphics.

ZwahlenDesign, “Web Badges / Buttons” – the site containing CSS web buttons

http://www.antipixel.com/blog/archives/2002/10/22/steal_these_buttons.html – the original antipixel blog post

Lateral thinking can prevent slow speeds online

Bandwidth. How big is yours? Do you care? Well apparently, we are all demanding more of the stuff with streaming video from the BBC iPlayer and other video casting sites. The pessimists write about how it could break the Internet, how it could change the price of a loaf of bread, and even cause your mother to say “I told you so.” (OK, well maybe not as bad as that, but I’m sure it sold a few more papers anyhow).

This causes me to have that 1000pixel stare and get flashbacks when I sleep at night. You see, as a Web veteran from the last century, remembering the day Yahoo (all one page of it) appeared on the Web, and the onset of Flash I get a deja vu feeling about it all.

Back in those Halcyon days, when “surfing the net” meant annoying a fisherman while catching waves, bandwidth was a most precious commodity. Not precious in the way of kilobits, but bits. Yes, every bit counted.. and there wasn’t that many of them to count either!

Having a 56kbps line was a veritable storm drain in the plumbing of data transfer, and web designers pushed out the boat, or graphic content to be exact. In addition to this, more people were getting ensnared in the web daily. How could this fledgling Web grow when so many ‘flies’ were trying to ensnare themselves therein?

Well the answer, other than “very quickly, actually”, is smartly. Smart how? You see, the problem was tackled from two directions, above and below. Capacity was increased by modernising infrastructure and laying new ‘spider threads’ as you’d expect – the tackling from above bit, and this is the main* thrust of the current debate being discussed in the media. (* ‘main’ as in ‘only’)

Now here’s the ‘but’; the problem was also tackled from below by web designers. They created pages more appropriate to the available bandwidth – bandwidth optimisation. To see just how effective this is, compare and contrast the effect of a bumblebee at full kilter hitting a web to that of a midge fly reversing round a bend and nudging a web.

The savings when optimising, compressing, trimming off the fat, paring down to the essentials can be substantial. It’s worthwile. Consider shaving 1% of data off downloading a web page ( this seems a modest task as a quick check of my current 22Kb web page shows I could save about 2kb just by removing extraneous spaces in the code – which is nearer 10% of shaving-savings than 1%!). Multiply this up by the amount of people sucking content out of your server users and your savings just keep stacking up. The more users the more savings.

Every designer and his pet goldfish is using javascript frameworks, CSS, and all other manner of unclean meat in websites these days. Isn’t it time to bring on the code obfuscators that reduce variable name lengths down to a character, and all other manner of compression enabling technologies we can throw into the mix? I think so, in fact, I know so. Optimisation worked very well before and helped the Web become what it is today.

Gone on, impress your wallet, compress your code. You know it makes sense when breaking the bandwidth barrier.