Managing Screen Width Issues

[webducknj]

Hi folks,

We've got an issue and we've got two schools of thought to deal with it so I'm just wondering how you guys deal with it.

Me and another guy keep the sites running and he thinks fixed width at 1080 max is the way to go but I think the guys that know how and who want to open it up should be able to do so.

We also have an issue with XenCentral's Ad Server where a header banner is causing overlap of header elements onto the banner positions below the navbar so the wider screen is temporarily resolving this issue to some degree.

So the question is, what do you guys use as a max screen width? Do you even use a max screen width? Do any of you use a max width of 1080?

Would love to hear your opinions on this and thanks in advance!
Bart

 

[Paul B]

I use a max width of 992px which is about the limit for a 1024px screen (taking into account the browser vertical scroll bar).

I don't understand how people find reading a page which is the full width of a 24"+ screen comfortable.

My monitors are 27" wide with a resolution of 2560 x 1440 but I only use half width for browser windows.

 

[Anthony Parsons]

I use a max page width of 1190px, because based on analytics, those resolutions that are not specifically mobile phone range 1366, 1280, 1920, 1440, 1600, 1680 and so forth. The old adage of designing for 1024px is outdated, and in my analytics is like #15 down the list... a minority of traffic.

You should be providing a wide version (max-width) to comfortably get all your content in, then a mobile version by using media queries. Tablets are primarily high resolution now, contrary to their screen size, the actual browser resolution is typically quite high.

I say media queries, because I use XenCentrals ad server, and I have no such issues as XenC is fully responsive with ad positions, thus you can either fix widths so your banners automatically decrease with scaling OR use media queries to reduce the max-width of a banner at x browser width, thus you should never have anything overlapping.

If you test for max-width, tablet portrait and landscape, and design for mobile portrait (remove floats and margins typically), the mobile landscape will also be fine.

 

[webducknj]

Thanks for the replies guys.

I'm confused by something, looking at your reply Anthony I took a closer look at our sites and, based on the width of our banner ads, we asked our site developer to make the max site width 1160. That seems to be the minimum it can be before it will start to collapse the ads we have. But as I start to reduce the width of my browser window I see overlaps happening. Is that just bad coding by our developer or would it be related to a conflict in the code that we didn't create but which we'll have to resolve?

 

[Anthony Parsons]

When your banner overlaps, you need to set that width of overlap as a media query so that you change the banner container down a size.

For example, if you use the standard 728x90 banner in your header, you can force that down in proportion by changing the max-width lower the moment just before overlap. You might make the banner the standard size of max-width 468, so it will show as a standard 468x60 by default, even though its a 728 banner, when viewed under the lesser width requirements.

As you get further down you may want to drop the float to none, and if in the header of XF you need to do a little creative coding here for the header proxy so it shifts height accordingly to accommodate your logo and banner within the same media query, or drop your logo completely and leave the banner, which is mobile devices only in essence, showing them what generates you $$$.

 

[webducknj]

thank you very much for the thorough explanation Anthony!

 

[Paul B]

This guide explains how to implement responsive ads: http://xenforo.com/community/resources/responsive-adsense.2084/

 

[webducknj]

ok, thanks, I'll take two Advil and attempt to read through it!

 

[jellytoe]

I use a max width of 992px which is about the limit for a 1024px screen (taking into account the browser vertical scroll bar).

I don't understand how people find reading a page which is the full width of a 24"+ screen comfortable.

My monitors are 27" wide with a resolution of 2560 x 1440 but I only use half width for browser windows.

How can I set the max width?

 

[Paul B]

See point 1 of the FAQ here: https://xenforo.com/community/threads/frequently-asked-questions.5183/#post-181037