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

Jakob Nielsen’s Usability Guidelines

Compilation of many more links

UI Guidelines for mobile and tablet web app design

Some design and wireframing tools

Flowella

Balsamiq Mockups

Mockingbird

OmniGraffle

Graffletopia

Gesture guides

Touch Gesture Reference Guide

Gesture Events in IE

Mobile readiness testing tools

mobiReady

Plugins and Frameworks

Responsive Image – a jQuery Plugin for Responsive Images

Ivory Flexible Grid Layout

Free Mobile UI Kits and Website Wireframes Templates

Articles

Make great Windows Store apps (Windows)

Create Retina Graphics for your Web Designs

Debugger, Responsive Design View and more in Firefox Aurora 15

Designing for Tablets? We’re Here to Help!

Flexbox Revisited: The New Syntax For Flexible Boxes

Fluid Grids in Responsive Web Design

Introduction to meta viewport and @viewport

Introduction to CSS3: Responsive Web Design Training with Presentation

Layout view and responsive mode in Firefox

Making a website responsive in 3 easy steps

Optimizing Typography in Responsive Web Design

Responsive Column Layouts

Responsive Image Slider in jQuery and CSS3

Responsive Image Techniques & Resources

Simple Device Diagram for Responsive Design Planning

Spotify Mobile Redesign

Understanding Progressive Enhancement

Understanding The Viewport Meta Tag

Using CSS Transitions in Responsive Web Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: