[whatwg] RWD Heaven: if browsers reported device capabilities in a request header

[Charles Pritchard]

On 2/4/12 11:28 AM, irakli wrote:
> We have some significant obstacles on the path of fully optimized
> Responsive Web Design, however. Responsive Images (smaller images for
> smaller screens to optimize download times) and optimized CSS/JS (mobile
> devices don't need the same JS/CSS as desktop browsers do) are the obvious
> ones.

For those creating web apps, aiming for universal design and/or WCAG 
compliance, I strongly recommend having a window.onresize hook in 
addition to the window.onload hook. Together, they give you a fast and 
responsive means for asynchronous loading of your page, and support of 
browser zoom as well as mobile device resolutions.

I use anywhere between two to four ranges width. For Canvas based 
applications, I have to track DPI as well.

In a basic application, may use two ranges: <= 720px (or 800px) vs 
larger, for width.
In a more complex application and UI, I may track both width and height.


I've seen someone get extreme, using spreadsheets to track many sizes 
while trying to maintain a pure CSS environment.
While that can work for many cases, I don't think it's tenable or 
advisable during development of most web applications.

When development has settled down a bit, it's an OK time to try to pull 
out more of the JS logic and put it into CSS classes.

WCAG requests that sites support a 2x zoom ratio. I strongly recommend 
authors test their site both at 2x zoom and at 50%. Browsers are 
supporting up to 500% it appears. While I encourage pushing boundaries, 
I doubt many authors will find 300 - 500% zoom levels to be achievable. 
But, it's still worth seeing what things look like.

-Charles