Cómo dividir una web receptiva en una web / tableta / móvil

Estás en una trampa de diseño receptivo muy común. Piense en el diseño receptivo en términos del ancho de píxeles y no del dispositivo.

¿Por qué no debería basar los puntos de interrupción en el dispositivo? Porque no hay un conjunto icónico de dispositivos.

Fuente: las resoluciones móviles a tener en cuenta al diseñar

Este gráfico muestra la resolución de teléfonos y tabletas que acceden a la web durante aproximadamente un mes en 2015. Solo en las porciones de pastel “grandes”, hay 10 resoluciones distintas. Para empeorar las cosas, la categoría “Otros” no es una resolución de pantalla masivamente exitosa; es el resumen de todas las otras resoluciones variables que no fueron lo suficientemente grandes como para obtener su propio segmento.

Todo esto continuará empeorando a medida que tengamos pantallas en más y más dispositivos cotidianos.

Si pensabas que era complejo, los modos de entrada con estos dispositivos son tan variables. Es probable que encuentre interfaces táctiles en todas las resoluciones y es probable que también encuentre no táctil.

Algunas reglas generales:

  • Cree puntos de interrupción donde el contenido se rompa, no en función del ancho del dispositivo
  • Apóyate en diseños basados ​​en porcentajes y carrozas.
  • Aproveche las interacciones que funcionan en dispositivos táctiles y de mouse.
  • Use maquetas estáticas con moderación; use código o herramientas de diseño receptivo para analizar en qué ancho se rompe el contenido.
  • Aproveche algunos patrones de diseño receptivos comunes (como Column Dropping, por ejemplo)

Secundo el consejo de Asa Sherrill. Deje que el diseño guíe los puntos de ruptura en lugar de los dispositivos.

Para mi tamaño más grande, comienzo con un ancho del 100% y un ancho máximo como 1024px para el área de contenido. Esto sería algo que es compatible con la mayoría de los dispositivos. Hace unos años era de 960 px, ahora puedes ir un poco más grande. Reviso las estadísticas de visualización del navegador periódicamente para decidir qué tan grande puedo llegar. Es posible que desee elegir un número que se divida fácilmente.

La mayoría de las pantallas de computadora son más grandes que esto, por lo que un usuario puede ver un área de contenido de 1024 px rodeado por un fondo de color. En pantallas de menos de 1024 px de ancho, el contenido se expandirá para adaptarse al espacio disponible y el fondo de color no se mostrará.

A continuación, elegiré un punto de ruptura medio. Esto sirve para muchas tabletas pequeñas, pero no iré por tamaño de dispositivo. En cambio, miraré mi diseño para encontrar un ancho en el que tenga sentido alterar el diseño. Podría, por ejemplo, cambiar de 3 columnas a 2 columnas en este punto. Puede ser de 768 px, 640 px o algo más. Usaré consultas de medios para ajustar cualquier estilo que necesite cambiar cuando el sitio se muestre con un ancho menor que el punto de interrupción que elijo.

Después de esto, elegiré un pequeño punto de quiebre. Esto podría ser cuando el diseño va de 2 columnas a 1 columna. Quizás sea 480px. Quizás sea de 540 px. Nuevamente, dejaré que el diseño sea mi guía.

Es posible que necesite hacer algunos otros ajustes, y pensaré en el tamaño de letra en dispositivos pequeños de alta resolución y en fotos en pantallas retina, pero siempre que use porcentajes para mis anchos, esto debería funcionar en dispositivos de una variedad de tamaños.

El uso de consultas de medios ofrece información sobre cómo usar las consultas de medios para ajustar sus estilos.

No estoy seguro de lo que quieres decir con “Divide” aquí. Pero creo que acaba de hacer la pregunta que muchos de los desarrolladores / diseñadores web tienen en esta era del mundo móvil. Como desarrollador, ¿cómo puedo lograr el soporte de múltiples plataformas simplemente escribiendo el código una vez?

Bueno, como desarrollador y diseñador, diría que puedes usar la biblioteca bootstrap, que es muy famosa entre los desarrolladores hoy en día. Bootstrap es un proyecto de código abierto. Hay clases y javascripts que admiten múltiples plataformas como escritorio, móvil, tableta, etc. También es muy fácil de usar.

¡Espero que esto ayude!