Diseño web adaptativo o responsivo, una necesidad actual en la Web

Desde hace algunas horas se habla mucho en GUTL de diseños adaptativos o responsivos, en referencia a plantillas o temas para el CMS WordPress capaces de adaptarse a cualquier dispositivo desde el cual se navega por la Web que los utilice, permitiendo una visualización agradable sin necesidad de utilizar más de una plantilla. Hoy estaremos hablando un poco más de este asunto de la responsividad o diseño web adaptativo.

El diseño responsivo es un diseño que responde al tamaño del dispositivo desde el que se está visualizando la web, adaptando las dimensiones del contenido y mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte.

La actual plantilla WordPress utilizada en el Portal GUTL es un ejemplo de diseño responsivo en la intranet cubana, aunque pronto, según palabras de sus diseñadores, vendrán mejoras.

La actual plantilla WordPress utilizada en el Portal GUTL es un ejemplo de diseño responsivo en la intranet cubana, aunque pronto, según palabras de sus diseñadores, vendrán mejoras.

La tendencia en el mundo de las páginas web es que el usuario cada vez más acceda desde dispositivos móviles como teléfonos o tablets. las estadísticas de 2012 arrojan un porcentaje esclarecedor: el 40% de los usuarios que visitaron webs el año pasado lo hicieron desde un dispositivo móvil y un 25% de las compras en internet se realizan ya desde el teléfono.

Ante estos datos, se entiende claramente la necesidad de tener una web que se visualice correctamente desde cualquier soporte.

Si revisamos nuestra amiga Wikipedia podemos encontrar lo siguiente:

El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario.

El diseñador y autor norteamericano Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que luego extendería en su libro Responsive Web Design.

Tanto la idea como el propósito del diseño web adaptativo fueron previamente discutidos y descritos por el consorcio W3C en julio de 2008 en su recomendación “Mobile Web Best Practices” bajo el subtítulo “One Web”.

Dicha recomendación, aunque específica para dispositivos móviles, puntualiza que está hecha en el contexto de “One Web”, y que por lo tanto engloba no solo la experiencia de navegación en dispositivos móviles sino también en dispositivos de mayor resolución de pantalla como dispositivos de sobremesa.

El concepto de “One Web” hace referencia a la idea de construir una Web para todos (Web for All) y accesible desde cualquier tipo de dispositivo (Web on Everything).

Hoy en día, la variedad de dispositivos existente en el mercado ha provocado que la información disponible no sea accesible desde todos los dispositivos, o bien es accesible pero la experiencia de navegación es muy pobre.

[caption id="attachment_10428" align="aligncenter" width="457"]Cambiando la posición de esta Kindle, la plantilla de GUTL se adapta a la nueva resolución permitiendo navegar sin pérdidas visuales ni funcionales.
Cambiando la posición de esta Kindle, la plantilla de GUTL se adapta a la nueva resolución permitiendo navegar sin pérdidas visuales ni funcionales.
[/caption]

Aplicando el diseño responsivo desde la creación de una nueva web se consiguen varios objetivos:

  • Se reducen costes de desarrollo. Teniendo un solo diseño web optimizado para todos los dispositivos en vez de varios diseños independientes, uno para cada soporte.
  • Baja el rebote de usuarios. Una buena parte de los usuarios que abandonan una página web al entrar desde un dispositivo móvil es porque no pueden visualizar correctamente el contenido. Con el diseño responsivo, el usuario disfrutará siempre de una buena experiencia de navegación.
  • Se mejoran los resultados de conversión. Al tener una página que se vé de forma optimizada para móviles y tabletas, el porcentaje de usuarios que adquieren un producto o envían un formulario es mayor.
  • Permite desarrollar una estrategia de marketing sobre la web unificada para todos los soportes, haciendo que esta sea más sólida y mejorando su efectividad.

Evidentemente no hemos tocado aspectos técnicos, pero en posteriores artículos estaremos introduciendo a nuestros lectores en el fascinante universo del HTML5 y el CSS3.

Esperamos con ansias la siguiente plantilla de GUTL

Fuente:

http://trazada.com
http://es.wikipedia.org

¿Te resultó interesante? Compártelo ...



Maikel Llamaret Heredia

Publicado por Maikel Llamaret Heredia

https://swlx.info » Facebook » Twitter » Google+ » Linkedin » Forma parte de GUTL desde el 6 diciembre, 2011. Parte de la familia GUTL. Usuario de Tecnologías Libres desde hace varios años. Fiel a GNU/Linux y las filosofías del Software Libre y el Código Abierto. Linux User # 587451. Creador y actual mantenedor del Proyecto SWL-X. Freelancer dedicado al Desarrollo / Diseño Web y Marketing Online. Creador de Web & Media Integrated Solutions

Este artículo tiene 10 comentarios

  1. La verdad es que si esperamos con ansias la nueva plantilla…. GUTL es ‘comunidad’, y su ‘obligacion’ es innovar y compartir… la verdad que para mi es el sitio + activo de la INTRANET

  2. ya sabiayo que tenia que descargar algo de internet…. WordPress 3.7 aunke no me convence eso de las «Actualizaciones Automaticas»

  3. Creo que GUTL y Firefoxmania son de las únicas páginas en la tierra .cu que emplean web adaptativo. Navego con mucha frecuencia con una tableta de 7 pulgadas con Android 4.0.4 y ambos sitios funcionan ok ok. Felicitaciones al equipo!

    También espero ansioso la nueva plantilla de GUTL, pero no me gustaría que desaparecieran del todo las pequeñas imágenes en la portada, que tenemos poco ancho de banda, pero vamos, que no es pa tanto.

    Olvidé: Cuabsi.cu y trabajadores.cu también lo emplean.

  4. Pues gracias a Twitter por darnos ese ‘allmighty’ framework. Es la moda ahora(yo lo uso) quizás en algunos meses ‘salga’ algún otro framework, pero por ahora este es la ostia. Con los nuevos standards de HTML5+CSS3(mientras no usen navegadores viejos o IE) la experiencia de usuario(UX) es la mejor. Inclusive el tema por defecto de Bootstrap está genial(nunca lo modifico :D) Tiene una curva de aprendizaje bastante ligeria, y gran ventaja de bootstrap, es excelente para el prototipado de webs, o sea, lo que sería un mockup lo podemos hacer directamente con HTML y nos daría un UX más real.

  5. Yo estoy haciendo un sitio para consultar resultados de un servicio que da mi trabajo a muchas entidades del pais y estoy utilizando Bootstrap , es muy facil trabajar con el y se adelanta muchisimo.

  6. Interesante acá pensamos trabajar en una aplicación para la gestión intrahospitalaria (Historia Clinica Digital, Costos, recursos, etcras) y me resulta importante que los dispositivos moviles juegen una función vital en el sistema. Voy a empujar a los desarrolladores a documentarce sobre esto.

    Buen trabajo…

  7. offtopic
    1)Aprovecho para reportar que desde Palacio la navegacion por el GUTL se esta haciendo lenta con la explosion de Bloggeros, foreros y chateros, en el cambio del look hay que tener en cuenta que nuestra Intranet e bastante lenta.
    2) Estoy teniendo problemas para acceder al Blog como usuario registrado en estos momento queria preguntar para cuando WordPress 7.0 para Windows y solo aparezco en entradas anteriores como esta ya he ido de nuevo a la entrada de WordPress7 y nada no dice ni que si ni que no.
    Por lo demas buena suerte.

Los comentarios están cerrados.