Building a single page compatible for Mobile - where to start?

Question

I\'ve got a site that isn\'t mobile enabled, but as part of a campaign, we are going to be sending out a QR code that contains a voucher to link through to a \"hidden\" page

Answer 1

you are correct in that you should start with a mobile.css. You should also use a mobile.js, as most heavy javascript will not be needed, and you want to keep the number of requests down and file sizes small.

I would suggest having something on the back-end though, which prevents the regular .css and .js files from loading, possibly based on the user-agent (the best method for this is a whole other topic). Otherwise, you would have to overwrite every style in the original .css file, which is way too much info to feed to a mobile device.

That would be the approach if you wanted to make a mobile version of the whole site. since you mentioned only one page, you will just need to make a simple .css file and a (simple) page which fills the entire screen of the mobile device, using something like this:

once again, be sure not to load unnecessary .css and .js files