¿Cuál es el tamaño de pantalla ideal para el diseño responsivo?

a partir de 2020, hay 3,5 mil millones de usuarios de teléfonos inteligentes en el mundo. Eso es el 45% de la población mundial. A partir de 2019, las personas accedieron a internet con más de 9000 dispositivos distintos. Cada usuario espera que cada sitio web al que accede se renderice perfectamente en su dispositivo móvil. Esto significa que los desarrolladores de sitios web tienen que diseñar sitios web que se muestran en una multitud de tamaños de pantalla en todo el mundo.

En otras palabras, necesitan un diseño responsivo.,

pero como todo diseñador sabe, la ejecución del diseño responsivo tiene que comenzar con saber para qué tamaños de pantalla diseñar. Este artículo explora esta pregunta y discute los mejores tamaños de grito para un diseño receptivo.

¿qué es el diseño responsivo?

El Diseño Web Responsivo se refiere a una estrategia de diseño que crea sitios web que funcionan bien para dispositivos móviles, tabletas y computadoras de escritorio. Los sitios web sin diseño responsivo corren el riesgo de alienar a un número significativo de usuarios: el 80% de los usuarios han afirmado que rechazarán los sitios web que no funcionan bien en su dispositivo.,

además, Google mira la «compatibilidad con dispositivos móviles» como un parámetro para el ranking. Para citar el blog de Google Webmaster Central,

» a partir del 21 de abril de 2015, ampliaremos nuestro uso de la compatibilidad con dispositivos móviles como señal de clasificación. Este cambio afectará a las búsquedas móviles en todos los idiomas en todo el mundo y tendrá un impacto significativo en nuestros resultados de búsqueda. En consecuencia, a los usuarios les resultará más fácil obtener resultados de búsqueda relevantes y de alta calidad que estén optimizados para sus dispositivos.»

Entonces, ¿cómo se encuentran los tamaños de pantalla adaptables ideales?,

fuente de imagen

de acuerdo con las estadísticas mundiales de resolución de pantalla (noviembre de 2018 – noviembre de 2019), las resoluciones más utilizadas son:

por supuesto, el énfasis en la compatibilidad con dispositivos móviles no significa que uno abandone los dispositivos de escritorio. Como se muestra en la siguiente tabla, los dispositivos de escritorio todavía representan una parte considerable del uso de internet.,

Fuente de la Imagen

• Mobile – el 52,03%
• Escritorio – 45.17%
• Tablet – 2.,8%

de acuerdo con la documentación de Microsoft,

con un gran número de destinos de dispositivos y tamaños de pantalla en todo el ecosistema de Windows 10, en lugar de optimizar su interfaz de usuario para cada dispositivo, recomendamos diseñar para algunas categorías de ancho de clave (también llamadas «puntos de interrupción»):

• Small (smaller than 640px)
• Medium (641px to 1007px)
• Large (1008px y más grande)

a pesar de esta información, recuerde que no hay un tamaño de pantalla estándar para el diseño web., Dependiendo de la naturaleza del sitio web, los usuarios pueden utilizar ciertos dispositivos que no ofrecen los tamaños de pantalla y resoluciones mencionadas anteriormente. Para identificar los tamaños de pantalla adecuados para el diseño web, invierta en análisis. Averigua qué es lo más probable que use tu público objetivo. Si esos dispositivos no se adhieren a la resolución mencionada anteriormente, inclúyalos en la mezcla.,

1-Click Access to Responsive Checker Tool

Best Practices for Implementing Responsive Design

se vuelve mucho más fácil diseñar un sitio web para múltiples tamaños de pantalla con las siguientes pautas:

