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ál es la mejor manera de realizar la automatización móvil (desplazarse, arrastrar y deslizar, etc.)? ¿Cuáles son las buenas herramientas: Appium o selendroid o cualquier otra?
- ¿Cuáles son las tecnologías utilizadas para desarrollar aplicaciones móviles?
- ¿Existe alguna aplicación a través de la cual podamos escuchar el contenido web sin leerlo con los ojos?
- ¿Cómo obtenemos dinero después de hacer una aplicación?
- ¿Cuál es la mejor manera de encontrar un desarrollador para crear una aplicación en Europa del Este, es decir, Ucrania?
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!
