MENU

by • 30 Marzo, 2012 • Periodismo, TecnologíaComments (2)3833

Los medios deben evolucionar hacia el responsive web design

COMPARTE:

Crisis del papel; crisis del periodismo; crisis… Una crisis es una oportunidad, o eso dicen. En este caso nada tiene que ver con lo que paso a plantear, pero si quieren usarlo como excusa, no seré yo el que me oponga.

Internet ha llegado al punto en que Internet Explorer ya no es el dominador absoluto de todos los ordenadores del mundo. Ahora el pastel de los navegadores usados por los internautas se reparte entre Google Chrome y Firefox, seguidos muy de cerca por el propio Internet Explorer y, un poco más atrás, Safari y Opera. Esto significa que, por fin, los desarrolladores web podrán seguir los estándares W3C sin miedo a que sus webs no se vean en el ordenador del cliente. Y entre estos estándares aparece HTML5, que también se usa para referirse a toda la serie de adelantos en el desarrollo web que implementan los navegadores actualizados (incluso Internet Explorer en su versión más actualizada), a saber, CSS3, almacenamiento local, 2D y 3D, vídeo y audio sin flash, etc.

RESPONSIVE WEB DESIGN

De entre todos esos avances, en materia de medios de comunicación digitales, destaca sobremanera a mi juicio el conocido como “Responsive Web Design” o lo que es lo mismo, “Diseño Web Adaptable“. Su propio nombre lo indica, diseñamos una web que se adapta a donde sea que es cargada; concretando, podemos desarrollar una web que se vea perfectamente en una pantalla de 27″ y en un iPhone, y todo ello sin que haya una versión www.web.com/monitor-grande y otra www.web.com/iphone; todo dentro de la misma URL y con los mismos contenidos. ¿La clave? El CSS.

Hasta ahora las hojas de estilo se incluían en la webs así:

.contenido { width: 960x }

Pero ahora podemos aplicar sin miedo lo siguiente:

.contenido { width: 960px}
@media screen and (max-width: 800px) {
.contenido { width: 760px }
}

Y esto significa que si, por ejemplo, la etiqueta <div class=”contenido”> ocupa 960px en condiciones normales, si la ventana del navegador (que no la pantalla; no todos los navegadores ocupan toda la pantalla) desde la que se consulta la web es inferior a 800px, podremos indicarle un tamaño de 760px a esa misma etiqueta.

Esto nos abre un mundo infinito de posibilidades, más aún cuando podemos indicar parámetros exclusivos para iPhone, por ejemplo:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

BOSTON GLOBE

Este medio digital se rediseñó por completo hace poco y dio mucha importancia al Responsive Web Design en el proceso. Una imagen valen más que mil palabras:

Puedes hacer la prueba, reduciendo la ventana del navegador. ¿Qué pasa al hacer lo mismo con el rediseñado hace menos tiempo elpais.com?

¿Y por qué es esto tan revolucionario? Porque permite diseñar webs sin depender de la media como hasta ahora, es decir, una media de 1024×768 de resolución de pantalla e Internet Explorer. Ahora podemos hacer webs para esa media ya anticuada y la misma web para modernos navegadores o iPads, tan solo hay que diseñarlo y plasmarlo en la hoja de estilos. También nos va a evitar desarrollar aplicaciones para los diferentes entornos móviles, solamente tenemos que saber su resolución máxima y punto. A nivel de SEO ni hablemos, ya que donde antes teníamos varias páginas con el mismo contenido (algo que penaliza Google), ahora todo está solo en una.

OTROS EJEMPLOS DE WEBS CON RESPONSIVE WEB DESIGN:

Earth Hour

Illy

Muy en la línea del Responsive Web Design van las imágenes fluidas o adaptables, pero de eso hablaremos otro día.

Artículos relacionados

2 Responses to Los medios deben evolucionar hacia el responsive web design

  1. oscar dice:

    Hola muchas gracias hasta que entendi el funcuionamiento de media y como aplicar el max-width,