Make your site appear the same in different screen resolutions /

**Tyrone79** · Jan 13, 2010 07:55

Hello!

I am currently creating a page in 1440 x 990 resolution.
I am using em & percentages as the unit of measure. Will this allow the page to display similar to 1440 x 990 ereolution, no matter what resolution the viewer is using?

Is this the correct way to make your page display properly in various resolutions? Is there another way?

Also, when i resize my browser (minimize) the elements on the page seem to
adjust to the browser size, possibly due to the fact I am using percentages?

How to I make the page appear similar to a maximized window when minimized?

Any help would be appreciated

Thanks in advance!
Tyrone79

**AlexDawson** · Jan 13, 2010 08:32

Percentages are a fluid width, they scale to the size of the window (therefore there is not enough space it will squeeze everything in, and if there's too much space it'll space everything out). Using EM for fonts and % for widths is the best method to use (it's the most accessible) however if you want to prevent your content being spread to wide or too thinly (as is what I guess is happening in your case - it's too wide in large windows) you can use min-width and max-wdith (same for height) to tell it "you must be at least this small or this large", by using min/max-width instead of plain ole width (though IE6 will need that) you can be flexible but not let it go nuts - so it'll still stretch and skew, but it'll do it within defined limits. Hope that's helpful

**Stevie D** · Jan 14, 2010 11:32

Originally Posted by Tyrone79

I am currently creating a page in 1440 x 990 resolution.
I am using em & percentages as the unit of measure. Will this allow the page to display similar to 1440 x 990 ereolution, no matter what resolution the viewer is using?

Is this the correct way to make your page display properly in various resolutions? Is there another way?

Also, when i resize my browser (minimize) the elements on the page seem to
adjust to the browser size, possibly due to the fact I am using percentages?

How to I make the page appear similar to a maximized window when minimized?

Designing to fit a particular window size is not generally a good idea. When I'm creating a new design, I constantly change the size of the window to check that it looks right at any size. Because some people will have different size screens, running at different resolutions. Some people maximise their window, and others don't. Some people have sidebars running, some browsers take up more space, some people have a larger or smaller default font size.

Using ems and percentages is generally a good way to go about creating a site that is flexible and will fit in whatever window it is given.

Percentages are usually relative to the browser window or to the parent element. So if you have something inside <body> that you give a width of 50% to, that's 50% of the full width. If you have something inside that that you give a width of 50% to, that's 25% of the full width. This will ensure that your design stays in proportion as the window stretches and squashes.

Sometimes you might want a bit more control than that - eg, you might want to limit the maximum size that the whole page or a particular element can grow to, or to limit how narrow they can go - so use max-width and min-width for those. If you give a size in ems, it will scale with text size, so you can set it roughly to give a maximum or minimum line length (ie number of characters/words per line). It's all very well having a site that scales perfectly, but if you've got a 3-column layout and someone squashes the window down to 200px wide, that only leaves a tiny, tiny space for each column, which is going to make it near enough unreadable - that's when it's useful to set a min-width override.

**ArtphotoasiA** · Jan 15, 2010 06:23

hello there, this is really a SITEPOINT

personally I do not like ems... i prefer to use fix px...... i know maybe I'm wrong... but ems make headache to me!

i love perfect controll of space and layout in my works so i go for px ....

I have noted that now (thanks God) all new browsers are perfectly zooming pages also with fix img and px... at least I have not see big troubles in my pages.

**AutisticCuckoo** · Jan 15, 2010 06:41

Originally Posted by ArtphotoasiA

personally I do not like ems... i prefer to use fix px...... i know maybe I'm wrong... but ems make headache to me!

Okay, but accessibility and usability is not about what is easy for you, but what is accessible and usable for the visitors to the sites you create.

Originally Posted by ArtphotoasiA

i love perfect controll of space and layout in my works so i go for px ....

Then I recommend a career in print design or some other static medium where you can have 'perfect control'. The web, however, gives you almost no control at all. The control is where it belongs: in the hands of the user.

**ArtphotoasiA** · Jan 15, 2010 06:53

Originally Posted by AutisticCuckoo

