¿El diseño web receptivo se basa en la resolución o el tamaño de la pantalla?

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?
No confunda píxeles virtuales con píxeles reales.

Respuestas (4)

El diseño receptivo no se basa ni en la resolución ni en el tamaño de la pantalla. En cambio, el diseño receptivo se basa en el contenido y cómo se hace , lo que le permite adaptarse a todos los tamaños y resoluciones.

La forma en que estás pensando en el diseño receptivo es incorrecta. Supongo que vienes de un entorno de diseño de impresión más convencional, ¿no? Diseñar para la web es mucho más liberador. Los sitios web con capacidad de respuesta 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. Por lo tanto, puede diseñar usando cualquier tamaño que sea adecuado para lo que está diseñando, siempre que sea razonable.

Dicho esto, la mejor práctica es diseñar pensando primero en los dispositivos móviles , lo que realmente debería llamarse mobile-most-important . Esto lo obliga a concentrarse 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. Puedes 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 creación de esquemas, 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.

Gracias por la respuesta compañero. En realidad, soy un desarrollador y diseñador web, traté de hacer mi pregunta breve, por eso no profundicé en los detalles y los métodos que utilizo. Tiene razón, el diseño receptivo no tiene reglas y eso es lo que siempre les digo a mis compañeros de equipo en el trabajo, pero solo recientemente me di cuenta de que dado que los dispositivos móviles tienen resoluciones altas, entonces no tiene sentido perder el tiempo codificando consultas de medios para 468 px para ¿ejemplo? y debería apuntar a la resolución, ¿verdad?
Sí, como mencioné en la última línea, deberías preocuparte más por la resolución que por el tamaño de la pantalla.
Zach... Es una pena que esto no sea un foro de debate :o) Creo que es totalmente diferente. Publicaré mi respuesta. ;o)
Después de una investigación rápida, encontré algo crítico que la mayoría de los desarrolladores pasan por alto... si se usa <meta name="viewport" content="width=device-width, initial-scale=1.0>, el ancho del navegador será igual al ancho del dispositivo, por lo tanto, las consultas de medios deben basarse en el tamaño de la pantalla, no en la resolución, eso hace una gran diferencia a la que no le presté atención durante mucho tiempo XD
@Engineeroholic Eso está en mi manual de diseño receptivo al que me vinculé :)
Sin embargo, "resolución" tampoco es un término claro. Por ejemplo, la resolución de un iPhone 6 es de 1242 píxeles. Pero en realidad tenemos que pensar en él como 412 para fines de respuesta.
@Engineeroholic es algo así como lo mismo. Debe preocuparse por el tamaño virtual de la pantalla en píxeles , que se podría considerar como 'resolución', al menos esa es la 'resolución' que usa el navegador, incluso si el dispositivo no lo está.
@Zach, conozco esta metaetiqueta desde hace mucho tiempo, pero en realidad nunca leí sobre ella en detalle para saber qué es lo que realmente hace :)

Primero, gracias a todos por las respuestas y las valiosas pautas, ¡seguro que ayudó!

Permítanme añadir mi conclusión:

En la práctica, apuntar a la resolución de la pantalla móvil no es una buena UX, la resolución es demasiado alta para la pantalla pequeña, las fuentes serán demasiado pequeñas para leer, los íconos 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 lograr eso en la vida real, debemos agregar una metaetiqueta de ancho de ventana gráfica dentro de los <head>documentos HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Esto le dice al navegador que represente la página con un ancho igual al ancho de la pantalla para asegurarse de que el ancho de la página HTML sea igual al ancho de la pantalla en términos de píxeles. Luego, 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 unas de otras) y producirán 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 de sitios web receptivos:

