Diseño receptivo versus receptivo: todo lo que necesita saber – Usabilidad web y seo

Diseño receptivo versus receptivo: todo lo que necesita saber

Vistas: 16
0 0
Tiempo de lectura:5 Minutos, 44 Segundos

Es obvio para la mayoría de los diseñadores de sitios web que el producto terminado debe verse y funcionar en cualquier tipo y tamaño de dispositivo. Atrás quedaron los días en que se creaban múltiples diseños para lograr el mismo objetivo.

Todo se reduce a elegir un modelo de diseño receptivo o receptivo para lograr un diseño consistente para un sitio web de cualquier tamaño.

Pero, ¿cuál es la diferencia entre receptivo y receptivo? ¿Son realmente lo mismo? Echemos un vistazo y expliquemos todo lo que necesita saber.

Dos enfoques para el diseño independiente del dispositivo

En esencia, las tecnologías receptivas y adaptativas probablemente tengan el mismo aspecto para los usuarios finales. Tanto los métodos de diseño como los de desarrollo están diseñados para hacer que los sitios web se vean bien y funcionen en todo tipo de dispositivos.

La principal diferencia está en la forma en que crea sitios web utilizando tecnologías receptivas o receptivas.

Diseño adaptativo

El diseño receptivo es un término familiar para todos los que trabajan con sitios web. Quizás casi sorprendente, pero no es tan antiguo.

Fue acuñado por Ethan Marcott en 2010:

Ahora, más que nunca, diseñamos trabajos para ser vistos en relación a diferentes eventos. El diseño web receptivo nos ofrece el camino a seguir, permitiéndonos finalmente “diseñar con el reflujo y el flujo de las cosas”.

Aquí es donde se originó nuestra actual escuela de pensamiento sobre sitios web receptivos.

El diseño receptivo es una técnica mediante la cual los sitios web “reaccionan” al tamaño del navegador en cualquier tamaño dado, de modo que el diseño se optimiza para la pantalla. Idealmente, los usuarios deberían tener la misma experiencia con un solo sitio web, ya sea que lo tengan en sus manos en un dispositivo móvil de solo unos pocos cientos de píxeles de ancho o que lo miren en un monitor de pantalla ultra ancha.

Los sitios web receptivos utilizan muchos elementos con los que probablemente esté familiarizado: consultas de medios, cuadrículas receptivas e imágenes receptivas. Este es probablemente el método de diseño más popular para diferentes tamaños de pantalla. (Los puristas notarán que el diseño receptivo no tiene nada que ver con los dispositivos en sí, solo el tamaño, en contraposición al receptivo, que, entre otras cosas, determina el tipo de dispositivo en el camino hacia una representación perfecta).

Según la Interaction Design Foundation, el diseño receptivo es más simple y requiere menos esfuerzo para implementarlo. Quizás por eso se generalizó.

Los diseñadores receptivos crean un diseño coherente que se utilizará en todas las pantallas y, por lo general, comienzan en la mitad de la resolución y utilizan consultas de medios para determinar qué ajustes se realizarán en los límites superior e inferior de la escala de resolución. Esto tiende a hacer felices a los usuarios porque un diseño web familiar parece estar garantizado para mostrarse en cualquier dispositivo. La coherencia y la coherencia son factores críticos que afectan la experiencia del usuario.

Además, el diseño receptivo a menudo se elige para sitios web grandes debido al tiempo que lleva su desarrollo. El diseño receptivo se basa en un sistema de cuadrícula, dimensiones flexibles (porcentaje o valores mínimo y máximo) que ayudan al diseño a expandirse, contraerse y plegarse en diferentes tamaños.

Este truco de diseño es la norma para los nuevos diseños.

