How to handle Zooming issues?

HTML & CSS
1

On my website, there is a header above each Comment with various sub-components (e.g. Date, Post #, Review Count, etc.)

I have noticed that as I switch browsers and as I zoom in and out, I am getting wildly different displays.

For example, in Safari - the worst violator - things go from being cramped at normal zoom to perfect at one size smaller back to cramped at the next smallest size back to normal and so on.

Now granted, I am testing “border scenarios” where I am using what I believe to be the largest - and thus widest - numbers, but this entire thing is still a little disconcerting. :mad:

So, I guess my question is… How flexible and scalable does my design have to be when it comes to Zooming and to Large #'s??

For example, if the Review Count = 150, then my Comment Header is fine. But if the Review Count = 1,500,000 then obviously there isn’t enough room for things and my design breaks somewhat.

Likewise, I think nearly any design will break if you zoom in or out enough.

What is a practical way to approach all of this?? :-/

BTW, sorry, but my code is too complicated and at this point my website a little too proprietary before launch to throw everything up here.

Nonetheless, conceptually, how would you handle the challenge I am facing?

Off Topic:

A good portion of my code on my Comment Header came from Paul O’ himself, so I don’t think the issue is really that my HTML/CSS is flawed. It is a more a problem of the fact that after 20 years, browser manufacturers cannot get this zooming thing down?!

Hope that makes sense?!

Sincerely,

Debbie

2

The general rule of thumb used to be to allow text to be resized up to 200% and having the site still usable, certain bits of the page may “break” but as long as the site can still be followed and links used then that’s generally ok.

For your zooming scenario yes different browsers do different things, but as long as you can still use the site I wouldn’t worry too much.

For your review count it’s really a case of finding the best all round presentation whether the number is 1 or 10,000,000, and whether you can live with it “breaking” in certain browser conditions. I’d suggest that if the total is ever going to large, ie 6/7/8 figures that the design presentation needs to allow for that.

3

For this particular page, everything stays the same if you zoom in or out except for my Comment Header.

Someone like Paul might have some tricks to fix things, but it basically comes down to the fact that I have a lot of data crammed into a tiny space, and while, in theory, zooming shouldn’t impact things, the shortcomings of browsers causes the last number to jump to a new line in certain situations.

Well, my point is that you cannot plan for everything. (If you allow 6 digits for a number, Murphy’s Law says it will be 7 digits!)

But I did plug in the largest numbers I felt could reasonably exist, and things work in all but a few cases.

I probably should worry, because, for example, it is nearly impossible that “Agree” would ever be 100%, which means that I just gained a digit!

Anyways, I am a perfectionist, and am just worried that my code or design is possibly lacking…

Sincerely,

Debbie

4

Yep, that’s the problem with cramming a lot of stuff in a small area, eventually something will give. I frequently get “designs” to build sites from that are the same, in fact I’ve just got one in today that’s been “designed” by a print designer, needless to say it presents a ton of issues which I will send back to them with improvement suggestions :slight_smile:

Absolutely, you can never plan for everything, that’s the way of the world! If you have limited scope it’s often a case of doing what’s going to work for the majority and living with what may happen for the minority - there’s always a compromise somewhere.

But there again, being a Virgo perfectionist myself, I’m always looking for a better way of doing things. Sometimes if something doesn’t work I’ll redo it until it does!

5

+1