1- use el meta de viewport (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 solo agregar el meta del puerto de vista le 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 aplicar el enfoque móvil primero, siempre es más fácil ir más grande que más pequeño (depende de la complejidad de su sitio web)

3- Aplique un sistema responsivo híbrido, una mezcla entre adaptativo (fluido) y responsivo (css media-queries), para lograr esto:

  • Utilice un porcentaje para el ancho y los márgenes/rellenos horizontales. (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 las fuentes, de esta manera, cuando cambie el tamaño de fuente para el cuerpo (o html) en media-query, todos los elementos CSS se adaptarán a ese tamaño, usar px lo convertirá en una pesadilla porque tiene que ir para cada clase CSS y cambiar su tamaño de fuente.

  • Flote los div hacia la izquierda para que se alineen correctamente con el espacio disponible (o hacia la derecha si su diseño lo requiere).

4- Defina los puntos de ruptura , use una herramienta de prueba receptiva para eso. Utilizo la vista de diseño receptivo de Firefox, simplemente reduzca el ancho hasta que llegue al punto en el que el sitio web se vuelva defectuoso (por ejemplo, 500 px), ese es un punto de ruptura, márquelo.

Aplique las nuevas reglas de CSS dentro de la consulta de medios para ese punto de interrupción (500 px),

5- ¡ recuerde preservar la calidad y claridad del sitio web! si los elementos se vuelven poco claros y están demasiado cerca uno del otro, expanda el ancho de los elementos para ocupar el ancho del contenedor y apilarlos 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 quiebre. Lo más probable es que no obtenga muchos puntos de quiebre porque estamos usando un diseño fluido aquí y ahí es donde el uso de los porcentajes se recuperará.

Trabajé en un sitio web grande con elementos de diseño pesado antes y solo requirió 2 consultas de medios :)

Espero que ayude

Si encuentra útil una respuesta, debe votarla, así que muéstrela.
Debe diseñar para la resolución de la pantalla virtual . El tamaño de la pantalla es un nombre inapropiado ya que en realidad no está diseñando con dimensiones específicas en pulgadas o cm.
Además, la escala inicial podría aplicarse a una página web que es enorme. Luego simplemente lo reducirá para que quepa, lo que no responde.
@ZachSaucier, me encantaría votar las respuestas de mis universidades. desafortunadamente, no puedo porque mi reputación es inferior a 15. Creo que esta prohibición debería eliminarse.
@ DA01, sí, el tamaño de la pantalla es un nombre inapropiado, es solo un término general. La jerga que dice tamaño de pantalla aquí se refiere a las dimensiones de la pantalla en píxeles (no como si dijera resolución de pantalla).
No dije que pusiera el <meta> y se detuviera, si había leído más, expliqué el uso de consultas de medios para poner reglas de respuesta para elementos web. Agrego aquí que descubrí que el uso de una mezcla sensible a los fluidos es la mejor práctica, donde el ancho de los elementos está en porcentaje (%), y en un ancho pequeño, los elementos pueden tomar el 100% del ancho, por lo tanto, empuje los elementos vecinos hacia abajo a una nueva línea. Por supuesto, el uso de flotadores será crucial.
Es un poco condescendiente que haya publicado una respuesta para explicar a las personas que claramente entienden este tema mucho mejor que usted. Además, diseñar para el tamaño de pantalla real es una idea un poco loca con 232 tamaños de pantalla diferentes la última vez que revisé. Debe diseñar con umbrales para el ancho de la pantalla (es decir, 320 px a 480 px deberían verse como ...) no valores específicos. Descubrirá que pronto comienza a salirse de control si intenta diseñar para tamaños específicos.
Creo que simplemente malinterpretó mi punto, el inglés no es mi primer idioma, tampoco entré en detalles ni expliqué paso a paso cómo hacer el diseño receptivo perfecto, porque este no era el objetivo de mi pregunta. mi pregunta era a qué debo apuntar (con qué debo comenzar con resolución o tamaño).
@Dom, Primero permítanme presentarme, soy desarrollador y diseñador web con 3 años de experiencia y tuve muchos proyectos exitosos con grandes corporaciones en mi región. He creado sitios web sofisticados con un diseño de alto nivel. Espero no estar siendo condescendiente o engreído. De hecho, publiqué mi pregunta con el propósito de recopilar opiniones sobre las mejores prácticas en lugar de explicármelo, como dije, lo he hecho muchas veces y con éxito. En segundo lugar, por supuesto, hay muchas pantallas y, por supuesto, no me enfocaré en cada una individualmente, publicaré mi plan en la respuesta para explicar más
@Dom, consulte la sección de actualización, agradeceremos sus comentarios (quería escribir sobre más detalles, como problemas con las imágenes, pero creo que esto hará que la respuesta sea demasiado larga y aburrida ^^)
@ZachSaucier, acabo de obtener +15 de reputación... finalmente voté :)
Si bien no es estrictamente falso, los consejos que ha dado son bastante específicos del contexto. Se necesitaría un gran ensayo para explicar adecuadamente lo que estás resumiendo aquí. Personalmente, he dejado de intentar construirlo desde cero, ya que es algo que un equipo hace de manera mucho más eficiente, no un individuo. Si desea reducir mucho el trabajo, eche un vistazo al marco de diseño de materiales de Google. Simplifica enormemente todo el proceso y no es difícil de entender.
Creo que es demasiado simple para requerir un marco, en mi trabajo, la mayoría de las veces hacemos responsivo en menos de un día, los proyectos más grandes tomaron 2 días. También de esta manera podemos garantizar que funcionará para todo tipo de sitios web altamente gráficos.

