ChronoZoom Touch and Low Resolution behavior

Touch vs Low Resolution Touch and low resolution behavior are independent – Example: iPad is high resolution, but requires touch, large enough that new layout not needed – Spliting my screen (1366x768) between two windows, gives each browser only 683x667, but does not require touch If current UI did not fail on mobile devices, we would be focused elsewhere

Low Resolution UI should be responsive, scaling content appropriately depending on window size – Current UI fails at only 945px wide for the footer 730px wide for the header – Current UI is a pain when not maximized on a 1024x768 screen—broken on mobile devices Regardless of touch or mouse input, UI should work to 640 by 480. Anything smaller than 640x480, should become minimal CZ interface (canvas+timescale)

Example Resolutions DeviceEffective Web Resolution iPad (retina scales x2)1024x768 iPhone (retina scales x2)480x320 Droid Eris480x320 My Android, WP7800x480 Nexus 71280x720 Desktops1024x x1080 *** this does not include resolution taken by browser frame

Low-Resolution-specific needs Maximize space for Canvas! – 148px vertically is taken away from canvas in current UI Significant when screen in 480 pixels tall! – 20px horizontally as well Should be “boundless”?

Low-Resolution Proposal Move Navigation Tool to menu beneath ChronoZoom logo – On very small resolutions, becomes only regime titles Menus “stack” beneath a down arrow to avoid having an overlapping conflict Responsive Popup design – Ex) At low resolutions, fallback/spalsh becomes full frame/new mobile-style page Limit footer options (currently our first offender)

Touch-specific features “Cursor” tracker (alternative date format) becomes locked in the center of the timescale “Hover” action becomes a long-hold or double click? Simplify thresholds Other significant modifications if needed should be for dedicated WP8, iOS, Android app development

Demo I am not very good with HTML, so view some of my designs for the details. The idea was to get a sense of scaling the UI over different resolutions Go here: l/cz.htm l/cz.htm