E-Commerce and HTML5/CSS3 Highlights from Web Directions South 2010

E-Commerce and HTML5/CSS3 Highlights from Web Directions South 2010

On the 15th and 16th of October, Renato Carvalho and I had the chance to attend Web Directions South Conference held at Sydney Convention and Exhibition Centre.

It was my first time attending the conference and my first impressions were pretty good. It was quite well organized and the crowd was eager for some up-to-the-minute technologies and concepts.

Digital Eskimo on Web Directions South 2010


The talk I was looking forward to the most, was “Flogging Design – Best Practice in Online Shop Design” by Matt Balara.

It was enjoyable and full of stimulating ideas. We looked over some top-notch e-commerce websites such as Amazon.com and zappos.com. He commented on their social media strategies, shopping cart and checkout processes.

One of the highlights of the speech was about the fundamental role ‘forms’ play in e-commerce. Some ideas and statements triggered sudden discussions and questions in the middle of the keynote, for instance, The “Credit card type” field; as the two first digits of all credit card numbers are enough to determine which card the customer is using, it could save the user one click and a thinking moment to get through the checkout burden. Likewise, with the commonly used dropdown field which specifies the country you are ordering from/shipping to, it often shows more than 200 countries -Is every online shop shipping from Afghanistan to Zimbabwe (A to Z)?

Although it sounds so self-intuitive, these are simple improvements that can make the shopping experience easier by cutting down the time and thought required in the process.

HTML5 and CSS3

Dan Rubin at Web Directions South 2011

Another exciting keynote was done by Dan Rubin about HTML5 and CSS3.

It started with an overview around the new HTML5 elements and how it’s better to embed videos, design forms and build better web applications with HTML5 and CSS3.

These new capabilities are still being implemented across the browsers, however we can start using it with fairly good control and fallbacks for the old browsers that do not support them.

Modernizr – modernizr.com

Modernizr is a simple JavaScript library that allows you to have a better control of some features such as RGBA and board-radius in old browsers.

It does not add the feature to the browser, rather it detects if it has the support and if not it offers a fallback option. See bellow a syntax example for multiple backgrounds declaration:

multiplebgs div p {
/* properties for browsers that
support multiple backgrounds */
.no-multiplebgs div p {
/* optional fallback properties
for browsers that don't */


The Selectivizr emulates the CSS3 pseudo-classes and attribute selectors on Internet Explorer 6-8. If you are using JQuery or Mootools, it works just by adding a JavaScript Library to your page’s “head” tag, otherwise there’s a few options that Selectivizr can work with.

No additional CSS has to be used whatsoever and if you are using more than one library the Selectivizr will automatically detect the best library to use.

These are just two new tools that are getting us closer to better user interaction, not forgetting about our old browser users – hopefully we will not need them for too long.

CSS3 Media Queries

Another valuable point of the speech, was regarding CSS3 Media Queries- one of the most exciting CSS3 improvements that comes from the necessity of content optimisation to a variety of output devices, like iPhone, iPad and screens in different resolutions and sizes. The content can be re-distributed and acquire different architecture to better attend to the context in which it is visualised. This is more valuable then simply making it fit to a smaller screen. It offers a prompt solution when scaling content to different devices.

Check out these two examples:


For further reference about CSS3 and HTML5 : realworldcss3.com/resources/ (by Dan Rubin)


A drink on Ie9

The event itself provided an excellent opportunity to meet other professionals and share ideas.

Microsoft gave away drink vouchers to boost everyone’s socialising skills and introduce the new IE9. I am still skeptical about IE9 making up for the frustrating IE6, but we all accepted the free drinks and are hoping for the best with IE9.

I am looking forward to the Web Directions South 2011.


Lyssandro Reis

You made it all the way down here so you must have enjoyed this post! You may also like:

5 UX improvements for Magento checkout page design Marko Brisevac
Marko Brisevac, | 3

5 UX improvements for Magento checkout page design

Best practices for Magento product page design Zoran Vorkapic
, | 0

Best practices for Magento product page design

FOWD NYC 2011 – Day Two Hrvoje Jurisic
, | 0

FOWD NYC 2011 – Day Two


  1. Nice Post! Specially the part about the forms/checkout… It’s really important to save customers clicks. The “Which card” option in the checkouts is a practice that we should avoid!!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.