Screen real-estate considerations for illustration design

One of the long term goals for Science primer is to create content that can be effectively consumed on multiple screen sizes. It is not alway possible to preserve all of the desired functionality at the smallest screen sizes, but I do my best. 

This page shows some of the information that is useful when thinking about the view requirements of different screens. 

The region surrounded by a golden box is a div within the page similar to frames used to embed content in many of the illustrations on SciencePrimer.com. The number in gold report the size of that frame.  

There are also reporters for the size of the whole browser viewport and the size of the main content window (green dotted box).   

The reporters are dynamic and should update as the page is resized by changing the size of the browser window in a desktop environment, or changing the orientation on mobile devices.