1.3 : Diseño adaptativo versus diseño receptivo

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.27.4″ background_color=”#7ebec5″ custom_padding=”||0px|” custom_padding_tablet=”||0px|” transparent_background=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”||0px|” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_divider show_divider=”off” disabled_on=”on|on|off” admin_label=”Divider” _builder_version=”3.23.4″ height=”110px” hide_on_mobile=”on”][/et_pb_divider][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Sans|on|||” text_text_color=”#ffffff” text_letter_spacing=”2px” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” module_alignment=”center” custom_margin=”||0px|” custom_padding=”||0px|” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

DISEÑO DE EXPERIENCIA DEL USUARIO MÓVIL

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Sans||||||||” text_text_color=”#010659″ text_font_size=”72″ text_line_height=”1.1em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” text_orientation=”center” max_width=”660px” module_alignment=”center” custom_margin=”18px||80px|” text_font_size_tablet=”52″ text_font_size_phone=”” text_font_size_last_edited=”on|desktop” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Diseño adaptativo versus diseño receptivo

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built=”1″ admin_label=”Section” _builder_version=”3.27.4″ background_enable_color=”off” custom_padding=”0px|||” custom_padding_tablet=”0px|||” transparent_background=”off” padding_mobile=”on” make_fullwidth=”off” use_custom_width=”off” width_unit=”on”][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”0px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2019/09/logo-circular-nuevo.png?media=1685903855” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”3.27.4″ width=”20%” custom_margin=”-48px|||” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”off” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2020/01/article_130486_hero_594a8ede25e4e6.23409297.jpg?media=1685903855” show_bottom_space=”off” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.2.2″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”17px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Las diferencias entre los enfoques de diseño receptivo y adaptativo destacan opciones importantes para nosotros como diseñadores web y de aplicaciones. Elegir con conocimiento puede ayudarlo a planificar y ejecutar sus diseños con un mejor objetivo, propósito y resultados.

Con la omnipresencia y diversidad de los dispositivos móviles, como diseñadores necesitamos atender a la variedad de tamaños de pantalla. Este es un desafío que todos los diseñadores web y de aplicaciones enfrentan actualmente. Desde el monitor corporativo gigante hasta el reloj inteligente, hay una gran cantidad de formas en que los usuarios pueden acceder a la información en línea hoy. Los diseñadores que buscan cerrar la brecha entre dispositivos tienen dos opciones para sus diseños: el sitio adaptativo o el sitio receptivo.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2020/01/contenido-de-agua.jpg?media=1685903855” show_bottom_space=”off” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.2.2″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text quote_border_color=”#7ebec5″ admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Existe una cierta confusión en cuanto a la diferencia entre diseño receptivo y diseño adaptativo. Los límites pueden parecer borrosos para quienes no tienen experiencia en ninguno de los estilos de diseño, pero existen claras diferencias cuando se observan más de cerca los dos.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2020/01/39475350880b5cb2884508207c67f388.png?media=1685903855” show_bottom_space=”off” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.2.2″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Diseño de respuesta

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

El término diseño receptivo fue acuñado por primera vez por el diseñador y desarrollador web Ethan Marcotte en su libro, diseño web receptivo. Los diseños receptivos responden a los cambios en el ancho del navegador ajustando la ubicación de los elementos de diseño para que quepan en el espacio disponible.

Un sitio web receptivo muestra contenido basado en el espacio disponible del navegador. Si abre un sitio receptivo en el escritorio y luego cambia el tamaño de la ventana del navegador, el contenido se moverá dinámicamente para organizarse (al menos en teoría) de manera óptima para la ventana del navegador. En teléfonos móviles, este proceso es automático; el sitio verifica el espacio disponible y luego se presenta en la disposición ideal.

El diseño receptivo es sencillo. Debido a que es fluido, significa que los usuarios pueden acceder a su mundo en línea y disfrutarlo tanto en su dispositivo portátil como lo harían en un monitor masivo. Para que esto sea cierto, el diseño receptivo requiere una muy buena conceptualización del sitio y un conocimiento profundo de las necesidades y deseos de los usuarios finales.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Diseño web adaptativo

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Adaptive Web Design fue presentado en 2011 por el diseñador web Aaron Gustafson en su libro, Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement. También se conoce como mejora progresiva de un sitio web.

Cuando el diseño receptivo se basa en cambiar el patrón de diseño para que se ajuste al espacio disponible, el diseño adaptativo tiene múltiples tamaños de diseño fijos. Cuando el sitio detecta el espacio disponible, selecciona el diseño más apropiado para la pantalla. Entonces, cuando abre un navegador en el escritorio, el sitio elige el mejor diseño para esa pantalla de escritorio; cambiar el tamaño del navegador no tiene impacto en el diseño.

Algunos sitios han sido rápidos en adoptar el diseño adaptativo. Amazon, USA Today, Apple y About.com se configuraron para ser sitios web optimizados para dispositivos móviles. Echa un vistazo a estos. Tenga en cuenta que el diseño que se muestra en un sitio web móvil que utiliza un diseño adaptable puede ser diferente de la versión del escritorio. Sin embargo, esto se debe a que los diseñadores han elegido un diseño diferente para la pantalla del teléfono en lugar de abandonar el diseño para tratar de reorganizarse.

En el diseño adaptativo, es normal desarrollar seis diseños para los seis anchos de pantalla más comunes; 320, 480, 760, 960, 1200 y 1600 píxeles.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Diseño móvil independiente

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

También existe la opción de crear un sitio web solo para dispositivos móviles (estos generalmente se indican en la barra de URL de un navegador utilizando el prefijo “m”). Esta opción fue una vez un excelente enfoque. Los diseñadores crearían sitios para dispositivos móviles, ajustando los elementos y el diseño para un formato dedicado. Google entregó clasificaciones de motores de búsqueda a sitios móviles, pero hoy se dan las mismas preferencias a sitios adaptativos y receptivos.

El gran inconveniente de crear un sitio separado (en lugar de usar diseños diferentes o emplear un diseño cambiante) es que requiere mucho más mantenimiento para mantener las dos versiones de un sitio web homogéneas. Sin ningún incentivo particular para hacer esto, el diseño solo para dispositivos móviles ha caído en desgracia en los últimos tiempos. Parece poco probable que regrese pronto.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter=”on” gutter_width=”2″ padding_mobile=”on” column_padding_mobile=”on” custom_padding_last_edited=”on|tablet” admin_label=”Row” _builder_version=”3.27.4″ background_color=”#01065″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_padding=”50px|||” custom_padding_tablet=”17px|||” custom_padding_phone=”” make_fullwidth=”off” use_custom_width=”off” width_unit=”on” custom_width_px=”830px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_image src=”https://usercontent.one/wp/www.interactemos.com/wp-content/uploads/2020/01/iceber-arreglado.jpg?media=1685903855” show_bottom_space=”off” align=”center” align_tablet=”center” align_phone=”” align_last_edited=”on|desktop” admin_label=”Image” _builder_version=”4.2.2″ animation_style=”fade” animation_duration=”500ms” use_border_color=”off” border_color=”#ffffff” border_style=”solid” animation=”fade_in” sticky=”on” always_center_on_mobile=”on”][/et_pb_image][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Elegir entre diseño receptivo y diseño adaptativo

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

El diseño receptivo es más fácil y requiere menos trabajo implementarlo. Ofrece menos control sobre su diseño en cada tamaño de pantalla, pero es, con mucho, el método preferido para crear nuevos sitios en este momento. Esto también puede tener algo que ver con la gran cantidad de plantillas baratas disponibles para la mayoría de los sistemas de gestión de contenido (CMS) como WordPress, Joomla, etc. – después de todo, ¿quién quiere reinventar la rueda?

Los diseñadores receptivos crean un diseño único para usar en todas las pantallas y generalmente comenzarán en el medio de la resolución y usarán consultas de medios para determinar qué ajustes se harán para el extremo inferior y superior de la escala de resolución. Esto tiende a hacer felices a los usuarios, ya que ese diseño web familiar parece estar garantizado para traducirse en la pantalla de cualquier dispositivo. La uniformidad y la fluidez son consideraciones cruciales para proporcionar una buena experiencia de usuario.

Es importante vigilar la jerarquía visual de los proyectos de diseño receptivo; desea intentar mantener esto a medida que sus elementos se barajan por la pantalla. Eso significa muchas pruebas con muchos dispositivos diferentes para asegurarse de que está entregando los productos. Si el diseño de un sitio es relativamente simple, se traducirá bien a través de las pantallas del dispositivo, fluyendo como un líquido de un contenedor a otro.

El SEO es otro gran argumento para usar un diseño receptivo. Los sitios que usan un diseño receptivo (es decir, aquellos con una URL que sirve a todos los dispositivos) son actualmente más amigables para los motores de búsqueda.

El diseño receptivo parece tener un fuerte caso de uso. Bueno, puede ser; sin embargo, tenga en cuenta lo siguiente:

• Debido a que su sitio web “fluirá” de un dispositivo a otro, ajustándose al tamaño de la pantalla, cualquier anuncio que haya agregado puede no encajar en el espacio. De repente, el “atajo” que ofrece el uso del diseño receptivo puede necesitar un replanteamiento y trabajo.
• Los tiempos de descarga varían entre computadoras de escritorio y dispositivos móviles. La flexibilidad de las imágenes es una gran consideración aquí. Un diseño grande que aparece rápidamente en la pantalla grande en casa o en la oficina requiere más tiempo (y datos) para aparecer en su teléfono móvil. ¿Podría ser mejor una vista previa más pequeña para la versión móvil?

El diseño adaptativo garantizará (en teoría) la mejor experiencia de usuario según el dispositivo que el usuario esté utilizando para interactuar. A diferencia del diseño receptivo, donde una pantalla “fluye” desde el diseño de escritorio al dispositivo más pequeño, el diseño adaptativo ofrece soluciones a medida. Como su nombre indica, se adaptan a las necesidades y capacidades situacionales del usuario. Como diseñadores, podemos mostrar a los usuarios que estamos en sintonía con sus necesidades en un dispositivo móvil haciendo que nuestro diseño sea amigable con el tacto. Mientras tanto, podemos hacer lo mismo para los usuarios de escritorio. Comenzamos en la versión con la resolución más baja del sitio y avanzamos hacia la más alta. Seis diseños son el estándar actual, pero dependiendo de los datos de sus usuarios, es posible que pueda usar menos diseños.

Una fortaleza del diseño adaptativo es que se siente más relevante para la experiencia moderna del usuario, mientras que el diseño receptivo muestra un enfoque más centrado en el escritorio (con las demandas de otros dispositivos que ocupan un lugar secundario, casi pasivo). Como usuarios, estamos fuera de casa con nuestros dispositivos inteligentes. Nos gusta sentir que nuestros dispositivos son conscientes de lo que estamos pasando. Tomemos un ejemplo literal; si estuviera conduciendo a través de un túnel largo, ¿no preferiría tener una pantalla de GPS que se adapte al entorno y ajuste su brillo? Ese rendimiento y usabilidad basados ​​en el contexto son tranquilizadores, al mismo tiempo que confirman que su dispositivo inteligente es lo suficientemente inteligente como para adaptarse y ser más útil.

También puede diseñar para optimizar anuncios para sus interfaces de usuario relevantes con diseño adaptativo. Debido a que está diseñando para diferentes resoluciones (es decir, diferentes campos de visión), puede acceder a las necesidades específicas de su usuario. La pura sofisticación de los sensores en, por ejemplo, un teléfono inteligente permite a las empresas (y a nosotros los diseñadores) saber más sobre nuestros usuarios que nunca. Un usuario frecuenta su tienda favorita, restaurante, gimnasio, etc. – al registrarse allí, crea un perfil. A partir de esto (orientación conductual, también conocida como personalización), podemos diseñar anuncios finamente ajustados.

Otra ventaja: la investigación muestra que una empresa con un sitio web adaptable a menudo superará, en pruebas de velocidad, a una empresa con un sitio web receptivo. Esta tampoco es una pequeña diferencia; Los sitios adaptativos son a menudo 2-3 veces más rápidos que los receptivos y proporcionan bastante menos datos al usuario para ofrecer la experiencia del usuario.

El diseño adaptativo tiene algunas ventajas fuertes. Sin embargo, en el juego de diseñar para la mejor experiencia de usuario y proporcionar las mejores soluciones, debemos recordar que debemos tomarnos el tiempo para examinar nuestras opciones y las realidades de nuestros usuarios.

Hay inconvenientes para el diseño adaptativo. En primer lugar, suele ser mucho más trabajo que crear un diseño receptivo. Por esa razón, la mayoría de los diseños adaptativos se utilizan para actualizar sitios existentes para permitir su uso en múltiples dispositivos. Parece, entonces, que el primer orden del día es actualizar los sitios tradicionales permitiéndoles llegar a más dispositivos.

En segundo lugar, los diseños adaptativos pueden dejar a los usuarios “en el medio”. Los usuarios de tabletas o portátiles pueden quedar “colgados” porque los diseñadores solo han atendido a usuarios de computadoras de escritorio y teléfonos inteligentes. Por lo tanto, es importante ofrecer un enlace para permitir al usuario alternar entre versiones.

Por último, si bien los bots de los motores de búsqueda mejoran la selección y selección de resultados para distinguir entre los sitios “.com” y los sitios “m .com”, es aconsejable aceptar el status quo. La mayoría de los motores de búsqueda aún no clasifican el contenido idéntico en varias URL por igual. Eso significa tener en cuenta que un diseño adaptativo podría mantenerlo en el SEO.

Entonces, si bien hay una preferencia definitiva por el diseño receptivo en este momento, no descarte el diseño adaptativo si tiene el presupuesto. A Google le gustan los sitios web que se cargan rápido, al igual que los usuarios.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.0.9″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

¿que nos llevamos?

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

El diseño web moderno nos da tres opciones de uso: diseño receptivo, adaptativo y autónomo, aunque independiente ha caído en desuso.

El diseño receptivo permite a los diseñadores mostrar contenido en función del espacio disponible del navegador. Esto permite la coherencia entre lo que muestra un sitio en un escritorio y lo que muestra en un dispositivo portátil. El diseño receptivo es la opción “tradicional” y sigue siendo el enfoque más popular hasta la fecha.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”50px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”40px” text_line_height=”1.3em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”900px” custom_margin=”16px||30px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Pro y Contras

[/et_pb_text][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Pro

• Uniforme y sin costuras = buena experiencia de usuario.
• Abundancia de plantillas para usar.
• SEO amigable.
• A menudo es más fácil de implementar

Contras

• Menos control de diseño de tamaño de pantalla.
• Los elementos pueden moverse
• Anuncios perdidos en la pantalla.
• Tiempos de descarga móvil más largos.

El diseño adaptativo, desarrollado en 2011, está más involucrado en que el diseñador tiene varios tamaños de diseño fijos. Ofrece una alternativa al enfoque de “una talla para todos”.

Pro

• Permite a los diseñadores crear la mejor experiencia de usuario para el dispositivo apropiado.
• Los dispositivos móviles pueden detectar el entorno de sus usuarios.
• Los diseñadores pueden optimizar anuncios basados ​​en datos de usuarios de dispositivos inteligentes.

Contras

• Creación intensiva de mano de obra: la mayoría de los diseños adaptativos están adaptando los sitios tradicionales para que sean más accesibles.
• Las tabletas y las netbooks pueden tener problemas con la configuración del sitio que tiende a estar orientada a teléfonos inteligentes o computadoras de escritorio.
• Desafiando al SEO: los motores de búsqueda tienen problemas para apreciar contenido idéntico en varios sitios.

[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row padding_mobile=”on” column_padding_mobile=”on” admin_label=”Row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_padding=”0px||8px|||” make_fullwidth=”off” use_custom_width=”on” width_unit=”on” custom_width_px=”620px”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.2.2″ text_font=”PT Serif||||” text_text_color=”#363636″ text_font_size=”20″ text_line_height=”1.6em” ul_font=”PT Serif||||||||” ul_line_height=”1.6em” background_size=”initial” background_position=”top_left” background_repeat=”repeat” max_width=”620px” custom_margin=”30px||0px|” text_font_size_tablet=”” text_font_size_phone=”” text_font_size_last_edited=”on|tablet” use_border_color=”off” border_color=”#ffffff” border_style=”solid”]

Elegir entre un diseño receptivo y un diseño adaptativo requiere una cuidadosa consideración. Si bien puede ser prudente apegarse a un diseño receptivo por conveniencia (ahorrar costos, mejorar el SEO y mantener el contenido de los usuarios con una experiencia perfecta entre dispositivos), es crucial verificar los pros y los contras de ambos diseños en su totalidad. El diseño adaptativo puede sintonizar más con las diferentes necesidades de los usuarios en el campo; por lo tanto, es vital mantener un dedo en el pulso del cambio.

Podríamos imaginar mejor estos cambios como evolución. Charles Darwin señaló que los individuos de una especie que sobreviven no son los más fuertes o más inteligentes, sino los más adaptables al cambio. Solo tenemos que considerar a los dinosaurios a la luz de eso.

Piensa en tu producto o servicio. ¿Accede a los usuarios en una configuración específica? ¿Qué tiene su comportamiento que puede usar para mantenerlos informados y comprometidos? Recuerde, no solo los dispositivos móviles son cada vez más inteligentes. En nuestros hogares y oficinas, tenemos más que escritorios tradicionales. Ahora, una amplia gama de dispositivos inteligentes detectan y reaccionan al medio ambiente, desde relojes y calentadores hasta una gran cantidad de dispositivos que comprenden el “Internet de las cosas”. Es una época llena de objetos más inteligentes. Debemos diseñar con esa inteligencia cada vez más en mente.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]