#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Originally Posted by Kravvitz
    Supporting multiple screen resolutions does take more work. Fortunately CSS3 Media Queries make it easier than it used to be, though of course there are many more web-enabled phones and tablets than there used to be too. These days, it seems many sites are designed to work with 3 or 4 different screen size ranges.

    I'll be around when you have questions.
    I already had one in mind!

    When setting widths on elements (not text elements), what value should we use % or px? (keeping in mind supporting multiple screen resolutions).

    I can have my site look wonderful on my machine, I ask someone to view it with a higher res and things are misaligned, 'jumping out of place' etc. In the site I am currently building I have set all my margins and widths using % (thinking it will span all/most resolutions the same).

    Half the trouble is, my highest resolution I can go to is 1280x800. It seems to get worse as it goes higher, so my 'testers' have told me

    Would you possibly be able to take a quick look at it for me in a higher resolution?

    Site is located: Nanomech's site


    Kind regards,

    NM.
    Last edited by Kravvitz; December 6th, 2012 at 05:05 PM. Reason: fixed the link
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Note: I'm going to split this thread later.

    I must admit that I mostly use fixed width layouts (for desktop browsers but not necessarily for mobile devices), though that's largely due to the designers I usually work with. There are advantages to it though. You're less likely to have breakage at high browser widths and they tend to be a little simpler to make as well. On the other hand, fluid width layouts are definitely more flexible (when made well anyway). Fluid width layouts can get too wide though (which can make reading the content difficult). So it's often best to set a maximum width.

    Here are some good articles that explore the pros and cons of this complex topic:
    Fixed vs Liquid vs Elastic
    Elastic Design
    About fluid and fixed width layouts
    Fixed or fluid width? Elastic!
    The Incredible Em & Elastic Layouts with CSS
    Specify a maximum width for em-based layouts
    CSS Layouts: The Fixed. The Fluid. The Elastic.

    http://www.maxdesign.com.au/articles/em/
    http://baymard.com/blog/line-length-readability
    http://www.viget.com/advance/the-lin...misconception/


    1280x800 is a bit low by today's standards (at least in width). If you had a choice, I'd recommend the highest common resolution, which currently seems to be 1920x1080.

    Keep in mind that the higher a screen resolution someone is using, the more likely that their web browser won't be maximized.
    The importance of window-width
    The Definitive FAQ on Screen Resolution
    Actual Browser Sizes
    Poll results: 50.4% of respondents maximise windows

    A simple solution would be to use the max-width property to set a maximum width for the page.

    I glanced at your site briefly earlier this week, but right now I'm getting this error when I try to look at it:
    internal error - server connection terminated
    Last edited by Kravvitz; December 6th, 2012 at 04:27 PM.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    299
    Rep Power
    9
    Thank you so much for all them links. It will definitely be a loooon g night. I think the site you saw earlier this week was the old version, I've totally re-designed the back end and use db for a lot of the content.

    I have just visited the link in my other post 3 times and it seemed to load the page ok.

    Is that the whole message? I only ask because it seemed earlier, if I clicked the links too quickly, it showed me a blank page with 3 error messages. Next time it happens I'll copy and paste it just to check it against yours.

    Regards,

    NM.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    Your site is available again. "flowerbed.fw.png" looks odd when stretched to 909px in width. I would suggest giving a max-width of the image's width to "#navigation_div".

    I'm glad to see you're using a min-width on "#container", however, at that minimum the left column seems a little too narrow.

    By the way, paragraphs that have centered text can be difficult to read. It's best to use "text-align:left" for them (assuming ltr, left-to-right, text).

    I'm curious, is there a particular reason why you're using XHTML 1.0 Transitional? Did you notice that your page has a random </noscript> end tag?

    Is that the whole message? I only ask because it seemed earlier, if I clicked the links too quickly, it showed me a blank page with 3 error messages. Next time it happens I'll copy and paste it just to check it against yours.
    Which message? Perhaps you saw my post before I changed the links to archive.org's copy of each page. If you wait a little they should redirect to show the article.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo