Sign in to follow this  

[web] Resolution?

This topic is 4104 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hi - was reading somewhere that you should do web development in a certain screen resolution so that when deployed all users can view your website correctly. What is the best resolution to develope in? Thanks for your time.

Share this post


Link to post
Share on other sites
Fixed-resolution websites make me angry!

In reality, chances are you won't be able to get *every* resolution (in particular, those that handheld devices may use, such as 320x240 or similiar), but if you can support all resolutions 640x480 and higher, you're pretty much golden. Even 800x600 or higher would be good.

Share this post


Link to post
Share on other sites
If you design your sites to look best at 1024x768 and make sure they are still usable at 800x600, you'll make most people happy. But you should know your audience. Technical audiences are more likely to use higher resolutions. People who are older or have outdated computers (or portables) tend to use smaller resolutions.

Share this post


Link to post
Share on other sites
Quote:
Original post by konForce
If you design your sites to look best at 1024x768 and make sure they are still usable at 800x600, you'll make most people happy.
No, you'll just piss off the people at 1600x1200+ running a maximized browser, for whom your site takes a tiny sliver of their screen.

Share this post


Link to post
Share on other sites
On the other hand, i'm one of those 1600x1200 users and i can say that i sometimes wish sites had a fixed width. The problem is that the text is often small (especially if programmed in pixels and not points), but worse, it is hard for the eye to track text from one line to another. The distance between the end of one line and the beginning of another is about 16" on my monitor for websites that use the full space. For that reason i've taken to adding a pretty good percentage-based side margin on my site layouts lately.

Another gotcha is that a lot of image-heavy CSS-based layouts rely on fixed-widths and pixel perfection. It's difficult to have a glitzy looking CSS layout without puting in hard-coded widths.

Share this post


Link to post
Share on other sites
Okay - thanks for your replies, so the answer is to make your website dynamically adjustable to all resolutions. I know that CSS is used to make fluid layouts, but I am not to clued up on this area of resolution. Is CSS used to make website usable on any resolution, or is there another method for doing this? Also can you please point me to any material that might help me out with this area.


Thanks

Share this post


Link to post
Share on other sites
Quote:
Original post by Poker Champion
Is CSS used to make website usable on any resolution, or is there another method for doing this?
Using XHTML and CSS is good because it allows you to seperate design from content. Take a look at CSS Zen Garden, and you'll understand what I'm talking about.

Share this post


Link to post
Share on other sites
Yeah, and if possible test your web page with different resolutions. Most pages are really unreadable as soon as you try to look at them on a 24" monitor with 1920 pixels as every paragraph becomes a single line and it looks really terrible.

A good idea is to use relative sizes everywhere so people can increase the font size without breaking the layout.

Share this post


Link to post
Share on other sites
Quote:
Original post by Poker Champion
Okay - thanks for your replies, so the answer is to make your website dynamically adjustable to all resolutions. I know that CSS is used to make fluid layouts, but I am not to clued up on this area of resolution. Is CSS used to make website usable on any resolution, or is there another method for doing this? Also can you please point me to any material that might help me out with this area.


Thanks


If you use Firefox in your development (and you should, as well as IE), the Web Developer extension has a resize option. I use this many times when seeing how my sites look on different resolutions. You can also add your own sizes so that you have a broad range of sizes. I have 800x600, 1024x768, 1152x864, 1280x768, 1280x1024, and 1440x900, which are probably the most commonly used resolutions. There's also 1680x1050 (my monitor's resolution) and 1600x1200 (and other derivatives of 1600x).

A Web Developer extension for IE has the same features as the one in FF, except it has no icons (and it's beta and crashed my IE, something that hasn't happened in a very long time).

Share this post


Link to post
Share on other sites
Quote:
Original post by Poker Champion
Hi - was reading somewhere that you should do web development in a certain screen resolution so that when deployed all users can view your website correctly.
Where were you reading that? Unless you can guarantee your users will be using a given resolution there isn't really a best resolution to use when developing, although the most commonly used by viewers of your site would probably make a good choice. Your design should be usable on any resolution a user might be using. In practice it can be very difficult to get designs to work on smaller resolutions however, and very large resolutions can also present some difficulties in that mant designs will often leave them with some unused screen real-estate.

You're pretty safe to ignore 640x480 resolution (unless it's some specialty site that you know will attract an audience using this resolution), but you should make an effort to have the site display well in 800x600 and 1024x768, as well as scaling up nicely; those 1600x1200 LCDs and larger CRTs are becoming increasingly common, so it's best that your site looks nice on them. If you want to make your site play nicely on mobile/handheld devices you'll most likely want to give them an altered design through thier own stylesheet.

Quote:
What is the best resolution to develope in?
As I've already said, there isn't really a best to develop in, but the most common resolution amongst your userbase is probably a safe bet - you'll still need to test your design in a multitude of other resolutions as well however.

I do my development on a dual-monitor setup with one monitor running at 1152x864 and the other at 1024x768 so I can easily test those two, but I also test (by switching the resolution of the secondary display) 800x600 and some of the higher resolutions, as well as taking a quick peek at my layouts in Opera's simulated handheld rendering (SHIFT+F11).

In short, develop in whatever resolution you're comfortable with and then test in anything else your users might concievably be using - don't forget to test with various browsers as well as at different resolutions.

Unless you have a specialty audience that you know will be using a particular resolution you generally should avoid a design that only works at a single resultion.


If you're looking for some good resources on XHTML/CSS based web design you could try W3Schools (XHTML/CSS) and A List Apart (A Guide For New Readers | XHTML/CSS).

Share this post


Link to post
Share on other sites
As others have pointed out above, the use of XHTML and CSS will greatly help you in mainting this "general layout" for users of all resolutions.

Also make it a point to not use pixels as your units when defining font/image sizes, etc. Use ems for the base font, then everything else in relative terms (i.e percentage). This way the once the base font is set by a viewer's browser taking his resolution into account, everything else will adapt itself.

Another thing to note is not to take image positioning for granted. For example, if you have a 50X50 image, and have perfected your stylsheet to make some other image or text align itself parallel to the image or in some way relative to that image, because although font sizes can change per-user when measured in relative terms, images will always have a fixed pixel area. The best way out of this is either to use strict XHTML/CSS guidelines. eg. use the CSS float property for multiple columns rather than tables, use appropriate <p>aragraphs and <div>s to separate sections rather than excessive use of line breaks, and many other things that only limited time stops me from mentioning.

In short, learn to be XHTML/CSS valid, get rid of age old HTML techniques, and the pieces will fall together on its own and you won't have to worry at all.

Share this post


Link to post
Share on other sites

This topic is 4104 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this