responsive_design

Diseño Web Responsive

Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedIn

2 Pasos para conseguir un diseño web responsive

Actualmente nos encontramos ante una inmensa variedad de resoluciones de pantallas para una igualmente extensa cantidad de dispositivos (monitores, televisores, tablets, smarthphones). Según las últimas estadísticas cada vez más gente accede a Internet a través de éstos dispositivos móviles. Sin embargo, la mayoría define la experiencia como “no muy satisfactoria” ya que las páginas están poco o nada adaptadas para su uso, empeorando la experiencia de usuario.

El w3c consortium recomienda y enfatiza utilizar lo que denominan One Web, es decir, diseñar una sola web que sea capaz de adaptarse a las diferentes resoluciones de pantallas de los diferentes dispositivos existentes.

Aquí es donde aparece el nuevo término “Responsive web design“. Personalmente prefiero utilizar el término reactivo como traducción de “responsive” ya que precisamene se refiere a que la web reacciona activamente a un cambio de resolución o tamaño. Adaptativo o adaptable tiene una connotación más pasiva, sin embrago reactivo se aproxima más a la definición de responsive.

Llamémosle como le llamemos: responsive, adaptativo, adaptable, flexible o reactivo, para que nuestra web tenga en cuenta las diferentes resoluciones de los dispositivos debemos seguir una serie técnicas agrupadas en dos simples pasos:

PASO 1: UNIDADES PORCENTUALES

Los tiempos de los diseños fijos, basados en pixeles, han terminado. La web es un medio fluido con infinidad de posibilidades, no deberíamos ceñirnos al esquema del medio impreso que si que requiere ciertos limites y acotaciones. Realmente el pasar de anchos fijos a anchos variables es muy sencillo, basta con aplicar una regla de tres y ya tenemos el resultado.

PX VERSUS %

Veamos un ejemplo: Nuestro ancho de página es de 920px un valor fijo, que será el 100% de todo el ancho que queremos. Si a su vez lo dividimos en dos columnas, una izquierda de 600px y la derecha de 320px, deberemos hacer una regla de tres para obtener el valor porcentual (600/920*100 y 320/920*100)

De esta manera si redimensionamos la ventana o cambiamos de dispositivos se guardaran las proporciones readaptándose a la nueva resolución.

LAS FUENTES: EM

Las fuentes reciben el mismo tratamiento, por ejemplo si definimos que el tamaño de la fuente será de 14px, éste será el 100%. Si necesitamos un encabezado de 18px entonces el tamaño porcentual (en unidad em) será 18/14 = 1.28em. Si necesitamos un texto más pequeño, por ejemplo de 12px, entonces  12/14 = 0.86em.

IMAGENES: MAX-WIDTH

Para las imagenes tenemos que definir la propiedad max-width (o max-height segun el caso) al 100%

img {max-width:100%;}

PASO 2: MEDIAQUERIES

Al aplicar el PASO 1 ya tenemos bastante del trabajo hecho. Pero no es suficiente. Cuando las dimensiones cambian demasiado para adaptarse a tamaños muy pequeños (como las pantallas de los dispositivos móviles) es posible que el contenido se redistribuya en columnas tan estrechas que sólo entraría una palabra. Nunca será lo mismo diseñar para un monitor como para un móvil. El diseño de éste último debería ser más simplificado y mejor adaptado a acciones táctiles. A lo mejor necesitamos que algún contenido desaparezca cuando las dimensiones sean muy pequeñas o que cambie su posición y orden visual. Aquí es donde cobran importancia las Media Quieries,  que no son otra cosa que CSS condicionales.

Vamos a ver como funcionan. En el siguiente ejemplo vamos a definir 3 Media Queries para diferentes situaciones de pantallas.

Primero podríamos definir una media query para un ancho específico, por ejemplo 240px (Samsung Galaxy mini). Entonces nuestra media query sería

@media screen and (max-width: 240px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
} 

Dentro de las llaves tenemos que poner todas las reglas CSS que actuarán cuando la pantalla del dispositivo sean como máximo de 240px.

Ahora veremos otra media query para aplicarla a las pantalla de 1200px o mayores

@media screen and (min-width: 1200px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
}

Y más aún, podemos especificar un rango en el que las CSS actuarán, por ejemplo:

@media screen and (max-width: 600px) and (min-width: 900px) 
{ 
/* Aquí van las reglas CSS necesarias */ 
}

De esta manera podemos tener definidas tantas CSS condicionales para aplicarles diferentes reglas dependiendo de sus tamaños. Se recomienda crear estas reglas para las resoluciones: 240, 320, 480, 600, 768, 900 y 1200. Pero dependerá del proyecto en sí

Las media queries pueden estar todas en una misma páginas de estilo o podemos incluso separar las hojas de estilo. Por ejemplo, si queremos cargar una hoja de estilo independiente para anchos de pantalla inferiores a 480 píxeles:

O también:
@import url("style.css") screen and (max-device-width: 480px);
Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestShare on LinkedIn
Kabitik

Deja un comentario

*

code