Eklog

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.

Continue reading »

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
Continue reading »

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

Continue reading »

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.
Continue reading »

HTML Markup:

• XHTML Strict 1.0 W3C valid markup.
• Semantically correct markup – e.g. use <ul> unordered lists for any list of items.
• Common identifiers should be used based on potential HTML classes and hCard microformat.

Cross Browser Valid:

• Identical (and fully functional) user experience across browsers. (note: browser differences for font anti-aliasing are expected) – Internet Explorer 6, 7 & 8 + Safari 2 & 3 + Firefox 2 & 3 + Google Chrome + Opera 9 for Windows XP | Firefox 2 & 3 + Safari 2 & 3 for Mac OSX.

CSS Styling:

• CSS styles must be completely unobtrusive with no inline styles.
• Elements should not be positioned absolutely unless necessary – All main element blocks should normally be positioned relatively so if new content is added the existing elements would automatically reposition in the flow. Also wherever font-size is increased the layout integrity remains.

Continue reading »

Image Toolbar

If you add the following meta tag:
<meta http-equiv="imagetoolbar" content="no">
Then you won't see the following for IE image hover:

Skype Toolbar

If you add the following meta tag:
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
Then ONLY phone numbers within the following tags will be highlighted:
<!-- sphoneid telnr="+15551234456" fileas="John Smith" -->(555) 1234 456<!-- sphoneid -->

Useful meta tag link: More information on meta tags