¿Cuál es la tecnología para diferenciar el diseño de la versión de escritorio del sitio web con el diseño de la versión móvil como Flipkart.com o Amazon.com?

Parece que Amazon está detectando la cadena de agente de usuario dentro de los encabezados de solicitud del dispositivo que se conecta a su servidor. Según el tipo y el tamaño del dispositivo, sirve diferentes contenidos. Esto se conoce como un enfoque adaptativo.

Por el contrario, un enfoque receptivo utiliza consultas de medios CSS3 para ajustar el diseño y los estilos de página para un solo sitio web. La ventaja de un enfoque receptivo es que solo requiere la creación de un único sitio web frente a Adaptive, que a menudo requiere la creación de contenido separado para dispositivos móviles y de escritorio. Sin embargo, una posible ventaja de Adaptive sobre Responsive sería su rendimiento y los tiempos de carga de la página. Los sitios web grandes con mucho tráfico pueden optar por Adaptive, mientras que la mayoría de nosotros podemos disfrutar de la facilidad y simplicidad de un diseño Responsive.

El siguiente es un tutorial rápido sobre consultas de medios CSS. Escribamos una consulta de medios que diga a los párrafos que se muestren como dos columnas en dispositivos de pantalla de más de 600 px de ancho.

@media solo pantalla y (ancho mínimo: 600px) {
p {recuento de columnas: 2; }
}

Ahora escribamos otra consulta de medios que aumentará la cantidad de la columna de párrafo a tres para dispositivos de pantalla de más de 800 píxeles de ancho:

@media solo pantalla y (ancho mínimo: 800px) {
p {recuento de columnas: 3; }
}

Este código vive dentro de un archivo CSS como style.css que está vinculado a la página HTML que se está cargando en el navegador. Además de este enlace a la hoja de estilo, también debemos proporcionar el elemento Meta Viewport que indicará a los dispositivos que no hagan zoom y, en su lugar, usen nuestras consultas de medios para determinar los cambios en función del tamaño de la pantalla. Vea nuestro código de ventana gráfica en la línea 5 a continuación y nuestro enlace style.css en la línea 7 a continuación.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turpis egestas pretium aenean pharetra magna. Vitae sapien pellentesque habitante morbi tristique senectus et netus et. En vitae turpis massa sed elementum tempus. Neque gravida en fermentum et. Purus in massa tempor nec feugiat nisl pretium fusce id. Condimentum lacinia quis vel eros. Erat nam en lectus urna duis convallis convallis tellus id. Quis hendrerit dolor magna eget. Tincidunt eget nullam non nisi est. Nec dui nunc mattis enim ut. Morbi tristique senectus et netus et malesuada. Turpis egestas integer eget aliquet nibh praesent tristique magna. Pellentesque pulvinar pellentesque habitante morbi tristique senectus et netus et. Ante en nibh mauris cursus mattis molesie a iaculis. Sollicitudin nibh sentarse amet commodo. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu.

Aquí hay una demostración del código de trabajo terminado. Puede arrastrar la ventana del navegador más ancha y más estrecha en el tamaño de la pantalla del escritorio para ver los cambios receptivos.

Para obtener más información sobre las consultas de medios, consulte mi curso sobre CodePajamas.

La forma más común de lograr esto es mediante la utilización de consultas de medios CSS. Le permiten mostrar elementos de manera diferente dependiendo del ancho (y alto) de la pantalla.

Al ajustar una regla CSS dentro de una consulta de medios, esa regla solo se aplica si la consulta de medios es la misma. Esto le permite hacer que algo ocupe todo el ancho de la pantalla en resoluciones más pequeñas, mientras que solo es 1/3 del ancho del escritorio.

Los marcos CSS comunes como Bootstrap vienen con esta funcionalidad incorporada. Intentan hacerlo más fácil y ocultan la parte real de ‘consulta de medios’.

En cuanto al dominio, el sitio móvil se llama m (punto).

La tecnología será la misma en todos los canales, solo los complementos o el método de extracción y visualización cambiarán para cada plataforma. Esto se hizo a través de scripts y php en el pasado. Ahora hay plataformas más flexibles e híbridas que le permiten implementar lo mismo. Magento es una de las plataformas más comunes utilizadas por las nuevas empresas de comercio electrónico. El diseño y la codificación serán la única clave para activar la misma tienda en todos los medios.

Aunque no soy una persona de tecnología, estoy seguro de que algunos personales de tecnología aquí podrán detallar esto para usted.