Add Me!Close Menu Navigation
Add Me!Categorías abiertas del menú

Tips para garantizar la correcta visualización de tu site en todos los dispositivos (RESPONSIVE LAYOUT)

Hoy en día todo diseñador web ha de garantizar que sus trabajos se vean sin ningún tipo de problema en portátiles, dispositivos de sobremesa, tableta y teléfonos móviles (BB, iDevices…).

Es lo que se llama RESPONSIVE DESIGN, un diseño flexible adaptado a todos los dispositivos.

Lo básico

  • El diseño debe ser flexible: basado en columnas y haciendo uso de porcentajes en lugar de pixeles
  • Media queries: una herramienta que permite modificar el estado del CSS
  • Contenido multimedia flexible: las dimensiones de imágenes y vídeos deben poder escalarse en función de la resolución del dispositivo cliente

Como ves, la palabra “flexible” se lleva la palma, siendo la clave del responsive design. A continuación 5 tips para que tengas en cuenta en tus próximos diseños:

1.- Nunca uses maximum-scale

Para solucionar un bug de iOS (sistema operativo de iDevices), suele utilizarse la instrucción maximum-scale=1 en el meta name=”viewport”. No lo hagas, pues los usuarios no podrán hacer zoom en su pantalla (con el clásico gesto de pellizcar). Si quieres que tu sitio sea “flexy” debe poder ampliarse ;)

La solución es la siguiente, la cuál informa al navegador de la anchura de la pantalla sin afectar para nada al usuario:

<meta name="viewport" content="width=device-width, initial-scale=1">

Además deberás añadir la siguiente linea en tu fichero CSS:

    @viewport {
        width: device-width;
    }

2.- Resoluciones de pantalla

Inicialmente este tipo de layouts no convencieron a los desarrolladores/diseñadores, pues siempre se había preferido el “diseño al pixel”. Sin embargo, aquí surge la problemática a la hora de insertar videos o imágenes, pues podrían quedar superpuestas o cortadas.

El tamaño de pantalla suele ser un estandar que, con el paso del tiempo, va modificándose para adaptarse a los diferentes dispositivos. Inicialmente se empezó con el clásico 800×600, pasando por el 1024×768 hasta llegar al 960px para portátiles y sobremesa, 320 para iPhones y 768px para iPads.
Los cambios en estos aspectos tecnológicos varían a una velocidad increíble, por lo que es necesario este tipo de diseño fluido (basado en porcentajes), pues es mucho más flexible.

3.- Proporciones entre elementos

Trent Walton dijo:

“To think about the web responsively is to think in proportions, not pixels.”

En los diseños responsive debemos olvidarnos de los pixeles para pensar proporciones relativas. Es por ello que deberás analizar y estudiar qué relación guardan los diferentes elementos que compondrán el site y cómo estas relaciones pueden verse modificadas.

4.- Usa em en lugar de pixeles

El debate px vs. em parece ser que nunca acabará. Sin embargo, al estar hablando de diseños fluidos, es importante que se trabaje con ems, pues son unidades relativas basadas en el elemento que los contiene.
Sirva el siguiente ejemplo, donde queremos un heading font-size (20px) basado en el font-size del body (10px)

20px &divide; 10px = 2em
target &divide; context = result

El cálculo de em sigue la misma lógica que el cálculo del porcentaje de grid, pues ambas medidas toman como referencia al elemento padre (o elemento contenedor).

Tipografía

Usar em en las fuentes te permitirá usar todo el potencial de CSS para crear un sistema escalable que concuerde con el dispositivo cliente:

body { font: 100%/1.5 serif; /* 16px */  }
h1 {  font-size: 2em; /* 32px */ }
 
@media (min-width: 600px) {
    body { font: 112.5%; /* 18px */  }
    h1 {    /* Do nothing! I'll automatically be 36px */ }
}

Esto te ahorrará muuuuchas horas de trabajo ;)

Paddings y margins

También es conveniente utilizar ems para espacios en blanco (margin y padding), pues ayudará a mantener un sistema balanceado de proporciones relativas.

#hero { margin-bottom: 1em; }
 
@media (min-width: 600px) {
    #hero { margin-bottom: 2em; }
}

Posts Relacionados: 3 plugins SEO para WP que deberías conocer | 30 sitios donde descargar imágenes gratuitas | Formas de perder el tiempo posicionando webs | Qué hacer si Google te ha penalizado en su ‘last update’ | Menú de subnavegación (CSS+JQuery) | NounProject: Gran colección de iconos vectoriales | Reveal: Ventanas modales con jQuery | Contactable: Formularios accesibles con jQuery | jQuery: 10 snippets útiles que deberías conocer | Formulario en varios pasos usando jQuery |

Deja un comentario




Categorías