I had to create some compliants based CSS Custom Styled input / submit buttons for the new Sanity.com.au revamp I’m working on, it had to use progressive enhancement / graceful depredation across all browsers. This method uses a standard HTML <button> tag, pure CSS for the graphic customisation and no JavaScript. To keep things neat it uses a single image tiling across the background of the button.

This solution allows for a completely custom design to be applied to the button, while retaining the ability to use HTML text on the button itself, and the button will automatically expand or contract depending on the length of the text on the button. It will also gracefully degrade on older browsers with no CSS or JavaScirpt support.

It is also fully compatible in non-CSS and non-JavaScript enabled browsers, in this case it will simply revert to a standard HTML <button> element. Tested in Inernet Explorer 6, 7 and 8, Firefox 3, Google Chrome, Safari and Opera.

Example:

You can use any images for replacing the button, here’s an example:

The Image used (button.png):

The HTML:

<div class="buttons"><button type="submit">SUBMIT</button><span></span></div>

The CSS:

/* BUTTONS */

.buttons button{
cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
background: url(../images/global/button.png);
}

.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/global/button.png) top right;
}

More Examples:

With all the development work I don’t get much time to design these days, but for Budget Greenslips I decided to break out the Stylus and updated the design to a more modern, web 2.0(ish) design. I then rebuilt the site using strict CSS and xHTML, re-optimised for maximum SEO.

Take a look:

http://www.budgetgreenslips.com.au/

Technology:

• Photoshop
• PHP
• xHTML, CSS
• JavaScript

This is a web site I developed for financial service provider BT Financial Group (part of Westpac), quite a nice looking site, features lots of SEO, a dynamic Flash intro panel with full CMS. A nice group to work for and a good job all around.

Technologies:

• Flash
• ActionScript 3
• CSS
• JavaScript
• Classic ASP
• Advanced SEO

You can see it in action here:

http://www.btsuperforlife.com.au/

This is a more recent Blast from the Past, I developed this site for Solo/Cadbury-Schweppes, it was a fun project featuring 2 mini Flash based games and in fact the entire Web Site is a game of sorts. The first game is the intro sequence to the web site where users are challenged to make the site more “manly” by removing some of the less masculine objects from the page. You are scored on your performance on the “Man Can-O-Meter”. You are then redirected to the actual website where you can increase or decrease your score while surfing the site by clicking on more manly or un-manly items.

You can play the games and view the entire web site at:

http://www.mancans.com.au

This site I built for the Australian Government, I was given the requirment that the site would have to be built on top of a Lotus Notes CMS. For this reason alone I decided to absolutely separate the presentation layer into pure CSS and just have the Notes CMS server the content DIV’s. It worked a charm, the site looks great even though it is based on an aging CMS.

Check it out at:

http://www.quitnow.info.au

Today I’ve launched my latest build a web site for seaech engine specialists, Switched On Media. Being Search Engine Optimisation specialists it may come as no surprise that their site had to be fully S.E.O. and crawler freindly, this meant using strict xHTML and CSS for the layout and presentation layer.

Check it out at http://www.switchedonmedia.com.au

Design by Abbie Daven.

Advanced Flash SEO and Usability Tutorial Introduction

The Problems associated with Flash SEO and Usability

Creating an entire Flash based web site is very common these days, yet there are still some major Usability problems inherited when an entire Flash based design is implemented.

No SEO and no deeplinking.

The first issue is that of Search Engine Optimisation or SEO, since search engines cant (yet) index the text used in your Flash movies it becomes virtually impossible to get good search visibility for your Flash site, and coupled with the inability to deeplink to specific content sections it becomes very hard to create targeted backlinks to your Flash site.

No browser back, forward or history support.

The second issue is the inability for Flash to work with the browsers back and forward butons in the main navigational bar and no history being recorded in the browsers history section.

No scrollbars for small windows.

Most Flash designers target their full screen flash sites to the 1024 x 728 monitor resolution, minus the browser chrome which equates to roughly 980 x 600 of actual design real estate. The problem is if a user is using a smaller resolution or has their browsers set to a smaller size window, Flash does not create scrollbars and thus clips off the parts of your website that do not fit on the available screen size.

No Analytics

There are now several excellent free online analtyics services for your traditional html based web sites and until recently theres been no way to harness such a service to track clicks and visitors around your Flash site.

The Solution

Fortunately there is a solution, or in fact several solutions for all of the above issues. In this tutorial I will show you how to combine all of these solutions to create a fully usable and backwards compliant browsing experience for your users.

• Part 1. Setting up dynamic SEO tags for each page or deeplink in your Flash movie
• Part 2. Deep linking to your Flash content and enabling those back, forward and history buttons in your browsers (coming soon)
• Part 3. Add scrollbars for smaller browser windows and monitor resolutions (coming soon)
• Part 4. Add Google Analtyics (coming soon)
• Part 5. Flash alternate content, white hat SEO usage and case study: levis.com.au (coming soon)
• Source code (coming soon)

Get Started >

Good read:

http://sixrevisions.com/resources/websites_for_web_development/

I have launched the new Peugeot 308 Microsite, check it out at:

http://www.308.com.au

I’ve just launched my latest site, Levity Music a new record label owned by Levi’s Strauss jeans.

It has a full CMS, custom MP3 player, Firefox supported custom scroll bars (no small trick as it turns out) and a few other fancy pants effects.

http://www.levityland.com

Technologies:

• PHP, MySQL
• RSS, XML
• Flash