A modern image gallery: fluid or elastic?

Question

cross posted (as suggested) from ux.stackexchange

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

I personally like to setup 2 separate css stylesheets. One for the main site (desktop version), then the other for mobile devices.

So in a stylesheet called responsive.css you can have something like this:

 @media only screen and (min-width: 768px) and (max-width: 1024px)
 {
   /*stuff in here*/
 }

And you can adjust the widths as you wish or add more if necessary.

I personally dislike responsive design and enjoy more fluid designs. There are so many different size mobile devices that using a fluid design may work better overall for what you are trying to achieve.

As for font size, try to always use em since it re-sizes more accurately.