Deje de diseñar para el ancho de la pantalla, diseñar para el contenido
320, 768 y 1024. ¿Estos números significan algo para usted?
No, no es el código Da Vinci, son los anchos en píxeles que muchos diseñadores asocian con los anchos de pantalla de dispositivos móviles, tabletas y computadoras de escritorio.
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 escritorio ciertamente no tiene 1024 píxeles de ancho. Hay cientos de tamaños de pantalla diferentes en una variedad de dispositivos diferentes y, sin embargo, todavía pensamos en el diseño web receptivo como 320, 768 y 1024.
¿Qué pasa con todos esos tamaños de pantalla intermedios?
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 en el ancho más cercano.
Esto es mejor que tener un sitio antiguo, estático y solo de escritorio, ya que al menos sirven una versión simplificada de una columna para dispositivos móviles y una versión táctil para tabletas, pero entonces, ¿por qué alienar todos 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 más pequeña que 768? ¡Obtendrán la experiencia móvil en una tableta! ¿Y cuando lo ve en una pantalla de computadora portátil menor de 1024? Simplemente 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 hemos considerado dignos.
Se trata de porcentajes, no de píxeles.
Cuando crea sus diseños receptivos, siempre debe apuntar a establecer tantas 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 garantizará que su contenido siempre ocupe 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 que es unos pocos píxeles más pequeño que el siguiente. punto de interrupción disponible.
El contenido es el rey
Al elegir sus puntos de interrupción, siempre debe tomar sus decisiones en función de dónde se rompe el contenido y no del ancho de la pantalla del dispositivo. En lugar de crear un diseño y luego modificarlo para que se ajuste cómodamente a la pantalla del iPad, debes averiguar a qué ancho comienza a tener problemas tu contenido.
Tiendo a comenzar con un diseño de 1400 de ancho y poco a poco hago el navegador más pequeño hasta que una parte del contenido rompe el diseño o se acerca a hacerlo. Eso determina mi próximo punto de ruptura. 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 interrupción 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 previstos en los que desea que se vea.
Con la variedad de diferentes dispositivos y tamaños de pantalla que se lanzan cada mes, es imposible determinar un conjunto de puntos de interrupción definidos para nuestros proyectos receptivos. La verdad es que si bien estamos usando una variable como el ancho de la pantalla para determinar nuestros diseños receptivos, tendremos dificultades para ofrecer un diseño perfecto para cada tamaño diferente, pero siguiendo algunos de los consejos anteriores, al menos podemos asegurarnos de que el contenido siempre se muestra lo mejor posible.
¿Qué puntos de interrupción usas normalmente? ¿Evitas los puntos de ruptura por completo? Háznoslo saber en los comentarios.
Imagen destacada / miniatura, imagen de carga amplia a través de Shutterstock.
