Eklog

The Ashes

mat — Sun, 23 Aug 2009 19:02:27 +0000

When Straussy goes back with the urn, the urn;
Freddie, Swanny, and Harmy return, return;
The welkin will ring loud,
The great crowd will feel proud,
Seeing Broad and Bell with the urn, the urn;
And the rest coming home with the urn.

Buttons

mat — Thu, 11 Jun 2009 22:13:59 +0000

Here’s some CSS buttons.

These will stretch to fit any amount of text – even if it gets so large it becomes a banner.
They use just one image – and have a ‘web 2.0′ sheen.
They have an icon (which can be positioned to the left or right)
They have a hover state – the text and the background colour can change.

Shrink-wrapped buttons
Shrink-wrapped buttons

Shrink-wrapped buttons

..and a final one!

Here’s the code:

a.btn,
a.btn:visited {
float:left;
background-color: #80c64c;
background-image: url(/images/blog/btn.png);
color:#fff;
text-decoration:none;
font-size:0.95em;
clear:both;
margin:0 0 12px 6px;
line-height: 1.1;
letter-spacing: 0;
}
a:hover.btn {
color:#ff0;
}
a.btn * {
display:block;
font-weight:normal;
}
a.btn b {
margin-left:6px;
padding:2px 0 0 0;
background: transparent url(/images/blog/btn.png) right top;
}
a.btn b b {
margin:0 0 0 -6px;
padding:0 0 0 12px;
background-position: left bottom;
}
a.btn b b b {
padding:6px 12px 12px 0px;
margin: 0;
background-position: right bottom;
text-indent: -3px;
}

a.btn_grn,
a.btn_grn:visited {
background-color: #80c64c;
}
a.btn_grn b b b b {
padding: 0 28px 0 0;
background-image: url(/images/blog/arrows.png);
background-position: right center;
background-repeat: no-repeat;
}

Shrink-wrapped buttons

Shrink-wrapped buttons

..and a final one!

This is an adaption to the work done by:

schillmania.com – More Rounded Corners with CSS
456bereastreet.com – Bulletproof shrinkwrapping buttons

XML imported images using jQuery

mat — Sun, 07 Jun 2009 06:14:59 +0000

Here’s how to load images from any server using a simple XML files. Useful for giving clients or affiliates access to updating sites without changing the main code.

See it in action at: Loading images with XML & jQuery

Fuzzy Felt

mat — Fri, 22 May 2009 09:01:16 +0000

I’ve put together a fuzzy felt page. It uses Drag-Drop JavaScript and database logging of an item’s position. It’s an adaption of Broken Notebook’s magnetic ajax. Go have a play!

Fuzzy Felt on line

iPhone wallpaper

mat — Thu, 21 May 2009 22:19:13 +0000

Here’s some scratches and a grunge background for your iPhone wallpaper.

Take a screenshot of your phone (hold the main menu button down then press the on/off button), add it to the PSD as the base layer and you get a screenshot of the home screen – with a few scratches.

Here’s a link to the PSD file with button scratches only: iphone-ss2.psd.zip [1.6MB] and here’s a link to the file with a grunge background as well: iphone-ss.psd.zip [2.9MB]

CSS tags

mat — Tue, 12 May 2009 17:52:04 +0000

Here’s some tags. They stretch to fit the text and change state on hover:

Here’s the code and image:

tag 1

tag whatever you like

tag three

Behavioural separation and jQuery

mat — Mon, 11 May 2009 16:59:23 +0000

I’ve created a presentation about unobtrusive jQuery.

Contents:

Progressive CSS
Progressive JavaScripting
Unobtrustive JavaScript
Understand browsers and users
Event Delegation
Relationships
Maintenance
JQuery
JQuery & XML

Here’s a download link: Behavioral separation and jQuery

Browser shots

mat — Mon, 27 Apr 2009 08:57:33 +0000

I’ve created a frame for browser shots – it’s the safari browser. All screenshots have to be 300px wide.

Here’s a link to the pre-sliced Photoshop image: mac_browser_sml.psd

Add some extra padding to the bottom and a reflection to the bottom of the browser frame to get that web 2.0 look.

Here’s the CSS

#browserWrap {
float: left;
margin: 0 12px 12px 0;
}

#browserWrap .browsershot {
width: 306px;
background: url(images/mac_browser_bot.gif) no-repeat bottom left;
margin: 0;
padding: 0 0 6px 0;
float: left;
position: relative;
}

