Question by Ceruleansin: Best way to dynamically exclude HTML content based on user screen size?
I’m an advanced user of both CSS, JS and jQuery, and I have seen solutions to this on the net, but I know there must be an elegant way of doing this. I’m not sure where to start because a custom web layout would seem to be the purview of a server side laguage like PHP which I also have some experience with.

I currently use jQuery to dynamically select CSS style sheets based on the users screen size. The problem is tricky to define so I will demonstrate.

Lets say that you design a fixed width, three column page that is 1000 pixels wide and some random height. Now, my jQuery allows me plenty of leeway to design the site with custom CSS any way that I want but here is the problem.

What is the best way to customize the HTML framework so that you don’t have large swaths of HTML that is merely set to {visibility: hidden} in your CSS?

On one of the pages on my site I’m using a three column width layout and I have custom CSS for four widths including 1400+, 1100+, 1000+ and 800+. The problem is of course that when the smaller width CSS layouts are used, the content visible to the larger screens is just hidden. This leads to some unfortunate effects including the page not centering below 1000px widths because the browser still factors in the hidden CSS.

Based on my previous experience with DHTML I know that there are easy ways to add content to a page using JavaScript. Would it be a good idea to use DHTML and JS to dynamically not load some HTML content if the screen size is too small or is there a better way than DHTML?

My website is: http://www.Imperfect-Design.com

The page that I’m really working on is here: http://www.imperfect-design.com/design.php

Best answer:

Answer by Michael
The simplest solution to your problem of using {visibility:hidden} to hide unwanted content, but that content still being used to determine page layout, would be to use {display:none} instead.

When you use {display:none} that element is completely removed from the page, rather than the space for the element being reserved, but the content not being shown.

However, if it were me, I’d be looking at alternative ways of tackling the problem. First I’d look at the proportions of visitors to my site at the various screen resolutions. For example on my site http://html-tags-guide.com the proportions of visitors with screen resolutions:

<=800px are <0.5%
800-999px are 1%
1000-1099px are 17%
1100-1399px are 45%
>=1400px are 36%

For my site I’d not expend much effort catering for screen resolutions under 1000px.

Rather than using DHTML I’d also consider setting up a fluid design using %widths. You could constrain this with minimum and maximum widths for your overall design / outer most div.

[See http://phydeaux3.blogspot.com/2006/01/max-width-and-faking-it-for-ie.html for ideas on setting max widths in IE]

You might also consider placing your main content in the left column instead of the centre column.

Just some additional ideas, but using {display:none} instead of {visibility:hidden} will be the simplest solution.

Give your answer to this question below!