Gran pregunta de hecho!

Mi respuesta larga y confusa: ninguno y ambos

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 medidas de la vida real necesitamos ambas informaciones. Dimensiones físicas y resolución del dispositivo = densidad de píxeles.

Pero resulta que hace apenas unos años, los dispositivos de pantalla están empezando 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 es bueno.

Eso nos deja solo con esta resolución de pantalla que es información que podemos saber.

Pero es totalmente diferente diseñar un gran monitor FullHD que la misma resolución en un dispositivo móvil. Ambos 1920x1080. Ay.

Un caso especial es el de 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 de fluidos (porcentajes) y flujo natural, secciones bien definidas.

  • 1920 de ancho

  • con consulta de medios probablemente en 1280

  • y/o al 1024

  • probablemente en 720

  • y 480.

con detección de dispositivos para soporte adicional.

Para aplicaciones móviles nativas

Como es muy específico, simplemente siga las pautas de la marca con respecto a la interfaz de usuario y los íconos.

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 al servidor y al navegador. Puede probar esta google https://www.google.com/search?q=what+is+my+screen+resolution para que funcionen las consultas de medios.

¿Qué pasa con la altura? y esto es algo que encontré hoy en el trabajo donde un cliente solicitó un sitio web receptivo sin desplazamiento vertical en absoluto (¡muy raro!), ¡Esto fue un gran dolor de cabeza para todas las resoluciones y dará como resultado demasiadas consultas de medios! eventualmente usé una combinación de diseño fluido, 1 consulta de medios y truco CSS; donde, por primera vez en mi vida, hice un pie de página con posición absoluta y fondo = 0 para que se pegara en la parte inferior para pantallas largas. (donde encuentro una codificación incorrecta), por lo tanto, solo usé la consulta de medios para pantallas más cortas que el contenido ... de esta manera, solo necesitaba usar 1 consulta

La forma en que se redistribuye una página receptiva se basa en las dimensiones de la ventana gráfica (no de 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 px de ancho, la página se ajustará para adaptarse 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 se redistribuiría para ajustarse al ancho de 417 px (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 ventana gráfica más amplia en un diseño receptivo.

Si bien esto es cierto, sigo pensando que lo importante es centrarse en el diseño receptivo, no en la pantalla en la que se ve.
@ZachSaucier umm... ¿Estoy de acuerdo? ¿Pienso? No sé. Es uno y lo mismo, ¿no es así? El diseño receptivo se trata de acomodar una variedad de tamaños de ventanas gráficas. Parecen ir de la mano. No responde si no está pensando en los distintos tamaños en los que fluirá.
¿Qué pasó con los últimos 9px?
¿El diseño web receptivo se basa en la resolución o el tamaño de la pantalla?
RespuestasAquíPolítica de privacidad1y, 0v