Para los dispositivos móviles, la resolución es realmente grande, solo el tamaño de la pantalla es pequeño. basado en eso:
- Para el diseño de sitios web , ¿apuntamos a la resolución de pantalla (por ejemplo, 1920x1080)?
- Y para aplicaciones móviles . ¿Apuntamos al tamaño de la pantalla?
website-design
css
html
mobile
responsive-design
Ingeniero
fuente
fuente
Respuestas:
El diseño receptivo no se basa en la resolución de la pantalla ni en el tamaño de la pantalla. En cambio, el diseño receptivo se basa en el contenido y la forma en que está hecho, lo que le permite adaptarse a todos los tamaños y resoluciones.
La forma en que piensa sobre el diseño receptivo es incorrecta. Supongo que viene de un fondo de diseño de impresión más convencional, ¿sí? Diseñar para la web es mucho más liberador. Los sitios web receptivos a menudo no tienen los mismos puntos de interrupción convencionales o tamaños / resoluciones específicos para los que están hechos porque la web permite más que eso: permite alcanzar todos los tamaños de pantalla. Como tal, puede diseñar utilizando cualquier tamaño que sea adecuado para lo que está diseñando siempre que sean razonables.
Dicho esto, la mejor práctica es diseñar de una manera móvil primero , que realmente debería llamarse móvil más importante . Esto lo obliga a centrarse en el contenido que es más importante y posible y luego le permite agregar más para pantallas más grandes en lugar de obligarlo a comenzar con más en pantallas grandes y luego eliminar cosas al diseñar para pantallas más pequeñas. Puede leer más sobre esto en mi manual de diseño receptivo .
Pero también tenemos que diseñar de manera que permita la capacidad de respuesta. La mejor práctica es un ejemplo en vivo, ya sea en forma de prototipo o en algún programa de enmarcado, no un documento estático como un PSD. Cuando se trata del lado del desarrollador, deberíamos usar unidades receptivas y estructurar nuestro código de una manera que tenga sentido.
Dicho esto, debe poner las cosas en términos de píxeles, es decir, resolución, no tamaño de pantalla.
fuente
Gran pregunta de hecho!
Mi larga y confusa respuesta: ninguna y ambas
Solo algunos pensamientos aquí comentando un poco las contradicciones que enfrentamos hoy.
La tecnología no es lo que debería haber sido desde hace siglos.
Todos deberíamos diseñar en base a unidades de la vida real (o tamaño percibido) , con cierto grado de flexibilidad y libertad para permitir que el usuario haga algunos ajustes adicionales.
Pero para conocer las mediciones de la vida real necesitamos ambas informaciones. Dimensiones físicas y resolución del dispositivo = densidad de píxeles.
Pero resulta que hace solo unos años, los dispositivos de pantalla están comenzando a declarar la densidad de píxeles. Y algunos no lo declaran al servidor, solo hacen mucha publicidad al respecto. (También conocido como Ipad, Iphone)
El sistema operativo puede detectar la resolución de la pantalla porque es imperativo enviar una señal en consecuencia, pero para el tamaño real de la pantalla necesitamos una gran base de datos de cada modelo. No está bien.
Eso nos deja con solo esta resolución de pantalla que es algo de información que podemos saber.
Pero es totalmente diferente diseñar para un gran monitor FullHD que la misma resolución en un dispositivo móvil. Ambos 1920x1080. Ay.
Un caso especial es que en los proyectores, porque no tenemos idea de la distancia de proyección y la distancia de los espectadores.
Una solución parcial son las consultas de medios, elementos vectoriales, etc.
Una respuesta corta
Para diseño web: al menos hasta que encontremos algo mejor.
Diseño fluido (porcentajes) y flujo natural, secciones bien definidas.
1920 de ancho
con consulta de medios probablemente en 1280
y / o a 1024
probablemente a 720
y 480.
con detección de dispositivos para soporte adicional.
Para aplicaciones nativas móviles
Como es muy específico, solo siga las líneas generales de la marca, con respecto a la interfaz de usuario y los iconos.
Editado
¿Por qué elegir una resolución de pantalla pequeña en un dispositivo móvil FullHD?
Un teléfono inteligente tiene una resolución real de FullHD, pero normalmente declara una resolución pequeña para el servidor y el navegador. Puede probar este google https://www.google.com/search?q=what+is+my+screen+resolution para que funcionen las consultas de medios.
fuente
Primero, gracias a todos por las respuestas y las preciosas pautas, ¡seguro que ayudó!
Permítame agregar mi conclusión:
Prácticamente, orientar la resolución de la pantalla móvil no es una buena experiencia de usuario, la resolución es demasiado alta para la pantalla pequeña, las fuentes serán demasiado pequeñas para leer, los iconos serán demasiado pequeños para hacer clic, etc.
Por lo tanto, ¡es mejor hacer el diseño basado en el tamaño real de la ventana gráfica! De esta manera se basa en lo que un usuario puede ver y sentir.
Para lograrlo en la vida real, debemos agregar una metaetiqueta de ancho de ventana gráfica dentro de los
<head>documentos HTML:Esto le dice al navegador que renderice la página con un ancho igual al ancho de la pantalla, por lo que se asegura de que el ancho de la página HTML sea igual al ancho de la pantalla en términos de píxeles. El desarrollo se puede planificar fácilmente con consultas de medios dirigidas a diferentes tamaños de ventanas móviles (que están un poco cerca una de la otra), y producirá elementos visualmente más claros.
Por favor, corríjame si estoy equivocado.
Actualizar:
Basado en mi humilde experiencia, sugiero los siguientes pasos para un mejor desarrollo del sitio web receptivo:
1- usa view-port meta (ver arriba), también aumentará la clasificación de la página web en los resultados de búsqueda móvil según Google. http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
Después de la prueba, parece que agregar solo metaportes de vista dará calificaciones a su sitio web en las herramientas de prueba móvil https://developers.google.com/speed/pagespeed/insights/
2- es posible que desee considerar la aplicación del enfoque móvil primero, siempre es más fácil ir más grande que más pequeño (depende de lo complejo que sea su sitio web)
3- Aplique un sistema híbrido receptivo, una mezcla entre adaptativo (fluido) y receptivo (css media-consultas), para lograr esto:
Utilice el porcentaje para ancho y márgenes horizontales / rellenos. (los márgenes verticales pueden tener un tamaño de píxel fijo si lo desea ... el desplazamiento ya no es un problema)
Use em para fuentes, de esta manera cuando cambie el tamaño de fuente para el cuerpo (o html) en la consulta de medios, todos los elementos CSS se adaptarán a ese tamaño, el uso de px lo convertirá en una pesadilla porque tiene que ir a cada clase CSS y cambia su tamaño de fuente.
Flota los div a la izquierda para que se alineen correctamente al espacio disponible (o a la derecha si tu diseño así lo requiere)
4- Defina los puntos de ruptura , use una herramienta de prueba receptiva para eso. Utilizo la vista de diseño sensible de Firefox, simplemente reduzco el ancho hasta llegar al punto en que el sitio web falla (por ejemplo, 500 px), es decir, un punto de quiebre.
Aplique las nuevas reglas CSS dentro de la consulta de medios para ese punto de interrupción (500 px),
5- ¡ recuerda preservar la calidad y claridad del sitio web! Si los elementos se vuelven poco claros y demasiado cercanos entre sí, expanda el ancho de los elementos para ocupar el ancho del contenedor y haga que se apilen verticalmente.
y recuerde dar un nuevo tamaño de fuente para el cuerpo para que todos los subelementos hereden una fuente más grande y sean más legibles.
6- Repita la prueba de respuesta y defina su segundo punto de ruptura. ¡Lo más probable es que no obtenga muchos puntos de ruptura porque estamos usando un diseño fluido aquí y aquí es donde usar los porcentajes valdrá la pena!
Trabajé en un sitio web grande con elementos de diseño pesados antes y solo requería 2 consultas de medios :)
Espero que eso ayude
fuente
La forma en que un flujo de página sensible se basa en las dimensiones de la ventana gráfica (no en la pantalla) en píxeles virtuales (no en píxeles reales).
En un escritorio tradicional donde 1 píxel virtual = 1 píxel real, si su navegador está configurado en 1000 píxeles de ancho, entonces la página se ajustará para ajustarse a eso.
En un iPhone 6, donde 1 píxel virtual (Apple llama a estos puntos ) = 3 píxeles reales, el ancho del navegador es el ancho de la pantalla y el contenido volvería a ajustarse al ancho de 417 píxeles (aunque en realidad son 1242 píxeles reales)
Por lo tanto, es un poco extraño, ya que con los ejemplos anteriores, el dispositivo con menos píxeles reales en realidad se ve como una vista más amplia en un diseño receptivo.
fuente