Mes notes HTML

Viewport
<meta name="viewport" content="700">.....default for browsers 980.
<meta name="viewport" content="height=500">.....Most designs do not use height :)
Fixed layout of 916 pixels : <meta name="viewport" content="916">
Layout based on device size: <meta name="viewport" content="width=device-width, initial-scale=1">
(for iOS, also use default font size set a default font size : use reset stylesheet)
minimal-scale=1 (not cool because can't zoom anymore)
Viewport units instead of % : vw, vh, vmin, vmax

Fluid Layout
Remove fixed pixels and use % layout with viewport units
Flexbox : {display: flex;} ----- Need to investigate this!!!

Media Queries
Adapting to different scenarios and designs
Expressions : width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, grid, color, color-index, monochrome, resolution, scan
Device Independent Pixels : ... Use SVG, Use Canvas with some parameters for 2x + display devices, Icon fonts, CSS gradients, borders, etc...

Performance
Avoid rediriects, eliminate render-blocking resources 9stylesheets, fints, unknown-size images.
Animation - window.requestAnimationFrame(function);

Touch UI
Hover effects are a bad idea.
Size of hit targets is 10mm
Click delay - viewport to no = accessibility probles - fastclick library - Implement touch events yourself Touch events -

Quelques liens vers des sites qui parlent de HTML5 et Responsive design
Responsive Images Community Group
html5 rocks
W3 School HTML5 introduction
CSS Tips and Tricks
Code pen - front end designer's playground
AT&T Resource Optimizer
Can I use functions from HTML
Webplatform.org - Your Web, Documented