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
