320, 768 y 1024. ¿Estos números significan algo para ti?
No, no es el código Da Vinci, son los anchos en píxeles que muchos diseñadores asocian con los anchos de las pantallas de los dispositivos móviles, las tabletas y los escritorios.
El problema que tengo con esto es que mi móvil no tiene 320 píxeles de ancho, mi tableta no tiene 768 píxeles de ancho y la pantalla de mi computadora no tiene 1024 píxeles de ancho. Existen cientos de tamaños de pantallas diferentes en una variedad de dispositivos diferentes y aún así pensamos en un diseño web receptivo como 320, 768 y 1024.
He visto muchos sitios que usan estos tres puntos de interrupción para sus diseños y simplemente crean 3 diseños estáticos que se centran dentro del ancho más cercano.
Esto es mejor que tener un sitio antiguo, estático y de escritorio, ya que sirven al menos una columna, una versión simplificada para dispositivos móviles y una versión táctil para tabletas, pero ¿por qué alejarías a los demás tamaños de pantalla al no incluirlos en ¿consideración?
Seguro que el diseño seguirá funcionando en los otros tamaños, pero ¿qué sucede cuando tienes una tableta que es más pequeña que 768? ¡Tendrán la experiencia móvil en una tableta! ¿Y cuando lo ves en una pantalla de computadora portátil más pequeña que 1024? Les enviaremos el diseño de la tableta y nos reiremos de ellos por no tener uno de los 3 tamaños de pantalla que consideramos dignos.
Cuando crea diseños receptivos, siempre debe intentar establecer tantas de sus dimensiones como sea posible en porcentajes. Esto ayuda a garantizar que su contenido crezca y se reduzca de manera uniforme a través de diferentes tamaños de pantalla y lo hará en proporción al dispositivo en el que se está viendo. Este enfoque también asegurará que su contenido siempre esté llenando el 90% (o tanto como usted determine) de la pantalla en lugar de posiblemente el 50% de la pantalla, ya que el contenido se centra en un tamaño de pantalla unos pocos píxeles más pequeño que el siguiente punto de interrupción disponible.
Al elegir sus puntos de interrupción, siempre debe tomar sus decisiones en función de dónde se rompe el contenido y no a los anchos de pantalla del dispositivo. En lugar de crear un diseño y luego modificarlo para que se ajuste a la pantalla del iPad cómodamente, debe averiguar en qué ancho su contenido comienza a tener problemas.
Tiendo a comenzar con un diseño de 1400 de ancho y lentamente hago que el navegador sea más pequeño hasta que una parte del contenido rompe el diseño o se acerca a hacerlo. Eso luego determina mi próximo punto de quiebre. No importa si está en 1200, 800 o 673, si el contenido aún funciona, ¿por qué cambiar el diseño?
Descubrirá que terminará con puntos de ruptura extraños como 477 o 982 y que puede tener 2, 6 o 10 puntos de interrupción diferentes. El punto es que el contenido decidirá en lugar de los tamaños de pantalla deseados en los que desea que se vea.
Con la variedad de diferentes dispositivos y tamaños de pantalla lanzados cada mes, es imposible determinar un conjunto de puntos de corte definitivos para nuestros proyectos receptivos. La verdad es que mientras usamos una variable como el ancho de la pantalla para determinar nuestros diseños receptivos, nos esforzaremos por ofrecer un diseño perfecto para cada tamaño diferente, pero al seguir algunos de los consejos anteriores, podemos al menos garantizar que el contenido siempre se muestra lo mejor posible.
¿Qué puntos de interrupción usas normalmente? ¿Evitas los puntos de interrupción por completo? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de carga ancha a través de Shutterstock.