Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
2  
While I love the question, I think it is not a UX question as much as a "how do I accomplish x" with responsive design. –  JohnGB Dec 27 '12 at 11:50
    
also if you post on stackoverflow it's best to have some coding samples that you have tried on your own –  DJ KRAZE Dec 27 '12 at 17:23

2 Answers 2

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?

share|improve this answer

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).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.