RESPONSIVE WEB DESIGN O EL DISEÑO WEB ADAPTATIVO O ADAPTABLE, SOLUCIÓN A LOS PROBLEMAS DE TAMAÑOS DE PANTALLAS MÓVILES Y TABLETAS

Diseño Adaptativo

Hoy en día unos de los grandes problemas de los diseñadores web es como adaptar nuestras páginas web a los nuevos dispositivos como son teléfonos inteligentes y tabletas; en lo que se refiere a sus pantallas.

Antes diseñábamos basados en algunas resoluciones estándares sea 800×600 o 1024×768, eso quiere decir que estábamos pensando en los navegadores de escritorio, pero esas mismas páginas se vuelven en algunos casos ilegibles a nivel de texto cuando las pantallas se reducen provocando que el usuario tenga que hacer “zoom” con sus dedos; ese problema se presenta solo cuando nuestros visitantes usan sus teléfonos o tabletas; quiero hacer énfasis que en el caso de los teléfonos inteligentes el problema se acrecienta aun más debido al tamaño y resolución de sus pantallas.

También mencionaré que una alternativa rápida, pero poco práctica de implementar es tener tres versiones del sitio web con todos las desventajas que esto conlleva; pero al fin al cabo disponemos de del sitio a nuestros diferentes tipos de usuarios y sus plataformas; lo que quiero decir es NO PERDEMOS CLIENTES.

Pero como todo en este mundo de programación web y nuevas tecnologías avanza, ya tenemos la solución y es usar técnicas de “Responsive Web Design”o lo que es lo mismo “El diseño web adaptativo o adaptable”, que son técnicas de diseño y desarrollo web que mediante el uso de media-queries en la hoja de estilo CSS (Cascading Style Sheets), consigue adaptar el sitio web al entorno del usuario tanto sus estructuras e imágenes fluidas.

El responsable y creador de estas técnicas es Ethan Marcotte, él se encargo de difundir esta técnica a partir de una serie de artículos en «A List Apart», publicación en línea especializada en diseño y desarrollo web, luego extendería el tema en su libro “Responsive Web Design”, debo también mencionar que el W3C ya trataba el tema desde 2008 en las famosas recomendaciones «Mobile Web Best Practices» bajo el subtítulo «One Web», y este concepto se refiere a la idea de construir una web para todos y accesible desde cualquier tipo de dispositivo; recomiendo leer la versión traducida aquí: http://xn--diseowebresponsivo-q0b.com.ar/

El propósito de esta técnica es tener en una sola versión HTML y CSS nuestro sitio o página y cubrir todas las resoluciones de pantalla, con esto se mejora considerablemente la experiencia de usuario; debo decir que ello va en beneficio nuestro como desarrolladores porque se reducen los costes de creación y mantenimiento.

Para efectos que mi lector tenga una idea práctica les invito a visitar las dos siguientes direcciones donde podrán ver algunos ejemplos; si no tienen una tableta o teléfono inteligente no se preocupen porque pueden redimensionar el navegador para probarla.

Ahora no podría concluir el artículo sin mencionar que en esta técnica no todo es oro, si bien es cierto las ventajas son innumerables también tienen desventajas como por ejemplo:

Descargar de manera inútil códigos HTML/CSS
Las imágenes son a menudo simplemente alargadas y re-dimensionadas provocando un impacto negativo en el tiempo de descarga.
No permite ajustar fácilmente los títulos, las descripciones y otros contenidos en los teléfonos móviles.

Pero siempre hay que rescatar de que es una solución eficaz con el objetivo de ofrecer una experiencia deseada al usuario, con ello espero haber aclarados dudas en este artículo.

Fuente: Libro Responsive Web Design de Ethan Marcotte, Wikipedia.org, Experiencia personal.