Diseño web Responsivo (RWD) es un enfoque de desarrollo web que crea cambios dinámicos a la aparición de un sitio web, dependiendo del tamaño y la orientación del dispositivo que se utiliza para poder verla. RWD es la solución de diseñar para la multitud de dispositivos disponibles actualmente, que van desde diminutos teléfonos a los monitores de escritorio enormes .

RWD utiliza los llamados puntos de corte para determinar cómo aparecerá el diseño de un sitio:

Uno diseño se utiliza por encima de un punto de ruptura y otro de diseño se aplica por debajo de ese punto de ruptura. Los puntos de corte se basan comúnmente en la anchura del navegador.

wireframe-template

Este breve video muestra el Transporte de respuesta para el sitio web de Londres cambiando a medida que la ventana del navegador se estrecha y se amplia.
La misma HTML sirve a todos los dispositivos, utilizando CSS (que determina el diseño de la página web) para cambiar la apariencia de la página. En lugar de crear un sitio separado y una base de código correspondiente para monitores de pantalla ancha, computadoras de escritorio, computadoras portátiles, tabletas y teléfonos de todos los tamaños, una única base de código puede ayudar a los usuarios con ventanas de diferentes tamaños.

En el diseño de responsivo los elementos de la página ejm. como la ventana, crece o se reduce. Un diseño de escritorio de tres columnas de podrá reorganizar a dos columnas para una tableta y una sola columna para un teléfono inteligente. El diseño responsivo se basa en proporción a reorganizar contenido y elementos de diseño.

Si bien el diseño responsivo surgió como una forma de ofrecer igualdad de acceso a la información sin importar el dispositivo, también es posible ocultar ciertos elementos – tales como imágenes de fondo, como en el transporte, por ejemplo, por encima de Londres, la página secundaria o complementaria de navegación – en las pantallas más pequeñas. Las decisiones sobre el contenido y la funcionalidad ocultar o alterar la apariencia de diferentes tipos de dispositivos, debe estar basada en el conocimiento acerca de sus usuarios y necesidades.

RWD tiene ventajas potenciales sobre el desarrollo de sitios para los diferentes tipos de dispositivos. El uso de un solo código base puede hacer el desarrollo más rápido, en comparación con el desarrollo de 3 o 4 sitios distintos, y facilita el mantenimiento,RWD es a prueba del futuro, ya que puede soportar nuevos puntos de corte en cualquier momento. Si un dispositivo de 5 pulgadas o un dispositivo de 15 pulgadas sale al mercado, el código se puede agregar a los nuevos dispositivos. RWD no ata el diseño a un dispositivo en particular.

Creación de experiencias utilizables

Debido a que el diseño responsivo se basa en encajar elementos alrededor de la página, que el diseño y el desarrollo que tenga trabajen en estrecha colaboración para asegurar una experiencia utilizable a través de dispositivos.El diseño responsivo a menudo se convierte en la solución a un rompecabezas – cómo reorganizar los elementos en las páginas de mayor tamaño para adaptarse a uno más angosto, las páginas más alargadas o viceversa. Sin embargo, lo que garantiza que los elementos encajen dentro de una página no es suficiente. Para un diseño responsivo exitoso, el diseño también debe ser utilizable en todas las resoluciones de pantallas y tamaños.

Cuando los elementos se mueven alrededor de la página, la experiencia del usuario puede ser completamente diferente de una vista de la página a la siguiente. Lo importante de que los equipos de diseño y desarrollo trabajen juntos no es determinar hasta qué punto el contenido debe estar arrastrando los pies alrededor, sino ver también lo que el resultado final de ese cambio se parece y cómo afecta a la experiencia del usuario.

Muchos equipos buscan framewoks sensibles al diseño responsivo, como Bootstrap para ayudar a crear diseños. Estos marcos pueden ser de gran ayuda en el desarrollo del movimiento a lo largo. Sin embargo, considere cuidadosamente cómo el framework trabajará con el contenido y la funcionalidad de su sitio, en lugar de cómo funciona en general.

