We are designing and building a mobile template for our ~200 toy store clients. There are some constraints to making it fit in an existing system, but also advantages.

This is the gray version, but the front-end developer built the system with the "less" CSS preprocessor, so he can control the color palette and button corner radius by changing a couple numbers. This will let us offer optional customizing for the members that want the mobile site to complement their main site better.

Home Page

Important info for mobile visitors: location, phone and hours. Content displays in a "drawer" below that level of icons. This is all HTML and CSS, but styled to look like an app.

Browse Page

The shopping pages have smaller store info buttons (hours, location, phone). The logo pane shrinks to allow room for the 'cart checkout' button and cart summary at the top of the screen.

Product Details

Multiple thumbnails display, and can be tapped or dragged to change. When you hit "Add To Cart," the button changes to "Checkout Now," and the drawer opens so you can change quantity. (This is the state shown) The cart summary updates in real time when you change the quantity.

Prototype on the iPhone

The interface is running and working, but the actual content isn't hooked up yet.