HTML Design Guidelines
Web design approach should have the following layers that will be added using a progressive enhancement strategy:
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.
7. Add an unobtrusive Ajax layer for content updating, capturing the onclick event of every link.
9. Optionally add widget support using a new layer.
References to design guidance materials and workshops.
Windows 8 UX Fundamentals Training Workshop 2012
Windows Application UI Development (Windows)
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
Mobile readiness testing tools
Plugins and Frameworks
Responsive Image – a jQuery Plugin for Responsive Images
Free Mobile UI Kits and Website Wireframes Templates
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 Image Slider in jQuery and CSS3
Responsive Image Techniques & Resources
Simple Device Diagram for Responsive Design Planning
Understanding Progressive Enhancement
Understanding The Viewport Meta Tag