#browserWrap .browsershot a {
width: 305px;
background: transparent url(images/mac_browser_top.gif) no-repeat top left;
margin: 0;
padding: 20px 0 0 1px;
float: left;
display: block;

}
#browserWrap .browsershotscroll {
width: 306px;
background: transparent url(images/mac_browser_scroll.gif) repeat-y right;
margin: 0;
padding: 0 0 0 10;
float: left;
z-index: 2;
}
#browserWrap .browsershotscrolltop {
background: transparent url(images/mac_browser_scrolltop.gif) no-repeat top right;
margin: 0;
width: 100%;
z-index: 3;
}
#browserWrap .browsershotscrollbot {
width: 6px;
height: 15px;
background: transparent url(images/mac_browser_scrollbot.gif) no-repeat bottom right;
margin: 0;
position: absolute;
bottom: 6px;
right: 0;
z-index: 3;
}
#browserWrap img {
border: 0;
}

The mark-up

Relationship Marketing

mat — Thu, 19 Feb 2009 10:35:45 +0000

As defined by the Business Dictionary, relationship marketing is, “Promotional and selling activities aimed at developing and managing trusting and long-term relationships with larger customers. Customer profile, buying patterns, and history of contacts is maintained in a sales database…”

What’s happened to Relationship Marketing? Has it gone out of fashion?

The supermarkets use the same old tired out loyalty cards – anyone who uses them probably has one for each supermarket.

The Banks still rely on introductory offers – or at the very least promise to offer no more than a new customer who’s shown no loyalty at all.

Receiving a 20% discount – as a surprise – after staying with a bank for five years would make people think about staying for another five. And you’d be targeting loyal, stable customers; not paying set-up fee for a risky customer who’s shown they move about.

Just how far have we progressed from Air miles?

MyFace, SkypeBo, TwitTube, community web sites, customer reviews and best-of-lists – all these things are becoming a need-to-have for the new generation.

Companies can no longer set their prices by locality, hoping to get greater margins in wealthier economies. And locality isn’t so important anymore anyway. Lifestyle targeting is more likely to find you the right customers.

And while call centres have made customer support easier and cheaper, it should be seen as an opportunity to enhance service, not cut costs. Satisfactory resolution of customer complaints can improve brand image and generate immediate sales.

Relationship marketing was always about personalising the experience. Getting proper lifestyle information – and enough of it to serve the customer with appropriate, conversion optimised promotions.

It’s about recognising that if you get a sale through a half-price offer, most of the customers will stop buying it when the promotion ends. A promotion that enhances the relationship, such as tokens for schools offer, may get a customer for life.

Now, more than ever, the challenge is not to use the internet to spam millions of people with a one-size-fits-all advert.

Look to Google to see how target marketing will work in the future. To properly understand someone (using a computer database) you need a lot of information and you need feedback when you are analyzing their behaviour and buying patterns. And to get that information you need to offer a lot of useful stuff – probably for free.

Using swf object version 2

mat — Wed, 28 Jan 2009 17:22:17 +0000

swfobject is a great tool for serving flash in a standards-based, accessible way.

Version 2.1 is available at google code – here’s the link: code.google.com/p/swfobject/

Main Advantages:

It’s more optimized and flexible than any other Flash Player embed method around.
It uses unobtrusive JavaScript.
It offers a standards-based, accessible way to serve flash.
It allows you to avoid click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

There are two publishing methods: static publishing method & dynamic publishing method.

Both methods allow you to use standards-based markup and a way to serve alternative content (including a option to install / upgrade your flash) if flash isn’t supported.

The main advantage of the static publishing method is: If you have the Flash plug-in installed, but have JavaScript disabled or a use a browser that doesn’t support JavaScript, you will still be able to see your Flash content.

Usually there’s a good reason why JavaScript isn’t supported. W3C schools Browser Stats states 95% of users have JavaScript On. So unless you specifically want to cater for devices like Sony PSP (which has very poor JavaScript support) the dynamic publishing method is recommended.

The advantages of the dynamic publishing method are: It avoids click-to-activate mechanisms to activate active content in Internet Explorer 6/7 and Opera 9+.

Using parameters:

There aren’t a lot of examples of using parameters. Here’s an example for making movies transparent. This is often necessary to have DHTML elements appear ABOVE the flash movies (as well as content / imagery below.)

Bugs:

There appears to be an unresolved issue where the flash movie doesn’t load in Internet Explorer 7. You can find more details at the flashcomguru.com forum

Adobe state only a very small number of IE7 users are affected but many users believe the issue is more widespread.

Setting the flash version to "0" does solve the issue. But if the user doesn’t have flash the alternative content is not served. Adobe.com’s player census state about 98% of users have flash player version 7 and above installed. (Only 80% use version 9 so this solution would not be satisfactory).

Alternatively, use the alternative content to embed the movie and then use a src=”image.gif” with details describing what’s happening / what steps to take.

Note: Not sure how using using expressinstall.swf affects this issue.