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

Web 3.0 arrives in 2009

I believe there is a new trend developing in web design in early 2009. Having had this feeling for many months I’m now seeing evidence to support it.

Having been on the web before the days of inline jpeg images, Internet Explorer, and Yahoo, I’ve seen many trends and development and I can see another transformation taking place once more.

Web ’1.0′ was about accessible content. “Content is King” is the mantra that still rings true in web design today.

(Ever heard of a site called Google? This is why – Google’s goal was to be the Internet content King .

Web 2.0 was all about social interaction. Given that you already have some content how do you enrich it? By leveraging the link power of the web and allowing many users to interact with that data, even modifying or adding to it.

(Have you ever heard of a website called Facebook? It is popular because it allows people to interact with data from their network of friends)

I believe Web 3.0 has arrived and it will revolve around user interface design. The way that we access the web will change, browsers will evolve. For example, your clothing could be a ‘browser’, or your hands may be the ‘mouse device’. Why?

O.K. Here’s why…

In building a house the initial priority is not where to put the T.V. in the living room. It may be about the depth of the foundations or some such.
Similarly the web started with access then content – accessible content, out of which the World Wide Web Consortium (W3C) (dealing with web standards) was seen to grow. Then later, true to it’s name “the web” was about creating a web of  links to data in the form of social networking.

So, now that the data exists (Web 1.0) and there are meaningful links between the data items (Web 2.0)  the next ‘fashion’ I believe is in the way that data is accessed – Web 3.0. Augmented reality systems and intuitive navigation is what lies on the road ahead. Then after, perhaps, the much disscussed semantic web will arrive in Web 4.0

Some early examples of what I believe to be Web 3.0 are as follows:

Google maps on a mobile device

General Electric augmented reality website http://ge.ecomagination.com/smartgrid/?c_id=Matter#/augmented_reality

BMW mini augmented reality advert  http://technabob.com/blog/2008/12/17/mini-augmented-reality-ads-hit-newstands/ (English article about the German BMW mini website)

No, that’s not a euphemism for swearing. You did read it correctly.

“Swoopo” is the cross between an auction site & gambling site. An odd idea, intelligently humourous, and well executed.

The idea is that bids only increase by a nominal amount (e.g. 10pence) for each bid made. When a bid is made it increases the auction’s countdown clock by a few seconds (e.g. 20secs). If the clock reaches zero with your username on the bid you get the goods going for a song. Music to the ears of most people during a recession, no?

It offers paticipants the potential for massive savings up to 100% off, I kid you not.

Such savings can be offered as each bid made has been prior purchased, and 50p of which goes towards meeting the company’s needs. So if we do the maths… an auction item reaching £100.00 would have involved 1000 bids, each earning the company 50p. For those of you reaching for a calculator – that’s £500 for the company. (Well I did say their idea was “intelligent” didn’t I?)

Now that’s what I call e-Commerce with an Eeeeeee!

I’m sure they will be in the news in the not too distant future…

Some bagged bargains on completed auctions

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.