Okay, but accessibility and usability is not about what is easy for you, but what is accessible and usable for the visitors to the sites you create.

Basically I agree with you of course... fortunately now is much better then before... if my px are too small for you ( this is more then legit) zoom and will be ok.... I always test that.

Beside if you do not want use javascript in your browser and it is disabled by purpose... sorry, but my personal website will not show several things... to me art and design and tecnology are little above accessibility.... my personal 2 cents...

If I make website for a cutomer with a clear purpose things change a lot and I will try to avoid anything strange or unusual.

Beside the above W3C is a must have to me.

**Stevie D** · Jan 15, 2010 07:25

Originally Posted by ArtphotoasiA

hello there, this is really a SITEPOINT

personally I do not like ems... i prefer to use fix px...... i know maybe I'm wrong... but ems make headache to me!

i love perfect controll of space and layout in my works so i go for px ....

I have noted that now (thanks God) all new browsers are perfectly zooming pages also with fix img and px... at least I have not see big troubles in my pages.

Web design should be about building websites that work well for the people reading and using them - not about what you as the designer find easiest.

There are times when ems are definitely better, there are times when pxs are definitely better, and then there are times when there is a good case for either.

Yes, all new browsers have a zoom function, but (a) not everyone has a new browser, there are still a lot of people using older browsers that don't zoom, and (b) I'm not convinced that they zoom "perfectly" - eg, zooming in IE often makes the page wider than the window, which is unhelpful. For this reason, there are people who prefer to enlarge the text size rather than zoom in, so your site should cater for them.

Perfect control of space and layout is not a feature of HTML. If you value perfect control of space and layout above accessibility and usability, publish your pages as PDFs or Flash - but if you care at all about making a site that is user-friendly, you need to abandon your hopes for pixel-perfect precision and accept that your site needs to work at different sizes and in different contexts, and allow it to bend and sway rather than to break.

**ArtphotoasiA** · Jan 15, 2010 08:32

Originally Posted by Stevie D

Perfect control of space and layout is not a feature of HTML.

Thank you Stevie for the post... lets say as perfect as possible considering HTML possibility and browser comp issue.

The middle way is always the best one!

**AlexDawson** · Jan 19, 2010 11:14

ArtphotoasiA, well your not using the middle solution if you use PX. Internet Explorer users have real issues with PX sized text, IE6 users have no zoom, they only have a text resize, and all versions of IE have that text-resize function which doesn't work on PX content, meaning for a proportion of your visitors, your site won't be legible. Also Stevie is correct by saying that zoom in some cases is broken or fragmented. IE6-7 have a flawed zoom mechanism that in certain cases can break the design, worse comes if you browse on a mobile device, PX explicit measurements can cause major issues on the iPhone and other handheld devices (where it is not otherwise overruled). I would personally like to see all usage of PX measurement outside of print materials like images made an accessibility violation.

**ArtphotoasiA** · Jan 19, 2010 12:25

Originally Posted by AlexDawson

I would personally like to see all usage of PX measurement outside of print materials like images made an accessibility violation.

Wow!

Thanks for the post Alex.... probably you right...but to lazy now to change my mind... IE8 works perfectly now on my web. Also 6 and 7 as far as I know.

Beside I do not use at all IE but I use Opera and FX and Crome I want see IE be extinct!! as the worst browser ever :-)
REgards

**AlexDawson** · Jan 20, 2010 06:05

Yes but as Tommy said...

Originally Posted by AutisticCuckoo

accessibility and usability is not about what is easy for you, but what is accessible and usable for the visitors to the sites you create.

You don't think about your visitors, it'll result in your visitors dumping you and going elsewhere, simple as that. I personally feel that anyone who refuses to acknowledge web accessibility and won't consider the usability of their websites has no right to call themselves a professional. Ignoring such factors is damaging to business, to the Internet as a whole and it's close to illegal (if you are a serious offender). Laziness is no excuse for sloppy workmanship.

User Tag List

Thread: Make your site appear the same in different screen resolutions /

Thread Tools

Display

Make your site appear the same in different screen resolutions /

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions