SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member Tyrone79's Avatar
    Join Date
    Jun 2008
    Location
    canada
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Make your site appear the same in different screen resolutions /

    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

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Tyrone79 View Post
    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.

  4. #4
    SitePoint Zealot ArtphotoasiA's Avatar
    Join Date
    Dec 2009
    Location
    Italy
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    More by Corrado Prever... visit www.corradoprever.com
    Porfolio... visit www.500px.com

  5. #5
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ArtphotoasiA View Post
    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.

    Quote Originally Posted by ArtphotoasiA View Post
    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.
    Birnam wood is come to Dunsinane

  6. #6
    SitePoint Zealot ArtphotoasiA's Avatar
    Join Date
    Dec 2009
    Location
    Italy
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    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.
    More by Corrado Prever... visit www.corradoprever.com
    Porfolio... visit www.500px.com

  7. #7
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ArtphotoasiA View Post
    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.

  8. #8
    SitePoint Zealot ArtphotoasiA's Avatar
    Join Date
    Dec 2009
    Location
    Italy
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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!
    More by Corrado Prever... visit www.corradoprever.com
    Porfolio... visit www.500px.com

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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.

  10. #10
    SitePoint Zealot ArtphotoasiA's Avatar
    Join Date
    Dec 2009
    Location
    Italy
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    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
    More by Corrado Prever... visit www.corradoprever.com
    Porfolio... visit www.500px.com

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Yes but as Tommy said...
    Quote Originally Posted by AutisticCuckoo View Post
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •