Inicio
Consejos para desarrollar webs para móviles
Consejos para desarrollar webs para móviles
Escribo este post porqué quiero compartir con vosotros una serie de consejos para facilitaros la vida a la hora de desarrollar una web para el móvil.
Yo soy partidario de desarrollar webs para el móvil antes de programar una aplicación para iphone o android, puede que no se aprovechen todas las características del móvil pero ahorras tiempo de desarrollo ya que la misma web es compatible para todos los móviles que tengan un navegador aceptable y además no tienes que saber más allá del HTML, CSS y javascript.
Adaptar resolución de pantalla
Para que el dispositivo móvil detecte que la web es adaptada al móvil tienes que incluir estos tags dentro del <head>:
iphone / ipod touch: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />
android: <meta name=”HandheldFriendly” content=”True” />
Si no incluyes estos 2 metatags se mostrará la web en una resolución demasiado alta y con un texto pequeño ilegible obligando al usuario hacer zoom cada vez que entra.
Enlaces
Para mi hay 2 tipos de enlaces en una web móvil los de navegación y los de contenido, la diferencia entre ellos es que los de navegación són un grupo de enlaces.
Los enlaces de navegación recomiendo que tengan el estilo css float:left y width:(100/numero de enlaces)% para que estén agrupados y estos se adapten al tamaño de la pantalla tanto en vertical como en horizontal.
Los enlaces de contenido recomiendo que esten con el estilo css display:block;padding:5px;border-bottom:1px #ccc solid; para que toda la línea sea clicable y le resulte más fácil la navegación al usuario, tal y como se ven los listados en el iphone.
Tipografía
Recomiendo el tipo de letra “arial” con un tamaño font-size:16px, suficiente para que el texto sea fácil de leer.
Navegación
Recomiendo siempre poner un enlace “volver arriba” que le permita al usuario subir arriba y pasar a otra sección una vez ha leído todo el contenido.
Puedes hacerlo con un enlace que apunte a #top o hacerlo suave con un javascript de jquery:
function backTop(){
$(‘html, body’).animate({
scrollTop: 0
}, 1000);
}
Redirigir el usuario a la versión móvil
Lo más probable es que un visitante escriba el dominio.com en vez de la url del dominio con la versión móvil por ejemplo m.dominio.com, para redirigir al usuario que accede al dominio normal podemos hacerlo desde PHP o javascript.
Icono personalizado para un acceso directo en la home de iphone o ipod touch
Iphone e ipod touch tienes la posibilidad de añadir un marcador en tu home con el resto de aplicaciones, para diferenciarlas de los demás puedes incluir un icono a tu web con la siguiente etiqueta HTML:
<link rel=”apple-touch-icon” href=”src_imagen.png” />
El fomato de la imagen tiene que ser de 57 x 57 pixeles y puede tener transparencia PNG, por ejemplo.
Localización de usuario
El HTML5 todavia sigue un poco verde en los móviles, para detectar la localización del usuario puedes hacerlo desde PHP con geoIP.
julio 2, 2010
Temas relacionados
Muy buenos los consejos y enlaces que das. justo estoy pensando en hacer las versiones móviles de mis sites. voy a estar muy atento a nuevos tips. Saludos
Hola, me ayudo la parte final, no tenia idea como dejar el icono personalizado… lo otro.. como puedo hacer para que en el iphone o movil cualquiera aparezca un pop up que de a elegir la version? Saludos y espero tu respuesta a mi correo! gracias
hola miquel entre en este articulo buscando cual debe ser la resolucion del body y del wrapper mas adecuada para tocar el css de mi nuevo blog .. la verdad que tus trucos para mobiles los voy a utilizar pues la tendencia es standarizarse lo maximo posible con estos dispositivos: el meta iphone, lo de la arial por ejemplo lo del jquery de retorno. mira a ver si me puedes decir esto que resolucion utilizarias tu para body y wrapper de un sitio aspirando a facilitar la navegacion a todo tipo de dispositivos mobiles saludos y gracias de antemano