@media handheld - separate css file and max-width?

Hi!

I'm using a flexible CSS grid for my website and it all works fine on small screens except when it comes to the gallery, for which I use galleria.io.

In order to make it work, I placed a couple of @media handheld codes/rules.

Spefically:
I don't have a separate CSS file for mobiles though. I placed those rules in the same CSS file where the rest is. I arbitrarily defined the max-width at 400px. I also placed one rule in the html file to define the size of the galleria for mobile phones (using the same max-width).

It seems to work, my only concern is that there are some rules about defining media types which I'm ignoring because I've never used it before. Do I need to refer mobile phone users to a separate CSS file and what max-width should I be using so that it works for most phones?

Thanks!

Welcome to media queries!

I'm building a very large site and faced the same questions you have.

The first and most important thing I've learned so far is THERE ARE NO ESTABLISHED STANDARDS yet.

Once you come to terms with that, the rest is still messy.

There are lots of thoughts and opinions about using separate CSS files for the different breakpoints and this is the route I chose. It seemed to make better sense to me keeping in mind future maintenance. It also seems easier to add new breakpoints if need be.

To address your next question about what sizes to use...well, that's up in the air. In terms of physical size you'd think phones would be smallest, tablets next and desktops the largest. Ha. Not so.

Screen size here is the key, but devices use different pixel densities. For example, my desktop is roughly 1920x1080. My phone is 720x1240 in portrait mode. Phones have smaller screens but can have more pixels so using a breakpoint of max-width 400px seems to break the practice of media-queries.

You really don't want to show the same layout on a phone as you would on a desktop. It'll be too small and links/buttons are too hard to click unless you zoom.

This is why I almost prefer a device detection system, but I know that's almost taboo.

The other thing to consider is how images are served. I've seen dozens of sites that use media-queries that absolutely fail when serving images.

As developers we have to keep in mind people who use our sites from phones probably use a very expensive data plan to access it and don't want to waste bandwidth downloading an image meant for a desktop only to view it at 50% size or smaller on a phone. That's why we need to serve smaller images for smaller devices. How? Ha. Good luck with that too. There are several methods for this, but all have pros and cons.

Because media queries are still new there is a lot of room to grow and a lot of questions needing answers before they can really be implemented in a useful way, it seems JavaScript is necessary to manage some logic for us.

If you're not completely turned off, here's some reading that helped me:

http://www.slideshare.net/bryanrieg...le-web-by-yiibu

http://blog.cloudfour.com/responsive-imgs/

http://line25.com/articles/10-css-r...ner-should-know

http://timkadlec.com/2012/04/media-...oading-results/

http://kyleschaeffer.com/developmen...-media-queries/

Here's a nice site with lots of examples of how sites use mediq queries. Pay attention to the code and see how many really load different images for different breakpoints:

http://mediaqueri.es/

I hope I was some help at least. Don't get too frustrated. This is still pretty cool, but you'll need to make some of your own decisions about what works best for you before any standards are developed.

P.S.--One more quick note...a lot of people are using code to identify newer iThings:



Using this brings us back to the days of targeting CSS to a device (much like IE) or a CSS kind of way of device detection. Either way it's a complication. Sorry.

Here is a good baseline to start for reading about Responsive Web Design:

http://www.alistapart.com/articles/fluidgrids/

http://www.alistapart.com/articles/responsive-web-design/


There is a bit more to it then Media Queries. I would argue that Responsive Web Design is ready today. Many large public facing sites are using responsive layouts.