How to design websites to which displays properly.

[ppuniversal]

Hi,
I am new to web designing and am developing my first website. I have been doing web-development in .NET for quite some time.

I designed the web-page with pixel dimensions.

I use a laptop with a resolution of 1280×800. But when I open the web-page I designed in some other computers with lower resolution like 1024×768, it is not displayed properly.

I understand that opening a website in any computer using lower resolution will result in improper display.

So my question is, how to avoid these situations.

How good designers make websites which work in all resolutions.

Please share any good suggestions you have.

Thanks,
Pawan

[TheDoc]

It shouldn’t display incorrectly just because it’s on a smaller screen. All that should happen is you’ll get horizontal scrolling. What is displaying incorrectly?

[ppuniversal]

Yes, the margins changes and all the scroll comes.

Should I be designing with 1024×768 to avoid these scrollig?

Somebody suggested me that I should use "em" instead of "px". I think that they are used only for font sizes, and not for setting up various sections on the page.

Also, should I be using "%" instead of "px".

As I am new to web designing, I wanted to ask this here, so that I can get proper suggestions.

Thanks,
Pawan

[TheDoc]

Yes, you should still be designing for 1024 monitors. A width of 960px is a generally accepted guideline.

You should definitely be using ems for font size, though I know they can be a little tricky to wrap your head around. Chris wrote an article not too long ago that sort of goes over all of the different ways to size fonts: https://css-tricks.com/css-font-size/

[greg.mcausland]

"ppuniversal" wrote:

Yes, the margins changes and all the scroll comes.

Should I be designing with 1024×768 to avoid these scrollig?

Somebody suggested me that I should use "em" instead of "px". I think that they are used only for font sizes, and not for setting up various sections on the page.

Also, should I be using "%" instead of "px".

As I am new to web designing, I wanted to ask this here, so that I can get proper suggestions.

Thanks,
Pawan

In my experience many will preach about fluid layout and how the dynamics of a fluid page is that much more compatible and unassuming and graceful and blah blah blah..

pretty much most professional designs you will see won’t be fluid. Simply because by setting a solid acceptable width (960px being the norm, as thedoc said) you have far greater control of content layout, design elements so on and so forth. While the concept of usability and cross computer compatibility seems to scream fluid sites are awesome; they will almost certainly compromise the design of your site. (or at the very least give you a massive headache during the markup of)

And ultimately the control and precision you gain from using a static width in my opinion offsets the supposed extra usability of trying to conform to the fluid model.

I personally wont be embracing fluid sites without a really good reason

[ppuniversal]

Thanks "The Doc" and Greg,
I will try to follow 960px system and see the outcome.

Will update what I find out.

Thanks,
Pawan

[Author]

Posts