Año 15 No. 626 Enero 25 de 2016 • Publicación Semanal

Xalapa • Veracruz • México

Diseño Web Responsivo (DWR)

Contenido [part not set] de 42 del número 626

Universo-TecnoTips_TemisAngélica Aquino Lozano

Con el fin de brindar al usuario una mejor experiencia, el Diseño Web Responsivo (DWR) tiene como objetivo visualizar una página web de forma adecuada en los distintos dispositivos móviles.

Lo anterior se hace prescindiendo de los valores fijos y adoptando las proporciones de los elementos para que al momento de visualizar el contenido de una página éstos se ajusten en sus medidas guardando una
proporción entre ellos; con esto podremos evitar problemas de carga muy lenta, de navegación complicada, de ilegibilidad de imágenes y textos, y sobre todo que el usuario no abandone nuestro sitio.

El DWR se consolida como una de las mejores prácticas de hoy en día en el diseño web, puesto que más del 80 por ciento de las personas accede a Internet a través de sus dispositivos móviles, esto significa que un segmento importante de personas que visitan nuestros sitios a diario lo hacen desde un móvil o una tableta.

¿Cómo podemos hacer nuestro DWR? En primera instancia, debemos tener en cuenta que los tamaños y resoluciones de pantalla varían enormemente, que la navegación es táctil y un dedo no tiene la misma presión que el puntero del ratón.

Se recomienda diseñar bajo la tendencia del Flat Design por su simpleza, claridad de comprensión para el usuario y sin dejar de lado la elegancia del diseño gráfico.

En nuestro diseño debemos hacer uso de una rejilla o cuadrícula a 12 columnas, a fin de que sea fluido y así evitar los problemas de adaptación y sobrecarga de elementos inútiles para aprovechar el ancho completo del dispositivo donde se visualiza, sin importar el tamaño de su pantalla.

Elegir una fuente que pueda ser legible en cualquier tamaño de pantalla, como son las familias Serif y Sans Serif, omitiendo las manuscritas, cursivas o rotuladas.

Las imágenes deberán elegirse de manera que se adapten al contenido y se puedan dar a entender correctamente en distintos tamaños. Hay que evitar imágenes con demasiados detalles, ya que llegará un punto donde éstas ya no sean legibles.

Considerar el uso de un menú lateral o desplegable, pues ahorrará espacio permitiendo a los demás elementos ser lo suficientemente grandes para facilitar la navegación táctil.

Los elementos de diseño deberán estar situados para que puedan adaptarse de manera fluida en las diferentes resoluciones.

Una vez que tengas estos elementos, considera visualizarlos en distintos dispositivos para asegurarte que tu DWR cumpla las necesidades de tu usuario.

Navegación