Nosotros siempre recomendamos la realización de las pruebas de utilidad en los diseños. Para los diseños sensibles, se recomienda la prueba en todas las plataformas. Ya es bastante difícil de diseñar un sitio web que se puede utilizar en un escritorio, pero es aún más difícil de diseñar un sitio web que se puede utilizar en muchos reordenamientos o configuraciones de sus elementos, a través de diversos tamaños de pantalla y orientaciones. El mismo elemento de diseño que puede funcionar a las mil maravillas en un escritorio puede trabajar horriblemente en un teléfono inteligente, o viceversa.

Centrándose en el contenido

Priorización de contenido es un aspecto clave para hacer bien el diseño responsivo. Mucho más contenido es visible sin necesidad de desplazarse en un monitor de escritorio grande que en una pequeña pantalla del teléfono inteligente. Si los usuarios no ven al instante lo que quieren en un monitor de escritorio, se puede echar un vistazo fácilmente alrededor de la página para descubrirlo. En un teléfono inteligente, los usuarios pueden tener que desplazarse sin cesar para descubrir el contenido de interés. El priorizar inteligentemente el contenido ayuda a los usuarios a encontrar lo que necesitan de manera más eficiente.

Rendimiento Considerado

[mpc_sh_side_image align=»left» hor_offset=»0″ ver_offset=»0″ image=»http://asd.mx/2015/wp-content/uploads/2014/10/responsive300x400.gif»] Rendimiento también puede ser un problema con el diseño responsivo. RWD ofrece el mismo código para todos los dispositivos, independientemente de si la pieza de código se aplica al diseño o no. Los cambios en el diseño se producen en el lado del cliente, es decir, cada dispositivo – el teléfono, tablet o computadora – recibe el código completo para todos los dispositivos y toma lo que necesita.

Un teléfono inteligente de 4 pulgadas recibe el mismo código como un monitor de escritorio de 24 pulgadas. Esto puede empantanar el rendimiento en un teléfono inteligente, lo que puede ser un partido basado en una conexión de datos más lento. (Esto es por qué algunos sitios recurren a diseño adaptativo, en el que el servidor que aloja la página web detecta el dispositivo que hace la solicitud y entrega diferentes lotes de código HTML basadas en ese dispositivo.)

Para evaluar verdaderamente la experiencia del usuario de un diseño responsivo, la prueba es que sus diseños no responden sólo en la comodidad de su propia oficina, en su conexión de alta velocidad, debe también aventurarse con su smartphone- entre edificios altos en una ciudad, en salas de conferencias interiores o sótanos, en áreas remotas con conectividad irregular, en puntos problemáticos conocidos para la conexión a la red de su propio teléfono celular – y ver cómo su sitio se presenta en condiciones variadas. El objetivo de muchos diseños responsivos es dar facilidades equivalentes de acceso a la información sin importar el dispositivo. Un usuario de smartphone no tiene una experiencia equivalente a un usuario de escritorio si los tiempos de descarga son intolerables.

Conclusión

Diseño responsivo es una herramienta, no una panacea. El diseño responsivo tiene muchas ventajas en todos los dispositivos. Los equipos deben centrarse en los detalles del contenido, diseño, y el rendimiento con el fin de apoyar a los usuarios en todos los dispositivos.

Para más información sobre el diseño de diferentes dispositivos, consulte nuestra página web www.asd.mx

No Comments

Leave a Comment

0
Connecting
Please wait...
Envíanos un mensaje

Lo sentimos no hay nadie conectado por el momento, pero déjanos tu mensaje.

Tu nombre
* E-mail
* ¿En qué te podemos ayudar?
* Teléfono
Ingresa ahora

Necesitas ayuda? Ahorra tiempo preguntándonos lo que necesitas en linea, y uno de nuestros diseñadores te atenderá.

Tu nombre
Télefono
* E-mail
* ¿En qué te podemos ayudar?
Estamos en linea!
Encuesta de servicio

Ayúdanos a mejorar! Siéntete libre de dejarnos tu opinion acerca del servicio ofrecido.

Resolvimos tu duda y te ayudamos de forma satisfactoria?