Diseño Responsivo

Descripción

La variedad de tamaños de dispositivos por los que se puede acceder a internet ha hecho que el diseño para cada uno de ellos sea importante. Por ende, el diseño responsivo dejó atrás la programación con los pixeles de las antiguas páginas web para trabajar directamente con la posición de los elementos que pertenecen a los sitios. En consecuencia, este método se masificó con el fin de "adaptar las dimensiones del contenido mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte”1 .

Ante el problema de tener que diseñar una página para cada tamaño de dispositivo “la solución que se ofrece hoy en día es lo que llamamos webs responsivas, páginas web programadas en HTML5 y CSS3 que se adaptan a los diferentes tamaños de pantalla reorganizando el contenido, escalando las imágenes y/o simplificando el menú”2 .

Así funciona

“El responsive web design el diseño y el contenido se adaptan a cada pantalla, entregando una experiencia de usuario muy similar en resoluciones bajas, altas o en formatos de distintas pulgadas. Para lograr esto, los contenidos se ordenan en bloques que se reorganizan según las características de la pantalla y el navegador que se utiliza”3.

Beneficios del diseño responsivo

La Revista Digital de la Universidad Nacional Autónoma de México señaló que eran cuatro las principales ventajas de manejar un sitio web con diseño responsivo:

Utilización de imágenes, videos y otros medios: Los elementos audiovisuales mostrados se ajustan a lo que está usando el usuario en ese momento.

Tamaño relativo: Compatibilidad con otras resoluciones y dispositivos.

Eficiencia en la actualización: Se usa sólo una plantilla en la creación del sitio web.

Capacidad de adaptación de la interfaz: Se jerarquiza lo 'esencial' de los contenidos ofrecidos por el sitio.

Aplicación para el periodismo:

La tecnología está cambiando las formas de hacer el periodismo, por ende, es imperante que los medios estén preparados para adaptar cada una de sus plataformas al diseño responsivo. Por ejemplo, en un país con más celulares que personas, la aplicación del diseño responsivo en los portales de noticias es un factor clave para aumentar el tráfico web y, en consecuencia, generar rédito económico a través de la publicidad (la cual también tiene que estar adaptada a este diseño).

Por otra parte, la lucha de los medios masivos contra la masificación de noticias en redes sociales, las cuales tienen un diseño más 'amigable' para el usuario y, en el caso de Twitter, el cual fomenta la instantaneidad de las noticias, hace que la actualización constante del diseño responsivo sea fundamental para que el periodismo siga teniendo vigencia en los medios tradicionales, como en sus diferentes plataformas digitales. Asimismo, la capacidad que tienen los medios de llevar una narración transmedia, reflejándola en la reorganización del material visual, escrito y audiovisual en su página web.

Ejemplo ilustrado de un sitio con diseño responsivo

Pantalla celular

Pantalla computador

Fuentes y links útiles

1* http://trazada.com/que-es-el-diseno-responsivo/
2* http://www.websresponsivas.com/
3* http://www.ida.cl/blog/diseno/diferencias-diseno-web-fluido-adaptativo-responsivo/
4* http://www.revista.unam.mx/vol.14/num1/art07/art07.pdf
5* http://rte.espol.edu.ec/index.php/tecnologica/article/view/369/231

Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License