TBSCG was Platinum sponsor for the HP Engage conference
My first question after being asked to build a demo site for the HP Engage conference was:
– Does it need to work on Internet Explorer?
Now imagine my reaction when they said: only with modern browsers.
With IE out of the scope I started researching what UI elements could we use to give this site a boost. I think we could’ve gone farther if we had more time, even so I’m very happy with the result.
Drag and Drop
Yes, we could’ve added a boring “add to cart” button but since we had no browser restrictions using a Drag and Drop UI for adding products to the cart felt right. Not only works on Desktop but on touch devices as well (mobile and tablet).
Speed was a key factor for this UI, we wanted the page reloads down to the minimum so we used Ajax for all the server calls (add to cart, remove from cart…).
Because of that we required a way of letting the user know what happened, was the action successful? Was there an error occurred?
When a user interacts with the cart and other elements of the page he needs visual feedback. We’ve created this neat CSS spinner to let him know something is going on.
In ancient times developers used to include GIF animations. No more.
Because we can and because it’s cool we’ve added an off-canvas cart. When you click on the icon the cart will show up sliding from the right. It’s fast and it does not require any server call or page reload.
Sweet input fields transitions
So when you focus on the form input fields you’ll get a neat transition. It uses CSS3 transforms to create this visual effect:
Additionally to all this the usual suspects, responsive all the way from mobile to desktop with a couple of breakpoints, custom font icons…
From what I heard, the demo was a success.