how to build a mobile site - basics, is it all CSS?

Question

this may seem silly but I am unsure of the basic building blocks for developing a mobile site other than changing the CSS. All the articles I find point to developing a new CSS stylesheet using media queries to make it responsive. Being a web developer I cant help but think Im making something easy very difficult for myself. Can I just clear up something?

If I were to build a mobile version of a desktop site that already exists do I create a new html/php file and use that as the core index file instead of the original one, my reason being , the layout/order of the links/buttons may be completely different, so Im unsure how the same code could be used for both desktop and mobile. Is the standard practice to have completely different files or different layouts based on browsers etc? (something similar to <!--[if IE 7]>, and if not, how do they change the order and content?

And if I AM using a change in html/php how do I get the mobile to read that instead of the regular files/code?

If that question is too vague, could someone please point me to a solid article answers this aspect.

Answer 1

This is a huge subject and the answer isn't always the same. Sometimes it's best to offer a mobile version of your site at a different URL and everything, other times you're better off making the one page and use CSS and Javascript to make it responsive.

If you're planning on radically changing the layout to the point where you will be writing the HTML differently, you'll want to make it a separate page. CSS is good for moving stuff around a bit, but if you find you're using CSS to turn your site into a completely different site, you should definitely consider a separate page.

Mostly it's just a matter of using your own discretion - your users don't care too much which approach you use, just so long as it works. Do whatever makes your job as the developer easier!

Hope this answer isn't too vague - you can find more information by Googling for responsive vs separate mobile site. Here's a good case study on the topic.

Answer 2

Have a read about Twitter Bootstrap. It is a CSS/JavaScript plugin that when applied to a website makes it re-size and re-organize to work in iPad, iPhone, android, windows etc. It is the simplest and most effective method I know for turning basic websites into mobile apps.

Not sure if this is what you are after but I switched from apps to bootstrap some time ago and it has work well.