• conozca sus puntos de interrupción: en el diseño responsive, un punto de interrupción es el «punto» en el que el contenido y el diseño de un sitio web se adaptarán de una cierta manera para proporcionar la mejor experiencia de usuario posible. Para que un sitio web sea responsivo, los diseñadores deben agregar un punto de interrupción cuando el contenido se vea desalineado., Dependiendo del número de dispositivos con los que se está alineando el sitio, se deben establecer varios puntos de interrupción para garantizar su capacidad de respuesta. Consulte este artículo sobre puntos de interrupción de respuesta para obtener más información sobre ellos y su eficacia en detalle.
• Crear diseños fluidos: el diseño fluido se refiere a un diseño de diseño que puede cambiar (expandirse y contraerse) para adaptarse a la vista del dispositivo en la que se ejecuta. Un diseño de diseño fijo se distorsionará de forma indeseable en cada vista a la que no estén alineados., Trabaje en diseños de diseños utilizando % units, así como anchos máximos para garantizar que el diseño se ajuste a las vistas de dispositivos móviles sin volverse demasiado ancho en las vistas de dispositivos de escritorio.
• disminuir la fricción: esto básicamente significa que el diseño debe ser fácil de usar en múltiples dispositivos. El diseño responsivo no solo incluye cómo se ve un sitio web, sino también cómo funciona en términos de accesibilidad y usabilidad. Enfóquese particularmente en la fricción de la pantalla pequeña, porque a medida que disminuyen los tamaños de pantalla, los elementos web tienen menos espacio para renderizar y son más propensos a codificar y distorsionar.,
• Diseño primero móvil: dado que es más probable que la fricción ocurra en pantallas más pequeñas, diseñe con un enfoque primero móvil. Es más difícil restringir un diseño de escritorio para una vista móvil, mientras que hacer lo contrario es más fácil. Al diseñar mobile-first, el diseñador incluye lo que es absolutamente necesario para proporcionar la experiencia de usuario óptima.,

Aquí hay algunas maneras de ir con el diseño móvil primero:

1. priorizar las opciones importantes del menú
2. eliminar todas las distracciones visuales
3. optimizar el diseño para tapability-hacer que todo sea fácil de tocar
4. eliminar formularios innecesarios y campos de información
5. resaltar el CTA principal
6. prominentemente ofrecer funciones de búsqueda y filtro

• : obviamente, escribir es más difícil en dispositivos móviles que en dispositivos de escritorio. Por lo tanto, tiene sentido minimizar la necesidad de escribir en versiones móviles de sitios web., Reemplace la escritura con funciones de dispositivo de aprovechamiento consciente como GPS, lectura de códigos QR, identificación biométrica y similares. Haga que sea más fácil para los usuarios compartir, enviar por correo electrónico o llamar a números relevantes colocando enlaces que inicien las funciones necesarias. Tenga en cuenta que el mejor diseño responsivo implica simplificar y eliminar las interacciones móviles inconvenientes.
• prueba, prueba, prueba: una vez que un desarrollador o diseñador conoce los mejores tamaños de pantalla para el diseño responsive, hacen el trabajo y crean un sitio web responsive., Sin embargo, para asegurarse de que el sitio web realmente represente la forma en que está destinado en los dispositivos para los que se ha creado, debe probarse exactamente eso. Una manera fácil de hacer esto es usar un verificador de diseño responsivo. En lugar de ejecutar el sitio web a través de dispositivos individuales con diferentes vistas, ingrese la URL en el Comprobador y vea cómo aparece en una variedad de dispositivos más recientes con una resolución de dispositivo diferente y de uso frecuente. El Comprobador vinculado anteriormente ofrece una comprobación sensible en los últimos dispositivos móviles como iPhone X, Galaxy Note 10, iPhone 8 Plus y más.,

si bien el diseño responsivo puede parecer difícil de ejecutar, la información en este artículo busca simplificar este proceso para desarrolladores y diseñadores. Al hacer lo descrito anteriormente, se vuelve mucho más fácil crear sitios web que agraden a su audiencia, independientemente del dispositivo que utilicen para acceder a ese sitio web.

pruebe Responsive Checker gratis