Yo te propondría dos soluciones:
1.- Trabajar el CSS haciéndolo multiplataforma. De esta forma no necesitas derivar la página ni cambiar tu HTML. Se trata de crear, dentro de CSS una "duplicación de estilos" para el ordenador tradicional de escritorio y para móbiles, tablets, etc.
Para este último te aconsejo que utilices anchos porcentuales a fin de aprovechar al máximo el ancho de pantallas "mini". Yo utilizo tres anchos de pantalla (pueden ser dos o más de tres):
Código CSS:
Ver original@media all and (min-width: 960px){ /* códigop CSS para pantalla superior a 960px*/}
@media all and (min-width: 651px) and (max-width: 959px){/* códigop CSS para pantallas entre 651 y 959 px*/}
@media all and (max-width: 650px){/* códigop CSS* para pantallas igual o inferior a 650px/}
El último es el que desarrollará el CSS para móbiles.
2.- Crear la página en formato móvil. Particularmente me gusta jQuery Móbile. Tiene mucha documentación y respaldo.
En este caso, creas tu web paralela que puede estar alojada como
miweb.com/mobile/
En este caso has de generar un script en la página convencional que la remita si el ancho corresponde a tablets, móbiles, etc. Yo utilizo:
Código Javascript
:
Ver original<script type="text/javascript">
<!-- //
if (screen.width <= 959) { /* 959 es si corresponde a una pantalla inferior a 960*/
window.location = "mobile/index.php"; /* corresponde a una ruta relativa */
}
// -->
</script>
Existen scripts que te identifican el tipo de móvil y las correspondientes derivaciones de página.
Y podrán darte otras soluciones, perfectamente válidas (
"todos los caminos conducirán a Roma")