I want my web site to support mobile phones, but this is NOT an "how to" question.
I have read everything about that and to summerize my findings, @media tags and min/max-width.
Now for the actual question I have. Some of the web site pages, get pretty large and include content, sidemenu, topmenu, footer, JS, CSS (for non mobile version) and so on.
But.... for a mobile version, I need to cut off at least 50% of it (for example, a sidemenu should not be shown, footer should be smaller etc).
Now, again, it is not a problem by CSS (just hiding the elements not needed for those with @media).
The real question is, why do I have to serve a full page, and show only parts of it?
Isn't it a waste of bandwidth? Loading speed will also be affected of course (loading a page specially designed for mobile, without all the "extra" features, would sum up in 10kb,
while the full-blown page can get up to 100kb).
Am I over thinking this?
Should I just go with @media queries and don't care about wasted bandwidth?
It depends on your use case.
Would it take a very long time to make a separate mobile page(s)? if not then yes it would be better, why waste the bandwidth (big consideration to mobile devices possibly using 3 / 4g which they are going to pay for).
Keep in mind that a lot of the bigger websites do the traditional of redirecting to m."websitename" when on a mobile, so people do invest on having a mobile site and a full web based site.
long story short both are fine but its what suits you and what you have time for