PUBLIC MARKS with tags html5 & "responsive design"

Responsive HTML5 and CSS3 Site Templates

Finally, true responsive images are becoming a reality on the web — in pure HTML, without convoluted hacks. The picture element and a couple of new attributes for the img element are behind a flag in Chromium 37 and shipping in Chromium 38 (so coming soon in Opera), in Firefox Nightly and are being implemented in WebKit (although it remains to be seen if Apple will ship it in the next version of Safari). The new picture element can be verbose and confusing, because it solves a range of use cases. To help you match your requirements to the responsive image syntax, we’ve prepared this article full of examples.

It’s nearly two years since I suggested a picture element as a strawman proposal as a way to solve the problem of responsive images, so let’s have a look at how we’re doing.

we’re a group of developers working towards a markup-based means of delivering alternate image sources based on device capabilities.

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action.