Smart Web Design?

I am trying to figure out what the best practices are in order to make web site appear the same in all resolutions. Obviously I can see the website no matter what but since im using a 1024x768 resolution  the website only appears the same when the user is also in this resolution, how can I resolve this? Is it necessary to make a version of the website for every resolution... I hope not. Is there a java script that will accomplish this by? Im kinda at a lose.
Who is Participating?
I would advise against using a typical 'fluid' layout in your website, as it can lead to unexpected and/or undesirable results in extremely low or extremely high resolutions - low resolutions can render the content too narrow and cause it to excessively stack on top of itself line after line, and high resolutions (1280x1024 full-screen and higher) can and will cause your text to stretch too far across the monitor. You will end up with one-line paragraphs that should be 4+ lines. There is a reason why newspapers and magazines divide their real-estate up into manageable - and more importantly, readable - columns.

I design all of my sites using a 'fixed' width layout. I have just made the decision to support only 1024x768 resolution and higher, as opposed to 800x600.

If you still want to go for the 'fluid' layout, nowadays there is a reasonable middleground;
Cascading Style Sheets is your best bet for pulling this off satisfactorily. CSS has, in addition to pixel and percentage size specifications (like HTML), min-width and max-width. I strongly advise you utilise these features to avoid the aforementioned problems with extreme resolutions.
You might set your content area to a min-width of 960px, and a max-width of 1220. This would scale nicely from 1024 wide to 1280 wide.

CSS references; - W3Schools is quite good - Sitepoint Forums CSS subforum, a wealth of information. The search facility is an excellent tool, and if that fails, post a question with your specifics.

Here is a great page that explains multiple best practices that you should look at, including resolutions.

I'll get back to you with a little more info as well...

"how can I resolve this? "

You can't.  Web pages are by nature fixed to font sizes and screen widths, and if you try to make it auto resizing for all screen resolutions, you will have endless problems -- fix it at one resolution, it goes hawire at another, and so on.  You will grow old and gray trying to fix a problem that is unfixable by the nature of HTML code.

The best you can do is CENTER the entire page, and use percentages in all your tables and cells, not fixed widths.  YOu will find this unsatisfactory, so the next step is to do a resolution test of the browser, which is browser specific BTW, so you need about 8 resolution tests for the different browsers.

Finally, after weeks of effort, you will realize this simple axiom -- either write to 800 width and let the 1024 users work with a smaller screen, or write to 1024 width, and let the 800 users scroll endlessly.

I currently prefer the former, it allows for essentailly ALL users, without alientating any of them.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.