1.2 : Diseño receptivo: deje que el dispositivo haga el trabajo
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 receptivo: deje que el dispositivo haga el trabajo
[/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=1669990493” 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/dc88b6d296f28313def4927911937773.png?media=1669990493” 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”]Puede haber algún argumento sobre si los diseños receptivos o adaptativos son mejores, pero en muchos casos el diseño receptivo se elegirá para fines presupuestarios (al menos hoy). Eso significa que los diseñadores deben familiarizarse con los conceptos y algunas pautas básicas para sus diseños receptivos.
Antes de profundizar en este artículo, es posible que desee conocer las diferencias entre el diseño adaptativo y el diseño receptivo, consulte este artículo: https://www.interaction-design.org/literature/article/adaptive-vs-responsive-design.
En los primeros días de Internet, un sitio web tenía que funcionar en un monitor. Siempre que funcione razonablemente bien en la pantalla de una computadora portátil, funcionaría en cualquier otra PC en una medida razonable. Luego llegó la informática móvil y las cosas cambiaron. Los dispositivos actuales van desde aquellos con pantallas pequeñas (como un teléfono inteligente) hasta monitores enormes. La experiencia del usuario debe ser atendida en cada uno de estos y ahí es donde entra en juego el diseño receptivo.
[/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”]¿Qué es el diseño receptivo?
[/et_pb_text][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”]El diseño receptivo es una forma de desarrollar propiedades web para que el dispositivo en el que se utilizan determine la forma en que se mostrará el sitio. Normalmente se realiza utilizando el principio “móvil primero”, es decir, la experiencia se define en plataformas móviles como teléfonos inteligentes y tabletas y luego se amplía a pantallas más grandes.
La necesidad de este enfoque está siendo impulsada por el entendimiento de que cada vez más personas acceden a la web móvil y en muchos mercados ahora: el acceso de teléfonos inteligentes a la red es mucho mayor que el acceso tradicional a la PC. Los dispositivos móviles también ofrecen diferentes capacidades para entornos de escritorio / laptop, como pantallas táctiles, datos GPS, acelerómetros, etc.
Finalmente, los dispositivos móviles obligan a los diseñadores a pensar de manera simple. La experiencia en el móvil es muy limitada gracias a la pantalla de bienes raíces. Las barras laterales, los anuncios, las entradas en las redes sociales, etc. son difíciles, si no imposibles de acomodar, por lo que la experiencia móvil debe ser un ejercicio de simplicidad, solo se permite la complejidad cuando el espacio en la pantalla lo permite.
[/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”]Los tres principios principales del diseño receptivo
[/et_pb_text][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” 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”]Hay tres principios principales que impulsan el diseño receptivo. Por supuesto, hay otros principios que entran en juego en ciertos diseños, pero estos son tres que unen todos los sitios receptivos:
- Sistemas de rejilla fluida
- Uso de imágenes fluidas
- Preguntas de los medios
Sistema de rejilla fluida
[/et_pb_text][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” 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”]En los días previos a internet había impresión. En la impresión determinaron el tamaño de lo que se mostraría (y dónde) en medidas absolutas. Cuando llegó Internet, esta tendencia continuó y los sitios web se definieron en términos de tamaños de píxeles.
Para la web receptiva, este tamaño absoluto no funcionará. Entonces usamos la idea de tamaños relativos en lugar de los absolutos.
Veamos un ejemplo de cómo funciona esto, usando una fórmula matemática:
Tamaño objetivo / contexto = tamaño relativo
Supongamos que está trabajando en un sitio web con un contenedor diseñado para mostrar el sitio con un ancho máximo de 960 píxeles y el dispositivo utiliza un ancho máximo de ventana del navegador de 1280 píxeles.
Los 960 píxeles son nuestro tamaño objetivo. El contexto son los 1280 píxeles.
Entonces:
960/1280 = 75%
Este principio también se aplicará a cualquier elemento secundario dentro de su contenedor. Entonces, supongamos que está utilizando un enfoque de dos columnas para su diseño. Se pretende que las columnas sean del mismo tamaño con un margen de 20 píxeles entre ellas (haciendo que cada columna tenga 470 píxeles de ancho). Usamos la misma fórmula nuevamente para las columnas y el margen:
470/960 = 48.9% (para cada columna)
20/960 = 2.2% (para el margen)
En su secuencia de comandos CSS, usted toma estos porcentajes y los aplica a las propiedades apropiadas (ancho, margen, etc.)
[/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/blog-mall-1.jpg?media=1669990493” 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”]Imágenes fluidas
[/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”]La forma más fácil de manejar imágenes fluidas (imágenes que se ajustan a su contenedor) es usando el comando CSS:
img {max-width: 100%;}
Esto le dice al navegador que la imagen debe tener un máximo del 100% de su valor de píxel y que debe escalar de acuerdo con su contenedor. La idea es que esto evita que una imagen se estire cuando el contenedor se hace más grande que la imagen, y por lo tanto elimina la degradación de la imagen, y asegura que se encogerá al contenedor cuando sea necesario (esto también mantiene la relación de aspecto original de la imagen )
Es posible que desee utilizar múltiples densidades de píxeles, ya que ahora existen diferencias sustanciales en la densidad de píxeles de ciertas pantallas (particularmente en teléfonos y tabletas, pero también en ciertas computadoras portátiles y de escritorio). Para que esto funcione, puede configurar la imagen para que sea más grande que el contenedor (generalmente el doble de ancho). El uso de archivos SVG puede facilitar esto, ya que son los archivos de imagen más pequeños y generalmente se pueden escalar a cualquier resolución.
Para mayor complejidad (muchas imágenes), la organización de imágenes receptivas ofrece el siguiente enfoque:
Puede declarar múltiples fuentes para una imagen usando el elemento de imagen:
<imagen>
<source media = “(min-width: 40em)” srcset = “big.jpg 1x, big-hd.jpg 2x”>
<source srcset = “small.jpg 1x, small-hd.jpg 2x”>
<img src = “fallback.jpg” alt = “”>
</picture>
Combinado con los atributos scrset y tamaños para proporcionar la lista de fuentes y tamaños de imagen para permitir que un navegador seleccione la mejor imagen:
<img src = “small.jpg” srcset = “large.jpg 1024w, medium.jpg 640w, small.jpg 320w” tamaños = “(ancho mínimo: 36em)
33.3vw, 100vw “alt =” Un lobo radiante ”>
[/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”]Media Queries
[/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”]Las Media Queries están diseñadas para alterar el diseño del sitio cuando se cumplen ciertas condiciones. Por ejemplo, el enfoque de dos columnas detallado anteriormente podría no ser práctico en la pantalla de un teléfono inteligente.
[/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/media-queries.jpg?media=1669990493” 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=”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”]La idea es que luego puede usar una consulta de medios para especificar cuándo se debe reorganizar el espacio de la pantalla. Encontrará que esto funciona mejor con un enfoque de “móvil primero” en el que define lo que desea en el móvil y luego escala desde allí.
El CSS podría verse así:
@media screen y (min-width: 480px) {/ * … tamaños de pantalla más grandes aquí .. * /}
Luego, podría definir una serie de estos comandos CSS para cada “punto de interrupción”. Es entonces cuando cada diseño se rompe en un tamaño de pantalla específico. Deberá probar el contenido para ver dónde se producen los puntos de interrupción y planificarlos. Eventualmente, es posible que pueda predecir puntos de interrupción en función de la resolución de pantalla de un dispositivo.
[/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”]Una cosa más: Marcos
[/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”]Puede ser útil adoptar un marco existente para un diseño receptivo en lugar de “reinventar la rueda”. Por ejemplo; Bootstrap es uno de los frameworks “móviles primero” más populares disponibles en línea y puede descargarlo de su sitio web de forma gratuita.
[/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 receptivo requiere un poco de práctica para hacerlo bien. Los tres principios básicos descritos en esta pieza le ayudarán a lograr que sus diseños receptivos sean correctos. Nos guste o no: el abastecimiento de múltiples dispositivos ha llegado para quedarse y los diseñadores deben poder hacer esto en un abrir y cerrar de ojos.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]