Best Max Width For A Responsive Site (wordpress)

[Planet13]

Is there a "best" maximum width for a RESPONSIVE website that gets about 50% desktop visitors and about 50% from mobile visitors?

I am using wordpress and one of the themes I would like to use has a max width of 1200 px.

Unfortunately all of my own mobile devices are not working, so I can't really preview them.

But if I use a responsive theme with a max width of 1200 px, is it going to make for a lousy experience for those people using iphones or android phones?

Thanks in advance.

[lucy24]

Why has it got a maximum width at all? For responsive design you should be looking at minimum width. Is there one?

[getcooking]

If the theme is coded to be truly responsive then the max 1200 px width will only apply to desktop users. It should have breakpoints for smaller browser windows (mobile/tablet) that will render it at an appropriate width for those devices.

I just rolled out a responsive redesign for my site this weekend. The body is 1200px on my desktop and layout changes to fit the width of tablets and mobile phones just fine.

[Hoople]

There are some good emulator sites out there for testing various resolutions vs browser type. There are a few iPhone emulator sites that are free.

For initial working Firefox Web Developer Extension add some tools to test at various screen sizes. You'll have to add the various common mobile resolutions.

Be sure to test in Safari as that's the iPhone default browser. Safari for Windows displays fonts slightly differently than phones or mac too btw.

[lucy24]

Oops, I just realized I may have read the question backward. Are you talking about {max-width} as part of an @media rule in CSS? If so, there should be a series of max-width statements, from smallest to largest. At a minimum, one small number for phones, a middle-sized number for tablets, and an unlimited one for desktops.

1200 is an odd cutoff: too big for tablets, but only middling for desktops. In CSS, the number refers to the width of your current browser window, not the total pixel width of your monitor. Is there a final set of rules that doesn't contain a max-width statement at all?

There's a wordpress subforum where you may get a more focused answer. Among other things, she'll know what "max width" really means.

[Planet13]

If the theme is coded to be truly responsive then the max 1200 px width will only apply to desktop users.

Yeah, I think I understand. I am seeing a DIV where the max width is set to 1200 px. This is on a desktop with a resolution of about 1280 by 800 (or so).

"I just rolled out a responsive redesign for my site this weekend. The body is 1200px on my desktop and layout changes to fit the width of tablets and mobile phones just fine."

Yeah, if I grab the browser window handles and shrink the window, the page and graphics seem to shrink as well.

"There are a few iPhone emulator sites that are free."

Thanks for the tip. I will look for them.

Be sure to test in Safari as that's the iPhone default browser. Safari for Windows displays fonts slightly differently than phones or mac too btw.

Ahh... thanks for the suggestion.

"Are you talking about {max-width} as part of an @media rule in CSS? "

Ohh boy... that's kind of over my head. I know that @media rules are important. Just when I come across them in my style sheets, I close my eyes and put my hands over my ears and go "blah blah blah blah blah" as loud as I can.

I just know that if I am using FireFox and I RIGHT click on one of the more outer DIVs and select Inspect Element, it will say something like max-width: 1200px (or 960px or whatever).

1200 is an odd cutoff: too big for tablets, but only middling for desktops.

It seems to be a good size for OUR 17-inch monitors. However, I just don't know how many people are using 17-inch monitors aside from us.

[lucy24]

when I come across them in my style sheets, I close my eyes and put my hands over my ears and go "blah blah blah blah blah" as loud as I can.

:)
max-width followed by a number means "If the screen width is no bigger than this number of pixels". Consecutive max-width lines replace each other, so if you have rules for
max-width 960px
followed by rules for
max-width 480px
then any middle-sized device, like a tablet, will stick with the earlier rules, while smaller devices like smartphones will replace the first set of rules with the second set. If you say min-width the rules have to go in the opposite direction, from biggest to smallest.

The awkward part is that it only works properly if the page HTML contains a supplementary line* that says, in effect, "and when I say 'screen size' I mean the actual, physical size of the device, not some made-up larger size that it's claiming to be".

Some desktops are bigger than 1200px, some are smaller. That's why it seemed like an odd number.


* <meta name = "viewport" content = "width=device-width"> ... only don't quote me because that's qfm.

[getcooking]

Lucy24, I don't think we're talking about @media rules here for the 1200px number. The max-width (I'm assuming, but I've been known to be wrong...once or twice lol) here applies to the maximum width of the div of the main content. So on a ginormous desktop monitor, it doesn't extend past 1200px. For responsive designs, that of course is only for the desktops. The @media rules would then come in to play to enforce lower max-widths on that body content for other devices.

[lucy24]

Oh, right, that max-width. The one that goes haywire if you try to combine it with "width" for the same element :) And, just to confuse you, the default "none" doesn't mean zero width, it means the sky is the limit. (I have to look this up every time.)

In that case, 1200 as a maximum is utterly reasonable. Planet13, it means "no matter how big the monitor is, never let this element be wider than 1200 pixels". Your brain will not be happy if you ask it to read a text field that's 3000 pixels wide.

[Planet13]

@ getcooking and @ lucy24:

Thanks so much both of you for diligence in sticking with this thread and for wading through the confusionment that I have cast upon the hallowed pages of webmaster world.

Indeed, I did mean, basically, what happens when I have a template that has a div max-width set to 1200 pixels but it is also a "responsive" template?

So from all the replies, it looks like the following are true: (and please correct me if I am wrong):

1) If it is "responsive," it should look good on pretty much any handheld device, and,

2) with a div max-width set to 1200 pixels, it will look fit onto the vast majority of desktop monitors.

Hope I got that right..

Thanks again.