Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 11 down vote favorite
6

I want to maximize tbe size and avoid scroll bar or overflow for the maximum too.

What size do you recommend ?

I'm using lightbox.

Thanks

share|improve this question

3 Answers

up vote 14 down vote accepted

Here's the excellent Browser Size tool from Google showing how many percent of users will see the different areas of your website. This really helps to check webpages and ensure that people on 'shallow' screens (most laptops have very wide but very shallow/not deep screens) can see your important content and calls to action.

google browser size tool

Update: Google has now added this functionality to Google Analytics, allowing you to see how much your visitors can see of your site: http://analytics.blogspot.com/2012/06/new-feature-conduct-browser-size.html

Google Analytics with new browser size functionality

share|improve this answer
The graphics are kind of ghetto for a Google app, but this looks like a very useful tool, and I assume they probably update the percentage breakdowns regularly so you have the latest screen size data. – Lèse majesté Oct 14 '10 at 2:02
Yes, ghetto is the right word! It's in Labs, so i'm not sure how well it's maintained, but it is an eye-opener for designers with huge screens. – anthonyg Oct 14 '10 at 2:18
Ah, I was wrong. The image isn't generated live from user data. It's just overlaying a static image over the webpage, and it appears they haven't updated it in about a year: browsersize.googlelabs.com/static/… – Lèse majesté Oct 14 '10 at 2:36
1  
Just as a quick nota bene, if your screen is wider than a certain size, the image just repeats. On my 2560x1440 iMac, I can see it nearly twice. It also doesn't do well with centered content. – B.R. Oct 14 '10 at 3:27
3  
This tools seems poor, if your site is not fixed width, then it will scale to your browser, and the overlay is totally wrong. – silk Oct 14 '10 at 8:08
up vote 2 down vote

This could vary by site and user base, but many websites are still supporting a screen width of 1024 pixels wide (because there is still a sizable user base using that resolution). Therefore, you'd want your image to be big enough to fit into a space that was 1024 pixels wide. Let's say you have 15px of chrome on the left and right sides of your lightbox and you wanted a 30px margin on either side of that for people running 1024px wide monitor resolutions.

1024 - 30px(lightbox chrome) - 60px(margins) = 934px wide image.

Again, the specifics might be different for your site, particularly if you want the lightbox edges to lay at a certain point in relation to your page or if you are trying to snap to a grid or something like that.

share|improve this answer
up vote 1 down vote

A cool solution would be to upload the screenshots at a max resolution 2560x1600. Then when the page loads, detect the browser window size, and use an image handler to resize and save the image on your server on its first request.

That way people with high resolution monitors dont get neglected.

share|improve this answer
can you reliably detect the browser window size? maybe.. $(window).width() and $(window).height() in jQuery seem to be valid! – Jeff Atwood♦ Oct 14 '10 at 7:13
@Jeff - only some times: stackoverflow.com/questions/2596594/… – Jeremy Oct 14 '10 at 14:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.