A modern image gallery: fluid or elastic?

Question

I am new to UX and IA and everything about interface and solution design. I need to do a simple image gallery based on grids. I read about responsive design and media queries.

Ok, in wide screen i have 7 columns grid, in laptop 5 columns, in tablet 3 and in smarthpone 1. This is pretty cool. I have done this with fluid layouts, using percentage for the width property. And I like this solution because it is flexible to all viewport size.

But what about if a user change font size with "command +" or "command -" keys? If image width are with percentage the container size does not change, and images does not change either. The result is a little bit weird: everything is getting smaller but images does not changes (well, the margin changes, that is even weirder).

But if I use em for width I obtain a no more fluid layout.

How mix the two layouts?

Answer 1

The question can sit in both places. Your not asking the right question. What you should ask yourself is "am I designing for a problem that really doesn't exist?" What I mean by that is. Yes, a user can re-size in a browser. There is a way through code to stop a user from doing that as well. But, before you go through the effort find data to back up what your asking. Just because a user can doesn't mean there is a large enough percentage that does to warrant the fix. There's a rule of 80/20 or 90/10 etc. Are you trying to solve the problem for the 20/10 or the others?

Answer 2

Don't use pixels in CSS! If you set font-size in body node to 100%, and everywhere else you use em (that is a ratio to the current font-size) instead of px, it's not a problem anymore if they change the font sizes in the browser. When the font size increases everything else will change.

So if you want to use 12px (font-size or anything else), and the default font-size is 18px on that "level", use 0.6666667em to set the size (0.666667 is 12/18).