Originally I was referring to using px for width, this is bad because it is rigid and fixed, not fluid and flexible. It won’t alter for any window size like a % value would.
I was thinking that px was fine for max-width, but @felgall makes a good point about using em instead, as it does give a better experience for people zooming the text, because the max-width increases on zoom, blowing up the text without altering layout until it fills the screen.
Whether to use a fixed unit for width like px or a relative unit like ems seems to depend on the content and the coder’s handling of it at zoomed widths… one of those “arguable” choices.
Lyza Gardner wrote a thorough article about it in 2012 and revised it recently. Arguments both ways.
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
You can google “ems for width” and find many more opinions.
I recall that article and a discussion about the pros and cons of em queries earlier.
In the context of media queries, EMs are good to text based elements, but not so good with graphical elements. But the advantages only apply when a user zooms the text only. It makes little difference with the default zoom behaviour.
To illustrate felgal’s point I have tried em max-width here:
This is the default page view, with max-width:900px or 56em (near enough).
If I zoom text with the px max-width, the text gets bigger, but the container stays at 900px
If I do the same with the em max-width, the container expands with the text, in this case, until it reaches the
width:90% value.
This makes it more like the default zoom behaviour which a responsive site should handle.
It does beg the question, do people use zoom text only? The default zoom should work better in most cases.
Just in dev locally.
Do you have an example you can show me?
I tested what you said a lot last night, and I see absolutely no difference in how the web page object or text appear. (And I used a paragraph of Lorem Ipsum to be sure.)
From what I read last night, em-based layouts are bad…
I have no data to back it up, but I believe a subset of people would.
- Those that have trouble reading smaller text
- Those using Firefox and have tried the View-> Zoom setting
- Any that know how to use a custom CSS browser file
True, it requires a level of techy know-how, but if one browses often enough the chance is they’ll eventually get to a site that they would rather not leave to go elsewhere or become frustrated enough that they’ll investigate and learn how.
All I know is that with this…
/* max-width: 75rem; /**/
max-width: 1200px; /**/
When I zoom (i.e. Command + on my Mac), everything on the page appears to zoom equally - like you would get on a copy-machine!
The horizontal menu, the headers, the text, even the columns seem to increase proportionally.
When I zoom, that is the behavior I expect. (Just zooming the text seems stupid, because if you have poor vision, you need EVERYTHING to get larger, not just the text…)
That’s what my previous post was.
That is generally how a non-responsive site zooms. What happens when you zoom so far the main wrapper fills the screen and beyond? Do you get horiz scrolls, or does it shrink to fit?
On a responsive site, you should end up with a blown up version of the mobile site if you zoom far enough. As it grows, the queries kick in to alter the layout to fit the view.
This is the page (WIP) from my above example, you can see how it reacts to zooms and varying screen widths. It works down to about 230px (smaller than an iWatch), when the phone icon clashes with the menu icon, but that’s more than small enough.
That’s why I asked:
But the reason being, I imagine not that many sites are responsive enough to hold up to it. Using normal zoom, a responsive site will handle very well, a non-responsive site will not break its layout, but will get horiz scrolls. My eyes are still good close-up, so I don’t know what it’s like, but I suppose I would use the normal zoom mode if I needed to, for this reason.
Looks like I have done a pretty good job so far on my first responsive website, because I can zoom FireFox to the max, and nothing breaks. 
As the entire page enlarges, things like the right column just drop below the main area and various media queries kick in to make sure things look good at all levels.
I never get a horizontal scroll bar.
Guess that is why I was not following @felgall
That is a good way to describe things, and that is what I get.
1 Like
It sounds like you are on the right track.
Thanks to lots of wise and patient teacher here on SitePoint!!
I do… to approximate the behavior of a page if the user uses a different font-size or a different platform with a platform-specific font, etc.
Aside from web dev, a horizonal scroll bar doesn’t usually appeal to me, so personally I prefer to zoom the text before resorting to zooming everything larger (most page designs).
I believe that FF is the only browser that still permits one to zoom text-only, so the majority of users zoom everything because they have no choice (or if they did, wouldn’t care).
Thanks for the link to the code behind your images? I would like to keep a copy on my PC. It’s a nice example. Thanks.
There is a link to the page on post #28.
No one wants a horiz scroller. But as I was explaining, the normal zoom on a responsive site will not give you them.
1 Like
No, I just zoom the text because I don’t want the layout to get bigger. I’m quite happy with the images at their natural size but I just want the text enlarged a little so its easier to read.
When you zoom everything stretches and you end up with a page that doesn’t fit in your window if the author hasn’t set a max-width.
I have my browser set to zoom text only and always have.
2 Likes
I use a very simple straight forward dimension.
this is 160px,320px,640px,960px
160px for smartphone(vertical )
320px ( tablet vertical)
640px( tablet horizontal)
960px( desktop ) this include ultrawide screen too( 1280px,1600px,1920px)
important consideration : only pixel consideration is not sufficient. We started considering pixel/pixel-density
Hopefully you allow for the browser chrome when using that size as the browser itself can take up as much as 20px of the width to display the browser border and scrollbar - giving you 940px for the page content.
I don’t consider specific sizes, devices and orientations, instead concentrate on making a design that is fluid enough to fit on any device of any size at any orientation.
Devices now are too diverse to pigeon-hole like that.
Another one for zoom text only, interesting. So you find that fewer sites break when zooming text than with zooming all?
Personally, I think we have different user experiences in mind. Perhaps yours comes from using a wide screen monitor with your browser at full screen size. My browser floats in the monitor at a less-than-full-screen width (~1200px maybe). If necessary, I adjust it to whatever the width of the web site happens to be. I do not expect the width of a site or graphics to change if I zoom text-only larger (that’s what zoom-all does). I don’t usually need to see larger images/graphics. If I do, I’ll zoom “all”, but that’s the exception by far. My other reason for zooming text-only as I described earlier is to evaluate the behavior of a page under development at a modest range of different font sizes, ie. by simulating a reasonable range of user preferences or platform differences. I think we are coming from different experiences.
Maybe my preference stems from dealing with older fixed width pages. Dunno. But until more sites are written with the techniques of responsiveness that your demo presents, zooming text only is still the choice I am most likely to use.
What you and Paul are saying is the opposite of what I was thinking. But as someone who does not have any issues with reading smallish text, I welcome input from anyone who does with their experiences and preferred ways of dealing with it.
I suppose it depends upon the individual sites and how they are coded, my examples are possibly not typical, but what I had in mind was for one, a very rigid design like the site discussed in this thread. Zoom text only and the layout breaks, it becomes a mess. Zoom all and yes, you get nasty horiz scrollers, but the layout stays intact.
As my second example, one of my sites. It is responsive, but it was my first attempt at RWD so could be a lot better. If you zoom text only, the layout breaks in the header and menu for starters. I know, there are some fixed heights in there. But if you zoom all, it plays nicely, you get the blown up mobile view.
In both these examples, zoom all seems to me the better option.
On the Intercoms website, my RWD skills have improved, both zoom methods work nicely, but:
So what is your opinion on felgal’s suggestion about using em units for max-width? I was sold by the idea, and adopted it on the site, swapping max-width:900px for max-width:56em. Now it does make the width of the main wrapper grow on zoom text only, I thought that was good. Or do you think that because it’s similar to zoom all, I am robbing people of having the option?