pagina web para moviles

[yonaida]

hola, tengo que diseñar una pagina web en version movil, mas que una pagina es la info de contacto de la empresa, mapa de google, y poco mas, en resumen 1 sola pagina.

mi duda es referente a la resolucion de dicha pagina, pues he estado leyendo aqui y los post que hay son antiguos. quiero hacerla xhtml y css sin mucha complicacion.

si alguien por favor me puede sugerir algo, se lo agradezco, pues nunca he diseñado nada para moviles. gracias

[jomaruro]

Hola:

Al ser algo tan sencillo, te diría que la maquetaras en % así se adaptará siempre al tamaño y resolución de la pantalla.

Saludos.

[yonaida]

eso he pensado pero en el tema de las imagenes y demas pues al variar la resolucion, veo que me pierde calidad o se me desmadra el contenido. pongo aqui el enlace del resultado que quiero de la pagina para moviles.
http://alconza.com/test_movil

he utilizado la pagina http://offermobi.com/page/tools/ que ofrece un emulador de varios moviles (actuales) para emular como se veria la pagina en cada uno de los moviles que elijas. lo dejo como nota por si a alguien le interesa.

este es el codigo css que tengo actualmente:

Código:

*	 {
	margin:0px;		
	padding: 0px;
	}
body {
	margin: 0;
	text-align:center;
	background-color:#fff;	
	font-family: Verdana, Arial, 
                          Helvetica, sans-serif;
}

#contenedor {	
 	margin-top:1% ;   	
	background-color:white;
	text-align:left;
	max-width:440px;
	} 
#contenido{
	margin-left:2%;
	margin-right:2%;
	}
#direccion{
	float:right;
	margin-top:10%;
	font-size:12px;
}
#iconos{
	float:left;
}
#contenido p.texto{
	padding-left: 10%;
	color:blue;
	font-size:12px;	
	margin:2%;
}
#pie p.texto_pie{
	text-align:left;
	font-size:11px;
}

[yonaida]

problema resuelto. tal y como indicaba jomaruro hay que trabajar en %
hacer el body y el resto de contenido al 100% incluida las fotos, las letras y todos los divs, por gigante que se vea en el monitor normal es asi como se hace.

aqui dejo el css que utilize y el link de la pagina para que vean el resultado en el movil : http://alconza.com/movil

para comprobar como se ve en la mayoria de resoluciones de moviles actuales,
pueden usar este emulador:
http://offermobi.com/page/tools/ (mobile preview) (compare 4 mobile devide preview)

Código:

*	 {
	margin:0px;		
	padding: 0px;
	}
body {
	width:100%;	
	background-color:#fff;	
	font-family:Verdana, Arial,
				Helvetica, sans-serif;
}
a:link, a:visited, a:active{
	text-decoration: none;
	color:blue;
}
a:hover { color:black; text-decoration:none;}

#contenedor {
	max-width:100%;
	min-width:50%;
 	margin:1% ;   	
	background-color:white;
	text-align:left;	
	} 
#cabecera img.logo{
	width:100%;
}	
#contenido{
	
	margin-left:2%;
	margin-right:2%;
}
#contenido p.direccion{
	text-align:center;	
	font-size:100%;	
}
#iconos img.foto{
	width:100%;	
}
#mapa{	
	margin:1%;
}
#contenido p.texto{
	margin-left:15%;
	color:blue;
	font-size:100%;
}
#pie p.texto_pie{
	text-align:center;
	font-size:80%;
	margin-bottom:1%;
	color:blue;
}

[servidigital]

entonces solo cambiando los tamaños a porcentajes se va a ajustar a los diferentes dispositivos moviles? y asi me qdaria mi version web????

[yonaida]

exactamente, tienes que trabajar con un body en 100% y todo lo demas en % nada de pixeles.
veras que la web se ve enorme en el pc pero en el movil ya se adapta adecuadamente.
la cuestion de la pagina web es que no deberias meter tooodo el contenido de una web normal, pues igualmente se veria todo pequeño, la idea es reducir el contenido poniendo lo mas importante, y añadir tambien un enlace para que pueda ver la pagina normal, si asi lo prefiere el usuario.

suerte y saludos.