My page will essentially be a large image map but the smallest I can go down to is around 1500x1000 pixels before some areas are too small for comfort. In the majority of browser windows (even on my 1280x1024 monitor) this creates both horizontal and vertical scrollbars.
Up/down is fine since most people have scroll-wheels on their mice, but left/right is a pain. I'm just wondering if anyone has ideas to make the user experience a bit smoother to save all that scrolling?
Why not start with a page that shows all of the imagemap at a smaller scale, e.g. a sort of helicopter view of the larger imagemap with clickable zones, so you choose a section of the image map to load at an optimum resolution in a sensible window size and have the edges of the zoomed in image map clickable to load the adjacent tiles.
make the page smaller - look up the average screen size probably 1024 by 768 and base your design on that - user other methods to to make the unreadable areas readable - use a lightbox efffect or link to another page that shows the detail.
1004px is the maximum width the page can be without introducing a horizontal scrollbar on a 1024 x 768 resolution.
W3Schools lists the common screen resolutions on their site, however, this is a reflection only of the visitors to their web site...
For example, checkout wallswaps which is pretty awesome and has an inner container over 3000 pixels wide!
This blog post may also help...
Here is an attractive solution I would adopt:
- hide both scrollbars (overflow:hidden)
- overlay your map container (which will span across the whole screen) with 4 semi-transparent large buttons, one along each border of the container.
- Optionally, you could add and "easing" effect to the scrolling to give it a more aesthetic feel.
You can even make the map draggable across the screen; this way will be more intuitive than scrolling.