Diseño Web adaptativo con CSS3 media queries

Introducción

responsive_design

Las media queries es el pilar básico del diseño web adaptativo (Responsive Web Design o RWD ) ,  gracias a las media queries en CSS3 podemos detectar las características del dispositivo, por ejemplo la resolución de la pantalla, que es el caso que nos ocupa hoy.

DEMO: Una pequeña demo, cuando redimensionamos la pantalla cambia la disposición de los apartados, desaparece el texto explicativo de cada apartado.

Con los media queries dependiendo del dispositivo que usemos podemos modificar el aspecto y la disposición de los elementos de nuestra página, por ejemplo en la imagen inferior podemos ver como los elementos cambian de posición dependiendo si empleamos un ordenador de escritorio o un dispositivo como una tablet o un teléfono móvil.

media-queries-desktop-ipad-iphone

Con los media queries nos ahorramos rediseñar una web desde cero para cada dispositivo (que redunda en costes de desarrollo y sobre todo de mantenimiento) .

Un ejemplo de algunas webs de éxito que emplean el RWD como el Time. Empleando Firefox tenemos una herramienta para desarrolladores para ver una web en diferentes resoluciones (el método más rápido y el clásico es redimensionar la propia pantalla del navegador) , cuando optamos por un tamaño como el de una pantalla de móvil se producen algunos cambios, el menú principal se esconde como desplegable bajo “SECTIONS”, las noticias principales se colocan en una columna vertical, los iconos sociales también desaparecen, etc…

rwd_1

Vista en pantalla PC Escritorio

rwd_2

Vista a una resolución de 369×640

Manos a la obra

La sintaxis aproximada de una media querie es la siguiente (si la declaramos dentro de un documento):

@media screen and (min-width:500px) { ... }

En este ejemplo dentro de esta regla codificaremos los aspectos particulares de diseño para una pantalla con una anchura mínima de 500 pixel.

Podemos definir por ejemplo media queries que cumplan más de una condición, por ejemplo:

@media screen and (min-width:768px) and (max-width:1024px){ ... }

Ahora viene la pregunta del millón: ¿Cuantas medias queries vamos a definir y para que anchuras? Teniendo en cuenta esto ¿A que dimensiones queremos que se produzcan esos cambios significativos de diseño (breakpoints)? No se si hay respuesta correcta (depende del artículo que consultes) en cualquier caso siempre se debe tener en mente que hábitos tienen los usuarios a los que va destinada nuestra web a la hora de navegar por la basta red de redes.

Si sois de los que no os apetece romperos el coco con este tema, tan sencillo como realizar búsquedas en internet del tipo “estandar media queries”  o hacer un copia pega de CSS Tricks : “Media Queries for Standard Devices” o de “CSS Media Queries For Common Devices“.

Una buena idea también puede ser definir 3 o 4 media queries genéricos: Una para móviles, otra para  tablets y por último otra para pantallas de escritorio (4 si añadimos la vista horizontal, pantalla de una tablet girada).

  • …(max-width:1070px){…} (PC)
  • …(max-width:800px){…} (tablet)
  • …(max-width:570px){…} (landscape)
  • …(max-width:450px){…} (portrait)

Algunos expertos como Luke Wroblewski ya llevan tiempo devanándose el seso  con estas cuestiones, en su web pública un artículo muy interesante “Multi-Device Layout Patterns” donde establece unos modelos RWD basandose en patrones que se repiten en los diseños.

md-patterns1

El patrón más popular según Luke.

+INFO:

Artículos relacionados:

https://ikerlandajuela.wordpress.com/2013/10/29/diseno-web-adaptativo-de-imagenes-con-picturefill/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s