this site

from Toccata and Rain

Fremantle Press, 2004

Related Links


Tool to check optimum area for priority content - browser viewport sizes is important

Xscope is an OS X app that overlays visible content sizes for the various browsers.  

you can still get far more useful data by using analytics to track the viewport size of browsers visiting your site with events. This kind of visualisation could be tied into real data harvested from user data for a given.

you just have to use the page differently for fluid layouts: just resize your browser to your target percentage in each dimension, then check if the content is correctly rendered. Alternatively, resize your browser to the smallest it can be until something breaks or looks bad, then check the percentage of vistors to which the degradation applies. The browser itself resizes nicely if you give it the tools.

this tool gives misleading if not totally incorrect figures for liquid pages. Liquid pages are a valid and common design choice. Anything that's centered on a larger viewing window gives totally nuts results without resizing your viewing window. Or see www.foldtester.com   It shows what's up at different opacities, and allows you to change the alignment of the page ("left" or "center" only).

If your webpage is centered or margin:auto - just adjust your browser window to the desired resolution indicator. 640x480 800x600 1024x768 are very common.

Web developer toolbar - firefox addon has the feature that allows you to set the size of your browser windows to for example 800x600 , 1024x768 ...or custom size. It's much more better because you really see the window size as it would see person who has the selected screen resolution. No problem with fluid layouts, etc.

Site Admin April 22, 2011