En las últimas dos décadas de diseño web, he visto muchas cosas ir y venir. Al final del día, una disciplina lo gobierna todo, HFE. Ingeniería de Factores Humanos o UX.
Los sitios receptivos consisten en brindar la mejor experiencia a cada dispositivo. Pero no solo la mejor experiencia para el dispositivo, piense en la experiencia de las personas.
Cuando adopta este enfoque, no hay una buena respuesta única para todos. Si bien hay una pequeña cantidad de ejemplos en los que un tipo de archivo de imagen o contenido sería viable en todas las resoluciones y tipos de pantalla, esta es la excepción y no la regla.
- ¿Cuánto costaría crear un sitio web y una aplicación personalizados?
- ¿Cuáles son los mejores marcos para crear productos mínimos viables para dispositivos móviles y / o web?
- ¿Cuáles son los 10 principales proveedores de servicios de desarrollo de aplicaciones / sitios web en Bangalore?
- ¿Cuáles son las diferencias entre sitios web y aplicaciones web?
- ¿Qué necesito aprender para hacer la transición del desarrollo web al desarrollo móvil?
Debido a que el tamaño de archivo grande necesita mostrar una imagen nítida en un navegador grande, no se recomienda utilizar la misma imagen para dispositivos móviles.
En promedio, se informa que los usuarios en dispositivos móviles esperan 3 segundos para que se cargue una página antes de rebotar o perder interés.
El algoritmo de clasificación de Google ahora tiene en cuenta la velocidad de carga de su página.
Si bien hay muchas soluciones a nivel de servidor, le daré la integración más simple. Puede implementar esto con unas pocas líneas de código.
Preguntas de los medios
El uso de consultas de medios le permitirá mostrar la imagen adecuada para cada dispositivo al tiempo que permite la capacidad de respuesta.
/ * Para ancho menor que 400px: * /
cuerpo {
background-image: url (‘img_smallflower.jpg’);
}
/ * Para ancho de 400 px y más grande: * /
@media solo pantalla y (min-width: 400px) {
cuerpo {
background-image: url (‘img_flowers.jpg’);
}
}
Como alternativa, en algunos casos particulares, es posible que desee implementar imágenes en función del tamaño de la pantalla del dispositivo en lugar del tamaño de la ventana. Esto servirá la imagen según el dispositivo y mantendrá la imagen adecuada para el dispositivo, independientemente del tamaño de la ventana. Como alguien que reduce el tamaño de una ventana del navegador.
/ * Para dispositivos de menos de 400 px: * /
cuerpo {
background-image: url (‘img_smallflower.jpg’);
}
/ * Para dispositivos de 400 px y mayores: * /
@media solo pantalla y (min-device-width: 400px) {
cuerpo {
background-image: url (‘img_flowers.jpg’);
}
}
¡La mejor de las suertes!
