I’m beginning to design a website for multiple devices: desktops/laptops, tablets (e.g. iPad, Galaxy Tab, and mobile devices (e.g. iPhones).
I currently have a few pages that have some javascript to redirect to completely different subdomains. For example, if a user visits www.example.com on an iPhone, they are redirected to m.example.com or t.example.com if they are on a tablet. Obviously this requires you to create different pages that are likely to have similar content whereas a media query would allow you just to lay things out slightly differently depending on screen size.
So it seems to me that media queries would be the preferred choice for handling different screen resolutions. This leaves me with some questions though. Say for example you have a navigation bar on the desktop site that would be better served with something like a select on the mobile sites. What would be the best way to implement this?
Apologies for my perhaps incoherent rambling but I guess my question is what is the best way to implement a mobile version of a site where the differences may not just be limited to layout (e.g. with simple media queries) but may require different elements on the page?
Media queries are usually the best solution for what you’re trying to achieve. If you start creating separate versions for separate devices you’re going to give yourself a real headache trying to keep everything up to date. It’s much better to have one set of code that will adapt itself to the device the user is using.
Have a look at the Twitter Bootstrap project. It’s a ready-made framework that can help you put together your responsive design.