ScottKing.com.au

Today Sony launched their new Playstation 3 web site which I was responisble for creating. I built this for some of the talented people over at Tequila, design by Craig Brooks, downloadable widget by Danny McGillick.

This site presented a few unique challenges. First of all it was to feature a pseudo-3D transition for the load screen but was asked not to use an propitiatory 3D software such as Papervision. The next challenge was to create a flowing navigational menu that is fed from a dynamic XML feed with random positioning of the nav items. The site also needed to feature a “Favorites” system that allowed user to add their favorites sites to a “bookmark” style menu on the site, however due to technical restraints I was not to use a database, this meant storing the “Favorites” in browser cookies and writing a quick interface to access the cookies. Finally the site was built on top of the Kohana PHP framework and an alternate HTML only version developed by the brilliant Luke Schreur. The site features 9 different “Skins”, refresh on the landing page to get a new random skin.

Head on over to http://www.playstation3.com.au to check it out.

Firefox 3 on Windows using wmode transparent or opaque introduces a new default style for the object element; it treats it like an active link.

Here’s the fix, simple CSS rule on object element.

<style type="text/css" media="screen">
    object { outline:none; }
</style>

Today we rolled out the new version of the Sanity Australia web site. Several months of blood, sweat and late nights went into this one. It’s a major e-commerce site built for Australias biggest music and dvd retailer. I was responsible for the front-end development and .NET integration.

Take a look at:

http://www.sanity.com.au

A preview of the new Crust site featuring quite a cool Carousel I created from pre-rendered FLV video. I did a version of this Carousel in Papervision 3D but decided to run with a 3D pre-rendered version as the level of interactivity didnt require a full PV3D application.

The Carousel uses 2 small FLVs, one for the scrolling and one for the box opening. I simply loop part of the scrolling video to allow the boxes to slide multiple times and reverse the videos for animating the slide in the opposite direction or to close the box lids. I then load the Pizza PNG itself under a dynamic mask on top of the FLV along with the Pizza information from an XML web service. Video rendering by Jonathan Miranda.

ActionScript 3, Tweenlite, Bulkloader.

Cool effect. Check it out at:
http://www.scottking.com.au/portfolio/crust/

Last week I launched version 2 of our Olympus PEN promotional site. This site has a range of Flash including a Flickr based Papervision 3D Gallery and competition, 360 Product spinners, YouTube videos and informational panels.

http://pen.olympus.com.au

Design: Jonathan Miranda, Glen McPherson, Aliza Nordin

Olympus have released a revolutionary new camera and required a new mini-site to be built to conincide with the launch of the new camera named the PEN. Unforntaly, we were only given 2 days to build the mini-site which included a online competition for photographers to upload pictures int a competition. A good job on a very tight deadline.

View the site at:

http://pen.olympus.com.au

This is the new Sanity.com.au revamp I am presently working on. Being a large consumer site I built the site with all best practice and progressive enhancement techniques available.

Site Preview:

http://www.scottking.com.au/portfolio/sanity.com.au/

Themed version:

http://www.scottking.com.au/portfolio/sanity.com.au/index_batman.html

Technology:

• xHTML 1.0 Strict
• Custom Styled Form Elements
• sIfr Flash Font Replacement
• jQuery Animation
• swfObject Flash Embed
• CSS class based Themes

Features:

• Passes w3c Validation – http://validator.w3.org/check?uri=http%3A%2F%2Fwww.scottking.com.au%2Fportfolio%2Fsanity.com.au%2F&charset=(detect+automatically)&doctype=Inline&group=0
• No CSS Hacks or browser targeting
• Interchangeable Themes
• Progressive Enhancement – All major functionality works with JavaScript, CSS or Flash disabled.
• Search Engine Optimisation
• Tested in: Firefox 3 & 2, IE 6, 7 & 8, Opera, Safari, Google Chrome.

This is a first-round build of a new site for Waterloo Finance, it is built using strict xHTML and CSS.

Services:

• Web site design (Photoshop)
• xHTML
• CSS
• Contribute CMS Setup

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