Browser Size

**Lee7997** · Jan 14, 2009, 16:15

Never had to worry about this before because usually I use a fixed size set for 800x600 and everyone else with much bigger resolutions can lump it

So as I am preparing to convert all my tables sites to css I am going to use the holy grail type 3 column layout and use %'s so that all my visitors get the best use of their screen size.

Of course I want to ensure that it looks acceptable at any size, minimum being 800x600.

My question then is how can I see the site as I build it at different resolutions? I dont want to keep changing my own screen resolution every time I want a quick look to ceheck it at 800x600 or 1024x768.

Any ideas?

**adzzman** · Jan 14, 2009, 16:42

Use different computers? it doesnt take long to change your resolution.

**felgall** · Jan 14, 2009, 16:47

Just resize the browser. As long as your screen resolution is bigger than the size you want the browser to display at it is easy to just resize the browser.

The most common screen size for accessing the web now is 320x240 so most people will need to do a lot of scrolling to be able to see your page. Of course you could always set up a separate media="handheld' stylesheet for them..

**adzzman** · Jan 14, 2009, 16:52

What I do is completely code in high resolution. Make it look perfect with percents then look in lower resolutions. You could use javascript to determine the screen size then output a different stylesheet.

**Lee7997** · Jan 14, 2009, 17:42

Originally Posted by felgall

Just resize the browser. As long as your screen resolution is bigger than the size you want the browser to display at it is easy to just resize the browser.

The most common screen size for accessing the web now is 320x240 so most people will need to do a lot of scrolling to be able to see your page. Of course you could always set up a separate media="handheld' stylesheet for them..

I did think that simply resizing my own browser window was the answer but it sounded a bit thick to be that easy!

What do you mean by 320x240 being the common size? That seems very small to be common or I am missing something in thinking 800x600 or 1024x768 is still the most common?

**adzzman** · Jan 14, 2009, 18:03

I believe those are phone resolutions.

**felgall** · Jan 14, 2009, 18:12

Mobile phones are overtaking computers as the most common device for accessing the internet and that is the most common screen size that they use.

When viewing pages at higher resolutions fewer people have their browser open full screen as the screen resolution gets higher. Screen resolution is therefore not a true reflection of how the page will look since the browser viewport will often be smaller.

The best way to get the page to look good at all resolutions is to specify widths in either em or % and then perhaps specify a min-width and max-width to stop things getting too wide or too narow. Only the min-width should ever be specified in pixels.

**adzzman** · Jan 14, 2009, 18:32

1024x768 is most likely the most used screen resolution...for computers anyway.

**felgall** · Jan 14, 2009, 20:03

Originally Posted by adzzman

1024x768 is most likely the most used screen resolution...for computers anyway.

Possibly but that has no relevance to the actual size of the browser viewport since with the screen that big there is plenty of room to reduce the browser window and display other things on the screen at the same time - particularly since many web pages use the same stylesheet for both screen and print which limits the content width to 750.

Also mobile phones are rapidly catching up with computers in terms of what device is used to access the internet so the most common mobile phone screen size is actually the most common browser viewport size (since the viewport on a computer screen is always smaller than the screen resolution even if the browser is displayed full screen due to the browser chrome and any fixed toolbars on the desktop).

**Lee7997** · Jan 15, 2009, 02:05

So if I understand you correctly Stephen what your effectively saying is that a design needs to be fluid, ideally (I would say) % based in terms of the width/columns so that where a user does have say a 1024x768 and they reduce the size of the open browser window by 50% to have another application displayed by its side the fluidity (if that’s a word) of my site design is such that the site will display and act in the same manner just obviously in a smaller area?

And for mobile content, either I need to factor that into my design or create a separate style that is activated when a mobile device comes along.

What would you say is best in terms of mobile content, making the main design fit all or creating a separate style?

If your looking at 320x240 as you minimum browsing size and are not going to create a separate style then I am thinking your biggest constraints here are using things such as graphics for example. If your using a logo that’s 500x100 then it would have to go or be changed in such a way that it wont wrap or cause scrolling. The method used for the font is obviously important too in order that it scales correctly.

Your point is well made about mobile content though, I browse sites myself, but admittedly never my own because they don’t look so good, I just assumed few people really bothered with mobile browsing at the moment but it’s a great encouragement for members and visitors if they can.

**Belfast75** · Jan 15, 2009, 02:48

Personally I use the Web developer add on for FF. It has a browser resize function that changes the size of your browser to a variety of predefined sizes.

That said, still doesn't account for folk not maximising their screens or using a mobile device.

**Dan Schulz** · Jan 15, 2009, 02:55

Frankly I'm surprised nobody's suggested reading this thread yet... http://www.sitepoint.com/forums/showthread.php?t=463591

**adzzman** · Jan 15, 2009, 06:57

What browser do mobile phones use?

**Dan Schulz** · Jan 15, 2009, 07:08

Depends on the manufacturer. The iPhone uses a mobile version of Safari, Windows Mobile uses a mobile version of Internet Explorer, others use mobile versions of Firefox and Opera (for the record, Opera dominates this market).

**adzzman** · Jan 15, 2009, 12:23

Oh, so is Opera best for phones? Or is it just that phone opera version is the best? I use Firefox. Would you recommend opera? I have never tried it

~

**felgall** · Jan 15, 2009, 13:55

Opera is fairly similar in the way it works to Firefox except that it has less support for proprietary HTML (it follows the standards more closely) and it doesn't have the ability to install a lot of the extensions that Firefox has (but most of the worthwhile ones are built into the browser in the first place).