Diseño web para móviles, consejos útiles

Diseño web para móviles, consejos útiles

Diseño web para móviles

Cuando empiezas en el mundo del diseño web, tarde o temprano te encontrarás con la necesidad de adaptar tus páginas web a los dispositivos móviles. Actualmente cuando el número de usuarios que navegan por internet a través de su smartphone ha crecido considerablemente respecto hace unos pocos años, es muy posible que un cliente te pida adaptar su web para las pantallas móviles.

Esas capas de contenido e imágenes que diseñaste para tu última web y que desde el navegador de tu ordenador se ve a las mil maravillas, se descuadran o carecen de sentido en una pantalla de 320 pixeles.
Toca darle un repaso a tus hojas de estilo, a continuación algunos consejos y trucos útiles para subsanar esos posibles problemas y adaptar el diseño de tu web, manos a la obra:

Media Queries

Las media queries incluidas en CSS3, te permiten filtrar estilos según rangos de resolución de pantalla en pixeles, pudiendo utilizar una media query para los estilos específicos de tu web en la versión móvil.
Por ejemplo, dentro de un archivo.css podrías tener:

@media screen and (max-width:490px) { 
/*Estilos CSS que adaptan el diseño de tu web a dispositivos con pantallas de un máximo 
de 490 pixeles de ancho */
 }

De esta forma, estos estilos serian aplicados exclusivamente a los dispositivos móviles  sin la necesidad de cargar una hoja de estilo adicional.

También podría utilizarse una media query para cargar un archivo css solo para determinadas resoluciones, basta con añadir entre las etiquetas <head></head>:

<link rel="stylesheet" type="text/css" media="only screen and (min-device-width: 300px)
 and (max-device-width: 480px)" href="movil.css" />

En este ejemplo, el archivo movil.css solo será utilizado si el dispositivo que se conecta a la web tiene una resolución a lo ancho de entre 300 y 480 pixeles.

Utilizar medidas de tamaño relativas

Cuando colocas una imagen o cualquier otro elemento puede ser tentador usar una medida en pixeles. Estas visualizando la web en tu navegador de escritorio y defines un imagen con una anchura de 700px, se ve perfectamente, pero puedes no ser consciente de que con ese ancho la imagen se descuadra en la versión adaptada para móviles  de tu web, debido al menor ancho de  pantalla.

Siempre que te sea posible, utiliza una medida relativa, en vez de la propiedad width: 700px, utiliza porcentajes. Si utilizas width: 50%, la imagen utilizará para desplegarse el 50% del espacio disponible dentro de la capa en que se encuentre, reduciéndose o adaptándose el tamaño de la imagen automáticamente según el tamaño de la pantalla en la que se visualice. Es una de las técnicas a seguir dentro de lo que se conoce como responsive design.

Otra medida útil para definir el ancho y el alto es em, pues es proporcional al tamaño de la  fuente tipográfica que ve el usuario.

Herramientas para visualizar tu web en distintos dispositivos

Captura de pantalla de screenflyPara poder validar y visualizar el diseño de tu web adaptado para distintas resoluciones de pantalla existen herramientas como  screenfly.

Introduciendo la URL de tu página podrás comprobar cómo se ve tu web en multitud de dispositivos, distintas marcas de smartphones y tablets. Junto con el siempre imprescindible Firebug podrás editar los estilos y comprobar en vivo cómo va quedando el diseño de la versión móvil de tu sitio web.

Llevo un tiempo utilizando screenfly y el resultado ha sido satisfactorio, pero existen otras alternativas interesantes como responsinator.

Aquí termina la primera parte de esta mini-guía, la semana que viene nos vemos en la segunda y última parte.

Foto: anuubis.

Foto Francisco
Francisco Villén.
Desarrollador web de


Si te ha parecido interesante, compártelo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Solicite información

He leído y acepto la Política de privacidad
Más información

close-link