Creating a UI for just modern browsers

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).

drag-and-drop

Notifications

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?

For that we built a simple notification system, a few lines of CSS and even fewer lines of JavaScript.

notifications

CSS Spinners

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.

spinner

Offcanvas Cart

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.

off-canvas-menu

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:

input transitions

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.

Share

Published by

Ricard Torres

Ricard is a Senior UI/UX Developer @ TBSCG. Based in Barcelona he also plays guitar, takes photographs and teaches Haidong Gumdo.