UI Design Guidance

HTML Design Guidelines
Web design approach should have the following layers that will be added using a progressive enhancement strategy:
1. Create valid and semantic markup containing only the content—no CSS, no frames or iframes, no JavaScript, and no Ajax. All the content and services on the website (with the exception of some nonstandard features, like geolocation) should work with this simple version.

2. Insert in the document any special tags or classes required for device-specific functionality, such as call-to links or a file upload form control.

3. Optionally, from the server, decide which MIME type you will be using and recognize the device.

4. Optionally, from the server, replace the special tags inserted in step 2 with real markup depending on the device capabilities.

5. Add one CSS layer for basic devices, one for high-end devices, and one for some specific smartphones (Android and iPhone devices, for example). You can insert all the markup at the same time using CSS media queries, or use a server-side mechanism to decide which CSS file to apply.

6. Add an unobtrusive basic JavaScript layer for form validation and other basic features.

7. Add an unobtrusive Ajax layer for content updating, capturing the onclick event of every link.

8. Add an unobtrusive JavaScript layer and a CSS layer for advanced features (animations, effects, geolocation, offline storage, etc.).

9. Optionally add widget support using a new layer.

References to design guidance materials and workshops.

Designing UX for apps

Windows 8 UX Fundamentals Training Workshop 2012

Windows Application UI Development (Windows)

Windows Phone Design Bootcamp

Android Design

iOS Interface Guidelines

Preparing Your Web Content for iPad