Share Content between Web and Mobile Website

Question

I am creating a mobile version of my website. It is nothing fancy, just a few pages. I would like to be able to share the content in both form, without having to update it in two places. Is the easiest way to do this with CSS? Or can I create some sort of XML or text file and read it in both sites?

Here is what I ended up using:

<!--[if IE]>
<link rel='stylesheet' href='ie.css' type='text/css' />
<![endif]-->
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='mobile.css' type='text/css' />  
<link rel='stylesheet' media='screen and (min-device-width: 481px)' href='standard.css' type='text/css' /> 


<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

This works for:

Windows IE 8, Windows Firefox 3.6.7, Mac Safari 5.0.2, Mac Firefox 3.0.6, iPhone 4 Safari, Android Web Browser (Emulator)

You have to put everything in this order otherwise it will not work. You also have to make sure that the standard.css has all the same css attributes as the mobile.css. For instance, if in mobile you say #myitem { border:1px solid black; } but you do not want a border for #myitem in the standard view, you have to put #myitem { border:none; } inside standard.css, otherwise Mac Firefox will pickup the value from the mobile.css file and show a border on the item.

Answer 1

CSS is your best bet.

By using media queries you can decide which stylesheet to use to display your content.

 <link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
 <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

This link may help you: http://css-tricks.com/resolution-specific-stylesheets/

Answer 2

If you really want to share the entire content of the page and just have things positioned and styled differently, CSS is your best bet. If you want to serve a "mobile-optimized" version of the page, obviously CSS won't let you do much about that. In that case, there are a lot of options, such as storing the real meaty "content" in a database or static files and generating a page with the relevant data through PHP or equivalent, or do the same with a source XML file and generate the page through XSLT.