This layout was inspired by the screen shots originally released by the JQueryMobile.com team and is my interpretation built using webkbit + CSS3.
My goal has been to keep the rendering consistent across Android, iOS and BlackBery Torch platforms which all are Webkit browsers. I have it rendering great despite the rending disadvantages the Android & BlackBerry platforms have.
There are a few things I’ve learned while designing cross platform:
- BlackBerry Torch fails to render a rounded box shadow when used with rounded corners.
- Try inset box shadows for consistent highlights & shadows.
- Use multiple inset box shadows for and inner border or glow.
- Try :before and :after pseudo elements for borders along with pointer-events:none; for consistency.
- BlackBerry Torch may “bug out” and hide an item that is set to rotate(30deg) but works fine with rotate(30.0001deg).
- Gradients render consistently and can help render sharp lines along with -webkit-background-size.
- Diagonal linear gradients work great for creating triangles arrows along with a rotate(45deg) -webkit-transform.
- Checkboxes can use :before and :after pseudo elements to great effect.
- You can animate some checked states, but it only works great on the iphone.
This mobile app has to be quick, clear and easy to use. So one choice I made was to have the counter & subtract buttons only show after a ticket is added. This allows the buttons to also act as row indicators for quick scanning of the list.
I’d love to hear your thoughts and make sure you view my iterations on Dribbble.