Over coming screensize issues in asp.net

Question

Hi, my development machine has a fairly large size screen (19inch). Some of my customers have smaller size screens (or they may chose to not maximize my webpage) so the controls on the page are all over the place and overlapping each other. Any idea how I can resolve this?

Answer 1

Install the webdeveloper toolbar and test other screen sizes.

Look into css floats to make your layouts more dynamic. Or fix the width, so they can't resize.

This sounds like more of a layout/css issue then a .net/c# issue.

Answer 2

Use a fixed width for your body. Do something like this in your css:

body { width: 800px; margin: 0 auto; }

This should fix the body to 800px width and center it on the page. Find out what the lowest resolution your customers use is, and shave 50 or so pixels off that for scroll bars and a little margin, and use that for your width.

I personally wouldn't try to accommodate a non-maximized scenario on top of this, as you wouldn't be left with a lot of real estate.

Answer 3

My #1 suggestion would be to don't wait to try your page at different resolutions. It should be part of your development process. If you know that your users will have a smaller browser window than you, put yourself in their shoes and do a lot of your testing with a small window. It's just like testing in other browsers; don't assume that everything is going to look and work fine in IE6.

This issue isn't specific to ASP.NET. Your controls are just markup and styling, so at the end of the day you need those to work together so that the page isn't obviously "broken" when scaled down.

Pick the minimum screen resolution you want to support and make a sketch that shows how things will fit into the available space. Fixed width greatly simplifies things if you're not already very familiar with CSS.

Answer 4

I've found the browser size tool from google useful in the past. You may want to set the body of your page to whatever you think will be the lowest common fixed width of your user base. The browser size tool will help you get the most out that space.

Answer 5

I've used all of the techniques described in the other answers: fully fluid widths that try to fit the size of the user's browser and fixed widths that stay the same regardless.

One solution that I used quite successfully recently was to combine the two. Using CSS and Javascript, I specified a maximum width AND a minimum width for the pages. That allowed the page to expand somewhat for those running higher resolutions while allowing me to maintain some order for lower resolutions by making sure things didn't get too squished together.

The key is to KNOW your typical audience. Through analytics, we know that over 50% of our users are using resolutions between 800 x 600 and 1024 x 768 so we attempt to target those resolutions. The hybrid-fluid layout allows us to create pages that fit those resolutions while still expanding somewhat to reduce empty space on bigger screens (higher resolutions).