Ventajas del diseño receptivo

  • El diseño funcionará con cualquier tamaño de ventana gráfica, independientemente del dispositivo o navegador.
  • El diseño receptivo es compatible con los motores de búsqueda (Google incluso lo recomienda).
  • Proporciona una mayor precisión en el diseño para que los diseñadores puedan agregar cualquier detalle.
  • Una opción de diseño más conveniente para dispositivos móviles.
  • Práctica de diseño común, compatible con una variedad de temas, creadores de sitios web y herramientas que puede utilizar para proyectos de sitios web.
  • El diseño tendrá un aspecto coherente y cohesivo, lo que aumentará la usabilidad general.

Contras del diseño receptivo

  • Es importante asegurarse de que los elementos sensibles sigan siendo legibles y accesibles en diferentes tamaños, especialmente los más pequeños.
  • A menudo, se requiere más código que otros sitios web, lo que puede llevar tiempo o provocar un aumento de peso. Es importante estar atento y tener cuidado aquí.
  • No tiene control sobre cada tamaño de dispositivo y puede terminar con diseños que no encajan en tamaños más antiguos o menos conocidos.
  • Los elementos pueden moverse a su alrededor y terminar en ubicaciones aleatorias de vez en cuando, e incluso debido a las actualizaciones del sistema de administración de contenido principal o la infraestructura del sitio web, por lo que es importante estar siempre al tanto de los cambios.

Diseño adaptativo

El diseño receptivo es casi tan antiguo como el diseño receptivo. Este método, utilizado por primera vez en 2011, implica diseñar para tamaños y tipos de dispositivos específicos para brindar una experiencia más personalizada.

Esta es una excelente explicación del MDN Web Docs Archive: “El diseño receptivo se parece más a la definición moderna de mejora progresiva. En lugar de un diseño receptivo, el diseño receptivo define el dispositivo y otras características y luego proporciona la característica y el diseño adecuados en función de un conjunto predefinido de tamaños de ventana gráfica y otras características “.

El diseño tiene seis variaciones fijas (anchos):

  • 320 ppp
  • 480 ppp
  • 760 ppp
  • 960 ppp
  • 1200 píxeles
  • 1600 píxeles

La mayoría de las veces, el diseño receptivo se utiliza para transformar un diseño antiguo en algo más compatible con dispositivos móviles. Esto no significa que esto no suceda con los nuevos desarrollos.

Ventajas del diseño receptivo

  • Los dispositivos móviles le dicen a un diseño lo que son, por lo que el diseño es perfecto para ese tipo de dispositivo y navegador.
  • El diseño receptivo proporciona un control de diseño casi preciso.
  • Los anuncios inteligentes son una función que le permite comunicarse con dispositivos inteligentes.
  • Los diseños receptivos tienden a obtener una puntuación más alta en las pruebas de velocidad que sus homólogos receptivos.
  • En el diseño se pueden utilizar más funciones de personalización relacionadas con el uso de opciones de dispositivos inteligentes y personalización.
  • Bueno para un sitio web pequeño que necesita actualización porque solo necesita “diseñar” las dimensiones más pequeñas.

Contras del diseño receptivo

  • Durante el desarrollo, puede tener problemas con algunos dispositivos menos comunes, como tabletas, debido a errores de configuración.
  • El diseño receptivo puede llevar mucho tiempo, más tiempo y más caro de desarrollar.
  • Es más difícil para los motores de búsqueda trabajar con sitios receptivos debido al contenido duplicado.
  • Existe una realidad oculta de que crea el mismo sitio web seis veces.

Conclusión

No hay nada correcto o incorrecto en un diseño receptivo o receptivo. Tiene que ver con tus objetivos y lo que quieres lograr con tu diseño.

Elija una tecnología que coincida con lo que el sitio web necesita para funcionar en términos de contenido, búsqueda, experiencia del usuario, tiempo y presupuesto.

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post ¿Empiezo por el contenido o la estrategia SEO?
Next post El punto ciego de los investigadores de UX. Trabajas en una organización con … | Zombor Varnagi-Thoth | Noviembre de 2021

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta